Partilhar via

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

  • Artigo

APLICA-SE A: MongoDB

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

A Parte 2 do tutorial é a continuação da introdução e abrange as seguintes tarefas:

  • Instalar a CLI do Angular e o TypeScript
  • Criar um novo projeto com o Angular
  • Utilizar a arquitetura Express para compilar a aplicação
  • Testar o aplicativo em uma ferramenta de teste HTTP

Instruções de vídeo

Pré-requisitos

Antes de iniciar esta parte do tutorial, certifique-se de que já viu o vídeo de introdução.

Este tutorial também requer:

  • A versão 8.4.0 do Node.js ou superior.
  • Uma ferramenta de teste HTTP
    • Recomendamos Insônia, curl, Visual Studio ou Invoke-RestMethod
  • O Visual Studio Code ou o seu editor de código preferido.

Gorjeta

Este tutorial orienta-o ao longo dos passos para criar a aplicação passo a passo. Se quiser transferir o projeto concluído, pode obter a aplicação terminada a partir do repositório angular-cosmosdb no GitHub.

Instalar a CLI do Angular e o TypeScript

  1. Abra uma Janela da Linha de Comandos do Windows ou uma janela de Terminal do Mac e instale a CLI do Angular.

    npm install -g @angular/cli

  2. Introduza o comando seguinte na linha de comandos para instalar o TypeScript.

    npm install -g typescript

Utilizar a CLI do Angular para criar um projeto novo

  1. Na linha de comandos, mude para a pasta em que pretende criar o projeto novo e execute o comando abaixo. Este comando cria uma pasta e um projeto novos com o nome angular-cosmosdb e instala os componentes do Angular necessários para uma nova aplicação. Também utiliza a configuração mínima (--minimal) e especifica que o projeto utiliza Sass (uma sintaxe semelhante a CSS com o sinalizador --style scss).

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

  2. Após a conclusão do comando, mude os diretórios para a pasta src/client.

    cd angular-cosmosdb

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

    code .

Utilizar a arquitetura Express para compilar a aplicação

  1. No Visual Studio Code, no painel Explorer, clique com botão direito do rato na pasta src, clique em Nova Pasta e dê o nome server à mesma.

  2. No painel Explorer, clique com o botão direito do rato na pasta server, clique em Novo Ficheiro e dê o nome index.js ao mesmo.

  3. Novamente na linha de comandos, utilize o comando seguinte para instalar o analisador de corpo. Isto ajuda a nossa aplicação a analisar os dados JSON que são transmitidos através das APIs.

    npm i express body-parser --save

  4. No Visual Studio Code, copie o código abaixo no ficheiro index.js. Este código:

    • Referencia o Express
    • Extrai o analisador de corpo para ler os dados JSON no corpo dos pedidos
    • Utiliza uma funcionalidade incorporada, denominada caminho
    • Define variáveis de raiz para tornar mais fácil localizar o código
    • Configura uma porta
    • Inicia o Express
    • Diz à aplicação como utilizar o middleware que vamos utilizar para servir o servidor
    • Serve tudo o que está na pasta dist, que será o conteúdo estático
    • Serve a aplicação e index.html para os pedidos GET que não forem encontrados no servidor (para ligações avançadas)
    • Inicia o servidor com app.listen
    • Usa uma função de seta 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 botão direito do rato na pasta server e clique em Novo ficheiro. Dê o nome routes.js ao ficheiro novo.

  6. Copie o código seguinte para routes.js. Este código:

    • Referencia o router do Express
    • Obtém os heroes
    • Envia o JSON novamente 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. Guarde todos os seus ficheiros modificados.

  8. No Visual Studio Code, clique no botão Depurar , clique no botão Engrenagem . O novo ficheiro launch.json é aberto no Visual Studio Code.

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

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

    A aplicação deverá ser executada sem erros.

Testar os pontos de extremidade HTTP do aplicativo

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

  2. A resposta mostra que o aplicativo está instalado e funcionando localmente.

Próximos passos

Nesta parte do tutorial, fez o seguinte:

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

Pode avançar para a parte seguinte do tutorial, para criar a IU.

Build the UI with Angular (Criar a IU com o Angular)

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