Share via

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

  • Artigo

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 um aplicativo de lista Todo simples 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, precisa de:

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 q módulo.

Visual Studio Code

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. Baixe e descompacte a versão mais recente e, em seguida, adicione o bin diretório 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 samples/cordova pasta do repositório GitHub azure/azure-mobile-apps . Você pode baixar o repositório como um arquivo ZIP e, em seguida, descompactá-lo. Os arquivos serão criados na azure-mobile-apps-main pasta.

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, mostrado 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 conforme ios necessário. A browser plataforma 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 www/js/index.js arquivo em um editor de texto. Edite a definição de para mostrar o URL de BackendUrl back-end. Por exemplo, se o URL de back-end fosse https://zumo-abcd1234.azurewebsites.net, o URL de back-end teria esta aparência:

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

Guarde o ficheiro. Abra o www/index.html arquivo em um editor de texto. Edite o para atualizar o Content-Security-Policy 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 a aplicação

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 tal, 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 selecione Configurar>o AVD Manager. Agora você pode iniciar o emulador manualmente. Se você executar adb devices -lo , 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 a sincronização de dados offline.