Урок 8 (Бонус): Desktop и Mobile приложения с ИИ

Урок 8 (Бонус): Desktop и Mobile приложения с ИИ

До этого мы строили web-приложения. Но что если нужен нативный мобильник или десктопное приложение? В 2026 году AI полностью меняет правила игры — строить mobile и desktop приложения теперь так же просто, как собирать сайты.

---

Часть 1: Мобильные приложения с ИИ

Ситуация в 2026 году

Vibe coding добрался до мобилок. Y Combinator отчитался, что 25% стартапов Winter 2025 батча имели кодовую базу на 95% сгенерированную ИИ — и многие из них это мобильные приложения. Термин «vibe coding» был словом года по Collins Dictionary 2025.

Ключевое отличие от web: мобильные приложения требуют публикации в App Store и Google Play, что раньше было огромным барьером. Сегодня ИИ-инструменты берут эту боль на себя.

---

🏆 Инструменты для AI-мобилок

Rork — лучший выбор для MVP

Сайт: rork.com

Rork — специализированный AI-билдер для нативных iOS и Android приложений. Строит на React Native (Expo).

Что умеет:

• Генерация нативного приложения из prompt за минуты
• Немедленный preview: отсканировал QR-код → приложение запустилось на iPhone
• Встроенный RevenueCat для монетизации (подписки, in-app purchases)
• Встроенная аналитика
• Прямая публикация в App Store и Google Play из интерфейса

Как это работает:

1. Описываешь приложение: "Фитнес-трекер с таймером, историей тренировок
   и push-уведомлениями для напоминаний"
2. Rork генерирует полный React Native проект
3. Сканируешь QR код в приложении Expo Go
4. Видишь реальное приложение на телефоне
5. Публикуешь в App Store через встроенный деплой

Тарифы 2026:

• Free: базовый доступ, публикация через Expo
• Pro ($30/мес): App Store + Google Play deployment, кастомные домены
• Business ($99/мес): командная работа, приоритетная поддержка

Плюсы:

• Самый быстрый path от идеи до App Store
• Без «configuration hell» мобильной разработки
• Встроенная монетизация

Минусы:

• Сложная backend-логика требует доработки
• Ограничения кастомизации для нестандартных UI

---

FlutterFlow — мощный no-code на Flutter

Сайт: flutterflow.io

FlutterFlow — визуальный билдер с AI, строит на Flutter (Dart). Работает на iOS, Android и Web.

Что умеет:

• AI Page Generation: описываешь экран → получаешь готовый UI
• Drag-and-drop редактор + 500+ готовых компонентов
• Встроенная Firebase/Supabase интеграция
• Экспорт чистого Flutter кода
• Прямой деплой в App Store и Google Play

Workflow:

// FlutterFlow генерирует Dart-код вроде:
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
// ... полный компонент без написания вручную

Тарифы 2026:

• Free: базовый редактор, нет экспорта кода
• Standard ($30/мес): экспорт кода, одно приложение
• Pro ($70/мес): неограниченные приложения, командная работа
• Enterprise: custom pricing

Когда выбирать FlutterFlow:

• Нужен production-ready UI с детальной кастомизацией
• Планируешь передать код разработчикам
• Нужно web + iOS + Android из одного кода

---

React Native + AI (Cursor/Expo)

Для разработчиков — связка React Native + Expo + Cursor/Claude Code остаётся мощной.

Установка Expo:

npx create-expo-app@latest my-app --template blank-typescript
cd my-app
npx expo start

AI-ускорение в Cursor:

.cursor/rules/react-native.mdc

Мы пишем на React Native + Expo SDK 52.
Используем TypeScript, NativeWind для стилей.
Компоненты — functional, hooks.
Navigation — expo-router (file-based).

Expo + EAS Build для публикации:

# Установка EAS CLI
npm install -g eas-cli

# Настройка проекта
eas build:configure

# Сборка для App Store
eas build --platform ios --profile production

# Сборка для Google Play
eas build --platform android --profile production

# Публикация в магазины
eas submit --platform ios
eas submit --platform android

Плюс EAS: AI-ассистенты (Claude, Copilot) отлично знают Expo API — prompt-to-code работает максимально эффективно.

---

Flutter AI Toolkit (официальный)

Google выпустил официальный Flutter AI Toolkit — набор готовых виджетов для интеграции AI в Flutter-приложения.

// Добавление AI чата в Flutter-приложение
import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';

LlmChatView(
  provider: GeminiProvider(
    model: GenerativeModel(
      model: 'gemini-2.0-flash',
      apiKey: 'YOUR_API_KEY',
    ),
  ),
)

Поддерживаемые провайдеры:

• Google Gemini
• Firebase Vertex AI
• Custom (любой OpenAI-compatible API)

---

Публикация в App Store с ИИ

App Store (iOS) — шаги

1. Apple Developer аккаунт ($99/год)
2. Сборка через Xcode или EAS
3. App Store Connect — заполнение метаданных

AI помогает с метаданными:

Промпт для Claude/ChatGPT:
"Я создал фитнес-трекер для iOS. Напиши:
- Название (до 30 символов)
- Подзаголовок (до 30 символов)
- Описание (до 4000 символов) с ключевыми словами
- 10 ключевых слов для App Store поиска
- 3 варианта скриншотов с описаниями"

Скриншоты с ИИ:

• AppShots.ai — генерирует продуктовые скриншоты
• Canva AI — маркетинговые материалы
• Midjourney/DALL-E — промо-арты и иконки

Google Play (Android) — шаги

1. Google Play Console аккаунт ($25 единоразово)
2. EAS Build → .aab файл
3. Загрузка в Play Console
4. Заполнение метаданных (AI помогает!)
5. Content rating questionnaire
6. Review (обычно 1-3 дня для новых приложений)

AI для review compliance:

"Проверь моё описание приложения на соответствие
Google Play политикам. Приложение: [описание].
Найди потенциальные проблемы перед публикацией."

---

Сравнение мобильных инструментов

Инструмент	Стек	Без кода	App Store	Цена	Лучше для
Rork	React Native/Expo	✅ Полностью	✅ Встроен	$0-99/мес	MVP за день
FlutterFlow	Flutter/Dart	✅ Да	✅ Есть	$0-70/мес	Детальный UI
Expo + AI	React Native	⚠️ Частично	✅ EAS Submit	$0-29/мес	Разработчики
Flutter + Cursor	Flutter/Dart	❌ Нет	✅ Xcode	$20+/мес	Pro разработка
Adalo	No-code	✅ Полностью	✅ Есть	$36-200/мес	Простые приложения

---

Часть 2: Desktop приложения с ИИ

Electron vs Tauri — выбор фреймворка

В 2026 году главный выбор для cross-platform desktop: Electron (JavaScript) vs Tauri (Rust + WebView).

Electron — проверенный гигант

Используют: VS Code, Slack, Discord, Notion, Figma, 1Password

// Минимальный Electron + AI пример
const { app, BrowserWindow, ipcMain } = require('electron')
const Anthropic = require('@anthropic-ai/sdk')

const client = new Anthropic()

// IPC handler для AI запросов
ipcMain.handle('ai-query', async (event, prompt) => {
  const message = await client.messages.create({
    model: 'claude-opus-4-5',
    max_tokens: 1024,
    messages: [{ role: 'user', content: prompt }]
  })
  return message.content[0].text
})

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: { preload: './preload.js' }
  })
  win.loadFile('index.html')
})

Плюсы Electron:

• Огромная экосистема npm
• AI-ассистенты знают Electron отлично
• Можно использовать любой web-фреймворк (React, Vue, Svelte)
• Богатые node.js API для системных операций

Минусы:

• Тяжёлый (Chromium встроен — ~150MB минимум)
• Высокое потребление RAM

Tauri — быстрый и лёгкий

Tauri использует системный WebView + Rust backend. Результат: бинарники в 5-10x меньше Electron.

tauri.conf.json

{
  "tauri": {
    "bundle": {
      "identifier": "com.myapp.desktop",
      "icon": ["icons/icon.png"]
    },
    "windows": [{
      "title": "My AI Desktop App",
      "width": 1200,
      "height": 800
    }]
  }
}

# Создание Tauri + React проекта
npm create tauri-app@latest my-desktop-app
cd my-desktop-app
npm install
npm run tauri dev

# Сборка для всех платформ
npm run tauri build

Rust команды (backend):

src-tauri/src/main.rs

#[tauri::command]
async fn ai_query(prompt: String) -> Result<String, String> {
    // Вызов AI API из Rust
    let client = reqwest::Client::new();
    let response = client
        .post("https://api.anthropic.com/v1/messages")
        .header("x-api-key", std::env::var("ANTHROPIC_KEY").unwrap())
        .json(&serde_json::json!({
            "model": "claude-opus-4-5",
            "max_tokens": 1024,
            "messages": [{"role": "user", "content": prompt}]
        }))
        .send()
        .await
        .map_err(|e| e.to_string())?;

    // ... парсинг ответа
    Ok(response_text)
}

Плюсы Tauri:

• Бинарник 5-15MB (vs 100-200MB у Electron)
• Очень низкое потребление памяти
• Нативная производительность через Rust
• Лучшая безопасность (Rust memory safety)

Когда Tauri:

• Нужно минимальное время запуска
• Критичен размер дистрибутива
• Системные операции требуют производительности
• Есть Rust разработчики в команде

Сравнение Electron vs Tauri

Критерий	Electron	Tauri
Размер бинарника	~150-200MB	~5-15MB
Потребление RAM	~200-500MB	~50-100MB
Время запуска	2-5 сек	<1 сек
Язык backend	JavaScript/Node.js	Rust
Экосистема	Огромная (npm)	Растущая
AI-ассистенты	Отлично знают	Базовая поддержка
Сложность	Низкая	Средняя (Rust)

---

AI + Desktop: практические примеры

Пример 1: Desktop AI-ассистент на Electron

npm create electron-vite@latest ai-assistant -- --template react-ts
cd ai-assistant
npm install @anthropic-ai/sdk

src/renderer/App.tsx

import { useState } from 'react'

export default function App() {
  const [messages, setMessages] = useState<Array<{role: string, content: string}>>([])
  const [input, setInput] = useState('')

  const sendMessage = async () => {
    const response = await window.electron.ipcRenderer.invoke('ai-chat', {
      messages: [...messages, { role: 'user', content: input }]
    })
    setMessages(prev => [...prev,
      { role: 'user', content: input },
      { role: 'assistant', content: response }
    ])
    setInput('')
  }

  return (
    <div className="chat-container">
      {messages.map((m, i) => (
        <div key={i} className={`message ${m.role}`}>{m.content}</div>
      ))}
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={sendMessage}>Отправить</button>
    </div>
  )
}

Пример 2: Desktop PDF-обработчик на Tauri + React

npm create tauri-app@latest pdf-ai -- --template react-ts
cd pdf-ai
npm install @anthropic-ai/sdk
cargo add tauri-plugin-dialog

// Выбор PDF через нативный диалог Tauri
import { open } from '@tauri-apps/plugin-dialog'
import { readFile } from '@tauri-apps/plugin-fs'
import { invoke } from '@tauri-apps/api/core'

async function processPDF() {
  // Нативный file picker
  const file = await open({
    filters: [{ name: 'PDF', extensions: ['pdf'] }]
  })

  if (file) {
    // Отправка в Rust backend для обработки
    const text = await invoke('extract_pdf_text', { path: file })

    // AI анализ
    const analysis = await invoke('analyze_with_ai', { text })
    console.log(analysis)
  }
}

---

Курсор + Desktop = суперсила

Cursor отлично работает для desktop разработки:

// Промпт для Cursor при работе с Electron:
"Добавь системный tray icon с меню:
- Show/Hide window
- Preferences
- Quit
Используй Electron nativeImage и Menu API.
TypeScript, код должен работать на macOS и Windows."

Cursor понимает нативные API и генерирует рабочий cross-platform код.

---

Часть 3: Выбор стека — как решить

Мобильное приложение

Нет времени на разработку?
├── Да → Rork (MVP за день, App Store из коробки)
└── Нет
    ├── Нужен Flutter/нативный UI? → FlutterFlow
    └── Комфортен с кодом?
        ├── React? → Expo + EAS + Cursor
        └── Нет предпочтений? → Flutter + FlutterFlow AI

Desktop приложение

Нужна минимальная нагрузка?
├── Да → Tauri (5MB бинарник, низкое RAM)
└── Нет
    ├── Большая команда, web-стек? → Electron
    ├── Нужна Rust производительность? → Tauri
    └── Прототип/MVP? → Electron (проще старт)

---

Часть 4: Публикация с AI-помощью

Подготовка App Store listing

AI значительно упрощает создание маркетинговых материалов:

Описание приложения:

Промпт: "Напиши App Store описание для приложения:
[вставь описание своего приложения]

Требования:
- Длина: 4000 символов
- Первые 3 строки — самые важные (это виден без "подробнее")
- Включи 5-7 ключевых слов естественно
- Тон: [дружелюбный/профессиональный/технический]
- Язык: русский"

Скриншоты:

• iPhone 6.9” (1320×2868): обязательны
• iPad 13” (2064×2752): если поддерживаешь iPad
• Используй AppShots.ai для генерации красивых макетов

App Preview видео:

ИИ-помощники (Sora, Runway Gen-3) могут генерировать
демо-видео из скриншотов. Но лучший вариант —
запись реального использования.

Review Compliance с ИИ

"Проверь моё приложение на соответствие App Store Guidelines:
- Функционал: [описание]
- Разрешения: [камера, микрофон, ...]
- Монетизация: [подписки, IAP, ...]

Найди потенциальные причины rejection до отправки."

---

Чеклист перед публикацией

Mobile

• Протестировано на реальных устройствах (iOS + Android)
• Разрешения объяснены пользователям (NSUsageDescriptions)
• Privacy Policy создана (AI поможет написать)
• Иконки всех размеров готовы
• Скриншоты для всех форматов (iPhone, iPad)
• App Store описание написано и оптимизировано
• Тестирование на slow connection

Desktop

• Подписание кода настроено (Code Signing)
  • macOS: Apple Developer Certificate
  • Windows: EV Code Signing Certificate
• Auto-update настроен (electron-updater / Tauri updater)
• Дистрибутив протестирован на чистой ОС
• Installer создан (NSIS/MSI для Windows, DMG для macOS)
• Иконки для всех платформ

---

Итоги урока

Vibe coding добрался до мобилок и десктопа — 2026 год стёр разницу между «умею кодить» и «могу сделать приложение».

Ключевые инструменты:

🟢 Мобильные:

• Rork — fastest path to App Store для MVP
• FlutterFlow — красивый UI, Flutter под капотом
• Expo + EAS — для разработчиков с AI-ускорением

🔵 Desktop:

• Electron — боевой, огромная экосистема
• Tauri — лёгкий и быстрый, Rust backend

Главный вывод: не нужно быть iOS/Android разработчиком чтобы выпустить приложение в 2026. AI убирает барьеры — твоя задача найти идею и пройти путь от промпта до App Store.

---

Официальные ресурсы

• Electron — фреймворк для desktop приложений на JavaScript
• Tauri — лёгкий desktop фреймворк на Rust
• React Native — фреймворк для мобильных приложений
• Flutter — UI toolkit от Google для мобильных и desktop
• Rork — AI-билдер нативных мобильных приложений

---

Источники: rapidnative.com (февраль 2026), nocode.mba/articles/rork-tutorial (2026), traksource.com/rork-review (январь 2026), natively.dev/articles (2026), dasroot.net/posts/tauri-vs-electron (март 2026), docs.flutter.dev/ai, flutterflow.io — актуальные данные 2026.