Partilhar via


Criar um aplicativo Angular com a API do Azure Cosmos DB para MongoDB - Adicionar funções CRUD ao aplicativo

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 6 do tutorial é a continuação da Parte 5 e abrange as seguintes tarefas:

  • Criar as funções Post, Put e Delete para o serviço de herói
  • Executar a aplicação

Pré-requisitos

Antes de iniciar esta parte do tutorial, certifique-se de que concluiu os passos na Parte 5 do tutorial.

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.

Adicionar uma função Post ao serviço Hero

  1. No Visual Studio Code, abra routes.js e hero.service.js lado a lado pressionando o botão Split Editor .

    Veja se a linha 7 de routes.js chama a função getHeroes na linha 5 de hero.service.js. Temos de criar este emparelhamento para as funções post, put e delete.

    routes.js e hero.service.js no Visual Studio Code

    Vamos começar por programar o serviço do herói.

  2. Copie o código seguinte para hero.service.js a seguir à função getHeroes e antes de module.exports. Este código:

    • Utiliza o modelo de herói para criar um novo herói.
    • Verifica as respostas para ver se existe um erro e devolve o valor de estado de 500.
    function postHero(req, res) {
      const originalHero = { uid: req.body.uid, name: req.body.name, saying: req.body.saying };
      const hero = new Hero(originalHero);
      hero.save(error => {
        if (checkServerError(res, error)) return;
        res.status(201).json(hero);
        console.log('Hero created successfully!');
      });
    }
    
    function checkServerError(res, error) {
      if (error) {
        res.status(500).send(error);
        return error;
      }
    }
    
  3. Em hero.service.js, atualize o module.exports para incluir a função postHero nova.

    module.exports = {
      getHeroes,
      postHero
    };
    
  4. Em routes.js, adicione um router para a função post a seguir ao router get. Este router publica um hero de cada vez. Estruturar o ficheiro do router desta forma mostra claramente todos os pontos finais da API disponíveis e deixa o trabalho real a cargo do ficheiro hero.service.js.

    router.post('/hero', (req, res) => {
      heroService.postHero(req, res);
    });
    
  5. Execute a aplicação para confirmar que está tudo a funcionar. No Visual Studio Code, salve todas as alterações, selecione o botão Depurar no lado esquerdo e, em seguida, selecione o botãoIniciar Depuração.

  6. Agora, regresse ao browser e prima F12, na maioria dos computadores, para abrir o separador Ferramentas do programador e Rede. Navegue para http://localhost:3000 para ver as chamadas efetuadas através da rede.

    Aba de Rede no Chrome que mostra a atividade de rede

  7. Selecione o botão Adicionar Hero Novo para adicionar um hero novo. Introduza o ID “999”, o nome “Fred” e a frase “Olá” e, em seguida, selecione Guardar. Deverá ver, no separador de Rede, que enviou um pedido POST para um novo herói.

    Aba de Rede no Chrome que mostra a atividade de rede para as funções Get e Post

    Agora, vamos voltar atrás e adicionar as funções Put e Delete à aplicação.

Adicionar as funções Put e Delete

  1. Em routes.js, adicione os routers put e delete depois do router post.

    router.put('/hero/:uid', (req, res) => {
      heroService.putHero(req, res);
    });
    
    router.delete('/hero/:uid', (req, res) => {
      heroService.deleteHero(req, res);
    });
    
  2. Copie o código seguinte para hero.service.js a seguir à função checkServerError. Este código:

    • Cria as funções put e delete
    • Verifica se o hero foi encontrado
    • Procede ao processamento de erros
    function putHero(req, res) {
      const originalHero = {
        uid: parseInt(req.params.uid, 10),
        name: req.body.name,
        saying: req.body.saying
      };
      Hero.findOne({ uid: originalHero.uid }, (error, hero) => {
        if (checkServerError(res, error)) return;
        if (!checkFound(res, hero)) return;
    
       hero.name = originalHero.name;
        hero.saying = originalHero.saying;
        hero.save(error => {
          if (checkServerError(res, error)) return;
          res.status(200).json(hero);
          console.log('Hero updated successfully!');
        });
      });
    }
    
    function deleteHero(req, res) {
      const uid = parseInt(req.params.uid, 10);
      Hero.findOneAndRemove({ uid: uid })
        .then(hero => {
          if (!checkFound(res, hero)) return;
          res.status(200).json(hero);
          console.log('Hero deleted successfully!');
        })
        .catch(error => {
          if (checkServerError(res, error)) return;
        });
    }
    
    function checkFound(res, hero) {
      if (!hero) {
        res.status(404).send('Hero not found.');
        return;
      }
      return hero;
    }
    
  3. Em hero.service.js, exporte os módulos novos:

    module.exports = {
      getHeroes,
      postHero,
      putHero,
      deleteHero
    };
    
  4. Agora que atualizamos o código, selecione o botão Reiniciar no Visual Studio Code.

  5. Atualize a página do browser e selecione o botão Adicionar novo hero. Adicione um hero novo com o ID "9", o nome "Starlord" e a indicação "Hi". Selecione o botão Guardar para guardar o hero novo.

  6. Agora, selecione o hero Starlord, mude a indicação de “Olá” para “Tchau” e, em seguida, selecione o botão Guardar.

    Agora pode selecionar o ID no separador Rede para mostrar o payload. Pode ver no payload que a mensagem está agora definida como "Bye".

    Aplicação Heroes e separador de rede mostrando o payload

    Também pode eliminar um dos heróis na IU e ver quanto tempo a operação de eliminação demora a ser concluída. Experimente ao selecionar o botão “Eliminar” no hero com o nome “Fred”.

    Aplicação Heroes e separador de Rede que mostra o tempo necessário para concluir as funções

    Se atualizar a página, o separador Rede mostra o tempo que demora a obter os heróis. Embora estes tempos sejam rápidos, muito está dependente de onde os seus dados estão localizados no mundo e da sua capacidade de georreplicá-los numa zona perto dos seus utilizadores. Pode encontrar mais informações sobre a georreplicação no tutorial seguinte, que vai ser lançado em breve.

Próximos passos

Nesta parte do tutorial, fez o seguinte:

  • Adicionou as funções Post, Put e Delete à aplicação

Regresse aqui para ver vídeos adicionais nesta série de tutoriais.

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.