O workshop abordou o uso do Ionic e Cordova para desenvolvimento de aplicações móveis, destacando prós e contras, integração com frameworks, configuração de ambiente e comandos principais. Os participantes aprenderam sobre a criação de builds nativas, armazenamento de dados e uso de plugins, além de hands-on para praticar o desenvolvimento de um protótipo. O documento também incluiu referências úteis e exemplos de aplicativos que utilizam a tecnologia.

1. Workshop: Ionic + Cordova
PARCERIAS
ESTRATÉGIAS & RESULTADOS

3. 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

4. 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...

5. Frameworks para desenvolvimento móvel
Aplicações Nativas Aplicações Híbridas
Aplicações Cross-Platform

6. 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 *

7. 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

8. Integração com frameworks

9. jQuery Mobile

10. Sencha Touch

11. Ratchet

12. Ionic

13. Lungo

14. React Native (facebook)

15. Ionic 2

16. Configurando ambiente
o Instalar NodeJS (https://nodejs.org/en/)
o Instalar SDK Android ou iOS (apenas MAC)

17. Ionic/Cordova CLI – Principais Comandos
tabs, sidemenu, maps, salesforce, complex-list, blank
Referência: http://ionicframework.com/docs/cli/

18. 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

19. 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

20. Criando builds nativas e testando no dispositivo

21. Debug remoto de aplicações hibridas
o Debugando no browser
o Rodando o aplicativo no celular
o chrome://inspect/

22. Overview plugins - Cordova
Referência: http://cordova.apache.org/plugins/
http://ngcordova.com/

23. Overview plugins - Ionic
Referência: https://market.ionic.io/plugins

24. Exibindo notificações (Push Notification)
o Local Notification (https://github.com/katzer/cordova-plugin-local-notifications/wiki/03.-
Installation)
Hands On

25. 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

26. 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/

27. Usando InAppBrowser
o Abrindo um browser dentro do aplicativo
Demo

28. Ionic Creator
o Facilidade para criar um protótipo
o Fazer download do pacote
o https://creator.ionic.io
Demo

29. 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

30. 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.