Forem: Ezequiel Otoni

Iniciando no Angular: Dicas e estrutura inicial

Ezequiel Otoni — Thu, 22 Aug 2024 14:51:01 +0000

Se você é um Dev Front-End iniciante que está querendo vir pro lado Angular da força, já está de parabéns só pela decisão acertada. Esse artigo é o primeiro de uma série que tem o intuito de entender e espalhar a palavra desse framework tão amado na comunidade. Boa leitura!

Sumário

Por que Angular?
Iniciando um projeto
Estrutura inicial
Entendendo a inicialização

Por que usar Angular?

Bom, porque ele é melhor. E pronto!

Na verdade, o Angular é um framework robusto que adota uma arquitetura baseada em componentes reutilizáveis e escaláveis, utiliza o TypeScript que é uma linguagem com tipagem estática, possui tudo o que é necessário para o desenvolvimento web como roteamento, validação de formulários, comunicação http e gerenciamento de estado. Sem falar do sistema modular, injeção de dependências e a CLI (interface de linha de comando) integrada que facilita muito no desenvolvimento das aplicações. Já ficou óbvio que ele é o melhor.

Mas vamos entender melhor sua estrutura.

Iniciando o projeto

O primeiro passo é instalar a CLI do Angular na nossa máquina. No terminal você pode digitar o comando:

 npm install -g @angular/cli

Aqui estamos instalando globalmente a versão mais recente da CLI. Após isso pelo terminal escolha um diretório para criar o projeto usando o comando padrão do Angular:

 ng new 'nome do projeto'

O projeto vai começar a ser criado e nesse processo você terá que escolher o formato de estilo que será usado (CSS, SCSS, SASS, LESS) e se o projeto vai usar um sistema de roteamento. No estilo você pode escolher o que mais gosta de utilizar, mas sobre o roteamento, falaremos melhor em outros artigos. Ao final seu projeto vai ser criado com as configurações escolhidas e na versão da CLI instalada.

Mas e se você não quiser instalar a CLI globalmente e nem quiser uma versão fixa do Angular na sua máquina? Nesse caso podemos usar um atalho:

npx -p @angular/cli@16 ng new jornada-coders --style=scss --routing=true

Esse comando significa:

npx: O npx é um executor de pacotes do npm que, me permite nesse caso, criar o projeto com uma versão do Angular que não tenho instalada localmente.
-p @angular/cli@16: Indica o pacote Angular CLI e a versão que vamos utilizar. Nesse caso escolhi a versão 16 mas poderia ser outra por exemplo @angular/cli@13.2.0;
ng new jornada-coders: Esse comando já é conhecido dos devs Angular pois é a forma padrão de iniciar um projeto. Estamos dizendo para criar um novo projeto e o nome dele.
--style=scss: aqui já estou escolhendo que meu projeto vai usar scss que é o que uso normalmente. Se você não colocar nada vai poder escolher antes de o projeto ser criado.
--routing=false: Aqui é similar pois já estou indicando que meu projeto não vai ser criado com um modulo de rotas. Caso você também não coloque essa parte, vai poder que escolher antes do projeto ser criado.

Após isso você terá algo assim:

Um projeto inicial Angular padrão. Entrando na pasta do projeto pelo terminal temos acesso à CLI integrada e digitando o comando ng serve , nossa aplicação será iniciada no endereço padrão do Angular http://localhost:4200/. Abrindo esse link teremos nossa aplicação rodando localmente:

Estrutura inicial

Um projeto Angular é criado com muitos arquivos e pastas mas é uma estrutura fácil de compreender. Vamos ver os principais que são:

src/: É o diretório principal onde o código da aplicação vai ficar.
- app/: É o componente inicial da aplicação e vai conter os demais componentes, módulos e serviços criados. Ele é criado com o padrão do Angular que é um arquivo .html, um de estilo .scss, um de script .ts, um de teste .spec.ts e um módulo.
- app.module.ts: Esse é o módulo raiz que declara e importa os componentes e outros módulos que serão criados na aplicação.
- assets/: Pasta para armazenar imagens e outros recursos.
- styles.scss: É o arquivo raiz de estilos da aplicação.
- index.html: É o arquivo HTML raiz da aplicação. É ele que será exibido no navegador.
- main.ts: Arquivo raiz de script da aplicação. É ele que vai iniciar o projeto.
angular.json: Esse é o arquivo de configuração que define como a CLI deve construir e compilar o projeto. Contém as informações principais da aplicação.
package.json: Lista as dependências e scripts do projeto.
tsconfig.json: É um arquivo de configuração do TypeScript, que contém as configurações do compilador.

Entendendo a inicialização

Agora que entendemos os principais arquivos vamos entender como o Angular inicializa a aplicação. Vamos apagar tudo no arquivo app.component.html e vamos colocar o clássico <h1>Hello World!</h1>. Ao subir a aplicação novamente podemos ver a mudança.

Mas se temos um arquivo index.html que é a entrada da aplicação, por que o que colocamos no app.component é que aparece no navegador? Na verdade o que está acontecendo é:

1- Primeiro o Angular encontra o arquivo index.html, que contém no <body>, apenas um seletor que é o <app-root></app-root>. É nesse seletor que vai ser injetado o conteúdo principal da aplicação.

</h1>`. Ao subir a aplicação novamente podemos ver 
    <meta charset="utf-8" />
    <title>JornadaCoders</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

2 - O Angular define qual é o componente inicial da aplicação através da propriedade bootstrap no app.module.ts. Vamos entender esse módulo:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Um módulo é uma classe TypeScript decorada com a anotação NgModule. Nela agrupamos componentes, services, diretivas deixando tudo organizado e modularizado, pois em cada módulo, precisamos configurar apenas o que é preciso naquela parte da aplicação. Aqui vemos o módulo raiz então ele vai lidar com as configurações globais da aplicação como inicialização e importação de outros módulos que ficarão disponíveis globalmente. Ele possui algumas propriedades que são:

declarations:
- Aqui declaramos componentes, diretivas ou serviços desse mesmo módulo. Nesse caso o AppComponent.
imports:
- Aqui listamos os módulos que estamos importando, podendo assim usar seus componentes ou diretivas no nosso. Nesse caso só estamos importando o BrowserModule que é um módulo necessário para que nossa aplicação funcione em navegadores. Ele só precisa ser importado nesse módulo raiz.
providers:
- Aqui colocamos os serviços que serão fornecidos pelo módulo. Esses serviços ficarão disponíveis para injeção de dependência em todo o módulo e nos módulos que o importam. Nesse caso não temos nada então podemos deixar vazio.
bootstrap:
- E por fim, aqui colocamos os componentes que são carregados ao iniciar a aplicação. Devemos colocar essa propriedade apenas no módulo raiz. E essa é a propriedade responsável por injetar algo no seletor <app-root> do arquivo index.html. Nela estamos dizendo que o componente a ser carregado ao iniciar a aplicação é o AppComponent. Sendo assim o Angular vai injetar esse componente no <app-root>, e o que colocarmos no AppComponent vai ser mostrado no navegador.

E é assim que o Angular funciona. Ele parte do módulo principal para iniciar a aplicação e a partir dele, podemos criar outros módulos, páginas, componentes, serviços. Tudo vai sempre seguir essa estrutura modularizada e organizada tornando a construção e a manutenção de uma aplicação fácil, eficiente e concisa. Espero ter conseguido mostrar como é simples esse início e atiçado sua curiosidade. Te aguardo nos próximos artigos!

Como fazer Deploy de uma api com Json-Server

Ezequiel Otoni — Sun, 15 Oct 2023 21:05:55 +0000

Todo dev Front-End iniciante já ficou perdido na hora de fazer deploy de um projeto que dependia de uma fake api com Json-Server. Localmente é uma maravilha. Mas, e na hora de enviar pra um amigo, postar seu projeto no grupo da familia ou portfólio? Bom, nesse artigo, trago duas formas de fazer o deploy da sua api bem rápido e simples.

Sumário

Criando a Database
Configurando o Json-Server
Subindo a aplicação no Github
Deploy no Glitch
Deploy na Vercel

Criando a Database

Primeiro vamos criar uma pasta para iniciar nosso projeto. No seu editor de código favorito abra a pasta e crie um arquivo com o nome db.json que será sua database. Nesse arquivo cole ou crie seu arquivo json.

{
  "produtos": [
    {
      "nome": "Óculos de sol",
      "preco": "120,00",
      "id": 1
    },
    {
      "nome": "Calça",
      "preco": "60,00",
      "id": 2
    },
    {
      "nome": "Boné adidas",
      "preco": "85,00",
      "id": 3
    },
    {
      "nome": "Relógio",
      "preco": "350,00",
      "id": 4
    },
    {
      "nome": "Jaqueta",
      "preco": "90,00",
      "id": 5
    }
  ]
}

Agora nossa pasta está assim e o próximo passo é configurar o json-server.

Configurando o Json-Server

Primeiro vamos acessar o terminal e, dentro da pasta do projeto, dar o comando npm init -y para criarmos o arquivo package.json que terá todas as configurações. Ainda no terminal vamos instalar o Json-Server com o comando npm install json-server. Após a instalação serão gerados automaticamente um arquivo package-lock.json e a pasta node_modules. Para finalizar vamos criar, na raiz do projeto, o arquivo server.js e adicionar nele as configurações de conexão com o Json-Server.

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log('JSON Server is running')
});

Nos scripts do package.json, vamos adicionar a linha "start": "node server.js" que contém o comando pra iniciar a aplicação.

Se você fez tudo correto até aqui, sua pasta deve estar assim:

E assim seu arquivo package.json:

{
  "name": "exemplo-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.17.4"
  }
}

Caso queira, você pode editar o nome e adicionar uma descrição. Note que o json-server já aparece como dependência do projeto e o comando start já está na lista de scripts.
Para conferir se deu certo, no terminal digite o comando npm start e, se funcionar, teremos essa mensagem no console:

Ao acessar o endereço http://localhost:3000 já podemos ver a página de sucesso do json-server. E ao acessar o endpoint http://localhost:3000/produtos já é possível fazer um CRUD localmente.

Subindo a aplicação no Github

Agora vamos criar um repositório no github para o nosso projeto, fazer os commits e subir a aplicação. Mas antes, crie um arquivo .gitignore e adicione nele a pasta node_modules pois não é necessessário subir ela. Assim deve ficar o seu repositório.

Mais informações aqui.

Deploy no Glitch

O Glitch é uma plataforma gratuita para hospedagem de páginas e aplicações web. Você pode acessar criando uma conta com email ou automaticamente com sua conta do github. É bem simples.
Após fazer login, no canto superior direito, clique no botão new project e, depois no botão import from github. Cole o link do repositório do projeto na modal que vai abrir e espere o build ficar pronto. É super rápido.

Ao finalizar o build você verá a tela com todos os arquivos do projeto.
No cabeçalho, clique no botão share e então teremos acesso à url da nossa aplicação.

Pronto. Essa url já pode ser usada nos seus projetos com todas as funcionalidades do Json-Server!

Vale lembrar que, o glitch por ser grátis, demora uns segundos pra responder no primeiro acesso. Mas isso não vai atrapalhar sua aplicação.

Deploy na Vercel

Assim como o Glitch, a Vercel também é uma plataforma muito utilizada para páginas e aplicações web. Se você nunca usou para subir um projeto ou, quer criar uma conta, sugiro esse artigo da Angela Caldas sobre Como colocar um projeto no ar com Vercel.

Conta criada, vamos seguir com o deploy da nossa api. Para hospedar na vercel precisamos fazer uma alteração no nosso repositório. Vamos adicionar um novo arquivo na raiz do nosso projeto e commitar pro github. Garanta que o arquivo se chame vercel.json.

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["db.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]
}

Garanta que o nome do arquivo dentro de "includeFiles", seja o mesmo do arquivo de database do projeto. No nosso caso db.json. E agora nosso repositório está assim:

Feito isso, agora já podemos fazer o deploy na Vercel. Primeiro, no canto superior direito vamos clicar no botão Add New e, depois no link Project.

Em seguida, vamos procurar o nosso projeto na lista de respositórios e clicar no botão import. Na tela de build é possível editar o nome do projeto que vai estar na url da aplicação. Para finalizar vamos clicar no botão deploy. Agora é só aguardar o build ficar pronto.

Agora já temos a url da nossa api. Clique no banner e você será redirecionado para a tela de sucesso do Json-Server. E terá acesso a url da api para usar nos seus projetos com todas as funcionalidades do Json-Server!

Conclusão

Como vimos é bem fácil e rápido hospedar nossas apis de testes e estudos. Aqui eu trouxe duas alternativas simples e que resolvem o problema de quem precisa fazer requisições GET/PUT/POST/DELETE nas suas aplicações. Se você conhece alguma outra forma de hospedar uma aplicação, coloque nos comentários para ajudar a comunidade.

Grande abraço !!!