Многие из вас хотели бы быстро создать прототип мобильного/веб-приложения и развернуть или продемонстрировать свою блестящую идею. Но не слишком ли сложно одновременно изучать Android, iOS, веб и сервер? Если вы так думаете, вы пришли в нужное место. В этом руководстве вы узнаете, как создать приложение, которое работает на Android, iOS и в Интернете только на одном языке (Javascript), и позволит вам контролировать, как обычно структурировано кросс-платформенное приложение.
Это руководство предназначено для людей, которые уже знают, как использовать командную строку, но мало знакомы с javascript. В этом руководстве вы будете создавать веб-приложение, которое получает доступ к вашей камере и определяет черты лица, а также мобильное приложение, которое анализирует настроение. Общий обзор проекта представлен на графике ниже.
Чему этот учебник не научит вас:
- Как разработать мобильное, веб-приложение или серверное приложение
Что вы узнаете к концу этого руководства:
- Как настроить кроссплатформенное приложение
- Контейнеризация веб-приложений, мобильных и серверных приложений
- Развертывание вашего контейнера в Azure
- Использование Когнитивного API Azure
Что вам понадобится:
- Код Visual Studio (https://code.visualstudio.com/download)
- Azure CLI (https://docs.microsoft.com/en-us/cli/azure)
- Настройка React Native (https://facebook.github.io/react-native)
- Докер (https://www.docker.com/products/docker-desktop)
Давайте начнем
Часть 1 — Подготовка рабочего пространства
Сначала клонируйте проект из этого репозитория GitHub.
> git clone https://github.com/charlieangriawan/cross_platform_tutorial.git
Часть 2. Подготовка наших ключей для распознавания изображений и анализа текста
Войдите в свою учетную запись Azure через интерфейс командной строки:
> az login
Создайте группу ресурсов, содержащую все службы, которые мы собираемся использовать:
> az group create --name <workspace-name> --location "West Europe"
Создайте когнитивный сервис Computer Vision и перечислите ключ:
> az cognitiveservices account create -n <resource-name1> -g <workspace-name> --kind ComputerVision --sku S1-l WestEurope –yes > az cognitiveservices account keys list --name <resource-name1> -g <workspace-name>
Скопируйте значение key1 и сохраните его в надежном месте. Теперь мы сделаем то же самое для Text Analytics и скопируем значение его key1.
> az cognitiveservices account create -n <resource-name2> -g <workspace-name> --kind TextAnalytics --sku S1-l WestEurope –yes > az cognitiveservices account keys list --name <resource-name2> -g <workspace-name>
Часть 3. Развертывание нашего приложения узла
Откройте каталог node_api и замените ключи в файле .env.
Теперь, когда приложение готово к использованию, вы можете попробовать запустить его на своем локальном компьютере с помощью npm start, и мы можем начать развертывание.
> docker build -t cross_platform_tutorial/node_api:v1.0.0 .
> docker run -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 49160:8080 -d cross_platform_tutorial/node_api:v1.0.0
> az acr create --name <server-container-name1> --resource-group <workspace-name> --sku Basic --admin-enabled true
> az acr credential show --name <server-container-name1>
// copy down the password and use it for docker logins
> docker login <server-container-name1>.azurecr.io --username <server-container-name1>
> docker tag cross_platform_tutorial/node_api <server-container-name1>.azurecr.io/node_api:v1.0.0
> docker push <server-container-name1>.azurecr.io/node_api:v1.0.0
Вы можете проверить, был ли контейнер успешно создан, используя эту команду:
> az acr repository list -n <app-service-name>
После того, как контейнер будет помещен в реестр. Мы можем создать лазурную веб-службу и связать ее с контейнером.
az appservice plan create --name <app-service-name> --resource-group cross_platform_tutorial --sku F1 --is-linux az webapp create --resource-group <workspace-name> --plan <app-service-name> --name <web-app-name1> --deployment-container-image-name <server-container-name1>.azurecr.io/node-server:v1.0.0 az webapp config container set --name <web-app-name1> --resource-group <workspace-name> --docker-custom-image-name <server-container-name1>.azurecr.io/node_api:v1.0.0 --docker-registry-server-url https:// <server-container-name1>.azurecr.io --docker-registry-server-user <server-container-name1> --docker-registry-server-password <docker-password> az webapp config appsettings set --resource-group <workspace-name> --name <web-app-name1> --settings WEBSITES_PORT=8080
Вы можете получить доступ к своему веб-сайту по адресу ‹app-service-name›.azurewebsites.net.
Часть 4. Развертывание нашего веб-приложения
Откройте каталог react_web. В файле .env замените свою конечную точку только что созданной конечной точкой API сервера узла. Затем поместите приложение в контейнер так же, как вы делали это для сервера узлов.
В случае успеха вы должны увидеть одностраничное приложение, которое анализирует ваше окружение и отслеживает лица и отображает их возраст при обнаружении.
> docker build -t cross_platform_tutorial/react_web:v1.0.0 .
> docker run -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 49161:8080 -d cross_platform_tutorial/node_api:v1.0.0
> az acr create --name <server-container-name2> --resource-group <workspace-name> --sku Basic --admin-enabled true
> docker tag cross_platform_tutorial/node_api <server-container-name2>.azurecr.io/react_web:v1.0.0
> docker push <server-container-name2>.azurecr.io/react_web:v1.0.0
az appservice plan create --name <app-service-name> --resource-group cross_platform_tutorial --sku F1 --is-linux
az webapp create --resource-group <workspace-name> --plan <app-service-name> --name <web-app-name2> --deployment-container-image-name <server-container-name1>.azurecr.io/react_web:v1.0.0
az webapp config container set --name <web-app-name2>--resource-group <workspace-name> --docker-custom-image-name <server-container-name2>.azurecr.io/react_web:v1.0.0 --docker-registry-server-url https:// <server-container-name2>.azurecr.io --docker-registry-server-user <server-container-name2> --docker-registry-server-password <docker-password>
az webapp config appsettings set --resource-group <workspace-name> --name <web-app-name2> --settings WEBSITES_PORT=8080
Часть 5. Запуск мобильного приложения
Откройте каталог react_native. В файле .env замените свою конечную точку API-интерфейсом сервера узла и только что созданной конечной точкой веб-приложения. Затем поместите приложение в контейнер так же, как вы делали это для сервера узлов.
> react-native run-android or > react-native run-ios
Вы должны иметь возможность анализировать настроения и обнаруживать лица с помощью приложения.
Поздравляем, вы создали кроссплатформенное приложение!
