小明找厕所

0 介绍

1. Поддержка iOS и Android двух платформ.
2. Скачать: git clone https://github.com/liumingmusic/react-native_toiletApp.git.
3. Установить: cd toilet --> npm install --> react-native run-ios (run-android).
4. Серверная часть: см. ниже.

1. Express разработка

1.1 Настройка среды npm

1. Установить программное обеспечение node: https://nodejs.org/en.
2. Установить Taobao-фильтр: npm install -g cnpm --registry = https://registry.npm.taobao.org.
3. Настроить глобальный npm для загрузки ресурсов из Китая, добавить конфигурацию в npmrc. В macOS адрес: /Users/liumingming/.npmrc, изменить strict-ssl=true и registry=https://registry.npm.taobao.org.

1.2 Создание и настройка express-среды

1. Установить express-generator: npm install -g express-generator, чтобы быстро создать express проект.
2. Создать проектный модуль: перейти в каталог проекта /User/liumm/A_study/app/toiletApp и выполнить команду express -e service, где -e — это сокращение от ejs модуля.
3. В серверном проекте установить зависимости: перейти в серверный проект /User/liumm/A_study/app/toiletApp/service и выполнить команду cnpm install, чтобы установить библиотеки зависимостей.
4. Запустить проект: использовать npm start в текущем каталоге для запуска проекта, команда start уже настроена в package.json.
5. Предварительный просмотр: запустить уже разработанный локальный localhost:3000, чтобы увидеть стартовую страницу.
6. Изменить предварительный просмотр: файл app.js в проекте является стартовым путём. Изменить views/index.ejs в проекте, перезапустить сервис для просмотра.
7. Модификация экспресс-загрузки: установить supervisor, npm install supervisor -g, модифицировать автоматическое обновление проекта.

1.3 Структура каталогов файлов проекта

    service
            bin
                www                       //для запуска проекта
            node_modules                  //проектные зависимости, созданные с помощью npm install
            public                        //статические файлы, без public в конце css или js файлы, app.js уже настроен
                css                       //все шаблоны ejs проекта css файлы
                data                      //проект не использует базу данных, использует json для обмена данными
                    config.json           //файл конфигурации модуля чтения
                    cookies.json          //данные json для весёлой минуты
                    it.json               //IT-запрос json
                    manager.json          //управление json
                    prose.json            //проза json
                js                        //файлы взаимодействия на стороне клиента js
                    lib                   //сторонние пакеты lib, включая jquery, bootstrap
                    login.js              //логин js файла домашней страницы
                    ...                   //и так далее
            routes                        //серверные маршруты
                 data.js                  //маршрут обмена данными на сервере
                 index.js                 //домашняя страница
            views                         //клиентские страницы ejs
                error
                    404.ejs
                login.ejs
                index.ejs
                tuijian.ejs
                edit.ejs
            app.js                        //основной файл на стороне клиента
            package.json                  //конфигурационная информация, часть зависимостей похожа на java pom.xml

1.4 Дизайн интерфейса чтения данных

Унифицированный формат данных, возвращаемых сервером:

   {
        status : 1,           //статус возврата на страницу  1 успех 2 сбой проверки формы 3 системное исключение 4 отсутствие разрешения
        data   : [],          //успешные данные запроса  могут быть объектом или массивом объектов
        info   : 'успешный запрос'    //текущая операция интерфейса  успешная аутентификация успешный запрос сбой проверки формы отсутствие разрешения и т.д.
   }

1. Данные cookie: /data/read/cookies
2. Интернет-новости: /data/read/it
3. Управление данными: /data/read/manager
4. Проза данных: /data/read/prose
5. Чтение модуля конфигурации: /data/read/config

1.6 Дизайн интерфейса хранения данных

Все операции записи данных являются запросами post, унифицированными как /data/write, параметры следующие: Все операции удаления данных являются запросами post, унифицированными как /data/delete, параметры следующие:

    新增
    {
        type:   type,  //тип изменяемого ресурса
        title:  title, //название статьи
        url:    url,   //путь к статье
        img:    img    //путь к изображению
    }

    删除
    {
        type:   type,  //тип ресурса
        id:     id,    //уникальный идентификатор
    }

1.7 Разработка страниц

1. Страница входа
2. Домашняя страница
3. Страница редактирования
4. Операция удаления
5. Операция обновления
6. Операция просмотра

1.8 Отладка кода express

1. Установите node-inspector: sudo cnpm install -g node-inspector.
2. Терминал введите: supervisor --debug ./bin/www.
3. Откройте новый терминал и введите: node-inspector & (примечание: также находится в каталоге проекта).
4. Введите отображаемый адрес третьего шага, посетите браузер для доступа к вводу (http://127.0.0.1:8080/?port=5858), а затем отлаживать javascript.
5. Если вы не хотите использовать порт 8080, вы можете изменить его: node-инспектор & -p 8888.

1.9 Развёртывание проекта на сервере

1. Приобретите облачный сервер (вы можете посмотреть Alibaba Cloud, Huawei Cloud, Tencent Cloud), цель — только эксплуатация и техническое обслуживание, а не управление, пока вы можете его использовать.

2. Загрузите пакет linux версии nodejs, загрузите xshell для установки.

3. Купите хороший облачный сервисный аккаунт, используйте shell для входа (в Интернете есть много руководств, просто войдите в систему).

4. Используйте xshell со встроенным инструментом rz (в командной строке введите rz и нажмите Enter), выберите загруженный пакет nodejs и выполните удалённый импорт.

5. Используйте команду: tar -xzf node-v4.4.4-linux-arm64.tar.gz для распаковки (Примечание: импортированный пакет узлов можно выбрать по известному пути для облегчения последующего поиска). Войти в каталог текущего разархивированного узла, ввести команду pwd, чтобы получить полный путь к текущему файлу

6. Войдите в каталог текущего разархивированного узла.

7. Введите команду pwd, чтобы получить полный путь к текущему файлу.

Использовать символические ссылки для быстрого использования команд (одна из них — узел, другая — npm)

3. Используйте символические ссылки (также известные как «ярлыки») для быстрого доступа к командам:
   • ln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/node /usr/local/bin/node
   • ln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/npm /usr/local/bin/npm

Установить пакеты, связанные с express, используя npm

4. Установите пакеты, связанные с Express, с помощью npm.

Создать папку, использовать git clone xxx.git для клонирования проекта, затем войти в путь проекта (серверная часть) и ввести npm install для установки соответствующих зависимостей

5. Создайте папку.
6. Клонируйте проект с помощью команды git clone xxx.git.
7. Перейдите в путь проекта (на серверную часть).
8. Введите npm install для установки необходимых зависимостей.

Установить pm2 для запуска и мониторинга node-сервисов, см. https://segmentfault.com/a/1190000002539204

9. Установите PM2 для запуска и управления сервисами Node. Обратитесь к статье https://segmentfault.com/a/1190000002539204.

Запустить сервис с помощью команды: pm2 start ./bin/www, после чего можно просматривать его через Интернет

10. Запустите сервис с помощью команды pm2 start ./bin/www. После этого вы сможете просматривать его в Интернете.

2. Разработка приложения

2.1. Создание среды разработки для React Native

Сначала разработайте вместе с серверной частью Express. Если у вас уже установлен Node, этот шаг можно пропустить

1. Сначала разработайте приложение вместе с серверной частью на основе Express. Если вы уже установили Node, то этот шаг можно пропустить.

Установите react-native-cli с помощью cnpm

2. Установите React Native CLI с помощью cnpm: cnpm install -g react-native-cli

Инициализируйте проект с помощью react-native

3. Инициализируйте новый проект с помощью React Native: react-native init toilet (где toilet — это имя папки для инициализации проекта, т. е. название проекта).

Перейдите в каталог проекта и выполните команду react-native run-ios для запуска проекта

4. Перейдите в каталог проекта.
5. Выполните команду react-native run-ios для запуска проекта.

Измените файл index.ios.js и сохраните изменения. Выберите симулятор и используйте сочетание клавиш command+r для обновления

6. Измените файл index.ios.js и сохраните изменения.
7. Для обновления выберите симулятор и нажмите сочетание клавиш command+r.

2.2. Организация структуры каталогов

toilet
  __tests__                        //тестовые файлы
  android                          //файлы после компиляции Android
  common                           //инструменты
    utils.js
  html                             //статические страницы, отображаемые с помощью WebView
    css
    image
    js
    nearby.html
    weather.html
  ios                              //файлы после компиляции iOS
  ios_views                        //компоненты iOS, используемые для различения с andriod
    read                         //все компоненты модуля чтения
      cateagory.js             //компонент категории
      list.js                  //компонент списка
      recommend.js             //рекомендуемый компонент
      search.js                //поисковый компонент
      topic.js                 //компонент для размещения на главной странице
    setting                      //компонент настроек
      about.js                 //о компоненте
      detail.js                //подробный компонент
      tips.js                  //дружественный компонент подсказки
      help.js                  //вспомогательный компонент
    readPage.js                  //модуль чтения
    settingPage.js               //страница настроек
    toiletPage.js                //модуль туалета
    twebview.js                  //компонент WebView
    weatherPage.js               //модуль погоды
  node_modules                     //сторонние зависимости jar
  index.ios.js                     //основная программа iOS
  package.json                     //файл конфигурации

2.3. Диаграмма компонентов

Компоненты приложения связаны друг с другом следующим образом:

2.4. Демонстрация работы приложения

Демонстрация работы приложения включает в себя следующие изображения:

• Изображение 1;
• изображение 2;
• изображение 3;
• изображение 4;
• изображение 5;
• изображение 6.

2.5. Оптимизация загрузки

Для оптимизации загрузки приложения выполните следующие действия:

1. Соберите файл JavaScript bundle: react-native bundle --entey-file index.ios.js --platform ios --dev false --bndle-output main.ios.jsbundle

2.6. Сторонние компоненты

В приложении используются следующие сторонние компоненты:

1. react-native-material-design;
2. react-native-image-picker;
3. react-native-barcodescanner;
4. react-native-gifted-chat;
5. fastui-form.

2.7. Исправление ошибок

Ошибки исправляются по мере их возникновения.