Criar um aplicativo Apache Cordova com aplicativos móveis do Azure
Nota
Este produto está desativado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca datasync do Kit de Ferramentas da Comunidade .
Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo multiplataforma apache Cordova usando 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 do aplicativo 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:
- uma instalação do Apache Cordova 8.1.2 em funcionamento.
- Um editor de texto (como do Visual Studio Code).
- Uma conta do Azure.
- A CLI do do Azure.
- faça logon em sua conta do Azure e selecione uma assinatura usando a CLI do Azure.
Este tutorial pode ser concluído em sistemas Windows ou Mac. A versão do iOS do aplicativo só pode ser executada em um Mac. Este tutorial usa somente o Windows (com o aplicativo em execução no Android).
Apache Cordova 8.1.2 ou anterior necessário
O Apache Cordova lançou uma alteração incompatível na ferramenta na v9.0.0. Se você tiver o Apache Cordova v9.0.0 ou posterior instalado, o plug-in não funcionará, reclamando de um problema de dependência com o módulo q.
Visual Studio Code
Há um de extensão do Apache Cordova para Visual Studio Code que permite executar o aplicativo com a 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. Isso é instalado por padrão usando o Android Studio, mas não está disponível para uso normal. Baixe e descompacte o versão mais recentee adicione o diretório bin ao PATH manualmente.
Baixar o 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 desempacotá-lo. Os arquivos serão criados na pasta azure-mobile-apps-main.
Depois de 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
Esse comando cria um grupo de recursos chamado zumo-quickstart para manter todos os recursos que criamos. Substitua westus por outra região se você não tiver acesso à região oeste ou 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 SQL Server do Azure.
- Um banco de dados SQL do Azure na camada Básica (custo de incursão).
O banco de dados SQL do Azure é o único recurso que gera custo. Para obter detalhes, consulte de 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
Após a conclusão, execute o seguinte comando para ver as saídas:
az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs
Este comando mostra informações sobre sua implantação de que você precisa no desenvolvimento de 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 é inserido no código posteriormente.
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 Serviço de Aplicativo; mostrado na lista de saídas. Dentro de 2 a 3 minutos, o 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 seu navegador da Web para o ponto de extremidade público com /tables/TodoItem acrescentado 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 tenham sido atendidos.
Abra o arquivo www/js/index.js em um editor de texto. Edite a definição de BackendUrl para mostrar sua URL de back-end. Por exemplo, se a URL de back-end for https://zumo-abcd1234.azurewebsites.net, a URL de back-end será semelhante a esta:
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 a URL para corresponder à 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 em execução em um navegador (usando cordova platform add browser), você deverá habilitar o suporte ao 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 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
Depois que a inicialização inicial for concluída, você poderá adicionar e excluir itens da lista. Todos os itens são armazenados na instância do SQL do Azure conectada ao back-end dos Aplicativos Móveis do Azure.
Se o emulador não for iniciado automaticamente, abra o Android Studio e selecione Configurar>do AVD 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.
