Mat Bob 2 Parcial

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS
Desenvolvimento Mobile
O desenvolvimento mobile é o processo de criar e implementar aplicativos e softwares

para dispositivos móveis, como smartphones e tablets.
Crescimento do uso de apps mobile
O crescimento de aplicativos mobile tem sido exponencial. Em 2019, havia cerca de 2,8
milhões de aplicativos disponíveis na Google Play Store e 2,2 milhões na Apple App
Store. Em 2020, o número de downloads de aplicativos mobile em todo o mundo foi de
218 bilhões.
Exercício em sala
1 – Pesquisar sobre as arquiteturas dos dois sistemas operacionais (Android e

IOS), verificar as camadas e finalidade de cada uma.
2 – Pesquisar sobre cada versão dos dois sistemas operacionais, características e
evolução.
Após o exercício haverá um bate-papo sobre o que foi pesquisado e lido.
Android
Android é um sistema operacional baseado no Linux (usa o kernel do linux) que funciona
em dispositivos móveis, como smartphones e tablets. Ele é desenvolvido pela Open
Handset Alliance, um consórcio de empresas que tem o Google como principal
colaborador.
VERSÕES DO ANDROID
==> Android 1.0
Lançado em 23 de setembro de 2008, porém efetivamente utilizado em 22 de outubro do

mesmo ano, com o lançamento do HTC Dream, o primeiro dispositivo móvel a funcionar
nesta plataforma.
Funcionalidades:
● Barra de Notificações.
● Widgets na Tela Inicial - Os desenvolvedores não poderiam criar widgets ainda.
● Integração com os Aplicativos Google: Gmail, Maps, Youtube, etc.
● Outros Aplicativos: Alarme, Calculadora, Galeria, etc.
● Suporte Wi-fi e Bluetooth.
● Android Market.
● Pequena lista de apps e sem suporte para aplicativos pagos.
● Web Browser.
● Suporte para HTML e XHTML.
==> Android 1.1 – Petit Four
Em 9 de fevereiro de 2009, a atualização Android 1.1 foi lançada, inicialmente para o HTC
Dream. O Android 1.1 era conhecido como "Petit Four" e menos como "Banana Bread"
internamente, embora esses nomes não tenham sido usados oficialmente.
Os principais recursos desta versão foram:
● Capacidade de salvar anexos.

● Detalhes sobre empresas pesquisadas no Google Maps.
● Tempo maior de chamadas feitas pelo viva-voz.
==> Android Cupcake
Em 27 de Abril de 2009 foi lançada esta versão. Foram inseridas nela as funções de
teclado digital e gravações de vídeo.
==> Android Donut
Foi lançado em 15/09/2009. Foi inserido o recurso de suporte à CDMA.
==> Android Eclair (2.0 e 2.1)
Foi lançado em 11 de Janeiro de 2010. Trouxe suporte a Flash na Câmera e permitiu

usar-se mais de uma conta da Google no mesmo dispositivo.
==> Android Froyo
Foi lançado em 20 de Maio de 2010. Permitiu a visualização de gif nos navegadores.

Também é possível armazenar aplicativos diretamente no cartão de memória.
==> Android Gingerbread
Foi lançado em 6 de dezembro de 2010.
Novos recursos:
● Copiar e colar o texto.
● Fácil localização de download.
==> Android Honeycomb
● Seu lançamento foi em 15 de Julho de 2011.

● O sistema tem responsividade para telas maiores como tablets.
● Novo layout para tela inicial.
==> Android Ice Cream Sandwich
● Seu lançamento foi em 16 de Dezembro de 2011.

● Introdução a fonte Roboto.
● Novo gerenciador de contatos.
● Limitação do uso dos dados móveis.
==> Android Jelly Bean
● Seu lançamento foi em 24 de Julho de 2013.

● Melhorias no sistema de notificação.
● Novo relógio redesenhado.
● Novo sistema de proteção de tela.
==> Android Kit Cat
● Seu lançamento foi em 25 de Junho de 2014.

● Interface atualizada com elementos brancos em vez de azuis.
● Capacidade de impressão sem fio.
● O relógio não mostra mais horas em negrito; todos os dígitos são finos.
==> Android Lollipop
● Seu lançamento foi em 2 de Março de 2015.

● As pesquisas podem ser realizadas nas configurações do sistema para acesso
mais rápido a configurações específicas.
● Adição de 15 novos idiomas.
● O aplicativo lanterna está incluso, funcionando em dispositivos compatíveis com
flash de câmera.
==> Android Marshmallow
● Seu lançamento foi em 2 de Outubro de 2015.

● Barra de pesquisa e favoritos do aplicativo.
● Nenhuma rotação da tela durante o toque.
● Pressione duas vezes o botão liga / desliga para abrir a câmera.
==> Android Nougat
● Seu lançamento foi 4 de Outubro de 2016.

● Funcionalidade Doze aprimorada, que visa prolongar a vida útil da bateria.
● Novo modo de economia de dados, que pode forçar os aplicativos a reduzir o uso
de largura de banda.
==> Android Oreo
● Seu lançamento foi 5 de Dezembro de 2017.

● Inicialização rápida.
● Novos Emojis.
● Recurso autocompletar.
==> Android Pie
● Seu lançamento foi em 6 de Agosto de 2018.

● O relógio foi movido para a esquerda da barra de notificação.
● Controle deslizante de volume redesenhado.
● A Economia de bateria não mostra mais uma sobreposição laranja nas barras de
notificação e status.
●
==> Android Quince Tart
● Seu lançamento foi 3 de Setembro de 2019.

● Modo noturno.
● Pode-se definir quais aplicativos terão acesso à sua localização.
==> Android Red Velvet
● Seu lançamento foi em 8 de Setembro de 2020.

● Novos controles de permissões.
● Pode-se conectar o celular ao carro sem cabo.
==> Android Snow Cone
● Seu lançamento foi 4 de Outubro de 2021.

● Opção de escolha de localização precisa ou aproximada.
● Pesquisas mais amplas - Além de fazer buscas na internet, a nova caixa de
pesquisa do sistema operacional procura apps instalados.
==> Android Tiramisu
● Seu lançamento foi em 15 de Agosto de 2022.

● Os aplicativos agora são obrigados a solicitar permissão do usuário antes de
poderem enviar notificações.
● A possibilidade de combinar a cor dos ícones de aplicativos com o plano de fundo
do celular.
==> Android Upside Down Cake
● Previsão de lançamento para o segundo semestre de 2023.
==> Android Vanilla Ice Cream
● Previsão de lançamento para 2024.

ARQUITETURA DO SISTEMA OPERACIONAL ANDROID
Camada Applications
Essa camada conta com diversos tipos de aplicações (cliente de e-mail, calendário,
mapas, browser, serviço SMS, agenda de contatos, etc).
Camada Applicationn Framerowrk
É nela que estão programadas as funções básicas do telefone, que serão utilizadas na
camada Applications. Interliga os aplicativos da camada Applications aos componentes
dos níveis mais baixos.
A camada Application Framework é uma camada do sistema operacional que gerencia as

funções básicas de um dispositivo Android, como gerenciamento de recursos,
gerenciamento de chamadas.
Libraries
Na camada de libraries (bibliotecas), temos as bibliotecas de sistema, normalmente

escritas em C e C++, e que são utilizadas para o bom funcionamento do sistema
operacional.
Android Runtime
A camada Android Runtime (ART) é responsável por executar aplicativos em dispositivos.

Cada aplicativo é executado em seu próprio processo.
Linux Kernel
O kernel do Linux é a base do sistema operacional Android porque ele fornece os

recursos de baixo nível necessários para o funcionamento do sistema. Isso inclui o
gerenciamento de memória, processos, drivers de dispositivos e segurança.
IOS
O iOS é um sistema operacional desenvolvido pela Apple exclusivamente para

dispositivos da marca.
VERSÕES DO IOS
==> IOS 1 – Lançamento: 15/07/2008
Funcionalidades: O iOS foi o primeiro sistema operacional a introduzir o uso dos dedos
para gerenciar a interface, dispensando o uso de canetas. A interação direta com a tela
permitiu a criação de gestos como “pinçar” para ampliar ou reduzir o conteúdo exibido na
tela.
Uma das principais novidades foi a possibilidade de adquirir músicas diretamente pelo
celular, por meio do aplicativo do iTunes.
Essa primeira versão do iOS foi responsável por oferecer múltiplas funcionalidades ao
celular, como conexão Wi-Fi, apps e e-mail. Até aquele momento, o aparelho era utilizado
apenas para enviar mensagens de texto e fazer ligações.
==> IOS 2 – Lançamento: 27/01/2009
Esta foi a primeira versões do iOS a incluir a App Store, que possibilita o download de
diversos aplicativos produzidos pela Apple.
==> IOS 3 – Lançamento: 02/02/2010
Apresenta novidades como a função copiar e colar, gravação e edição de vídeos no

celular.
==> IOS 4 – Lançamento: 22/11/2010
Trouxe mudança da imagem de fundo, opção para desativar a rede de dados da

operadora .
==> IOS 5 – Lançamento: 07/05/2012
Trouxe a integração do smartphone com o sistema de armazenamento na nuvem da

marca, o iCloud. Neste ano, a Siri chegou como assistente de voz.
==> IOS 6 – Lançamento: 21/02/2014
Atualização da interface. Inserção do recurso não perturbe.
==> IOS 7 – Lançamento: 30/06/2014
Nessa versão chegaram recursos como ajuste de brilho, acesso rápido à câmera, às
ligações e a outras funções do sistema.
==> IOS 8 – Lançamento: 13/08/2015
Trouxe várias ferramentas de edição de imagens e diversas melhorias ao aplicativo de

mensagens, que ganhou funções como envio de áudio, localização, criação e
gerenciamento de grupos.
==> IOS 9 – Lançamento: 16/09/2015
Veio com a proposta de ser um sistema mais seguro.

Houve otimização do uso da bateria e upgrades na criptografia.
==> IOS 10 – Lançamento: 13/09/2016
A Apple trouxe um novo design para a tela de bloqueio.

App de Telefone identifica chamadas indesejadas.
Assistente virtual Siri mais inteligente.
==> IOS 11 – Lançamento: 09/07/2018
Esta versão trouxe atualizações como desbloqueio por reconhecimento facial, suporte à
tecnologia de realidade aumentada.
==> IOS 12 – Lançamento: 17/09/2018

Prometia executar apps 50% mais rápido que as anteriores. Com ela, também chegou a
funcionalidade dual chip nos aparelhos da Apple.
==> IOS 13 – Lançamento: 01/09/2020
Tema escuro; o usuário poderá visualizar a lista de dispositivos Bluetooth disponíveis.
==> IOS 14 – Lançamento: 16/09/2020
O iOS 14 trouxe a biblioteca de aplicativos, que organiza automaticamente os apps em

pastas, facilitando a navegação.
Nessa versão, foi implementada uma interface mais leve.
==> IOS 15 – Lançamento: 20/09/2021
Um dos grandes focos do iOS 15 foi a privacidade. A Apple está determinada a reforçar a
segurança dos dados dos usuários, dando-lhes mais controle sobre suas informações.
Recurso permite que usuários possam copiar texto dentro de uma foto, imagem da web
ou captura de tela, tornando mais fácil anotar números de telefone, endereços e mais.
==> IOS 16 – Lançamento: 12/09/2022
Personalização de data e hora na tela bloqueada, personalizar tela bloqueada com cores.
ARQUITETURA DO IOS
A arquitetura do IOS é dividida nas seguintes camadas:

A camada do Cocoa Touch também é conhecido como a camada de aplicativo que atua
como uma interface para o usuário trabalhar com o sistema operacional iOS. Ele suporta
eventos de toque e movimento e muitos outros recursos.
A camada de Mídia fornece recursos para trabalhar com áudio, vídeo e gráficos. Ela inclui
frameworks para reprodução e gravação de mídia, processamento de imagens e
renderização de gráficos.
A camada do Core Services fornece serviços essenciais para o funcionamento dos

aplicativos, como gerenciamento de rede, gerenciamento de arquivos e suporte a banco
de dados. Ela também inclui frameworks para autenticação de usuários, criptografia e
gerenciamento de contatos.
A camada do Core OS é a base da arquitetura do iOS e fornece acesso aos recursos de

baixo nível do sistema operacional, como gerenciamento de memória, gerenciamento de
processos e segurança. Ela também inclui drivers de dispositivo e frameworks para
comunicação com hardware.
O que é o desenvolvimento híbrido?
Desenvolvimento mobile híbrido é a mistura de tecnologias Web, como HTML5, Javascript

e CSS, em conjunto com algum framework que tenha acesso às funções nativas do
aparelho, como transcrição automática, câmera, por exemplo. Enquanto os aplicativos
nativos são desenvolvidos apenas para uma plataforma especificamente, os aplicativos
híbridos possuem propriedades de plataforma cruzada.
Porque Desenvolvimento Híbrido?
O desenvolvimento mobile híbrido é uma opção mais prática e rápida para a construção
de aplicativos móveis Além disso, ele oferece a vantagem da facilidade de migração entre
plataformas. Um app nativo precisa ser desenvolvido em linguagens específicas para
cada sistema, enquanto os aplicativos híbridos usam linguagens para a web, como
HTML5, JavaScript e CSS, e são hospedados em plataformas nativas.
Optar pelo desenvolvimento híbrido para um aplicativo oferece muitas vantagens.

Primeiramente, vale considerar que o custo para o desenvolvimento de um app híbrido é
relativamente mais baixo. Além disso, este tipo de aplicativo oferece a vantagem da
facilidade de migração entre plataformas.
React Native
Definição
O React Native é uma biblioteca JavaScript criada pelo Facebook que permite
desenvolver aplicativos para os sistemas Android e iOS.
O React Native utiliza JSX em sua sintaxe. O JSX é uma linguagem de marcação
semelhante ao XML, porém incorpora propriedades do JavaScript. Desse modo, é
possível misturar HTML ao código JavaScript. Além disso, o React Native é baseado em
componentes.
Interface
A interface de usuário que será gerada pelo React será executada de forma nativa no
aplicativo.
Persistência de dados
O React Native oferece suporte a diferentes tipos de armazenamento local, como

AsyncStorage, SQLite e Realm. O AsyncStorage é uma API simples e assíncrona que
permite armazenar dados no dispositivo do usuário. Ele é baseado em chave-valor e pode
armazenar dados em formato de string. O SQLite é um banco de dados relacional que
permite armazenar dados em tabelas. Ele oferece suporte a transações ACID e é
amplamente utilizado em aplicativos móveis. O Realm é um banco de dados orientado a
objetos que permite armazenar objetos em vez de tabelas. Ele oferece suporte a
transações ACID e é mais rápido que o SQLite.
APISs
O React Native pode fazer chamadas a uma API através das bibliotecas Axios, Fetch API,
etc.
O Axios é uma biblioteca JavaScript utilizada para fazer requisições HTTP.
O Axios é uma biblioteca de cliente HTTP que permite fazer solicitações para determinado
endpoint.
Observações:
● O React Native suporta testes unitários.

● Dá suporte a criptografia para armazenamento de dados.
Observação: nas aulas não trabalharemos gerando o build do projeto. O aluno deve
fazer isso em casa e testar o app em seu celular.
PROJETO PARA NOTA FINAL
Desenvolver um aplicativo mobile usando o Ionic 5. O tema do app será escolhido

pela equipe. Equipe de 5 pessoas. O aluno deve buildar o projeto em casa para o
Android ou IOS. Deve copiar o build para o celular. Deve trazer o celular para a
faculdade e apresentar o trabalho. O trabalho será apresentado na sexta pela
manhã na biblioteca do dia 24/11/2023. A turma deverá apresentar a prévia do
trabalho ao professor na sala dia 17/11/2023.
IONIC 5
O Ionic 5 é um framework de código aberto, construído sobre o Angular, que fornece uma
série de recursos para o desenvolvimento de aplicativos híbridos e web.
Ele permite a implementação do app utilizando tecnologias comumente empregadas na

construção do front-end de soluções web, como HTML, CSS e JavaScript.
Um framework é basicamente um conjunto de ferramentas e regras que ajudam os

desenvolvedores a criar aplicativos de maneira mais rápida e eficiente.
O Ionic 5 é construído sobre o Angular, o que significa que ele utiliza muitos dos recursos
e ferramentas do Angular para fornecer uma experiência de desenvolvimento otimizada.
O Ionic faz uso do roteamento do Angular para permitir a navegação entre diferentes
páginas do aplicativo.
Ele também utiliza-se do Angular Forms.
Existem alguns elementos que fazem o Ionic 5 funcionar:
● O TypeScript - O TypeScript é uma linguagem de programação que é um

superconjunto do JavaScript. Isso significa que todo código JavaScript é válido em
TypeScript, mas o TypeScript adiciona recursos adicionais, como módulos e
tipagem, que podem ajudar a tornar o código mais legível e fácil de manter.
Em resumo, o TypeScript é uma linguagem de programação que adiciona recursos

ao JavaScript para ajudar a tornar o código mais legível e fácil de manter.
● O Angular - Angular é um framework de desenvolvimento de aplicativos da web

criado e mantido pelo Google.
● O Node.js - Node.js é uma plataforma de execução de JavaScript que permite a

execução de código JavaScript no lado do servidor. Ele permite a criação de
aplicativos de rede, APIs, etc.
Um aplicativo de rede é um programa de computador que usa redes de

computadores para se comunicar e compartilhar informações com outros
dispositivos ou sistemas.
● O Webpack - O Webpack é uma ferramenta que ajuda a organizar e otimizar o

código JavaScript de um aplicativo. Ele pode fazer a junção de vários arquivos css
e js em um só, por exemplo.
SCSS o que é?
O SASS é uma linguagem de extensão do CSS que permite adicionar recursos especiais.
O SCSS é uma extensão do SASS que usa uma sintaxe semelhante ao CSS
convencional.
Angular
Components - Os components em Angular são uma das principais construções de

interface do usuário em Angular. Eles são um conjunto de elementos visuais que podem
ser reutilizados em todo o aplicativo. Cada componente é composto por um arquivo
HTML, um arquivo CSS e um arquivo TypeScript.
Os componentes são usados para dividir a interface do usuário em partes menores e mais
gerenciáveis. Eles também ajudam a manter o código organizado e modularizado. Cada
componente é responsável por uma única tarefa ou funcionalidade específica.
Decorators (decorador)
Definição: É uma declaração especial para adicionar funcionalidades extras a uma

declaração de classe, método, acessador, propriedade ou parâmetro.
Inputs - Esses decorator é usado para configurar atributos de um componente para

receber dados de entrada.
Templates - Um template em Angular é um código de HTML que pode conter elementos

do Angular (interpolação, diretivas, etc). Ele define a estrutura e a apresentação de um
componente. O template é usado para renderizar o componente e exibir sua saída na
página.
Um template é onde você define a estrutura e o conteúdo HTML que compõem a

aparência de um componente, juntamente com quaisquer lógicas de apresentação ou
vinculações de dados.
Exemplo:
<h1>{{ title }}</h1>
<p>My name is {{ name }} and I am {{ age }} years old.</p>
Events - Eventos no Angular são ações que ocorrem em resposta a uma interação do
usuário ou de outro sistema.
Pipes - Em Angular, um pipe é um recurso que nos ajuda a transformar dados de um

formato para outro.
@ViewChild - O ViewChild é um decorador em Angular que permite que você acesse um

componente filho, diretiva ou elemento DOM de um componente pai.
Um exemplo de componente pai e filho no Angular pode ser o seguinte:

<app-pai>
<app-filho></app-filho>
</app-pai>
As diretivas em Angular são configurações que informam ao Angular para anexar um

comportamento especificado a um elemento (tag) existente.
As diretivas são adicionadas a estas tags usando atributos HTML personalizados . Por
exemplo, a diretiva ngIf é adicionada a uma tag HTML existente usando o atributo
*ngIf.
ECMAScript 6 e TypeScript
JavaScript é uma linguagem de programação que foi criada pela Netscape em 1995. O
JavaScript é uma implementação da especificação ECMAScript.
ECMAScript é uma linguagem de programação inspirada no JavaScript e no Jscript.
Variáveis - Para declarar variáveis em TypeScript, você pode usar as palavras-chave `let`
e `const`.
A palavra-chave `let` é usada para declarar variáveis que podem ser atribuídas
posteriormente.
Por exemplo, você pode declarar uma variável `x` do tipo `number` e atribuir o valor `10` a
ela da seguinte maneira:
let x: number = 10;
A palavra-chave `const`, por outro lado, é usada para declarar variáveis que não podem
ser reatribuídas posteriormente. Por exemplo, você pode declarar uma variável `y` do tipo
`string` e atribuir o valor `"hello"` a ela da seguinte maneira:
const y: string = "hello";
Além disso, você também pode declarar variáveis sem especificar seu tipo. Nesse caso, o
TypeScript infere o tipo da variável com base no valor atribuído a ela. Por exemplo:
let z = true; // TypeScript infere que z é do tipo boolean
Classes - As classes são uma das principais características do TypeScript e são usadas
para criar objetos e definir seus comportamentos.
Para criar uma classe em TypeScript, você pode usar a palavra-chave `class`, seguida
pelo nome da classe e um par de chaves que contém a definição da classe. Aqui está um
exemplo simples:
class Pessoa {
nome: string;
idade: number;
constructor(nome: string, idade: number) {

this.nome = nome;
this.idade = idade;
}
saudacao() {
console.log(Òlá, meu nome é ${this.nome} e eu tenho ${this.idade} anos.`);
}
}
Promises - Promises em Typescript são uma maneira de lidar com operações

assíncronas. Uma Promise é um objeto que representa a eventual conclusão (ou falha) de
uma operação assíncrona e seu valor resultante. A operação assíncrona é uma operação
que não bloqueia a execução do programa enquanto espera que ela seja concluída.
Exemplo de operação assíncrona: chamadas de api, leitura de arquivos.
Observables - Um Observable em Typescript é um objeto que representa uma coleção de

valores que podem ser emitidos ao longo do tempo.
Template Strings - Template Strings em Typescript são uma sequência de string que
permite expressões embutidas. Eles são envolvidos por acentos graves (`) em vez de
aspas simples ou duplas.
Exemplo:
let name = "Bing";

let age = 5;
let sentence = `My name is ${name}. I am ${age} years old.`;
console.log(sentence);
Arrow Functions - As arrow functions são uma forma mais concisa de escrever funções,
elas são frequentemente usadas para funções curtas e simples que não precisam de um
nome. A sintaxe para arrow functions é () => {}, onde os parênteses contêm os
argumentos da função e as chaves contêm o corpo da função.
Exemplo:
const soma = (a: number, b: number): number => {

return a + b;
}
Tipos - O TypeScript é uma linguagem de programação fortemente tipada que suporta

vários tipos de dados. Os tipos de dados básicos em TypeScript são boolean, string e
number.
O tipo boolean é usado para armazenar valores lógicos, como `true` e `false`.
O tipo string é usado para armazenar valores de texto, como "hello world".
O tipo number é usado para armazenar valores numéricos, como 42 ou 3.14.
Tipos Especiais
O TypeScript tem vários tipos especiais que podem ser usados para modelar dados de
maneira mais precisa. Alguns desses tipos especiais incluem:
- `void`: é usado para indicar que uma função não retorna nenhum valor.
- àny`: é usado para desativar a verificação de tipo e efetivamente permitir que todos os
tipos sejam usados.
- `null` : são usados para representar valores nulos.
Typing Functions - Uma função tipada em TypeScript é uma função que tem seus
parâmetros e valores de retorno especificados com tipos.
Exemplo:
function addNumbers(x: number, y: number): number {

return x + y;
}
:void - O tipo void é usado para indicar que uma função não retorna nenhum valor.
Exemplo:
function sayHello(): void {

console.log("Hello!");
}
Estrutura de diretórios/arquivos do Ionic
● src - A pasta src é onde se encontram os arquivos de código que você irá
customizar para seu aplicativo.
● app - A pasta app é onde se encontram os arquivos de código que você irá
customizar para o componente principal do seu aplicativo.
● app-routing.module.ts, app.component.html, app.component.specs.ts,

app.component.ts, app.module.ts - O arquivo app-routing.module.ts é responsável
por gerenciar as rotas do aplicativo. O arquivo app.component.html é o arquivo
HTML principal do componente raiz do aplicativo. O arquivo
app.component.specs.ts é um arquivo de teste unitário para o componente raiz do
aplicativo. O arquivo app.component.ts é o arquivo TypeScript principal do
componente raiz do aplicativo. O arquivo app.module.ts é o módulo raiz do
aplicativo que importa e declara todos os componentes e serviços usados no
aplicativo.
● assets - A pasta assets é onde você pode armazenar arquivos como imagens,
fontes e outros recursos que você deseja incluir em seu aplicativo.
● environments - A pasta environments é usada para armazenar arquivos de
configuração de ambiente. Esses arquivos contêm variáveis de ambiente que
podem ser usadas em diferentes ambientes de desenvolvimento, como produção,
teste e desenvolvimento.
● theme - A pasta theme é usada para armazenar arquivos de estilo globais da
aplicação, como paleta de cores e fontes.
● global.scss - O arquivo global.scss é usado para definir estilos globais para toda a
aplicação.
● index.html – Este arquivo inicia todas as chamadas do aplicativo.
TYPESCRIPT
Vamos criar e executar nossos códigos typescript no site replit.com.
Acesse o site e faça o login.
Crie um repl com o nome curso e escolha a linguagem typescript.
Crie o arquivo aula1.ts clicando no sinal de + no painel esquerdo.
ESCOPO DE VARIÁVEIS
A palavra-chave var é usada para declarar uma variável com escopo de função ou escopo
global.
A palavra-chave let, por outro lado, é usada para declarar uma variável com escopo de
bloco.
Vamos digitar o seguinte código no arquivo aula1.ts:
let a = 1;
var b = 2;
if (true) {
let a = 3;
var b = 4;
console.log(a); // Output: 3
console.log(b); // Output: 4
}
console.log(a); // Output: 1
console.log(b); // Output: 4
Execute o arquivo no painel do Shell digitando tsx aula1.ts.
O comando tsx será utilizado para rodar os arquivos typescript.

Observe o escopo da variável no exemplo.
Para criar uma constante em TypeScript, você pode usar a palavra-chave const. A
palavra-chave const é usada para declarar uma variável que não pode ser reatribuida
após a sua inicialização.
Vamos criar o arquivo aula2.ts e digitar o seguinte conteúdo:
const PI: number = 3.14;

console.log(PI); // Output: 3.14
Execute o código usando o painel do Shell.
TIPOS DE DADOS
Em TypeScript, existem quatro tipos de dados primitivos: boolean, number, string e any.
- boolean: O tipo boolean representa um valor lógico que pode ser verdadeiro ou falso.
Aqui está um exemplo simples que ilustra o uso do tipo boolean:
const isDone: boolean = false;
- number: O tipo number representa um valor numérico. Aqui está um exemplo simples
que ilustra o uso do tipo number:
const decimal: number = 6;
- string: O tipo string representa uma sequência de caracteres. Aqui está um exemplo
simples que ilustra o uso do tipo `string`:
const color: string = "blue";
- any: O tipo any representa qualquer tipo de dado. Aqui está um exemplo simples que
ilustra o uso do tipo any:
let dado: any = 4;

dado = "texto";
dado = false;
console.log(dado);
Vamos testar o que aprendemos acima no arquivo aula3.ts que terá o seguinte conteúdo:
const isDone: boolean = false;

console.log(isDone); // Output: false
const decimal: number = 6;

console.log(decimal); // Output: 6
const color: string = "blue";

console.log(color); // Output: blue
let dado: any = 4;

dado = "texto";
dado = false;
console.log(dado); // Output: false
Execute o código acima.
FUNÇÕES DE ARRAY
- length: A propriedade length retorna o número de elementos em um array. Por exemplo,

o código abaixo cria um array de números e retorna o número de elementos no array:
let numeros = [1, 2, 3, 4, 5];

console.log(numeros.length);
- indexOf: O método indexOf retorna o índice da primeira ocorrência do elemento

especificado em um array ou -1 se o elemento não for encontrado. Por exemplo, o código
abaixo cria um array de strings e retorna o índice da primeira ocorrência da string
"laranja":
let frutas = ["maçã", "banana", "laranja", "uva"];

console.log(frutas.indexOf("laranja")); // Saída: 2
Vamos praticar o código acima?
Crie o arquivo aula4.ts.
Digite o código abaixo:
let numeros = [1, 2, 3, 4, 5];

console.log(numeros.length); // Saída: 5
let frutas = ["maçã", "banana", "laranja", "uva"];

console.log(frutas.indexOf("laranja")); // Saída: 2
Execute o código acima e veja o resultado.
Arrays
Em TypeScript, um array é uma conjunto de dados que armazena uma coleção de

elementos do mesmo tipo.
Crie o arquivo aula5.ts.
// Cria um array vazio

let alunos: string[] = [];
// Adiciona elementos ao array
alunos.push("João");
alunos.push("Maria");
alunos.push("Pedro");
// Remove o último elemento do array

alunos.pop();
// Retorna o tamanho do array

let tamanho = alunos.length;
// Imprime o array e seu tamanho no console

console.log(alunos);
console.log(tamanho);
Execute o arquivo aula5.ts.
Neste exemplo, criamos um array vazio chamado alunos . Em seguida, adicionamos três
elementos ao array usando o método push. Depois, removemos o último elemento do
array usando o método pop. Usamos o método length para obter o tamanho atual do
array.
O comando console.log serve para exibir a saída do dado selecionado.
ReadOnly – Crie o arquivo aula6.ts.
O readonly é um modificador de acesso no TypeScript que permite configurar as

propriedades de uma classe como imutáveis. O valor só pode ser atribuído uma vez ao
atributo.
Digite o código do aula6.ts.
class Pessoa {
readonly nome: string;
constructor(nome: string) {
this.nome = nome;
}
}
let g = new Pessoa('Giulia');

g.nome = 'Luana';
Neste exemplo, a propriedade nome é uma propriedade readonly que é inicializada no

construtor da classe Pessoa. A tentativa de reatribuir a propriedade nome um valor resulta
em um erro:
let person = new Pessoa("João");

person.name = "Maria"; // Erro de compilação
Crie o arquivo aula7.ts
let myTuple: [string, number] = ["hello", 42];
// Define um enum
enum Color {
Red,
Green,
Blue,
}
Tupla
Uma tupla é um tipo de array que permite armazenar um número fixo de elementos com
tipos diferentes. Aqui está um exemplo de como criar uma tupla:
let myTuple: [string, number] = ["hello", 42];
Neste exemplo, criamos uma tupla chamada `myTuple` que contém uma string e um
número.
- typeof: O operador `typeof` é usado para obter o tipo de uma variável ou expressão.
Aqui está um exemplo de como usar o operador `typeof`:
let x = 42;
let y: typeof x = 42;
Neste exemplo, criamos uma variável `x` com o valor `42`. Em seguida, criamos outra
variável `y` com o mesmo tipo que `x` usando o operador `typeof`.
Portanto, typeof x retorna o tipo de x, que é number. Isso significa que você está dizendo
explicitamente que y deve ser do tipo number.
Enum
No TypeScript, um enum é um tipo especial de “classe” que representa um grupo de

constantes (variáveis imutáveis). Os enums podem ser de dois tipos: string e numérico.
Os enums são úteis quando você precisa definir um conjunto de valores constantes que
podem ser usados em seu código:
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT"
}
Union
No TypeScript, uma union descreve que um valor de um elemento pode ser de vários
tipos. Usamos a barra vertical (|) para separar cada tipo.
Exemplo:
let result: number | string;

result = 10;
result = 'Hi';
Quais elementos podem ser de vários tipos?
Além de variáveis, o operador union pode ser usado em outros elementos do TypeScript,
como parâmetros de função, propriedades de objeto e muito mais.
Funções
Funções são blocos de código que podem ser reutilizados e executados várias vezes.
Usamos a palavra reservada function para criar uma função.
Exemplo:
function add(x: number, y: number): number {

return x + y;
}
Neste exemplo, a função add recebe dois parâmetros do tipo number, x e y, e retorna um
valor do tipo number, que é a soma deles. Os tipos dos parâmetros e do valor de retorno
foram especificados explicitamente.
Crie o arquivo aula8.ts e digite o seguinte código:
function add(x: number, y: number): number {

return x + y;
}
let result = add(3, 4); // result é igual a 7
console.log(result); // Imprime 7 no console
Type Assertion
No TypeScript, a Type Assertion é uma maneira de informar ao compilador o tipo de uma

variável.
Exemplo:
let someValue: any = "123";

let numValue: number = Number(someValue as string);
Neste exemplo, estamos usando a palavra-chave as para informar ao compilador que a

variável someValue é do tipo string. Em seguida, usamos a função Number para converter
o valor da variável someValue em um número e armazená-lo na variável numValue.
Operadores em TypeScript
O TypeScript suporta muitos dos operadores comuns encontrados em outras linguagens

de programação, como operadores aritméticos, operadores de comparação, operadores
lógicos e operadores de atribuição. Aqui está uma lista dos principais tipos de operadores
disponíveis no TypeScript:
- Operadores aritméticos: São usados para realizar operações matemáticas básicas,

como adição (`+`), subtração (`-`), multiplicação (`*`), divisão (`/`) e resto (`%`).
- Operadores de comparação: São usados para comparar valores e retornar um valor
booleano (`true` ou `false`) indicando se a comparação é verdadeira ou falsa. Alguns
exemplos incluem igualdade (`==`), desigualdade (`!=`), maior que (`>`), menor que (`<`),
maior ou igual a (`>=`) e menor ou igual a (`<=`).
- Operadores lógicos: São usados para combinar expressões booleanas e retornar um
valor booleano indicando se a expressão combinada é verdadeira ou falsa. Alguns
exemplos incluem E lógico (`&&`), OU lógico (`||`) e NÃO lógico (`!`).
- Operadores de atribuição: São usados para atribuir valores a variáveis. Alguns exemplos
incluem atribuição simples (`=`), adição e atribuição (`+=`), subtração e atribuição (`-=`),
multiplicação e atribuição (`*=`) e divisão e atribuição (`/=`).
- Operadores de incremento/decremento: São usados para aumentar ou diminuir o valor
de uma variável em uma unidade. Alguns exemplos incluem incremento pré-fixado
(`++x`), incremento pós-fixado (`x++`), decremento pré-fixado (`--x`) e decremento
pós-fixado (`x--`).
Crie o arquivo aula9.ts:
let x: number = 10;

let y: number = 5;
let soma: number = x + y;

console.log(`${x} + ${y} = ${soma}`);
let diferença: number = x - y;
console.log(`${x} - ${y} = ${diferença}`);
let produto: number = x * y;

console.log(`${x} * ${y} = ${produto}`);
let quociente: number = x / y;

console.log(`${x} / ${y} = ${quociente}`);
let modulo: number = x % y;

console.log(`${x} % ${y} = ${modulo}`);
ESTRUTURAS DE CONDIÇÃO
Crie o arquivo aula10.ts e digite o código:
let x: number = 10;
if (x > 0) {
console.log(`${x} é positivo`);
} else if (x < 0) {
console.log(`${x} é negativo`);
} else {
console.log(`${x} é zero`);
}
let fruit: string = "banana";
switch (fruit) {
case "banana":
console.log("A Banana é amarela");
break;
case "maçã":
console.log("A Maçã é vermelha");
break;
case "uva":
console.log("A Uva é roxa");
break;
default:
console.log("Desculpe, não temos essa fruta");
}

ESTRUTURAS DE REPETIÇÃO
let numbers: number[] = [1, 2, 3, 4, 5];
function printNumber(number: number) {

console.log(number);
}
numbers.forEach(printNumber);
Execute o código.
Neste exemplo, estamos definindo uma função nomeada printNumber que recebe um
número como argumento e imprime-o no console. Em seguida, estamos passando essa
função como argumento para o método forEach do array numbers. O método forEach
chama a função printNumber para cada elemento do array, passando o elemento atual
como argumento.
let i: number = 0;
while (i < 5) {
console.log(i);
i++;
}
let i: number = 0;
do {
console.log(i);
i++;
} while (i < 5);
for (let i: number = 0; i < 5; i++) {

console.log(i);
}

POO
O paradigma de desenvolvimento orientado a objetos é um modelo de programação

baseado no conceito de "objetos", que podem conter dados e comportamentos. Os dados
são armazenados em campos, também conhecidos como atributos, e os comportamentos
são definidos por meio de funções, também conhecidas como métodos.
Uma classe é uma estrutura que define os atributos e métodos comuns a um grupo de
objetos. Ela serve como um modelo para a criação de objetos, especificando quais
atributos e comportamentos eles terão. Quando um objeto é criado a partir de uma classe,
ele é chamado de instância da classe.
Um objeto é um elemento criado à partir de uma classe. O objeto representa um conceito

do mundo real.
Os atributos de um objeto são variáveis que armazenam informações sobre o estado do

objeto. Eles podem ser de qualquer tipo, como números, strings ou outros objetos. Os
métodos de um objeto são funções que definem o comportamento do objeto. Eles podem
acessar e modificar os atributos do objeto e interagir com outros objetos.
O estado de um objeto se refere aos valores de seus atributos em um determinado

momento.
Aqui está um exemplo simples em TypeScript que ilustra esses conceitos:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {

this.name = name;
this.age = age;
}
greet() {
console.log(Òlá, meu nome é ${this.name} e eu tenho ${this.age} anos`);
}
}
let person = new Person("João", 30);

person.greet();
Neste exemplo, estamos definindo uma classe `Person` com dois atributos, `name` e
àge`, e um método `greet`. O método `greet` acessa os atributos `name` e àge` do
objeto e imprime uma mensagem no console. Em seguida, estamos criando uma instância
da classe `Person` chamada `person` e chamando o método `greet` dessa instância.
Um construtor é um método especial de uma classe que é chamado automaticamente

quando uma instância dessa classe é criada.
Exemplo:
constructor(marca: string, modelo: string) {

this.marca = marca;
this.modelo = modelo;
}
Modificadores de acesso
Os modificadores de acesso são usados para controlar o nível de acesso aos membros
da classe, permitindo que você especifique quais membros da classe podem ser
acessados de onde. Isso ajuda a garantir a segurança e a integridade dos dados dentro
da classe.
No TypeScript, existem três tipos de modificadores de acesso: public, private e protected.

Esses modificadores de acesso são usados para controlar a visibilidade dos membros da
classe.
public: Por padrão, todos os membros de uma classe no TypeScript são públicos. Todos
os membros públicos podem ser acessados em qualquer lugar sem restrições.
private: O modificador de acesso privado garante que os membros da classe sejam

visíveis apenas para essa classe e não sejam acessíveis fora da classe.
protected: O modificador de acesso protegido é semelhante ao modificador de acesso

privado, exceto que os membros protegidos podem ser acessados usando suas classes
derivadas.
Getters e Setters
Em TypeScript, os getters e setters são duas palavras-chave que podem ser usadas para
obter e definir o valor dos atributos da classe, respectivamente.
Usamos a palavra-chave get para criação de getters e set para criação de setters.
class Pessoa {
private nome: string;
public get nome() {

return this.nome;
}
public set nome(valor: string) {

this.nome = valor;
}
}
let pessoa = new Pessoa();

pessoa.nome = 'João'; // em pessoa.nome a palavra nome é o método setter
console.log(pessoa.nome); // em pessoa.nome a palavra nome é o método getter
No código, uma instância da classe Pessoa é criada e atribuída à variável pessoa. A

propriedade nome do objeto pessoa é definida como 'João' usando o método set
nome(valor: string). A instrução console.log(pessoa.nome) exibe o valor da propriedade
nome do objeto pessoa no console usando o método get nome().
O nome em pessoa.nome é o método setter, e o nome em console.log(pessoa.nome) é o

método getter.
Classe Abstrata e Herança
● Classe abstrata: Uma classe abstrata é uma classe que não pode ser instanciada
diretamente. Ela é usada principalmente para herança, onde outras classes podem
derivar dela. Uma classe abstrata pode incluir um ou mais métodos ou
propriedades abstratas, que devem ser implementados pelas classes derivadas.
● Herança: A herança é um mecanismo pelo qual uma classe pode herdar os

membros de outra classe. Isso permite que você crie uma nova classe com base
em uma classe existente, reutilizando o código e adicionando novas
funcionalidades.
abstract class Animal {

abstract fazerBarulho(): void;
}
class Cachorro extends Animal {

fazerBarulho() {
console.log('Au au!');
}
}
class Gato extends Animal {

fazerBarulho() {
console.log('Miau!');
}
}
let cachorro = new Cachorro();
cachorro.fazerBarulho(); // Au au!
let gato = new Gato();

gato.fazerBarulho(); // Miau!
Execute o código.
Neste exemplo, criamos uma classe abstrata Animal com um método abstrato
fazerBarulho. Em seguida, criamos duas classes Cachorro e Gato que estendem a classe
Animal. Como a classe Animal é abstrata, não podemos instanciá-la diretamente. Em vez
disso, criamos instâncias das classes Cachorro e Gato, que implementam o método
abstrato fazerBarulho.
Um método abstrato é um método que é declarado sem uma implementação (sem chaves
e seguido por um ponto e vírgula) dentro de uma classe abstrata.
Interfaces
Uma interface em programação é uma especificação de um conjunto de métodos que

uma classe deve implementar. Ela define quais métodos uma classe deve ter, mas não
especifica como esses métodos devem ser implementados. Em outras palavras, uma
interface é uma descrição dos comportamentos que uma classe deve ter, sem entrar em
detalhes sobre como esses comportamentos devem ser realizados.
interface Pessoa {
somar(): number;
}
class Estudante implements Pessoa {

constructor(public nome: string, public idade: number) { }
// Método da interface Pessoa

public somar(): number {
// Implementação do método
return 2 + 2;
}
}
let estudante = new Estudante('João', 26);

console.log(`Nome: ${estudante.nome}, Idade: ${estudante.idade}`);
console.log(`Resultado da soma: ${estudante.somar()}`);
O comando interface cria a interface Pessoa. Observe que usamos a palavra-chave

implements para indicar que a classe Estudante implementa a interface Pessoa.
Generics
Generics é um recurso em TypeScript que permite a criação de componentes reutilizáveis

que podem trabalhar com vários tipos de dados, em vez de apenas um.
Crie o código aula19.ts:
function imprimirArray<T>(array: T[]): void {

for (let elemento of array) {
console.log(elemento);
}
}
imprimirArray<string>(['a', 'b', 'c']);

imprimirArray<number>([1, 2, 3]);
Neste exemplo, criamos uma função imprimirArray que aceita um array de qualquer tipo
como argumento. Usamos a sintaxe <T> para indicar que a função é genérica e pode
trabalhar com qualquer tipo de dado. Em seguida, chamamos a função imprimirArray duas
vezes, passando arrays de strings e números como argumentos.
Nullish Coalescing
O operador de Nullish Coalescing (??) é um recurso do TypeScript que permite que você
forneça um valor padrão para uma expressão se o valor original for null ou undefined.
Exemplo:
let x = null;
let y = x ?? 'Valor padrão';
console.log(y); // Valor padrão
Neste exemplo, criamos uma variável x com o valor null. Em seguida, usamos o operador
de coalescência nula para atribuir um valor padrão à variável y se x for null ou undefined.
Como x é null, o valor padrão 'Valor padrão' é atribuído a y.
Módulos
Módulos: Um módulo em TypeScript é um arquivo que contém código relacionado a um

determinado recurso ou funcionalidade. Os módulos permitem que você organize o código
em unidades lógicas e reutilizáveis.
A palavra-chave export é usada para exportar membros de um módulo em TypeScript.

Isso permite que outros módulos importem e usem esses membros em seu próprio
código. Quando você exporta um membro de um módulo, ele se torna acessível fora do
módulo e pode ser importado por outros módulos usando a palavra-chave import.
Uso da palavra as ao importar um módulo. Isso pode ser útil quando você deseja evitar
conflitos de nomes ou tornar o código mais legível.
Exempĺo:
Vamos criar o arquivo calculo.ts com o seguinte conteúdo (estamos criando um módulo):
export function somar(x: number, y: number): number {

return x + y;
}
export function subtrair(x: number, y: number): number {

return x - y;
}
Agora vamos criar o arquivo atividadecalculo.ts com o seguinte código:
import { somar as s } from './calculo';

import { subtrair as sbt } from './calculo';
console.log(s(1, 2));
console.log(sbt(3, 1));
Execute o código atividadecalculo.ts.
Namespaces
Namespaces são um recurso do TypeScript que permite organizar o código em grupos

lógicos. Eles fornecem uma maneira de agrupar elementos relacionados (como variáveis,
funções e classes) sob um único nome, para evitar conflitos de nomes e tornar o código
mais legível e fácil de manter.
Aqui está um exemplo simples que demonstra como usar namespaces em TypeScript:
namespace MeuNamespace {
export function minhaFuncao() {
console.log('Olá do meu namespace!');
}
}
MeuNamespace.minhaFuncao(); // Olá do meu namespace!

Neste exemplo, criamos um namespace chamado `MeuNamespace` usando a
palavra-chave `namespace`. Dentro do namespace, definimos uma função chamada
`minhaFuncao` e a exportamos usando a palavra-chave èxport`. Isso nos permite
acessar a função fora do namespace usando o operador de ponto.
Decorators
Definição: É uma declaração especial para adicionar funcionalidades extras a uma

declaração de classe, método, propriedade ou parâmetro.
Para se criar um decorator é bem simples. Os decorators são apenas funções, essas
funções são chamadas em tempo de execução. Um exemplo bem simples é criarmos
uma função log que irá realizar um console.log no alvo em que ele for utilizado, ficando
desta maneira:
function log(target) {
console.log(target);
}
@log
class Foo {}
Tipos de decorators
Ao se desenvolver decorators é importante saber que existem vários tipos.
a) Classe Decorator
Um decorator para classe deve ser declarado antes da declaração da classe.
Exemplo:
@setApiVersion
class Wizard {}
b) Property Decorator
Um decorator de propriedade deve ser declarado antes da declaração da propriedade.
Exemplo:
class Task {
@analyze
public title: string;
c) Parameter Decorator
Um parameter decorator deve ser declarado antes da declaração de um parâmetro.
Exemplo:
class User {
changeName(
@showInfo() name: string,
) {}
MINIPROJETO
Este projeto será uma classe Carro com algumas propriedades e métodos, e uma classe
Garagem que pode armazenar vários carros.
Primeiro, vamos criar o arquivo carro.ts:
export class Carro {

marca: string;
modelo: string;
ano: number;
constructor(marca: string, modelo: string, ano: number) {

this.marca = marca;
this.modelo = modelo;
this.ano = ano;
}
ligar() {
console.log(`${this.marca} ${this.modelo} está ligado.`);
}
desligar() {
console.log(`${this.marca} ${this.modelo} está desligado.`);
}
detalhes() {
console.log(Èste é um ${this.marca} ${this.modelo} do ano de ${this.ano}.`);
}
}
Em seguida, vamos criar o arquivo garagem.ts:
import { Carro } from './carro';

export class Garagem {
carros: Carro[] = [];
adicionarCarro(carro: Carro) {
this.carros.push(carro);
console.log(Ùm ${carro.marca} ${carro.modelo} foi adicionado à garagem.`);
}
listarCarros() {
console.log('Carros na garagem:');
for (let carro of this.carros) {
carro.detalhes();
}
}
}
Finalmente, vamos criar o arquivo main.ts que usa as classes Carro e Garagem:
import { Carro } from './carro';

import { Garagem } from './garagem';
let meuCarro = new Carro('Toyota', 'Corolla', 2020);

let seuCarro = new Carro('Honda', 'Civic', 2022);
let garagem = new Garagem();
garagem.adicionarCarro(meuCarro);
garagem.adicionarCarro(seuCarro);
garagem.listarCarros();
Execute o arquivo main.ts.

Neste projeto, temos uma classe Carro com três propriedades: marca, modelo e ano, e
uma classe Garagem que pode armazenar vários carros. As classes estão em arquivos
separados e são importadas usando a palavra-chave import. O arquivo main.ts cria
alguns carros e os adiciona à garagem.
Intalando o ambiente do Ionic 5

Utilizaremos o S.O. Linux.
Vamos instalar o curl: sudo apt install curl
Vamos instalar o node.js.
Utilize o comando a seguir no terminal linux para este fim :
sudo apt-get install node.js
Instale o programa npm: npm install -g npm@7.22.0 --save
Para instalar o ionic usamos o comando: npm install -g ionic@5.4.16 --save
CRIANDO PROJETOS
Crie a pasta de um projeto: mkdir teste

Entre na pasta: cd teste
Vamos criar o projeto: ionic start
Digite o nome do projeto teste2 e dê ENTER.
Escolher Angular e dê ENTER.
Escolha o template blank ENTER.
Abra a pasta do projeto teste2 no vscode.
Entre na pasta teste2 pelo terminal.
Digite o comando: ionic serve
O ionic abrirá o navegador com o projeto aberto.
SEGUNDO PROJETO
Entre no terminal e crie a pasta projetos.

Entre na pasta.
Digite o comando ionic start first-app
Escolha o framework Angular.
Escolha o template tabs. Ele cria um app baseado num modelo em abas.
Entre na pasta do projeto.
Digite ionic serve
Visualize no navegador o novo projeto.
Utilize as ferramentas de desenvolvedor do navegador e verifique a aparência do projeto
em vários dispositivos. Ative o modo mobile.
Gire a tela e teste o comportamento do layout na rotação.
Abra a pasta do projeto first-app no vscode.

Abra o arquivo src/app/tab1/tab1.page.html.
Altere o valor da seguinte linha: <app-explore-container name="Minha primeira
página!"></app-explore-container>
Salve a alteração. Observe que a alteração aconteceu no texto do meio da página.
O live reload permite que a página seja atualizada quando são feitas as alterações.
Vamos alterar a aparência do app. Abra o arquivo: src/theme/variables.scss.
Altere dentro do :root{
--ion-background-color: #1e2b33;
--ion-text-color: #ffffff;
Visualize agora a aparência da página.
Criando um novo projeto
Vamos agora sair da pasta do projeto anterior (ficando dentro da pasta projetos) no
terminal e utilizar o seguinte comando:
ionic start bob-tours sidemenu --type=angular
O comando acima cria um novo projeto usando um template que possui um menu lateral.
Criaremos um app simples de viagens e excursões.
Além disso, o comando especifica que o novo projeto será baseado no framework
Angular.
Vamos agora entrar na pasta do projeto e iniciar o mesmo.
Depois verifique como ficou o projeto com o menu lateral.
Exiba a página em modo responsivo.
Você pode simular o deslizar do dedo para direita e esquerda no app.
Clicar no botão que exibe o menu para visualizar.
Abra o novo projeto no vscode.
Adicionando páginas
Vamos criar algumas páginas para o app, interrompa a execução do app e use os
seguintes comandos:
ionic generate page pages/Favorites
ionic g page pages/Regions
ionic g page pages/Tour-Types
ionic g page pages/List
ionic g page pages/Details
ionic g page pages/Request
Apague a pasta folder que está na pasta app.
Apague as seguintes linhas de comando do arquivo src/app/app-routing.module.ts:
No mesmo arquivo vamos fazer as seguintes alterações:

const routes: Routes = [
{
path: '',
redirectTo: 'favorites',
pathMatch: 'full'
},
A página favorites será a página inicial do app depois da configuração acima.

Vamos agora configurar o menu da página. Abra o arquivo src/app/app.component.ts no
vscode e edite a parte destacada:
export class AppComponent {
public appPages = [
title: 'Favorites',
url: '/favorites',
icon: 'star'
},
title: 'Regions',
url: '/regions',
icon: 'images'
},
title: 'Tour-Types',
url: '/tour-types',
icon: 'bus'
}
];
Vamos agora remover o conteúdo que não é necessário na página
src/app/app.component.html:
<ion-list id="labels-list">
<ion-list-header>Labels</ion-list-header>
<ion-item *ngFor="let label of labels" lines="none">

<ion-icon aria-hidden="true" slot="start" ios="bookmark-outline"
md="bookmark-sharp"></ion-icon>
<ion-label>{{ label }}</ion-label>
</ion-item>
</ion-list>
Remova, salve e visualize como ficou a página. Lembrando que para ver como ficaram os
menus, devemos clicar na lateral esquerda e arrastar para direita.
O que fizemos foi alterar o valor de um array em src/app/app.component.ts que já estava
sendo lido pela página html que está ligada ao arquivo.
Para retornar o botão de acionamento de menu vamos alterar 3 arquivos:
favorites.page.html, regions.page.html e tour-types.page.html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Favorites</ion-title>
</ion-toolbar>
</ion-header>
Observação: acima está o exemplo do favorites.page.html. Você deve alterar só a parte

em negrito dos outros arquivos. Depois disso deixe a página responsiva e veja se o botão
hamburguer aparece e teste ele.
Rotas
O ionic quando geramos as páginas criou as rotas automaticamente entre as páginas.
Por exemplo para a página Details temos a seguinte rota configurada no arquivo
app-routing.module.ts:
{
path: 'details',
loadChildren: () => import('./pages/details/details.module').then( m =>
m.DetailsPageModule)
}
Abra o arquivo favorites.page.html e faça a seguinte alteração:

<ion-content [fullscreen]="true">
<ion-button routerLink="/details"
routerDirection="forward">Show details</ion-button>
Inserimos um botão na página que navega para a página details. Clique no botão e faça o
teste. Utilizamos o routerLink para definir a rota navegação e o routerDirection obtemos
uma animação suave ao alternar entre as páginas.
Criando o botão de voltar
Abra o arquivo: details.page.html e faça a seguinte alteração:
<ion-header>
<ion-toolbar>
<ion-back-button></ion-back-button>
</ion-buttons>
Este botão faz com que o app retorne para a tela anterior de acordo com o histórico de
navegação.
Visualize a página em modo responsivo e clique em < Back para retornar à página
anterior (da página details para a página anterior).
Na página detais.page.html vamos alterar o código desta forma:
<ion-button routerLink="/request" routerDirection="forward">
Request a Tour
</ion-button>
Teste a navegação para a página de destino.
Agora na página request.page.html vamos fazer a seguinte alteração:

<ion-header>
<ion-toolbar>
<ion-back-button></ion-back-button>
</ion-buttons>
Salve a alteração e faça o teste de navegação segundo as alterações que fizemos nas
páginas details, favorites e request.
Vamos posicionar melhor os botões da página details e favorites:

Inserindo dados na página
Vamos inserir dados na página e posteriormente faremos com que o valor destes dados
seja passado para a outra página.
Abra o arquivo favorites.page.ts. Nele você vai inserir a seguinte estrutura de dados:
export class FavoritesPage implements OnInit {

tours = [
{ ID: 1, Title: 'City walk' },
{ ID: 2, Title: 'On the trails of Beethoven' },
{ ID: 3, Title: 'Villa Hammerschmidt' }
];
Para estes dados serem visualizados na página precisamos alterar o arquivo

favorites.page.html. Nele utilizaremos dois elementos importantes do Ionic: o ion-list e o
ion-item. O ion- list é um componente que é utilizado quando você quer criar uma lista
de itens. O ion-item é um componente que representa cada item da lista. Possuímos
outros componentes no Ionic: https://ionicframework.com/docs/v5/components .
Vamos remover o botão que inserimos previamente no arquivo e utilizarmos a lista:
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Favorites</ion-title>
</ion-toolbar>
</ion-header>
<ion-list>
<ion-item *ngFor="let tour of tours" [routerLink]="['/details', tour]"
routerDirection="forward">
{{ tour.Title }}
</ion-item>
</ion-list>
</ion-content>
A ideia é que além de exibir cada item do array criado (usando ngFor), o item seja uma
rota para página details exibindo posteriormente informações do passeio escolhido.
Veja a página com a lista criada.
Vamos abrir o arquivo details.page.ts e configurá-lo para receber do dados do elemento

da lista (arquivo anterior) que foi clicado.
import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';
…
tour:any = null;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.tour = this.activatedRoute.snapshot.params;
}
Faça as alterações acima, salve e vamos entender as alterações.

Foi criada uma variável tour.
O ActivatedRoute é uma classe utilizada para obter informações de uma rota associada
a um componente. Neste caso utilizada para obter dados da página de destino, e os
dados do array tour.
Lembre que no arquivo favorites.page.html usamos [routerLink]="['/details', tour]".
A linha this.tour = this.activatedRoute.snapshot.params serve para obter os
parâmetros da rota atual e passar para a variável tour.
Abra agora o arquivo details.page.html para que possamos fazer ele exibir o nome do
lugar da viagem na página de acordo com o elemento clicado.
Faça a seguinte alteração:
<ion-toolbar>
<ion-title size="large">Details</ion-title>
</ion-toolbar>
</ion-header>
<ion-item-divider>
<ion-label> {{tour.Title}} </ion-label>
</ion-item-divider>
<ion-button routerLink="/request" routerDirection="forward">
Request a Tour
</ion-button>
</ion-content>
O ion-item-divider é utilizado para separar elementos em uma linha no Ionic.

Execute o projeto e visualize a solução. Para cada elemento clicado na lista da página
inicial, o seu valor correspondente será transmitido para outra página
CRIANDO UM NOVO PROJETO
Entre na pasta projetos.

Crie um novo projeto em abas com o comando:
ionic start AgendamentoMedico tabs --type=angular
Abra a pasta do projeto no vscode.
Vamos alterar o título e cabeçalho da página. Abra o arquivo tab1.page.html. Altere as
seguintes linhas:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Agenda++
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title size="large">Cadastro</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>

</ion-content>
Altere o arquivo arquivo tab2.page.html:
<ion-toolbar>
<ion-title>
Agenda++
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title size="large">Especialidade</ion-title>
</ion-toolbar>
</ion-header>
<ion-list>
<ion-item>
<ion-label>Clínica Geral</ion-label>
</ion-item>
<ion-item>
<ion-label>Pediatria</ion-label>
</ion-item>
<ion-item>
<ion-label>Cardiologia</ion-label>
</ion-item>
</ion-list>

</ion-content>
ionic-list - é um componente que exibe uma lista de itens.

ionic-item - cria um item de lista para o app normalmente dentro de uma ionic-list.
No arquivo tab3.page.html vamos inserir o seguinte código:
<ion-toolbar>
<ion-title>
Agenda++
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title size="large">Tab 3</ion-title>
</ion-toolbar>
</ion-header>
<ion-button>Enviar</ion-button>
</ion-content>
Utilizamos o <ion-button> para inserir um componente de botão na página.
Com o comando ionic g page myPage posso criar páginas novas no app do Ionic.
O data binding é utilizado para sincronizar os dados entre o componente e o template.
No tab1.page.ts altero o código para:
export class Tab1Page {
app:string = 'Agende a Consulta médica';
constructor() {
Agora no tab1.page.html altere o arquivo desta forma:

<app-explore-container name="{{app}}"></app-explore-container>
Execute o projeto do Ionic e visualize o resultado no navegador.
NOVO PROJETO
Crie um novo projeto no Ionic 5 chamado projetoteste dentro da pasta projetos. Use o
template blank sendo o projeto do tipo Angular:
ionic start projetoteste blank --type=angular
Vamos agora criar um card em nosso projeto. Abra o projeto no vscode.
Abra o arquivo home.page.html.
Apague o conteúdo em negrito logo abaixo:
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer"
href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
Use o conteúdo abaixo:
<ion-card class=”cartao1”>
<ion-card-header>
<ion-card-title>Titulo do Card</ion-card-title>
<ion-card-subtitle>Subtitulo do Card</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Aqui vai o conteúdo do seu card.
</ion-card-content>
</ion-card>
Neste exemplo:
ion-card: É o componente principal que representa o card.
ion-card-header: É onde você coloca o cabeçalho do seu card. Este é geralmente o lugar
para colocar o título e o subtítulo do seu card.
ion-card-title: Representa o título do seu card.
ion-card-subtitle: Representa o subtítulo do seu card.
ion-card-content: É onde você coloca o conteúdo principal do seu card.
Vamos agora alterar a formatação do card.

Abra o arquivo home.page.scss e insira a classe cartao1:
.cartao1{
background-color: #ffcc00;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 10px;
}
Salve os arquivos e execute o projeto.
Criamos um card e aplicamos uma formatação.
Formulários
Saia do projeto anterior.
Crie um novo projeto chamado formulario usando o template blank.
Na página home.page.html crie o seguinte código:
<ion-toolbar>
<ion-title>
Matricula do Semestre
</ion-title>
</ion-toolbar>
</ion-header>
<form>
<ion-item>
<ion-label position="floating">Nome completo</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Data de nascimento</ion-label>
<br>
<ion-input type="date"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Endereço</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Sexo</ion-label>
<ion-radio-group value="male">
<ion-item>
<ion-label>Masculino</ion-label>
<ion-radio value="male"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Feminino</ion-label>
<ion-radio value="female"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-item>
<ion-item>
<ion-label>Disciplina de Libras</ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
<ion-item>
<div class="select-container">
<label>Time de futebol</label><br>
<select name="time">
<option value="">Selecione um time</option>
<option value="1">Flamengo</option>
<option value="2">Corinthians</option>
</select>
</div>
</ion-item>
<ion-item>
<button type="submit">Enviar</button>
</ion-item>
</form>
</ion-content>
Salve o arquivo e execute o projeto.

Este código é um exemplo de um formulário em um aplicativo Ionic 5. Ele contém vários
componentes personalizados do Ionic, como ìon-header`, ìon-toolbar`, ìon-title`,
ìon-content`, ìon-item`, ìon-label`, ìon-input`, ìon-textarea`, ìon-radio-group`,
ìon-radio`, ìon-checkbox` e ìon-select`.
O componente ìon-header` é usado para criar um cabeçalho para a página.
O componente ìon-toolbar` é usado para criar uma barra de ferramentas dentro do
cabeçalho.
O componente ìon-content` é usado para criar o conteúdo da página. O atributo
`[fullscreen]="true"` é usado para tornar o conteúdo em tela cheia.
O componente ìon-item` é usado para criar um item em uma lista. O componente
ìon-label` é usado para criar um rótulo para o item. O componente ìon-input` é usado
para criar uma entrada de texto. O atributo `type="text"` é usado para definir o tipo de
entrada como texto. O componente ìon-textarea` é usado para criar uma área de texto.
O componente ìon-radio-group` é usado para criar um grupo de botões de opção. O
atributo `value="male"` é usado para definir o valor padrão do grupo de botões de opção
como masculino. O componente ìon-radio` é usado para criar um botão de opção.
O componente ìon-checkbox` é usado para criar uma caixa de seleção.
O componente ìon-select` é usado para criar um menu suspenso. O atributo `[name]` é
usado para definir o nome do menu suspenso.
O botão "Enviar" no final do formulário é criado usando a tag `<button>`.
O atributo position="floating" é usado para criar um rótulo flutuante para a entrada de
texto. Quando o usuário clica na entrada de texto, o rótulo flutuante se move para cima da
entrada de texto para indicar qual campo está sendo preenchido.
Range e Datetime
Vamos criar um o app projetonovo. Ele terá o template blank e sua base será o Angular.
Após criar o projeto abra o arquivo home.page.html.
Apague todo o código e utilize este código:
<ion-toolbar>
<ion-title>
Range e datetime
</ion-title>
</ion-toolbar>
</ion-header>
<ion-item>
<ion-label>Selecione uma data:</ion-label>
<ion-datetime display-format="DD/MM/YYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Aumente o volume:</ion-label>
<ion-range min="0" max="100">
</ion-range>
</ion-item>
</ion-content>
Execute o projeto e visualize seu resultado.
O componente Datetime é um componente de entrada que permite ao usuário selecionar
uma data e hora.
O componente Range é um dos muitos componentes disponíveis no Ionic 5. Ele é um
controle deslizante que permite ao usuário selecionar um valor de um intervalo definido.
Saia da pasta do projeto anterior.
ExibirMensagem
Crie um projeto chamado ExibirMensagem com o template blank e se baseando no

Angular.
Acesse a pasta.
Altere todo o arquivo home.page.html para o conteúdo abaixo:
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Exemplo do Toast
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button (click)="presentToast()">clíque aqui</ion-button>
</ion-content>
O próximo passo é alterar o arquivo home.page.ts:
import { Component } from '@angular/core';

import { ToastController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public toastController: ToastController) {}
presentToast() {
this.toastController.create({
message: 'Hello World',
duration: 5000
}).then((toast) => {
toast.present();
});
}
}
Acesse a pasta do projeto pelo terminal e visualize no navegador. Dê um clique no botão

que será exibido. A mensagem aparecerá na tela.
O componente Toast é um recurso do Ionic Framework que permite exibir notificações
discretas em aplicativos móveis. Ele pode ser usado para fornecer feedback sobre uma
operação ou para exibir uma mensagem do sistema.
Entendendo o código:
Neste exemplo, um botão é adicionado à página inicial. Quando o botão é clicado, o
método presentToast() é chamado, que cria e exibe uma mensagem de toast simples com
o texto “Hello World” por 5 segundos.
Criamos o objeto toastController no construtor.
Criamos uma nova instância do componente Toast usando o objeto toastController.
Configuramos a mensagem e o tempo que ela passará sendo exibida.
Usando o método .then(), podemos acessar o objeto toast e chamar o método present()
para exibir a mensagem de toast.
Na hora de clicar no botão, o método presentToast() é chamado, que faz uma chamada
assíncrona para o objeto toastController.
No código fornecido, não há uma Promise sendo criada explicitamente.
O método create() retorna uma Promisse.
Em JavaScript, uma Promise é um objeto que representa o resultado de uma operação
assíncrona.
A Promise retornará um valor, que é um objeto toast.
O método then() é um método da classe Promise em JavaScript que é usado para lidar
com chamadas assíncronas. O método then() é usado para definir o método que deve ser
executado quando uma Promise é resolvida (o valor é retornado) ou rejeitada.
O uso de Promises permite que o aplicativo continue a executar outras tarefas enquanto
aguarda a resolução da Promise. Isso ajuda a manter o aplicativo responsivo e evita
bloqueios na interface do usuário.
Projeto com o componente Grid

O ion-grid no Ionic é um (componente do Ionic) recurso que aplica o “flexbox mobile-first”.
Ele usa o modelo de layout flexbox para organizar seu conteúdo e é projetado com uma
abordagem mobile-first. Isso significa que ele se adapta bem a diferentes tamanhos de
tela e é particularmente otimizado para dispositivos móveis.
Flexbox: É um modelo de layout da Web que permite que você controle facilmente o
alinhamento, direção, ordem e tamanho dos elementos em sua página,
independentemente de seu conteúdo original.
Vamos sair do projeto anterior, entrar na pasta projetos.

Digite o comando: ionic start appgrid blank --type=angular
Entre na pasta do projeto e abra o vscode.
Abra o arquivo home.page.html e utilize o código abaixo.
Apague o que está dentro do componente ion-content e use o seguinte código:
<ion-grid>
<ion-row>
<ion-col size="6">
<img src="https://abrir.link/hAafw">
<p>Celular</p>
</ion-col>
<ion-col size="6">
<img src="https://abrir.link/a5i3v">
<p>Fone</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<img src="https://abrir.link/cadbm">
<p>Porta celular</p>
</ion-col>
<ion-col size="6">
<img src="https://abrir.link/Gsku0">
<p>Mochila</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Execute o código e verifique o resultado.
Componentes do ion-grid:
● ion-row: Representa uma linha no sistema de grid.
● ion-col: Representa uma coluna que vai dentro de uma linha.
JSON SERVER
O JSON-Server é um pacote npm que você pode usar para criar um webservice REST
que retorna dados em JSON simulando uma API. Ele faz uma simulação de um api REST
que retorna dados em JSON.
Ele também simula a persistência dos dados.
Saia da pasta do último projeto criado. Acesse a pasta projetos.
INSTALAÇÃO DO JSON SERVER
Use o comando npm install -g json-server para instalar.
Na pasta projetos crie o arquivo db.json.
Insira o seguinte conteúdo nele:

{
"users": [
{
"id": 1,
"name": "Nome do Usuário",
"email": "email@exemplo.com"
},
{
"id": 2,

Mat Bob 2 Parcial

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Mat Bob 2 Parcial

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS

O desenvolvimento mobile é o processo de criar e implementar aplicativos e softwares

Crescimento do uso de apps mobile

1 – Pesquisar sobre as arquiteturas dos dois sistemas operacionais (Android e

Após o exercício haverá um bate-papo sobre o que foi pesquisado e lido.

==> Android 1.0

Lançado em 23 de setembro de 2008, porém efetivamente utilizado em 22 de outubro do

==> Android 1.1 – Petit Four

Os principais recursos desta versão foram:

● Capacidade de salvar anexos.

==> Android Cupcake

==> Android Donut

Foi lançado em 15/09/2009. Foi inserido o recurso de suporte à CDMA.

==> Android Eclair (2.0 e 2.1)

Foi lançado em 11 de Janeiro de 2010. Trouxe suporte a Flash na Câmera e permitiu

==> Android Froyo

Foi lançado em 20 de Maio de 2010. Permitiu a visualização de gif nos navegadores.

==> Android Gingerbread

Foi lançado em 6 de dezembro de 2010.

==> Android Honeycomb

● Seu lançamento foi em 15 de Julho de 2011.

● Seu lançamento foi em 16 de Dezembro de 2011.

==> Android Jelly Bean

● Seu lançamento foi em 24 de Julho de 2013.

==> Android Kit Cat

● Seu lançamento foi em 25 de Junho de 2014.

==> Android Lollipop

● Seu lançamento foi em 2 de Março de 2015.

==> Android Marshmallow

● Seu lançamento foi em 2 de Outubro de 2015.

==> Android Nougat

● Seu lançamento foi 4 de Outubro de 2016.

==> Android Oreo

● Seu lançamento foi 5 de Dezembro de 2017.

==> Android Pie

● Seu lançamento foi em 6 de Agosto de 2018.

● Seu lançamento foi 3 de Setembro de 2019.

==> Android Red Velvet

● Seu lançamento foi em 8 de Setembro de 2020.

==> Android Snow Cone

● Seu lançamento foi 4 de Outubro de 2021.

==> Android Tiramisu

● Seu lançamento foi em 15 de Agosto de 2022.

==> Android Upside Down Cake

● Previsão de lançamento para o segundo semestre de 2023.

==> Android Vanilla Ice Cream

● Previsão de lançamento para 2024.

Camada Applicationn Framerowrk

A camada Application Framework é uma camada do sistema operacional que gerencia as

Na camada de libraries (bibliotecas), temos as bibliotecas de sistema, normalmente

A camada Android Runtime (ART) é responsável por executar aplicativos em dispositivos.

O kernel do Linux é a base do sistema operacional Android porque ele fornece os

O iOS é um sistema operacional desenvolvido pela Apple exclusivamente para

==> IOS 1 – Lançamento: 15/07/2008

==> IOS 2 – Lançamento: 27/01/2009

Apresenta novidades como a função copiar e colar, gravação e edição de vídeos no

==> IOS 4 – Lançamento: 22/11/2010

Trouxe mudança da imagem de fundo, opção para desativar a rede de dados da

==> IOS 5 – Lançamento: 07/05/2012

Trouxe a integração do smartphone com o sistema de armazenamento na nuvem da

==> IOS 6 – Lançamento: 21/02/2014

Atualização da interface. Inserção do recurso não perturbe.

==> IOS 7 – Lançamento: 30/06/2014

==> IOS 8 – Lançamento: 13/08/2015