workshop - cordova e ionic

Workshop: Ionic + Cordova

PARCERIASESTRATÉGIAS & RESULTADOS

Felipe de Moraes Lastowizka

SOLIDEZAnalista e Desenvolvedor na Build IT desde 2012

Microsoft MCSD Web Applications desde 2013

Programador desde 2009

Apaixonado por tecnologia e empreendedorismo

felipe.moraes@buildit.com.br

twitter.com/flastowizka

github.com/flastowizka

Agenda

o Frameworks para desenvolvimento móvel

o O que é o Apache Cordova?

o Prós e Contras

o Integração com frameworks

o Configurando o ambiente de desenvolvimento

o Ionic/Cordova CLI – Principais Comandos

o Conhecendo os diretórios e o arquivo config.xml

o Debug remoto

o Plugins

o Outros e Hands On...

Frameworks para desenvolvimento móvel

Aplicações Nativas Aplicações Híbridas

Aplicações Cross-Platform

O que é o Apache Cordova?

o Open Source

o Container de aplicações Hibridas

o API’s de comunicação com o device

o HTML, CSSe JavaScript

o Utiliza o Browser nativo do dispositivo *

Prós Contras

o Um código para todas plataformas

o Baixo custo de desenvolvimento e

manutenção

o Prototipação

o Muitos plug-ins (Android e iOS)

o Limitado ao webview (não funciona

para widgets e wearables)

o Requisitos específicos para algumas

plataformas

o Velocidade – se não bem estruturado o

aplicativo não tem uma performance

boa

Integração com frameworks

jQuery Mobile

Sencha Touch

Ratchet

Ionic

Lungo

React Native (facebook)

Ionic 2

Configurando ambiente

o Instalar NodeJS (https://nodejs.org/en/)

o Instalar SDK Android ou iOS (apenas MAC)

Ionic/Cordova CLI – Principais Comandostabs, sidemenu, maps, salesforce, complex-list, blank

Referência: http://ionicframework.com/docs/cli/

Arquivo Config.xml

o Nome do aplicativo

o Acesso – Limitar domínios

o Engine – Versão de Android/iOS

o Plugin

o Preference

o Platform

Alterando Icones e Splash do aplicativo

o icon.png, icon.psd ou icon.ai -> Resolução mínima 192x192px

o splash.png, splash.psd ou splash.ai -> Resolução mínima 2208x2208px

Referência: http://ionicframework.com/docs/cli/icon-splashscreen.html

Criando builds nativas e testando no dispositivo

Debug remoto de aplicações hibridas

o Debugando no browser

o Rodando o aplicativo no celular

o chrome://inspect/

Overview plugins - Cordova

Referência: http://cordova.apache.org/plugins/http://ngcordova.com/

Overview plugins - Ionic

Referência: https://market.ionic.io/plugins

Exibindo notificações (Push Notification)

o Local Notification (https://github.com/katzer/cordova-plugin-local-notifications/wiki/03.-

Installation)

Hands On

Armazenamento de dados

o Local Storage

o WebSQL – possui limitação de tamanho por cada browser

o SQL Lite

o PouchDb – SQL Lite + CouchDB

Hands On

Acesso aos dados do dispositivo

o device.model

o device.platform

o device.uuid

o device.version

o device.manufacturer

o device.isVirtual

o device.serial

Demo

Referência: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/

Usando InAppBrowser

o Abrindo um browser dentro do aplicativo

Demo

Ionic Creator

o Facilidade para criar um protótipo

o Fazer download do pacote

o https://creator.ionic.io

Demo

Aplicativos que usam Ionic

o https://play.google.com/store/apps/details?id=com.ionicframework.rendafixa997647&hl

=en

o https://play.google.com/store/apps/details?id=com.addictedmoms.app&hl=pt_BR

o https://play.google.com/store/apps/details?id=sworkitapp.sworkit.com

o https://play.google.com/store/apps/details?id=com.chefsteps.mobile

Atividade

o Criar um protótipo de CRUD via Ionic Creator

o Fazer download

o Salvar dados com Local Storage

o Utilizar um plugin cordova. Ex.: tirar foto, vibrar, buscar localização atual, ver conexão

wifi, etc.