Desenvolvendo

aplicaes mveis com

Ionic Framework

Mdulo I
Tipos de aplicaes mveis
O que Ionic Framework?
Instalando e configurando o Ionic
Comandos principais (linha de comando)
Arquitetura do projeto
Conhecendo componentes
Objetos visuais
Api em Javascript

SASS

Mdulo II
Conhecendo o Creator Ionic (IDE amigvel)
Conhecendo o Ionic View
Aplicando Rotas
Utilizando plug-ins de terceiros no Ionic
Configurando ambiente de deploy (Android)
O que Apache Cordova?
Instalando e configurando o Cordova
Utilizando plug-ins do Cordova

Mdulo III
Conhecendo o Firebase
Acessando funes do Firebase
Projeto final (Loja virtual de CDs)
Publicando na loja

Tipos de aplicaes mveis

Nativas
Acesso direto ao hardware
Melhor performance
Possui acesso loja (monetizao)
Linguagens de programao diferentes
WebApps
Adequar resolues de dispositivos mveis
Roda direto no browser
No possui loja (Sem monetizao)
HTML, CSS, Javascript
Hbridas
Resolues adequadas pelo framework CSS
Acessa o hardware por meio de API
Roda via browser (embutido)
Possui acesso loja (monetizao)
HTML, CSS, Javascript

Ionic Framework
Framework open source otimizado para plataformas
mobile
Html, Css e Javascript
Desenvolvido em cima do AngularJs
Construdo especificamente para aplicativos Cordova
um bootstrap para celular

Instalando e configurando Ionic

Pr-requisitos:
Noje.js
Editor de textos (Sugesto: Atom, Sublime, VS Code
Para deploy em Android
Android SDK
Java SDK
Java RE
Emulador (genimotion, bluestark, andyroid)
Executar na linha de comando:
npm install ionic bower cordova -g

Comandos principais
Executar na linha de comando:
ionic --help
ionic templates (blank, tabs, sidemenu, maps)
ionic start [nome_projeto] [template]
ionic serve (ionic serve l)

Arquitetura do projeto
hooks tasks do Gulp a serem executadas atravs do comando ionic prepare
platforms contm as plataformas suportadas pela aplicao. Ex: android e ios
plugins local onde ficam registrados todos os plugins utilizados pelo aplicativo
scss pasta de arquivos sass
www a principal pasta do projeto, nela que se encontra todo o cdigo da
aplicao, ou seja, os htmls, css, js
bower.json arquivo responsvel por gerenciar os pacotes do bower
config.xml contm algumas configuraes do projeto
gulpfile.js arquivo que contm as tasks de automatizao
ionic.project contm algumas informaes do projeto
package.json contm as dependncias do Gulp e de alguns plugins

Conhecendo componentes
Objetos Visuais
http://ionicframework.com/docs/components/
Api Javascript
http://ionicframework.com/docs/api/

DEMO!!

SASS
uma plataforma pra desenvolver CSS de forma mais proveitosa e produtiva, podendo
dividir em vrios arquivos .scss e formando um nico .css, possibilitando vrias pessoas
trabalharem no mesmo CSS de um projeto.
Exemplo:
$cor_de_fundo_marrom : #4c270b
body
{
background-color: $cor_de_fundo_marrom;
}

ionic setup sass

Aplicando Rotas
$routeProvider
Forma de criar rota padro no AngularJS
Ligar URL especfica para um controlador e atribuindo um modelo
As views eram geradas em <div ng-view></ div>

$stateProvider
Permite dar nomes para as rotas
No precisa usar endereos diretos
Utiliza o atributo ui-sref ao invs de href
As views eram geradas em <div ui-view></ div>