Workshop - Cordova e Ionic
Transferir como PPTX, PDF0 gostou201 visualizações
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.
Workshop - Cordova e Ionic
- 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
- 10. Sencha Touch
- 11. Ratchet
- 12. Ionic
- 13. Lungo
- 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.
Notas do Editor
- #19: 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
- #25: cordova.plugins.notification.local.schedule({ title: tit, message: msg });
- #26: window.localStorage.setItem( ‘awesome-key’, ‘awesome-value’ ); window.localStorage.getItem( ‘awesome-key’ ); var appData = JSON.parse( window.localStorage.getItem( ‘app-name’ ));
- #28: http://sourcefreeze.com/cordova-inappbrowser-plugin-example-using-ionic-framework/