expo essentials

expo-essentials это ударный шаблон, построенный на вершине выставки, содержащий управляемую структуру папок, тестовые наборы и основные функции, чтобы вы могли работать в следующем приложении.

Оглавление

1. Ключевые функции
2. Использование
   1. Установка
   2. Команды
      1. Приложения команды
      2. Команды сервера
   3. Установка темы
      1. Выбор цветовой палитры
      2. Выбор шрифта
      3. Световая и темная конфигурация темы
      4. Используйте цвета темы в компонентах
   4. Настройки для разных средств
      1. Конфигурация приложения
         1. Конфигурация разработки
         2. Постановка конфигурации
         3. Производственная конфигурация
      2. Конфигурация сервера
   5. Интеграция Firebase
      1. Добавление ваших учетных данных Firebase в приложение
      2. Добавление ваших учетных данных Firebase на сервер
3. Экраны
   1. Добро пожаловать
   2. На борьбе
   3. Аутентификация
   4. Дом
4. Как внести свой вклад

Ключевые функции

• Все функции выставки (горячая перезагрузка, кроссплатформенное, брызговой экран и т. Д.)
• ? Легкая конфигурация темы (цветовая палитра и шрифты)
• ? Eslint и более красивое форматирование для продвижения более чистого кода
• ? Легкий и темный режим
• Интеграция Firebase
• ? Добро пожаловать экран на первом запуске
• ❓ Swiper для адаптации, чтобы выделить функции
• Аутентификация пользователя с использованием Firebase и постоянный вход пользователей в нескольких запусках
• ↪ Навигационная настройка на основе навигации React
• ? Тосты
• ? Сеть отключить баннер
• ? Офлайн -поддержка через кэширование сетевых запросов и изображений
• ? Конфигурация среды на основе стадии приложения (разработка, постановка и производство)
• ? Легкие формы с проверкой ввода на основе Formik и Yup
• (Необязательно) Сервер ExpressJS и база данных MongoDB, настроенная с промежуточным программным обеспечением Auth Base Auth, настройкой среды, модульными тестами и интеграционными тестами
• ? Гибко написанные общие компоненты (кнопка, текстовый результат, карты, модальный, прядильщик и т. Д.)

(... и еще много еще!)

Использование

Установка

1. Клон/разветвляется этот репо (на основе ваших предпочтений)
2. Запустить мобильное приложение

    $ cd client
   $ npm start
   

3. (Необязательно) Запустите экземпляр ExpressJS Server и MongoDB (вам нужно установить Docker)

    $ docker-compose up --build
   

Команды

Приложения команды

Командование	Описание
npm start	Start Expo Metro Server
npm run android	Запускает приложение в эмуляторе Android
npm run ios	Запускает приложение в эмуляторе iOS
npm run web	Запускает приложение в веб -браузере
npm run test	Активная разработка тестов, просмотра файлов для изменений и повторного запуска всех тестов
npm run testDebug	Debug, console.logs и только перезапустить файл, который был изменен
npm run testFinal	Отображает покрытие кода в CLI и обновляет покрытие кода HTML
npm run updateSnapshots	При обновлении экрана/компонента, тестовые снимки вынесут ошибку, это обновляет их
npm run eject	Выбросить приложение Expo в нативные проекты Android и iOS (осторожность: это действие необратимо)

Команды сервера

Командование	Описание
npm run start:dev	Запускает сервер с конфигурацией разработки, перезапустите сервер при изменениях файлов
npm run start:staging	Запускает сервер с конфигурации постановки
npm run start:prod	Запускает сервер с конфигурации производства
npm run test:watch	Активная разработка тестов, просмотра файлов для изменений и повторных тестов
npm run test	Отображает покрытие кода в CLI и обновляет покрытие кода HTML

Установка темы

Этот шаблон использует котенок пользовательского интерфейса для управления темой. Чтобы узнать больше об этом, обязательно посетите их документы.

Выбор цветовой палитры

• Используйте инструмент EVA Design System, чтобы создать палитру на основе цвета вашего бренда.
• Экспорт палитры как JSON и сохраните значения в client/app/config/colors.js

Выбор шрифта

• Храните желаемые файлы шрифтов ( .ttf или .otf предпочтительны) в папке client/app/assets/fonts . (По умолчанию этот шаблон использует шрифт Jost).
• Обновите имена и пути шрифтов в client/App.js :

Световая и темная конфигурация темы

Вы можете указать различные цвета, которые будут использоваться для режима Light и Dark Mode , обновляя значения в client/app/config/lightTheme.js и client/app/config/darkTheme.js соответственно.

Используйте цвета темы в компонентах

(Этот метод использует React Hooks, поэтому убедитесь, что вы работаете с функциональными компонентами реагирования)

Настройки для разных средств

Этот шаблон поддерживает плавно меняющуюся конфигурации для различных построек среды, основанной на приложении (например, разработка , постановка и производство )

Конфигурация приложения

Настройки для мобильного приложения устанавливаются в client/app/config/settings.js .

Конфигурация разработки

Конфигурация разработки должна быть установлена ​​в объекте dev напрямую.

Постановка конфигурации

Конфигурация постановки должна быть установлена ​​в staging . Вы можете либо установить их напрямую, либо добавить их через файл client/.env DOT (если у вас есть конфиденциальные данные).

Производственная конфигурация

Производственная конфигурация должна быть установлена ​​в объекте prod , и предпочтительно должна быть добавлена ​​через файл client/.env .

Конфигурация сервера

Настройки для сервера устанавливаются в server/config/settings.js . Сервер ExpressJS работает в контейнере Docker, поэтому вы можете указать, какой файл среды подключается к контейнеру.

Например, конфигурация среды разработки может быть установлена ​​как:

• Создайте файл server/.env.dev :

• Укажите, используя этот файл среды в файле docker-compose.yml :

Интеграция Firebase

Этот шаблон использует Firebase для аутентификации пользователей и управления. Firebase предлагает богатый список внешних поставщиков, которые вы хотели бы добавить в свое приложение позже. Они также обрабатывают отправку электронных писем для проверки электронной почты , сброса пароля и изменения электронной почты .

Предполагается, что вы создаете 3 отдельных проекта Firebase для вашего приложения: app-dev , app-staging и app-prod (для каждой среды, которую использует ваше приложение). Это должно убедиться, что вы можете проверить свою среду независимой друг от друга, и предотвратить перекрывающиеся данные.

Добавление ваших учетных данных Firebase в приложение

Создайте конфигурации WebApp в ваших проектах Firebase и добавьте их в соответствующие объекты среды.

Добавление ваших учетных данных Firebase на сервер

Сервер использует SDK Admin Firebase для создания промежуточного программного обеспечения для аутентификации. Это промежуточное программное обеспечение декодирует токен JWT , отправленный из приложения через запрос API, чтобы идентифицировать пользователей и их роли.

• Загрузите учетные данные вашей учетной записи службы от Firebase и сохраните их в server/config/firebase-service-account-<environment>.json
  ( server/config/firebase-service-account-dev.json , server/config/firebase-service-account-staging.json , server/config/firebase-service-account-prod.json )

Экраны

Добро пожаловать экран

Встроенный экран

Экран аутентификации

Главный экран

Как внести свой вклад

1. Вилка репозитория
2. Добавьте исправление ошибки или добавление новой функции и создайте запрос на тягу к этому репо.
3. Напишите подробный список изменений, предложенных в описании запроса на привлечение