Como criar um aplicativo Angular?
O Angular é uma estrutura popular de código aberto para a criação de aplicativos da Web dinâmicos, responsivos e complexos. O Angular foi desenvolvido pela primeira vez pelo Google em 2010 com o nome “AngularJS”.
O Angular permite que você crie aplicativos dinâmicos de página única com uma estrutura de código limpa e organizada.
O Angular usa TypeScript, um superconjunto de JavaScript, que adiciona recursos como verificação de tipos, interfaces e classes à linguagem. Isso torna o código do Angular mais fácil de manter e menos propenso a erros.
Para otimizar o desenvolvimento da Web com o Angular, é útil usar uma solução Backend-as-a-Service (BaaS) como o Back4app.
O Back4app fornece uma infraestrutura de back-end pré-criada com recursos como autenticação, armazenamento de dados e lógica do lado do servidor.
Isso permite que você se concentre na criação do front-end de seus aplicativos sem se preocupar com as complexidades do desenvolvimento de back-end.
Neste artigo, você explorará o Angular e criará um aplicativo básico de blog usando o Angular e o Back4app.
Contents
Vantagens do Angular
O Angular ganhou popularidade entre os desenvolvedores devido às suas muitas vantagens. Aqui estão algumas das principais vantagens do Angular:
Vinculação de dados bidirecional
A vinculação de dados bidirecional é um recurso que economiza tempo e aumenta a produtividade, aprimorando a qualidade dos aplicativos Angular. A associação de dados bidirecional permite que as alterações no modelo (dados) sejam refletidas automaticamente na visualização (UI).
Qualquer alteração no modelo é imediatamente refletida na visualização. Isso torna o desenvolvimento de aplicativos complexos e dinâmicos mais fácil e rápido, eliminando a necessidade de escrever código padrão para sincronizar o modelo e a visualização.
Injeção de dependência
A injeção de dependência é um recurso crucial do Angular que facilita o gerenciamento de dependências entre componentes e serviços. A injeção de dependência é um recurso avançado que aumenta a confiabilidade, a capacidade de manutenção e a capacidade de teste dos aplicativos Angular.
A injeção de dependência no Angular permite que componentes e serviços declarem dependências de outros componentes e serviços. O sistema de injeção de dependência assume então a tarefa de criar e fornecer essas dependências automaticamente. Isso elimina a necessidade de criar e gerenciar dependências manualmente, reduzindo o risco de erros.
O sistema de injeção de dependência do Angular facilita o gerenciamento de dependências e reduz a quantidade de código que você precisa escrever.
Arquitetura baseada em componentes
A arquitetura baseada em componentes do Angular facilita a criação de interfaces de usuário complexas, dividindo-as em componentes menores e reutilizáveis.
Os componentes podem ser facilmente reutilizados em diferentes partes do aplicativo. Os componentes podem ser desenvolvidos de forma independente, facilitando o gerenciamento de aplicativos complexos com muitas partes móveis. Essa arquitetura também facilita o teste e a depuração do código, pois os componentes podem ser isolados e testados separadamente.
TypeScript
O TypeScript é um superconjunto do JavaScript que adiciona verificação estática de tipos, interfaces, classes e outros recursos à linguagem. É uma linguagem de código aberto mantida pela Microsoft e é uma escolha popular para o desenvolvimento de aplicativos da Web de grande escala.
O Angular é escrito em TypeScript. Isso proporciona melhores ferramentas e uma experiência de desenvolvimento mais robusta. A tipagem estática do TypeScript permite que os desenvolvedores detectem erros no tempo de compilação em vez de no tempo de execução, facilitando a manutenção e a refatoração do código.
Comunidade grande
O Angular tem uma comunidade grande e ativa de desenvolvedores, que pode ser incrivelmente valiosa por vários motivos.
Uma grande comunidade oferece muitos recursos, como tutoriais, documentação e fóruns. Esses recursos podem ser extremamente úteis para desenvolvedores iniciantes em Angular ou que estejam procurando soluções para problemas específicos.
Uma grande comunidade significa que muitos desenvolvedores estão trabalhando ativamente para aprimorar a estrutura, criando e compartilhando plug-ins e extensões de terceiros para o Angular. Isso pode economizar tempo e esforço, pois você pode aproveitar o código existente para adicionar novas funcionalidades aos seus projetos.
Limitações do Angular
Embora o Angular seja uma estrutura avançada e popular para a criação de aplicativos da Web, ele tem algumas limitações das quais você deve estar ciente. Algumas das limitações do Angular são as seguintes:
Curva de aprendizado acentuada
O Angular pode ser um desafio para alguns desenvolvedores devido ao fato de introduzir muitos conceitos e abordagens novos no desenvolvimento da Web. Talvez você precise dedicar um tempo significativo para aprender sobre módulos, componentes, serviços, injeção de dependência e programação reativa.
Tamanho grande
O Angular é uma estrutura relativamente grande em comparação com outras estruturas de front-end. O tamanho grande do Angular se deve principalmente ao seu amplo conjunto de recursos, que inclui muitas funcionalidades incorporadas, como manipulação de formulários, roteamento e gerenciamento de dados.
O tamanho grande do Angular pode resultar em tempos de carregamento mais lentos para aplicativos da Web, o que pode afetar negativamente a experiência do usuário. Isso é particularmente verdadeiro para usuários com conexões lentas à Internet.
O tamanho grande do Angular pode tornar o desenvolvimento e a manutenção de projetos complexos mais desafiadores.
SEO limitado
Os recursos limitados de SEO do Angular se devem principalmente ao fato de ele ser uma estrutura de aplicativo de página única (SPA). Os SPAs são projetados para serem executados inteiramente no navegador, o que significa que o código HTML é gerado dinamicamente usando JavaScript. Isso dificulta que os rastreadores dos mecanismos de pesquisa indexem com precisão o conteúdo de um site com Angular.
Criação do aplicativo de blog
Crie um aplicativo Angular e nomeie-o “blog-application”. Para criar o aplicativo do Angular, execute o seguinte comando no diretório do seu projeto em seu terminal:
ng new blog-application
Depois de criar seu aplicativo Angular, você criará dois componentes. Os dois componentes serão os componentes home e post. Depois de criar os componentes, você os roteará.
Para gerar os componentes, execute os seguintes comandos:
cd blog-application
ng generate component home-component
ng generate component post-component
Depois de gerar os componentes, configure o roteamento deles no arquivo app-routing.module.ts.
Assim:
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
O bloco de código acima define duas rotas na matriz de rotas. A rota para o HomeComponentComponent tem um caminho vazio. O caminho vazio significa que o HomeComponentComponent será exibido assim que você renderizar o aplicativo.
A rota PostComponentComponent é definida com um caminho de “post”, o que significa que, quando você navegar até essa rota, o PostComponentComponent será renderizado e exibido na visualização.
Para navegar até as rotas especificadas, você adicionará um cabeçalho ao seu aplicativo. Você criará o cabeçalho no arquivo app-component.html. O cabeçalho conterá elementos que levam às diferentes rotas.
Por exemplo:
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
A div do cabeçalho contém dois elementos âncora filhos. Os elementos de âncora envolvem um elemento h2 e um elemento de botão. Ao clicar no h2, você navega para a rota padrão, enquanto ao clicar no elemento de botão, você navega para a rota de postagem. O roteador-outlet exibe os componentes roteados sob a div do cabeçalho.
Depois de criar o cabeçalho, você o estiliza no arquivo app-compnent.scss:
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
Integração do Back4App
Para começar a criar um aplicativo com a Back4app, primeiro, verifique se você tem uma conta. Se você não tiver uma conta no Back4app, siga as instruções fornecidas:
- Acesse o site do Back4app.
- Localize o botão Inscrever-se na seção superior direita da página inicial e clique nele.
- Preencha o formulário de registro e envie-o.
Depois de se registrar com sucesso, faça login na sua conta Back4app e proceda da seguinte forma:
- Localize o botão NOVO APLICATIVO no canto superior direito e clique nele.
- Você será direcionado a um formulário no qual digitará o nome do aplicativo desejado.
- Digite o nome do aplicativo e selecione o botão CREATE para iniciar o processo de criação do aplicativo.
Depois de clicar no botão “CREATE” (Criar), seu aplicativo será gerado e você será direcionado para o painel do aplicativo.
Como conectar seu aplicativo ao Back4app
Para conectar seu aplicativo Angular ao aplicativo Back4app que você criou, é necessário instalar o Parse JavaScript SDK.
Instale o SDK executando um dos comandos abaixo, dependendo do seu gerenciador de pacotes:
#using npm
npm install parse
or
#using yarn
yarn add parse
Depois de instalar o Parse JavaScript SDK, você deve obter o ID do aplicativo e a chave JavaScript. Você precisará deles para conectar seu aplicativo Angular ao aplicativo Back4app.
Para recuperar o ID do aplicativo e a chave JavaScript do Back4app, navegue até a seção Segurança e chaves selecionando Configurações do aplicativo no painel. Lá, você pode acessar facilmente as chaves necessárias para conectar seu aplicativo Angular ao Back4app.
Depois de recuperar o ID do aplicativo e a chave JavaScript, armazene-os de forma segura em seu aplicativo.
Em seu arquivo app.component.ts, importe a versão reduzida do Parse a partir do parse. Em seguida, chame o método initialize no Parse. O método initialize usa o ID do aplicativo e a chave JavaScript como argumentos. Por fim, defina o serverURL no Parse como“https://parseapi.back4app.com/”.
Depois de fazer isso, seu arquivo app.component.ts deverá ter a seguinte aparência:
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
Como adicionar dados ao seu aplicativo Back4app
Para adicionar dados ao seu aplicativo Back4App, você criará um formulário para receber dados de um usuário. Ao enviar o formulário, você executará uma função handleSubmit. A função handleSubmit conterá a lógica para adicionar uma nova postagem do seu aplicativo de blog ao aplicativo Back4app.
Assim:
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
O bloco de código acima é o arquivo post-component.component.ts**.** A função handleSubmit cria um novo objeto Parse Post e define sua propriedade title como o valor da propriedade data.title e a propriedade body como a propriedade data.body. Por fim, ela salva as propriedades do objeto Post no servidor Parse usando Post.save().
As propriedades de dados obterão seus valores de um usuário por meio de um formulário. Para fazer isso, você criará um formulário no arquivo post-component.component.html.
Assim:
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
O ngModel vincula os valores dos campos de entrada title e body às propriedades de dados. O ngSubmit lida com o envio do formulário chamando a função handleSubmit declarada no arquivo post-component.ts.
Em seguida, você estilizará seu componente. No arquivo SCSS do componente post, insira o seguinte código:
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
Obtenção de dados do Back4app
Para obter dados do seu aplicativo Back4app, crie uma consulta Parse para a classe da qual você deseja obter dados. A consulta será executada no gancho do ciclo de vida ngOnInit.
Por exemplo:
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
O bloco de código acima procura um objeto “Post” no banco de dados do seu aplicativo Back4app usando o método Parse.Query(). Em seguida, ele retorna uma matriz que contém os resultados da consulta, chamando o método find do Parse SDK no resultado da chamada Parse.Query(). Por fim, ele atribui a matriz retornada à variável de dados.
Usando a matriz de dados, você renderizará seu modelo HTML:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
A diretiva ngFor percorre a matriz e gera os elementos HTML envolvidos em sua div. O método post.get() recupera os valores das propriedades title e body dos atributos em seu banco de dados Back4App.
Agora você pode estilizar seu componente adicionando o seguinte código no arquivo SCSS do componente:
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
Exclusão de dados do aplicativo Back4app
Para excluir dados do seu aplicativo Back4App, use o método destroy para remover o(s) registro(s) correspondente(s) do seu banco de dados. Você criará uma função deletePost em seu arquivo home-component.component.ts. A função deletePost conterá a lógica para excluir publicações do banco de dados do aplicativo Back4app com base em um determinado ID.
Assim:
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
O bloco de código acima cria um novo objeto Post usando o método Parse.Object.extend. Em seguida, ele define a propriedade id do objeto Post como o parâmetro id passado para a função.
Em seguida, ele chama o método destroy do objeto Post para excluir a postagem com o ID fornecido do banco de dados do Back4app. Em seguida, ele filtra a matriz de dados e retorna uma nova matriz newData, com todas as publicações, exceto a publicação excluída. O array newData é então atribuído à variável data.
Depois de definir a função deletePost no arquivo home-component.component.ts, você vinculará a função ao botão delete no arquivo HTML do componente usando o evento click.
Seu arquivo home-component.component.html deve ter a seguinte aparência:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
Por fim, adicione alguns estilos globais ao aplicativo acrescentando o bloco de código abaixo ao seu arquivo styles.scss:
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
Teste do aplicativo
Para testar o aplicativo, abra o terminal do seu projeto e execute o comando abaixo:
ng serve
O comando acima compila o aplicativo e o hospeda em um servidor local em http://localhost:4200 por padrão.
Quando seu aplicativo for iniciado, você verá a interface do usuário mostrada na imagem abaixo:
Ao clicar no botão de gravação, você será direcionado para o componente de postagem. O componente post contém um formulário com campos de entrada e um botão.
O pós-componente teria a seguinte aparência:
Depois de preencher os campos de entrada, clicar no botão de publicação adicionaria os valores de entrada ao banco de dados do Back4app. Para confirmar isso, você pode verificar o painel do aplicativo Back4app ou simplesmente redirecionar de volta para a página inicial do aplicativo.
Clicar no botão excluir excluirá uma publicação. Por exemplo, exclua a postagem “O que é um leão?” clicando em seu botão de exclusão:
Conclusão
O Angular é uma estrutura avançada para a criação de aplicativos da Web dimensionáveis e robustos. Ele apresenta uma arquitetura modular, uma poderosa vinculação de dados e vários componentes pré-construídos. Seus benefícios incluem o aumento da produtividade do desenvolvedor, um processo de desenvolvimento simplificado e a capacidade de criar interfaces de usuário dinâmicas, responsivas e de alto desempenho.
A criação de um aplicativo Angular com a Back4app como uma solução Backend-as-a-Service pode simplificar e acelerar muito o desenvolvimento. Com a infraestrutura pré-construída da Back4app, você pode se concentrar na criação do front-end do seu aplicativo sem se preocupar com as complexidades do desenvolvimento de back-end, como autenticação e armazenamento de dados.
