Crie um aplicativo Apache Cordova com os Aplicativos Móveis do Azure

Artigo
05/05/2021

Observação

Este produto foi retirado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca Community Toolkit Datasync.

Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo de plataforma cruzada Apache Cordova usando os Aplicativos Móveis do Azure e um back-end de aplicativo móvel do Azure. Você criará um novo back-end de aplicativo móvel e uma lista Todo simples aplicativo que armazena dados de aplicativos no Azure.

Conclua este tutorial antes de continuar com outros tutoriais do Apache Cordova sobre como usar o recurso Aplicativos Móveis no Serviço de Aplicativo do Azure.

Pré-requisitos

Para concluir este tutorial, você precisa:

A instalação do Apache Cordova 8.1.2 em funcionamento.
Um editor de texto (como Visual Studio Code).
Uma conta do Azure.
O CLI do Azure.
- Inicie sessão na sua conta do Azure e selecione um de subscrição utilizando a CLI do Azure.

Este tutorial pode ser concluído em sistemas Windows ou Mac. A versão iOS do aplicativo só pode ser executada em um Mac. Este tutorial usa apenas o Windows (com o aplicativo em execução no Android).

Apache Cordova 8.1.2 ou anterior necessário

Apache Cordova lançou uma alteração incompatível para a ferramenta na v9.0.0. Se você tiver o Apache Cordova v9.0.0 ou posterior instalado, o plugin não funcionará, reclamando de um problema de dependência com o módulo q.

Código do Visual Studio

Há uma extensão Apache Cordova para Visual Studio Code que permite executar o aplicativo com depuração. O Visual Studio Code é altamente recomendado para o desenvolvimento do Apache Cordova.

Instalar o Gradle

O erro mais comum ao configurar o Apache Cordova no Windows é a instalação do Gradle. Ele é instalado por padrão usando o Android Studio, mas não está disponível para uso normal. Transfira e descompacte a versão mais recentee, em seguida, adicione o diretório bin ao seu PATH manualmente.

Faça o download do projeto de início rápido do Apache Cordova

O projeto de início rápido do Apache Cordova está localizado na pasta samples/cordova do repositório azure/azure-mobile-apps GitHub. Você pode baixar o repositório como um arquivo ZIPe, em seguida, descompactá-lo. Os arquivos serão criados na pasta azure-mobile-apps-main.

Uma vez baixado, abra um Terminal e altere o diretório para o local dos arquivos.

Implantar o serviço de back-end

Para implantar o serviço de início rápido, primeiro faça logon no Azure com a CLI do Azure:

az login

Um navegador da Web será aberto para concluir a autorização.

Se necessário, selecione uma assinatura.

Criar um grupo de recursos

Digite o seguinte para criar um grupo de recursos:

az group create -l westus -n zumo-quickstart

Este comando cria um grupo de recursos chamado zumo-quickstart para armazenar todos os recursos que criamos. Substitua westus por outra região se você não tiver acesso à região westus ou se preferir uma região mais próxima de você.

Implantar o back-end no Azure

O serviço é composto pelos seguintes recursos:

Um plano de hospedagem do serviço de aplicativo no plano gratuito.
Um site hospedado no plano de Hospedagem do Serviço de Aplicativo.
Um servidor SQL do Azure.
Um banco de dados SQL do Azure na camada Básica (incorre em custo).

O banco de dados SQL do Azure é o único recurso que incorre em custo. Para obter detalhes, consulte Preços.

Para implantar os recursos, digite os seguintes comandos:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Depois de concluído, execute o seguinte comando para ver as saídas:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

Este comando mostra as informações sobre sua implantação que você precisa para desenvolver seu aplicativo móvel. O nome de usuário e a senha do banco de dados são úteis para acessar o banco de dados por meio do portal do Azure. O nome do Serviço de Aplicativo é usado abaixo e o ponto de extremidade público é incorporado ao seu código mais tarde.

Por fim, implante o servidor de Aplicativos Móveis do Azure no Serviço de Aplicativo criado:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Substitua zumo-XXXXXXXX pelo nome do seu Serviço de Aplicativo; mostrados na lista de saídas. Dentro de 2 a 3 minutos, seu servidor de Aplicativos Móveis do Azure estará pronto para uso. Você pode usar um navegador da Web para confirmar se o back-end está funcionando. Aponte o navegador da Web para o ponto de extremidade público com /tables/TodoItem anexado a ele (por exemplo, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). O navegador exibirá um erro sobre um parâmetro X-ZUMO-VERSION ausente se o servidor estiver funcionando corretamente.

Excluindo os recursos

Depois de concluir o tutorial de início rápido, você pode excluir os recursos com az group delete -n zumo-quickstart.

O tutorial é composto por três partes (incluindo esta seção). Não exclua os recursos antes de concluir o tutorial.

Configurar o projeto de início rápido do Apache Cordova

Execute npm install para instalar todas as dependências.

Adicione uma plataforma ao projeto. Por exemplo, para adicionar a plataforma Android, use:

cordova platform add android

Você pode adicionar browser, androide ios conforme necessário. A plataforma browser não funcionará com a sincronização offline habilitada. Depois de adicionar todas as plataformas que deseja usar, execute cordova requirements para garantir que todos os requisitos foram atendidos.

Abra o arquivo www/js/index.js em um editor de texto. Edite a definição de BackendUrl para mostrar seu URL de back-end. Por exemplo, se a URL de back-end fosse https://zumo-abcd1234.azurewebsites.net, a URL de back-end teria esta aparência:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Salve o arquivo. Abra o arquivo www/index.html em um editor de texto. Edite o Content-Security-Policy para atualizar o URL para corresponder ao seu URL de back-end; Por exemplo:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Para criar o aplicativo, use o seguinte comando:

cordova build

Executar o aplicativo

Se estiver sendo executado a partir de um navegador (usando cordova platform add browser), você deverá habilitar o suporte a CORS no Serviço de Aplicativo do Azure. Para fazer isso, execute o seguinte comando:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Substitua o ZUMPAPPNAME pelo nome do seu back-end móvel do Serviço de Aplicativo do Azure. Depois que o back-end estiver configurado, execute o seguinte comando:

cordova run android

Quando a inicialização inicial estiver concluída, você poderá adicionar e excluir itens da lista. Todos os itens são armazenados na instância SQL do Azure conectada ao back-end dos Aplicativos Móveis do Azure.

Se o emulador não iniciar automaticamente, abra o Android Studio e, em seguida, selecione ConfigurarAVD Manager . Agora você pode iniciar o emulador manualmente. Se você executar adb devices -l, deverá ver o dispositivo emulado selecionado. Agora você deve ser capaz de executar cordova run android.

Apache Cordova App

Próximos passos

Continue a implementar sincronização de dados offline.

Partilhar via