Criar uma aplicação Angular com a API do Azure Cosmos DB para MongoDB – Adicionar funções CRUD à aplicação

  • Artigo

APLICA-SE A: MongoDB

Este tutorial em várias partes demonstra como criar uma nova aplicação escrita no Node.js com o Express e Angular e, em seguida, ligá-la à 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.

Dica

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 ao premir o botão Dividir 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 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, guarde todas as suas 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.

    Separador Redes 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 “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.

    Separador 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 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 atualizámos 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”.

    Aplicação heroes e separador Rede que mostra o payload

    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".

    Aplicação heroes e separador Rede que mostra o tempo que demora a concluir as funções

    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.

Passos seguintes

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.

Está a tentar planear a capacidade de uma migração para o Azure Cosmos DB? Pode utilizar informações sobre o cluster de bases de dados existentes para o planeamento de capacidade.