Compartilhar via

Criar um aplicativo Angular com a API do Azure Cosmos DB para MongoDB – criar um aplicativo Node.js Express

  • Artigo

APLICA-SE AO: MongoDB

Este tutorial com várias partes demonstra como criar um novo aplicativo escrito em Node.js com o Expresso e o Angular e conectá-lo à sua conta do Azure Cosmos DB configurada com a API do Azure Cosmos DB para MongoDB.

A Parte 2 do tutorial se baseia na introdução e inclui as seguintes tarefas:

  • Instalar a CLI do Angular e o TypeScript
  • Criar um novo projeto usando Angular
  • Criar o aplicativo usando a estrutura do Express
  • Testar o aplicativo em uma ferramenta de teste HTTP

Passo a passo em vídeo

Pré-requisitos

Antes de iniciar esta parte do tutorial, não deixe de assistir ao vídeo de introdução.

Este tutorial também requer:

  • Versão do Node.js 8.4.0 ou superior.
  • Uma ferramenta de teste HTTP
    • Recomendamos Insomnia, curl, Visual Studio ou Invoke-RestMethod
  • Visual Studio Code ou seu editor de código favorito.

Dica

Este tutorial percorre passo a passo com você as etapas para compilar o aplicativo. Se você deseja baixar o projeto concluído, pode obter o aplicativo concluído no repositório angular-cosmosdb do GitHub.

Instalar a CLI do Angular e o TypeScript

  1. Abra um prompt de comando do Windows ou uma janela de terminal do Mac e instale a CLI do Angular.

    npm install -g @angular/cli

  2. Instale o TypeScript digitando o comando a seguir no prompt.

    npm install -g typescript

Usar a CLI do Angular para criar um novo projeto

  1. No prompt de comando, altere para a pasta em que você deseja criar o novo projeto e execute o comando a seguir. Este comando cria uma nova pasta e o projeto chamado angular-cosmosdb e instala os componentes do Angular necessários para um novo aplicativo. Ele usa a configuração mínima (--minimal) e especifica que o projeto usa Sass (uma sintaxe semelhante a CSS com o sinalizador scss --style).

    ng new angular-cosmosdb --minimal --style scss

  2. Depois de concluir o comando, altere os diretórios na pasta src/client.

    cd angular-cosmosdb

  3. Em seguida, abra a pasta no Visual Studio Code.

    code .

Crie o aplicativo usando a estrutura do Express

  1. No Visual Studio Code, no painel Explorer, clique com o botão direito do mouse na pasta src, clique em Nova Pastae nomeie a nova pasta servidor.

  2. No painel Explorer, clique com o botão direito do mouse na pasta servidor, clique em Novo Arquivoe nomeie o novo arquivo index.js.

  3. Novamente no prompt de comando, use o comando a eguir para instalar o analisador de corpo. Isso ajuda nosso aplicativo a analisar os dados JSON que são transmitidos pelas APIs.

    npm i express body-parser --save

  4. No Visual Studio Code, copie o código a seguir no arquivo js. Esse código:

    • Referencia o Express
    • Extrai o analisador de corpo para ler dados JSON no corpo das solicitações
    • Usa um recurso interno denominado caminho
    • Define conjuntos de variáveis para facilitar a localização do nosso código
    • Configura uma porta
    • Inicia o Express
    • Informa ao aplicativo como usar o middleware que seria usado para servir o servidor
    • Serve tudo o que está na pasta dist, que será o conteúdo estático
    • Serve o aplicativo e o index.html para todas as solicitações GET não encontradas no servidor (para deep links)
    • Inicia o servidor com app.listen
    • Usa uma função arrow para registrar que a porta está ativa
    const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));

  5. No Visual Studio Code, no painel Explorer, clique com o botão direito do mouse na pasta servidor e clique em Novo arquivo. Chame o novo arquivo de routes.js.

  6. Copie o código a seguir em routes.js. Esse código:

    • Referencia o roteador Express
    • Obtém os heroes
    • Envia o JSON para um hero definido
    const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;

  7. Salva todos os arquivos modificados.

  8. No Visual Studio Code, clique no botão Depurar e no botão de engrenagem . O novo arquivo launch.json abre no Visual Studio Code.

  9. Na linha 11 do arquivo launch.json, altere "${workspaceFolder}\\server" para "program": "${workspaceRoot}/src/server/index.js" e salve o arquivo.

  10. Clique no botão Iniciar Depuração para executar o aplicativo.

    O aplicativo deve ser executado sem erros.

Testar os pontos de extremidade HTTP do aplicativo

  1. Agora, use uma ferramenta de teste HTTP para emitir uma solicitação GET para http://localhost:3000/api/heroes.

  2. A resposta mostra que o aplicativo está em execução localmente.

Próximas etapas

Nesta parte do tutorial, você fez o seguinte:

  • Criou um projeto Node.js usando a CLI do Angular
  • Testou o aplicativo usando uma ferramenta de teste HTTP

Você pode prosseguir para a próxima parte do tutorial a fim de criar a interface do usuário.

Criar a interface do usuário com Angular

Tentando fazer o planejamento da capacidade para uma migração para o Azure Cosmos DB? Você pode usar informações sobre o cluster de banco de dados existente para fazer isso.