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

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 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 hero
• 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.

   

   Vamos começar por programar o serviço hero.

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 hero para publicar um hero novo.
   • 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ão Iniciar 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.

   

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

   

   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 a seguir ao 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 indicação está agora definida como “Bye”.

   

   Também pode eliminar um dos heroes na IU e ver quanto tempo é que a operação delete demora a ser concluída. Experimente ao selecionar o botão “Eliminar” no hero com o nome “Pedro".

   

   Se atualizar a página, o separador Rede mostra o tempo que demora a obter os heroes. 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.

• Se tudo o que você sabe é o número de vcores e servidores em seu cluster de banco de dados existente, leia sobre como estimar unidades de solicitação usando vCores ou vCPUs
• Se você souber as taxas de solicitação típicas para sua carga de trabalho de banco de dados atual, leia sobre como estimar unidades de solicitação usando o planejador de capacidade do Azure Cosmos DB