workshop - cordova e ionic
TRANSCRIPT
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
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.