Introdução ao Angular com foco em Desenvolvimento Mobile: Construção de uma tela inicial do aplicativo Santander
Introdução
Ao longo do artigo serão apresentados conceitos introdutórios relacionados à tecnologia Angular, assim como suas formas de uso para o desenvolvimento de aplicativos mobile. Será também apresentada uma revisão acerca do conteúdo que foi abordado no primeiro dia do evento Santander Dev Week de 2023, que tratou da utilização das tecnologias Angular e TypeScript para a construção da tela inicial de um aplicativo, tomando como estudo de caso o aplicativo do banco Santander.
Angular: o que é?
De acordo com o guia elaborado pela própria comunidade do Angular (2022) trata-se de uma plataforma de desenvolvimento feita em TypeScript, que inclui:
- um framework baseado em componentização (termo utilizado para se referir à utilização de componentes: blocos de código que ao serem executados formam um recurso completo que compõe uma aplicação);
- uma coleção de bibliotecas integradas que cobrem uma grande variedade de recursos, como por exemplo gerenciamento de formulários e comunicação cliente-servidor; e
- um conjunto de ferramentas que auxiliam no desenvolvimento, teste e atualização de códigos.
Na imagem a seguir, pode-se observar um exemplo de componente criado através do framework, que foi retirado do guia elaborado pela comunidade do Angular (disponível no site oficial), e pode ser executado no navegador ou pode também ser baixado para ser executado no ambiente de desenvolvimento de preferência.
Imagem 1: Execução de código correspondente a um componente feito em Angular. Disponível em: https://angular.io/guide/what-is-angular.
O Angular usa a arquitetura Model-View-Controller (MVC), que é utilizado no desenvolvimento de aplicações para a internet. Segundo Longen (2023), a arquitetura MVC corresponde a:
- Model (Modelo) – estrutura de dados que gerencia a informação e recebe os comandos do controle.
- View (Visão) – representa a informação.
- Controller (Controle) – responde aos comandos e interage com o modelo.
Trazendo essa arquitetura para o contexto do Angular, o modelo é o framework, a visão é o HTML e o controle é o JavaScript. O framework combina o HTML e JavaScript, tornando o código sincronizado, o que traz mais praticidade para os desenvolvedores ao reduzir a quantidade de código necessária para escrever uma sintaxe.
Imagem 2: Representação da arquitetura MVC. Disponível em: https://helloacm.com/model-view-controller-explained-in-c/.
Angular para Desenvolvimento Mobile
Tratando de desenvolvimento de aplicações mobile, o Angular pode ser utilizado nesse sentido para promover a reutilização de códigos front-end, o que faz com o que o desenvolvedor trabalhe de forma mais rápida e ágil. Segundo Koffer (2022), o desenvolvimento de um aplicativo mobile pode ser feito em Angular usando algumas combinações, como por exemplo:
Angular e NativeScript
NativeScript é um framework lançado em 2014, que permite o desenvolvimento de aplicações mobile para Android e iOS utilizando JavaScript e CSS. De acordo com a documentação oficial do próprio framework, a combinação entre Angular e NativeScript resulta em uma arquitetura que oferece a possibilidade de criar aplicativos móveis usando a mesma estrutura - e em alguns casos o mesmo código - que você usa para criar aplicativos da web Angular, com o desempenho esperado do código nativo.
Angular e IONIC
IONIC é um framework criado em 2013 para o desenvolvimento de aplicações mobile híbridas. Além do Angular, o Ionic permite a integração também com outras tecnologias em JavaScript, como React e Vue. De acordo com Passos (2018), o IONIC oferece alguns recursos como: Ionicons (uma biblioteca composta por mais de 700 ícones para sua aplicação), Platform Continuity (permite que os componentes disponíveis pelo IONIC se adaptem e mudem a aparência de acordo com o sistema operacional do dispositivo), Ionic View (uma solução que permite testar a aplicação entre diversos dispositivos), entre outros.
Santander Dev Week: Construção de uma tela inicial do app Santander em Angular com TypeScript
No dia 24 de julho de 2023, a DIO transmitiu uma live através do YouTube correspondente ao primeiro dia do evento Santander Dev Week, que teve como principal abordagem o seguinte tema: a construção de uma tela inicial de aplicativo para o banco Santander utilizando as tecnologias Angular e TypeScript.
A live foi ministrada pelo tech educator Felipe Aguiar, que iniciou com uma breve introdução ao Angular e uma exemplificação do código que seria trabalhado durante o percurso. O ambiente de desenvolvimento utilizado para demonstrar o funcionamento do código foi o Visual Studio Code.
Por que utilizar o Angular e não React ou Vue?
De acordo com Felipe, tanto Angular quanto os frameworks React ou Vue compartilham dos mesmos conceitos (componentização e hooks, por exemplo). Os três frameworks possuem o mesmo objetivo, porém operam de maneiras diferentes. A escolha fica a critério do desenvolvedor e vai depender da sua familiaridade com eles.
Tratando do Angular, pode-se comparar o mesmo a uma espécie de “canivete suíço” para front-end, por suas mais diversas funcionalidades. Outro ponto positivo do Angular é a sua organização: com poucos comandos são criadas várias pastas, tornando o processo de desenvolvimento mais automatizado e prático.
Projeto em Angular e TypeScript
Durante a live, foi apresentado o link de um repositório do GitHub contendo um exemplo de projeto criado em Angular e TypeScript. O projeto serviu como base para exemplificar a integração entre as duas tecnologias para a criação de uma tela inicial de aplicativo.
Imagem 3: Repositório do projeto de tela inicial do Santander. Disponível em: https://github.com/digitalinnovationone/santander-dev-week-angular-home.
Na estrutura do repositório, pode-se observar vários arquivos de nomenclaturas e extensões diversas. A estrutura de arquivos apresentada na imagem anterior pode ser baixada automaticamente ao iniciar um projeto em Angular. Para rodar o Angular pela primeira vez no computador, é necessário seguir alguns passos, que podem ser encontrados na documentação oficial do Angular.
Imagem 4: Diretrizes para configuração do Angular. Disponível em: https://angular.io/guide/setup-local.
Os arquivos de nomenclatura “tsconfig” se tratam de arquivos TypeScript. A função do TypeScript é incrementar os arquivos JavaScript, e os arquivos determinam como o TypeScript deve se comportar dentro do projeto.
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.d.ts"
]
}
Conteúdo do arquivo “tsconfig.app.json”.
Os arquivos de nomenclatura “package.json” correspondem a configurações do Node e servem para controlar as dependências do projeto. Dentro do arquivo “package.json” é possível identificar a existência de scripts, que são necessários para rodar o projeto.
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
}
Scripts presentes no arquivo “package.json”.
O arquivo “angular.json” corresponde às configurações do Angular.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"santander-client": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/santander-client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "santander-client:build:production"
},
"development": {
"browserTarget": "santander-client:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "santander-client:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/assets/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": false
}
}
Conteúdo do arquivo “angular.json”.
O arquivo “.editorconfig” é de extrema importância, pois serve para padronizar as configurações do projeto independentemente da quantidade de desenvolvedores que estiverem trabalhando no mesmo. Algumas das configurações incluem tamanho de indentação, estilo de indentação e espaçamento.
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
Exemplo de configuração de projeto no arquivo “.editorconfig”.
O primeiro passo de demonstração de código realizado na live foi a edição do “app.component.html”, que está localizado dentro da pasta “app” no projeto, que foi editado após a execução do comando “ng generate component components/card” no terminal Node (Visual Studio Code). A função desse comando é criar os arquivos necessários para a criação de componentes dentro do projeto e edição deles em HTML, CSS e JavaScript. No caso desse comando em específico, o componente escolhido foi o “card”.
ng generate component components/card
Comando utilizado para dar início ao processo de componentização.
A partir do comando anterior, um dos arquivos que foi gerado é o “card.component.ts”, que representa o interior do componente “card” e serve para estilizá-lo uma única vez, fazendo com que o arquivo “index.html” se torne menos extenso. Sua estrutura pode ser observada a seguir.
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-card’,
templateUrl: ‘./card.component.html’,
styleUrls: [‘./card.component.css’]
})
export class CardComponent {
}
Estrutura do arquivo “.card.component.ts”.
Podem ser criados vários componentes, de acordo com a necessidade do projeto. Para esse projeto em específico, foram criados quatro componentes para compor a tela inicial do aplicativo, sendo eles header, home, carrossel e card. A edição do componente header, por exemplo, é feita dentro dos arquivos “header.component.html” e “header.component.css”, conforme apresentado a seguir.
<header>
<div class=”logo”>
<app-logo-white logoWidth=”180”/>
</div>
<div class="search-box">
<div class="search-box-text">
<input
type="text" id="search-box-input"
placeholder="Digite aqui sua busca">
<app-search-logo/>
</div>
</div>
<div class="icons-box">
<app-bell-icon/>
<app-user-icon/>
</div>
</header>
Fragmento do arquivo “header.component.html”.
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 72px;
background-color: #E31918;
color: #fff;
padding: 2px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
Fragmento da estrutura inicial do arquivo “header.component.css”.
Ao ser executado, o resultado no navegador após a estilização do componente header foi o seguinte:
Imagem 5: Demonstração do componente “header” no navegador. Disponível em: https://www.youtube.com/watch?v=ZGTzsRuh464&t=150s&ab_channel=DIO.
A mesma lógica foi aplicada para os outros componentes, cada um deles foi editado e estilizado utilizando seus respectivos arquivos de HTML e CSS.
Após a componentização do projeto, foi criada a pasta “services”, localizada dentro da pasta “app”. Logo após a criação da pasta foi executado o comando “ng generate service” dentro do terminal no Visual Studio Code. O comando tem como objetivo criar uma função para servir dados e consumir uma API, e a partir dele foi criado o arquivo de TypeScript “cards.service.ts”.
ng generate service services/cards
Comando utilizado para criar uma função de serviço.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../environments/environments';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CardsService {
private apiURL = environment.API_URL
constructor(private http: HttpClient) { }
getCard(): Observable<any>
return this.http.get<any>(this.apiURL)
}
Conteúdo do arquivo “cards.service.ts”.
Após a realização da componentização e a criação dos arquivos necessários para o consumo da API e entrada de dados, o resultado da tela inicial criada durante a live pode ser observado na imagem a seguir.
Imagem 6: Tela inicial do aplicativo Santander criada durante o primeiro dia do evento Santander Dev Week. Disponível em: https://www.youtube.com/watch?v=ZGTzsRuh464&t=150s&ab_channel=DIO.
Conclusão
Durante a leitura foi possível ter um panorama do Angular, suas características no desenvolvimento de aplicações mobile, seus diferenciais em relação a outros frameworks, e foi possível também observar um exemplo do framework em execução juntamente com arquivos na linguagem TypeScript, para o projeto de desenvolvimento de uma tela inicial de aplicativo do banco Santander.
Conclui-se através do projeto que algumas características que tornam o Angular especialmente interessante para o uso em desenvolvimento mobile são: a possibilidade de componentização, que torna o código mais organizado e diminui o tempo de trabalho, otimizando qualquer projeto; e a organização automatizada dos arquivos e pastas, que torna o fluxo de trabalho mais fluido, podendo dessa forma ser um grande aliado na metodologia Clean Code.
Referências
DIO. Santander Dev Week 2023: Construa a tela inicial do app Santander em Angular com TypeScript. Disponível em: https://www.youtube.com/watch?v=ZGTzsRuh464&ab_channel=DIO. Acesso em: 24 jul. 2023.
Angular. What is Angular? 28 fev. 2022. Disponível em: https://angular.io/guide/what-is-angular. Acesso em: 30 jul. 2023.
LONGEN, Andrei. O Que é Angular? Guia para Iniciantes. 01 fev. 2023. Disponível em: https://www.hostinger.com.br/tutoriais/o-que-e-angular. Acesso em: 30 jul. 2023.
Algorithms, Blockchain and Cloud. Model-View-Controller Explained in C++. 24 jan. 2017. Disponível em: https://helloacm.com/model-view-controller-explained-in-c/. Acesso em: 30 jul. 2023.
KOFFER, Peter. Angular mobile app development: is it a good decision? 29 set. 2022. Disponível em: https://mdevelopers.com/blog/angular-mobile-app-development-is-it-a-good-decision-. Acesso em: 30 jul. 2023.
NativeScript Docs. NativeScript Angular. Disponível em: https://v6.docs.nativescript.org/ng-api-reference/#explore-the-examples. Acesso em: 31 jul. 2023.
PASSOS, Clayton. O que é o IONIC? 14 fev. 2018. Disponível em: https://medium.com/codigorefinado/oque-%C3%A9-o-ionic-4f8c7b94c51b. Acesso em: 31 jul. 2023.
