Ionic Framework

Apresentação sobre o framework Ionic

Transcript

1. Ronan A. Miotto ronanmiotto@gmail.com
2. Um Framework front-end open source, voltado para o desenvolvimento de aplicativos móveis híbridos com HTML5. Introdução
3. Aplicativo Nativo X Aplicativo Híbrido
4. Gratuito e de código aberto, Ionic oferece uma biblioteca de HTML otimizado para celular, CSS e JS components. Cria aplicativos altamente interativos. Construído com Sass e otimizado para AngularJS. Continuando...
5. Desenvolvido pelos colaboradores: Max Lynch, Adam Bradley e Benny Sperry.
6. A Ideia Criar aplicativos com a mesma interface, independentemente do dispositivo.
7. Desenvolvimento
8. Conjunto de API's que permitem desenvolver aplicativos mobile nativos. Utiliza somente HTML, CSS e JavaScript. Inicialmente criado como PhoneGap, foi adquirido pela Adobe, que doou o código fonte para a Apache Foundation, e se tornou open-source.
9. O PhoneGap é um framework em HTML, CSS e JavaScript mantido pela Adobe, que auxilia na criação de aplicativos multiplataformas. Utiliza a plataforma Apache Cordova.
10. Ionic utiliza AngularJS. O Angular é um framework JavaScript mantido pelo Google.
11. Exemplos
15. *Para uma visão mais ampla sobre listas , leia AngularJS Lista Docs.
20. Fonte: http://ionicframework.com/docs/components/
21. Aplicativos desenvolvidos com o Framework Ionic
22. Fonte: http://ionicframework.com/blog/built-with-ionic-mallzee/ Mallzee
23. Fonte: http://ionicframework.com/blog/built-with-ionic-sworkit/ Sworkit
24. Fonte: http://showcase.ionicframework.com/
25. Fonte: http://showcase.ionicframework.com/
26. Instalação
27. Instalação (Ubuntu) $ sudo apt-get install python-software-properties $ sudo add-apt-repository ppa:chris-lea/node.js $ sudo apt-get update $ sudo apt-get install nodejs npm
28. Instalação (Ubuntu) 2 – Instalando Ionic Cordova $ npm install -g cordova ionic Obs.: Instalar as dependências obrigatórias de cada plataforma. Android: http://cordova.apache.org/docs/en/3.3.0/guide_platforms_android_index.md.ht ml#Android%20Platform%20Guide IOS: http://cordova.apache.org/docs/en/3.3.0/guide_platforms_ios_index.md.html#i OS%20Platform%20Guide
29. Criando um projeto Ionic
30. Configurações Fonte: https://medium.com/@joaofraga/aplicativo-mobile- multiplataforma-parte-1-7a030d958d0c Fonte: http://developer.android.com/tools/device.html Aplicativo Mobile multiplataforma —  Parte 1
31. Criando um projeto Ionic Usando modelos de aplicativos Ionic $ ionic start meuApp tabs
32. Criando um projeto Ionic $ cd meuApp $ ionic platform add android ou ios $ ionic build android $ ionic run android ou $ ionic emulate android
33. Aplicativo
34. Vantagens e Desvantagens
35. Vantagens •Ganhar tempo; •Experiência em desenvolvimento Web (HTML, CSS, JavaScript); •Multiplataforma;
36. Desvantagens •Performance;
37. Dúvidas?!?
38. Obrigado!
39. https://speakerdeck.com/ronanmiotto/ionic-framework/edit Disponível em: