- Frameworks para desenvolvimento móvel
- O que é o Apache Cordova?
- Prós e Contras
- Integração com frameworks (Sencha, Ionic, Jquery Mobile, etc)
- Configurando o ambiente de desenvolvimento
- Ionic/Cordova CLI – Principais Comandos
- Conhecendo os diretórios e o arquivo config.xml
- Alterando ícones do aplicativo
- Criando builds nativas e testando no dispositivo
- Debug remoto de aplicações hibridas
- Overview plug-ins
- Eventos Nativos
- Exibindo notificações
- Utilizando armazenamento de dados
- Acesso aos dados dos dispositivos
- Usando o plug-in InAppBrowser
- Trabalhando com Push Notification
- Desenvolvendo nossa primeira aplicação
- Ionic Creator
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...
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
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
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/
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.
Notas do Editor
Nome do aplicativo
Acess
Habilitar com quais dominios o meu App vai se comunicar
Engine
Possibilidade de configurar as versões do Android/iOS que será utilizado no app
Plugin
Preference
Platform
Referência:
http://cordova.apache.org/docs/en/latest/config_ref/index.html