Skip to content

README.md

Latest commit

 

History

History
277 lines (205 loc) · 9.36 KB

README.md

File metadata and controls

277 lines (205 loc) · 9.36 KB
Raw

Lentik Mobile — Android-приложение

React Native (Expo) прототип семейного мессенджера Lentik для Android 13+.

Дизайн

  • Тёплые цвета: бежевый фон #FFF8F0, акцент — терракот #b07d52 (единый с веб-приложением)
  • Шрифт: минимум 18px во всех элементах
  • Touch-targets: кнопки не менее 56dp
  • Иконки везде с подписями
  • Целевая аудитория: пожилые пользователи

Структура

src/
├── api/            # HTTP-клиент + методы API
│   ├── client.js   # axios с Bearer-токеном
│   ├── auth.js     # Вход, регистрация
│   ├── chats.js    # Чаты, сообщения
│   ├── families.js # Семьи
│   ├── gallery.js  # Галерея
│   └── me.js       # Текущий пользователь
├── context/
│   ├── AuthContext.js   # Авторизация + хранение токена
│   └── FamilyContext.js # Выбранная семья
├── navigation/
│   └── RootNavigator.js # Роутинг: Auth / FamilySelect / Tabs
├── screens/
│   ├── LoginScreen.js
│   ├── RegisterScreen.js
│   ├── FamilySelectScreen.js
│   ├── ChatsListScreen.js
│   ├── ChatScreen.js       # WebSocket + отправка сообщений
│   ├── GalleryScreen.js    # Фото-сетка + загрузка
│   └── ProfileScreen.js
└── components/
    ├── PinKeypad.js    # Цифровая клавиатура для PIN
    ├── MessageBubble.js
    └── ChatListItem.js

Предварительные требования

Инструмент Версия
Node.js 18+
npm / yarn любая
Expo CLI последняя
EAS CLI для сборки APK
Android Studio для эмулятора 
# Установить глобально
npm install -g expo-cli eas-cli

Шаг 1 — Настройка URL сервера

Откройте файл src/config.js и укажите URL вашего FastAPI backend:

// Пример для локальной сети:
export const API_BASE_URL = 'http://192.168.1.100:8000';

// Пример для публичного сервера:
export const API_BASE_URL = 'https://api.your-domain.com';

Важно: Если сервер работает локально на ПК, телефон должен быть в одной Wi-Fi сети. Используйте IP-адрес ПК, а не localhost.

Шаг 2 — Установка зависимостей

cd lentik-mobile
npm install

Шаг 3 — Добавить иконки приложения (опционально)

Положите в папку assets/:

  • icon.png — 1024×1024 (иконка приложения)
  • splash.png — 1284×2778 (заставка при запуске)
  • adaptive-icon.png — 1024×1024 (Android adaptive icon)

Если иконок нет — приложение запустится с пустой иконкой.

Шаг 4 — Запуск на реальном устройстве или эмуляторе

Способ А: Expo Go (быстрый старт)

  1. Установите Expo Go на Android-устройство
  2. Запустите dev-сервер: 
    npm start
  3. Сканируйте QR-код в Expo Go

Ограничение: Expo Go не поддерживает всё — используйте способ Б для полноценного теста.

Способ Б: Development Build (рекомендуется)

# Создать development build для Android
npx expo run:android

Требует Android Studio с настроенным эмулятором или подключённым устройством.

Шаг 5 — Сборка APK для установки

Облачная сборка через EAS (рекомендуется)

  1. Войдите в аккаунт Expo:

    eas login

  2. Настройте проект:

    eas build:configure

    Это создаст файл eas.json.

  3. Запустите сборку:

    # Preview APK (для тестирования)
eas build --platform android --profile preview

# Release AAB (для Google Play)
eas build --platform android --profile production

  4. После сборки скачайте APK по ссылке из консоли.

Локальная сборка (требует Android SDK)

# Сгенерировать android/ папку
npx expo prebuild --platform android

# Собрать debug APK
cd android && ./gradlew assembleDebug

# APK будет здесь:
# android/app/build/outputs/apk/debug/app-debug.apk

Установка APK на телефон

  1. Включите «Установку из неизвестных источников» в настройках Android
  2. Скопируйте APK на телефон (USB, облако, email)
  3. Откройте файловый менеджер и нажмите на APK
  4. Подтвердите установку

Пример конфигурации eas.json

Если EAS спросит — вот готовый пример:

{
  "cli": { "version": ">= 12.0.0" },
  "build": {
    "preview": {
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "production": {
      "android": {
        "buildType": "app-bundle"
      }
    }
  }
}

Требования к серверу

Приложение подключается к Lentik FastAPI backend по REST API и WebSocket:

Метод Путь Назначение
POST /auth/pin Вход
POST /auth/register Регистрация
GET /me Данные пользователя
GET /me/families Список семей
GET /families/:id Детали семьи
GET /families/:id/chats Список чатов
GET .../chats/:id/messages Сообщения
POST .../chats/:id/messages Отправить сообщение
WS .../chats/:id/ws?token= Real-time чат
GET /families/:id/gallery Галерея
POST /families/:id/gallery Загрузить фото

Технологии

  • Expo SDK 51 — мобильная платформа
  • React Native 0.74 — UI фреймворк
  • React Navigation v6 — навигация
  • Axios — HTTP запросы
  • expo-secure-store — безопасное хранение токена
  • expo-image-picker — выбор фото из галереи

Разработка

# Запуск с очисткой кеша
npx expo start --clear

# Запуск только на Android
npx expo start --android

# Логи
npx expo start --verbose

Поддерживаемые версии Android

  • Минимум: Android 13 (SDK 33)
  • Цель: Android 14 (SDK 34)

Безопасность зависимостей (npm audit)

npm audit показывает ~26 advisories (Expo SDK 51). Все они — в dev/build-инструментарии (@expo/cli, @expo/metro-config, @expo/prebuild-config, @react-native-community/cli-*, tar, xcode, @xmldom/xmldom, cacache, send и т.п.). Эти пакеты выполняются на машине разработчика во время expo start / eas build и не попадают в собранный APK/IPA — рантайм-экспозиция опубликованного приложения по ним близка к нулю.

Безопасный npm audit fix (без --force) их не закрывает: все фиксы тянут мажорный апгрейд expo@~56 (SDK 51 → 56) или react-native@0.86, т.е. несколько ломающих мажоров (RN 0.74→0.81+, React 18→19, native-модули). npm audit fix --force запускать нельзя — он сломает сборку.

Решение (осознанно принято): оставляем на SDK 51; апгрейд Expo SDK планируется отдельной задачей при активной разработке, инкрементально (51→52→53→…) с тестированием на устройстве/ эмуляторе после каждого шага:

npx expo install expo@^52   # поднять на следующую SDK
npx expo install --fix      # выровнять expo-* и RN под неё
npx tsc --noEmit            # проверить типы
# затем прогон на устройстве/эмуляторе

Рантайм-безопасность мобильного клиента обеспечена иначе: JWT хранится в expo-secure-store (Keychain/Keystore, не в доступном из JS хранилище), а трафик идёт по HTTPS к API.