Programação para

Dispositivos Móveis
Construindo e entendendo a primeira aplicação
 Noções gerais de TypeScript
•  Versões de javaScript atualmente suportadas em browsers
•  ECMAScript 5 (ES5)
•  ES2015 (ES6)
•  Extensão do ES5
•  Classes
•  Carregadores de módulos
•  TypeScript
•  Extensão do ES6
•  Declaração de tipo de variável

•  Aplicações Ionic2 e Angular2 podem ser escritas em ES5, ES6 ou

TypeScript
 Noções gerais de TypeScript
•  Declaração de tipo de variável (opcional):
Gera erro de
compilação
 Noções gerais de TypeScript
•  Definição de classes

Propriedades da classe

Construtor da classe

Definição de método da classe

Criação de objeto da classe

Chamada de método
 Noções gerais de Angular 2
•  Framework open source para desenvolvimento de aplicações web
•  Versão 2 lançada em 2014.
•  Implementa navegação, data binding, injeção de dependência, etc.
•  Documentação: http://angular.io
 Noções gerais de Angular 2
•  Componente
•  Implementa uma view ou parte de uma view da aplicação.
•  Possui todo o código para mostrar e gerenciar a view (MVC completo)
 Noções gerais de Angular 2
•  Decorator
•  Adiciona funcionalidade a uma classe. Qualifica uma classe.

Decorator @Component

Alias do componente
 Noções gerais de Angular 2
•  Chamando um componente na página HTML
 Noções gerais de Angular 2
•  Data Binding
 Noções gerais de Angular 2
•  Módulos
 Primeiro projeto com Ionic
•  Criando o projeto:
Nome do projeto

Template utilizado

Versão do projeto

•  Para verificar os templates disponíveis:

 Primeiro projeto com Ionic
•  Carregando o projeto no browser:
1. Entrar na pasta do projeto

2. Carregar o projeto da pasta

 Primeiro projeto com Ionic
•  Projeto carregado no browser:
 Primeiro projeto com Ionic
Pasta Conteúdo
•  Estrutura do projeto: Contém todo o código escrito pelo
src desenvolvedor, ou seja, todas as páginas
e serviços.
Contém scripts a serem utilizados no
processo de building do Cordova.
hooks Utilizado se for necessário alguma
customização no processo de building
dos pacotes da aplicação.
Contém todos os módulos importados
node_modules
via npm.
Contém todos os ícones e imagens para
resources
as diferentes plataformas.
Contém todos os plugins Cordova
plugins
utilizados pela aplicação.
Contém o código gerado pelo processo
www de building, a partir do código da
aplicação..
 Primeiro projeto com Ionic
•  Estrutura do projeto:
Arquivo Conteúdo

Contém os parâmetros de configuração

config.xml utilizados pelo Cordova, ao criar os
pacotes de aplicação.
Contém os parâmetros de configuração
ionic.config.json utilizados pelo Ionic CLI, ao executar
comandos.
Contém a lista de todos os pacotes npm
package.json
utilizados no projeto.
Contém os parâmetros de configuração
tsconfig.json
utilizados pelo compilador TypeScript.
Utilizado para verificação de erros no
tslint.json
código TypeScript.
 Desenvolvendo o projeto com Ionic
•  Criar pasta services embaixo da pasta src
•  Adicionar o arquivo TypeScript github.ts, contendo o código abaixo:
Módulos importados para o serviço

Permite a injeção desse serviço em outro módulo

Utilizado para chamar a API do GitHub

 Desenvolvendo o projeto com Ionic
•  Há 3 arquivos na pasta app/pages/home:
•  Home.html
•  Home.scss
•  Home.ts
•  Alterar o arquivo home.ts para o código abaixo, a fim de a lista de repositórios de GitHubService:
Desenvolvendo o projeto com Ionic
 Desenvolvendo o projeto com Ionic
•  Alterar o arquivo home.html para o código abaixo:
Desenvolvendo o projeto com Ionic

Bind do controle input à propriedade username

Chama o método getRepos ao clicar no botão

Loop nos repositórios retornados por getRepos

Cria um card para cada repositório retornado

Testando a aplicação
 Mais um exemplo de aplicação...
•  Ionic-conference
•  Baixar em https://github.com/ionic-team/ionic-conference-app
Mais um exemplo de aplicação...
Mais um exemplo de aplicação...
Mais um exemplo de aplicação...
Mais um exemplo de aplicação...
Mais um exemplo de aplicação...
Mais um exemplo de aplicação...
Mais um exemplo de aplicação...
 Exercício para casa...
•  Baixar e analisar o código da aplicação Ionic-conference