Partilhar via

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

  • Aplica-se a: ✅ MongoDB

APLICA-SE A: MongoDB

Importante

Você está procurando migrar um aplicativo MongoDB existente ou usar os recursos MQL (MongoDB Query Language)? Considere Azure DocumentDB.

Você está procurando uma solução de banco de dados para cenários de alta escala com um contrato de nível de serviço (SLA) de disponibilidade de 99.999%, dimensionamento automático instantâneo e failover automático em várias regiões? Considere Azure Cosmos DB para NoSQL.

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

Guia 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:

    • Referências 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
    • Servem a aplicação e o index.html para pedidos GET que não forem encontrados no servidor (para ligações profundas)
    • 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:

    • Faz referência ao router do Express
    • Recupera os heróis
    • 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 Ferramentas. 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 da aplicação

  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.

  • Last updated on