Mat Bob 2 Parcial
Mat Bob 2 Parcial
Mat Bob 2 Parcial
Desenvolvimento 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
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
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.
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.
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.
Novos recursos:
● Copiar e colar o texto.
● Fácil localização de download.
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).
É 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.
Libraries
Android Runtime
Linux Kernel
IOS
VERSÕES DO IOS
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.
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
Nessa versão chegaram recursos como ajuste de brilho, acesso rápido à câmera, às
ligações e a outras funções do sistema.
Esta versão trouxe atualizações como desbloqueio por reconhecimento facial, suporte à
tecnologia de realidade aumentada.
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.
Personalização de data e hora na tela bloqueada, personalizar tela bloqueada com cores.
ARQUITETURA DO IOS
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.
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.
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
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:
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.
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.
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.
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
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)
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.
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.
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:
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:
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:
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;
saudacao() {
console.log(`Olá, meu nome é ${this.nome} e eu tenho ${this.idade} anos.`);
}
}
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:
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:
O tipo string é usado para armazenar valores de texto, como "hello world".
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.
- `any`: é 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:
:void - O tipo void é usado para indicar que uma função não retorna nenhum valor.
Exemplo:
● 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.
● 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
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.
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
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.
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:
- number: O tipo number representa um valor numérico. Aqui está um exemplo simples
que ilustra o uso do tipo number:
- string: O tipo string representa uma sequência de caracteres. Aqui está um exemplo
simples que ilustra o uso do tipo `string`:
- any: O tipo any representa qualquer tipo de dado. Aqui está um exemplo simples que
ilustra o uso do tipo any:
Vamos testar o que aprendemos acima no arquivo aula3.ts que terá o seguinte conteúdo:
FUNÇÕES DE ARRAY
Arrays
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.
class Pessoa {
readonly nome: string;
constructor(nome: string) {
this.nome = nome;
}
}
// 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:
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
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:
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:
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.
Type Assertion
Exemplo:
Operadores em TypeScript
ESTRUTURAS DE CONDIÇÃO
if (x > 0) {
console.log(`${x} é positivo`);
} else if (x < 0) {
console.log(`${x} é negativo`);
} else {
console.log(`${x} é zero`);
}
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");
}
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);
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.
class Person {
name: string;
age: number;
greet() {
console.log(`Olá, meu nome é ${this.name} e eu tenho ${this.age} anos`);
}
}
Neste exemplo, estamos definindo uma classe `Person` com dois atributos, `name` e
`age`, e um método `greet`. O método `greet` acessa os atributos `name` e `age` 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.
Exemplo:
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.
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.
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;
● 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.
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
interface Pessoa {
somar(): number;
}
Generics
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
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):
console.log(s(1, 2));
console.log(sbt(3, 1));
Namespaces
Aqui está um exemplo simples que demonstra como usar namespaces em TypeScript:
namespace MeuNamespace {
export function minhaFuncao() {
console.log('Olá do meu namespace!');
}
}
Decorators
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
a) Classe Decorator
Exemplo:
@setApiVersion
class Wizard {}
b) Property Decorator
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:
ligar() {
console.log(`${this.marca} ${this.modelo} está ligado.`);
}
desligar() {
console.log(`${this.marca} ${this.modelo} está desligado.`);
}
detalhes() {
console.log(`Este é um ${this.marca} ${this.modelo} do ano de ${this.ano}.`);
}
}
adicionarCarro(carro: Carro) {
this.carros.push(carro);
console.log(`Um ${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:
CRIANDO PROJETOS
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:
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>
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>
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)
}
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.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<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-content [fullscreen]="true">
<ion-button routerLink="/request" routerDirection="forward">
Request a Tour
</ion-button>
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 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:
<ion-content [fullscreen]="true">
<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.
<ion-header collapse="condense">
<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>
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Agenda++
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Cadastro</ion-title>
</ion-toolbar>
</ion-header>
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Agenda++
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<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-header [translucent]="true">
<ion-toolbar>
<ion-title>
Agenda++
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 3</ion-title>
</ion-toolbar>
</ion-header>
<ion-button>Enviar</ion-button>
<app-explore-container name="Tab 3 page"></app-explore-container>
</ion-content>
Com o comando ionic g page myPage posso criar páginas novas no app do Ionic.
constructor() {
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.
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<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>
<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.
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-header [translucent]="true">
<ion-toolbar>
<ion-title>
Matricula do Semestre
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<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>
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-header [translucent]="true">
<ion-toolbar>
<ion-title>
Range e datetime
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<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
<ion-content padding>
<ion-button (click)="presentToast()">clíque aqui</ion-button>
</ion-content>
@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();
});
}
}
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.
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.