Gerando Aplicações Angular FullStack – Parte 3

Conexão com o banco de dados MongoDB

Fala galera! Bem vindos a terceira parte do tutorial. No tutorial anterior, vimos como agregar um CRUD para a aplicação conectando com um banco de dados MongoDB local. Como o objetivo final é fazer o deploy da nossa aplicação, precisamos de um banco de dados e para isso iremos utilizar um DaaS (Data as a Service, Dados como serviço).

Algumas das vantagens de utilizar DaaS é a facilidade de implantação de um banco de dados, back-up, escalabilidade, replicação, manutenção e, principalmente, a garantia de disponibilidade do serviço. Nesse tutorial vamos utilizar o mLab para criar nosso banco de dados MongoDB e conectar nossa aplicação ao serviço.

Links Rápidos:

• Gerando Aplicações Angular FullStack – Parte 1 – Gerando o App
• Gerando Aplicações Angular FullStack – Parte 2 – Criando um CRUD
• Gerando Aplicações Angular FullStack – Parte 3 – Conectando com MongoDB Remoto
• Gerando Aplicações Angular FullStack – Parte 4 – Fazendo Deploy no Heroku

Criando o Banco de Dados

1. Crie uma conta no mLab.
2. No painel principal, vá em “Create New”.
3. Selecione a opção SANDBOX (Free). 
4. Selecione a região.
5. Defina um nome para o banco de dados. No meu caso coloquei “meuappdb”.
6. Confirme os dados.
7. O banco de dados deve aparecer na listagem agora. Selecione-o e vamos criar nosso usuário. Clique em “Users”.
8. Selecione a opção “Add database user”.
9. Crie um nome de usuário (no meu caso admin) e defina uma senha bem forte. Sugiro o site passwordsgenerator e mantenha apenas a segunda, terceira e quarta caixa selecionadas.
10. Agora só precisamos montar nossa URI para conexão com o MongoDB. Selecione o mesmo texto marcado na imagem e substitua os campos. <dbuser> fica sendo o nome de usuário e <dbpassword> a senha.
11. Substitua a propriedade MONGO_DB_URI no arquivo .env (na raiz do projeto) pela URI do passo anterior.

Pronto! Temos nosso banco de dados criado e caso não ocorra nenhum erro estará devidamente conectado. Para testar, você pode executar o comando “npm run start” e você deve ser a seguinte mensagem:

The magic happens on http://localhost:8000

Como já temos nosso banco de dados remoto, podemos partir para o próxima fase. Na próxima parte vamos realizar o deploy da nossa aplicação para o Heroku.

Links Rápidos:

• Gerando Aplicações Angular FullStack – Parte 1 – Gerando o App
• Gerando Aplicações Angular FullStack – Parte 2 – Criando um CRUD
• Gerando Aplicações Angular FullStack – Parte 3 – Conectando com MongoDB Remoto
• Gerando Aplicações Angular FullStack – Parte 4 – Fazendo Deploy no Heroku