Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-tiago-porto
0 gostou77 visualizações
O documento discute o desenvolvimento de aplicativos híbridos usando o framework Ionic. Descreve um projeto de aplicativo móvel para votação em tempo real desenvolvido com Ionic e as vantagens e desafios encontrados. Também fornece detalhes sobre como configurar e usar o Ionic, incluindo templates, plugins, build e publicação.
Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-tiago-porto
- 1. Aplicativos Híbridos com Ionic. Você também pode começar a desenvolver agora!
- 2. Tiago Porto tiagoporto [email protected] ondeeuvimparar.com.br tiagoporto.com desenvolvedor front-end designer beer freak viajador
- 3. 1º Round Case ilustrando as particularidades do desenvolvimento mobile. 2º Round Desenvolvendo com Ionic.
- 4. <o-desafio/> • Aplicativo para o Congresso Brasileiro de Coluna. • Recurso Principal: votação em tempo real. • Plataformas Android e iOS. • Aproximadamente 1 mês e meio de desenvolvimento (com testes e publicação na Play Store e App Store). • Vida útil de 3 dias (Dias do congresso).
- 5. <e-o-que-temos?/> • 1 desenvolvedor front-end que nunca fez um aplicativo. • E todos os outros envolvidos marinheiros de primeira viagem.
- 6. O caminho que seguimos?
- 8. Java Swift ou Objective-C • Proeficiência em cada uma das linguagens. • 2 desenvolvimentos paralelos. NATIVO
- 9. • Proeficiência em desenvolvimento web. • 1 único desenvolvimento - várias plataformas. HÍBRIDO
- 10. E o escolhido foi?
- 11. Versão 1.0
- 12. <problemas/> • Componentes não otimizados. • Performance ruim. • Experiência do usuário comprometida. • Muita dificuldade para customizar componentes. • Dificuldade para integrar back-end com os componentes.
- 13. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS. Versão 2.0
- 14. Mas aí você pergunta, porque já não fez em Ionic? — O caminho difícil é sempre o melhor, poxa!!!!!!!!
- 15. Mas aí você pergunta, porque já não fez em Ionic? — Conhecia o jQuery Mobile de uns estudos bobos que tinha feito há muito tempo. Vim a conhecer o Ionic no meio do processo. É um projeto relativamente novo, tanto que foi utilizada a versão alpha.
- 17. <benefícios/> Componentes performáticos.Arquitetura robusta. Design simples e funcional. Componentes similares aos do sistema nativo. Uma poderosa CLI Aplicativo para android e iOS, que possibilita testar o aplicativo em desenvolvimento sem a necessidade de instalação.
- 18. <problemas???/> – Putz! o que já estudei e fiz de Angular.js é pouco (entenda quase nada). – Também vou ter que aprender outro framework?
- 19. <soluções/> Nada que 2 dias de estudo e prática não resolva. Frameworks costumam ter muitas coisas em comum, um puxa o outro. Além do mais, Ionic tem a premissa de ser divertido aprender.
- 20. <o-que-preciso-estudar?/> • Entenda como funciona as Rotas. • Leia um pouco sobre os controllers e os services. • E o principal, deixe um pouco de lado a manipulação do DOM que estamos acostumados e caia de cabeça nas diretivas. • O resto é de boas, vai por mim.
- 21. • Não precisa estudar todos os componentes do framework, vai utilizando os que precisa agora, siga a documentação oficial. • A linha de aprendizado é muito rápida. <o-que-preciso-estudar?/>
- 22. Necessários para utilizar funcionalidades do dispositivos como: • Acelerômetro • Câmera • GPS • Arquivos • etc Basta linkar o plugin e utilizá-lo no javascript. Os plugins de cordova são escritos na linguagem nativa de cada plataforma.
- 24. <build/> Obs: É necessário fazer algumas modificações no config.xml e montar o diretório corretamente para upload.
- 25. • Não necessita instalação de dependências. • Fácil manuseio das chaves e dos certificados para produção. • Fácil download do aplicativo com QRCode. • Um único upload gera o build para as plataformas necessárias. Plataformas suportadas <facilidades/>
- 26. Nitobi Software criou Phonegap - 2009 Adobe adquiriu Nitobi - 2011 Adobe doou o código Apache Software Foundation - 2011 Adobe ficou com a marca Adobe PhoneGap E o projeto livre foi renomeado para Apache Cordova <qual-a-diferença?/>
- 27. • Foi criada API para acessar um banco MySQL e responder às requisições com um JSON. • Aplicação web que exibia em tempo real o resultado da votação. <o-que-mais-foi-necessário?/>
- 28. <ponderações/> O aplicativo ficou perfeito? Claro que não. A maior parte do tempo gasto foi de estudo e tentativas de erro e acerto. Algumas pequenas funcionalidades foram abortadas.
- 29. Como ficou a experiência para o usuário? Relativamente boa, algumas coisas poderiam ter sido feitas de forma diferente, o que só vim a pensar depois que estava pronto. Algumas transições do framework não estão 100%, mas acredito que com o passar do tempo a comunidade do Ionic resolva isso. Também tive problemas com diretivas do angular como ng-show e ng-hide que não funcionaram tão bem no iOS quanto no Android. É preciso muito teste nos dispositivos, alguma coisa vai funcionar diferente em cada plataforma e pode pedir outra solução. <ponderações/>
- 30. Tirando os poréns o resultado ficou bom, atendeu à demanda a tempo e trouxe bons frutos. O importante é se aprimorar para o próximo projeto e não cometer os mesmos erros. <ponderações/>
- 31. +15mil requisições (dias do congresso) 755 Downloads <números/>
- 32. Agora a parte que interessa. Desenvolvimento com Ionic.
- 34. ...Instalando IONIC $ npm install -g cordova ionic
- 35. ... Iniciando o projeto $ ionic start nomeProjeto template opções de template disponíveis blank tabs (default) sidemenu
- 37. <diretório/> Principais arquivos e diretórios scss - Contém o arquivo inicial para desenvolvimento em sass www/js/app.js - Configuração das rotas do angular www/js/controllers.js - back-end do aplicativo www/js/services.js www/lib - bibliotecas gerenciadas pelo bower www/templates - páginas do app gerenciadas pelo app.js config.xml - configuração do aplicativo para build
- 38. ... adicionando plataformas $ ionic platform ios android
- 39. <splashscreen-e-ícone-automáticos/> • Crie o diretório resources na raiz do projeto. • Coloque os arquivos icon e splash dentro de resources. *Arquivos suportados: .psd, .png e .ai
- 40. <splashscreen-e-ícone-para-cada-plataforma/> • Dentro do diretório resources, crie os diretórios para as plataformas desejadas. • Coloque os arquivos icon e splash específicos de cada plataforma em seus diretórios respectivos.
- 43. $ ionic resources ... gerando splashscreen e ícones
- 44. ...utilizando Sass $ ionic setup sass
- 45. ...desenvolvimento e teste $ ionic serve
- 46. Device Mode
- 47. $ ionic serve --lab ...ionic lab
- 48. Versões de android e ios lado a lado
- 49. ...adicionando plugins do cordova $ ionic plugin add org.apache.cordova.camera Você pode adicionar os plugins pela url ou pelo id
- 50. $ ionic run android ...USB debugging
- 51. Inspect Device
- 52. Inspect Device
- 53. É necessário baixar o aplicativo para android ou ios. Conta na apps.ionic.io.
- 54. $ ionic upload ...publicando o app no ionic view
- 55. <build-para-testes/> Java JDK ANDROID JDK Apache ANT OS X Xcode
- 56. $ ionic build android|ios ...building
- 57. <distribuição/> • Conta de desenvolvedor. • Necessário acrescentar uma key no build que é possível gerar pelo JAVA. • Na play store leva uns 2 dias para o app ser publicado. • Conta de desenvolvedor. • É necessário gerar um certificado em um MAC e validá-lo online para criar um certificado de distribuição. • Gerar um Profile de distribuição do aplicativo, ligado ao certificado de distribuição. • Leva aproximadamente 7 dias para o app ser validado e publicado.
- 58. github.com/tiagoporto/desafio-mobile Aplicativo desenvolvido como desafio do Meetup Mobile Dev BH - 18/04/15. <quer-um-código-para-estudar?/> Requisitos • SplashScreen. • Integrar com API do GitHub para buscar os dados de um usuário informado no app. • Integrar com a Câmera do dispositivo para tirar uma foto e enviar para o e-mail do usuário retornado pela API do GitHub. • 2 horas para o desenvolvimento.
- 60. <híbrido-é-o-futuro?/> – Não faço ideia. O fato é que as tecnologias Web cresceram muito rapidamente nos últimos anos, e o JS foi uma das linguagens que mais se destacou. Alguns Sistemas como Firefox OS e Ubuntu Touch já aceitam aplicativos html5 rodando como nativos. Há rumores que a Microsoft irá liberar também no windows phone. Será que num futuro próximos as maiores também não irão se render?
- 61. Perguntas?(Que eu saiba responder por favor)
- 62. Referências https://angular.io/ https://cordova.apache.org/ http://ionicframework.com/ http://phonegap.com/ http://www.toptal.com/mobile/developing-mobile-applications-with-apache-cordova http://tableless.com.br/introducao-ao-ionic-framework/ Links úteis http://learn.ionicframework.com - Aprendendo ionic http://codepen.io/ionic/public-list - Exemplos de uso do ionic http://ionicframework.com/docs/components/ - Componentes do Ionic https://docs.angularjs.org/guide - Guia para desenvolvimento com angular https://docs.angularjs.org/api - Lista de toda a API do angular http://ionicframework.com/docs/guide/installation.html - Configuração para build https://ionicbrazil.herokuapp.com/ - Comunidade do Ionic do Brasil no Slack Links bacanas http://www.raymondcamden.com/2014/07/28/my-perspective-of-working-with-the-ionic-framework - Mais um desenvolvedor que acredita no potencial do ionic. https://medium.com/@sub_effect/adventures-in-apps-hybrids-for-the-amateur-6ef83cff335a - Um amador que já criou 5 aplicativos e aposta no Ionic