Mobile Dev
Alex do Espírito Santo
Desenvolvimento Mobile
Pensar em mobile e ́ pensar nas pessoas
Pensar em mobile e ́ pensar no comportamento das pessoas
Desenvolvimento Mobile
A internet e ́ uma so ́, na ̃o ha ́ separac ̧a ̃o entre os meios digitais e o usua ́rio esta ́ no centro.
Desenvolvimento Mobile
Precisamos estar presente
Desenvolvimento Mobile
Como ?
Responsividade é uma opção
Desenvolvimento Mobile
App ou Responsivo ?
Como decidir ?
Podemos Usar alguns Critérios:
1. Funcionalidades do dispositivo
2. Funcionamento offline
3. Descoberta
4. Velocidade
5. Instalação
6. Manuntenção
7. Independência da plataforma
8. Restrição de conteúdo, processo de aprovação e taxas
9. Custo de desenvolvimento
10. Interface do usuário
11. Estratégia de Marketing
Desenvolvimento Mobile
Decidimos por app !
E o que fazer diante disso ?
Desenvolvimento Mobile
O que preciso aprender ?
S.O. Dispositivos Linguagem
1 iOS iPod, iPhone, iPad
Objective-CSwift
2 Android * Java (DART ?)
3 Blackberry Blackberry devices
C/C++/Qt,
JavaScript/CCS/HT
ML,
ActionScript/AIR,
Java Android
4 Windows Phone Windows C#
5 Palm WebOS HP HTML/CSS
Desenvolvimento Mobile
O que preciso aprender ?
S.O. Dispositivos Linguagem
6 Bada Samsung C++
7 Symbian Nokia C++
8 Amazon Fire OS
Kindle Fire HDX, Fire Phone
JAVA? (Android Open Source)
9 Firefox OS Alcatel, LG, ZTE HTML/CSS
10 Ubuntu Meizu MX4,
BQ Aquaris E5 HD,
BQ Aquaris E4.5
QML, C or C++ e JavaScript
11 Tizen Samsung Z1Samsung ZQE9000
JavaScript, CSS, HTML5
Desenvolvimento Mobile
Quais as principais Plataformas ?
Desenvolvimento Mobile
E dá pra desenvolver uma vez e rodar em todos ?
Framework/Suite Tipo de App Linguagem Pago
1 Phonegap Híbrido JS/HTML/CSS (Web)
apenas serviços online
2 Apache Cordova Híbrido Web free
3 Xamarin Nativo C# free (agora)
4 Genexus Nativo Própria licença
5 Appacelarator Nativo Web licença
6 Sencha Touch Híbrido Web licença
7 Telerik Híbrido Web licença
8 Delphi Nativo Object Pascal licença
9 Ionic Híbrido Web serviços online
Desenvolvimento Mobile
O que é um app híbrido ?
Aproveitar o motor web existente nas
plataformas, no S.O. dos dispositivos, para
criação de aplicações com interface web que
interajam com o dispositivo. O código html,
javascript e css está embarcado no app.
NÃO É SITE!!!
Desenvolvimento Mobile
Como desenvolver aplicativos híbridos?
Para o desenvolvimento App Híbrido é recomendado escolher um framework javascript para construir as ações do app.Os principais frameworks javascript para uso em conjunto com Cordova são:
Desenvolvimento Mobile Nome Onde ?
1 JQueryMobile http://jquerymobile.com/
2 Framework7 - F7 http://www.idangero.us/framework7/#.Vddj-VNViko
3 Sencha Touch https://www.sencha.com/products/touch/#overview
4 Chocolate-UI http://chocolatechip-ui.com/
5 Ratchet http://goratchet.com/examples/
6 Lungo http://lungo.tapquo.com/
7 React http://facebook.github.io/react/
8 Jo http://joapp.com/
Como desenvolver aplicativos híbridos?
Desenvolvimento Mobile
Nome Onde ?
9 Junior http://justspamjustin.github.io/junior/#home
10 jQT http://jqtjs.com/
11 Bootstrap http://getbootstrap.com/
12 Famo.us https://famo.us/
13 OnsenUI http://onsen.io/
14 Intel XDK https://software.intel.com/en-us/intel-xdk
15 Mobile Angular UI http://mobileangularui.com/
16 Ionic http://ionicframework.com/
Como desenvolver aplicativos híbridos?
Desenvolvimento Mobile
Vamos usar Cordova
Cerca de 2009A Nitobi cria o framework PhoneGap
Setembro 2011Nitobi doa código do PhoneGap para a Apache Software Foundation
Outubro 2011Nitobi anuncia que foi adquirida pela Adobe. Adobe oferece suporte a código aberto do PhoneGap. Foi sugerido renomear o projeto por razões legais.
Fevereiro 2012O projeto mantido pela Apache é renomeado "Cordova", por causa de Cordova Street em Vancouver, onde Nitobi tinha a sua sede.
História
Desenvolvimento Mobile
Vamos usar Cordova
É um conjunto de APIs que permitem acessar as funções do dispositivo, como a câmera ou o acelerômetro, a partir do JavaScript.
Permite que um aplicativo seja desenvolvido apenas com HTML, CSS e JavaScript, ou seja, sem desenvolver qualquer código nativo (Java, Objective-C, etc)
A partir do projeto com Cordova gera-se o aplicativo usando a SDK própria de cada plataforma mobile, que podem estar disponíveis para download na loja de aplicativos de cada fornecedor.
Cordova está disponível para as plataformas: Android, iOS, Windows, BlackBerry, Ubuntu, Firefox, LG WebOS e FireOS. Em versões anteriores o Cordova já esteve disponível também para Palm WebOS, Bada, e Symbian
Desenvolvimento Mobile
Plugins
Desenvolvimento Mobile
Plugins
Desenvolvimento Mobile
Escolhemos ...
Desenvolvimento Mobile
E porque IONIC ?
Mais do que código. Ionic é um Ecosistema
● Desenvolvido inspirado nas SDKs Nativas
● Construído para funcionar com o Cordova
Um SDK Web
Desenvolvimento Mobile
E porque IONIC ?
1. Trabalha muito bem com o AngularJS.
2. Utiliza o UI-Router para gerenciar as rotas e estados das
views. permitindo que criar navegação não linear no app.
3. Todo o CSS é gerado a partir do SASS e foi projetado para ser
sobrescrito.
4. Performance é obsessão, com uma interface rápida e
consistente. Utiliza recursos de aceleração de hardware e
manipula minimamente o DOM.
5. Não possui dependência do jQuery, embora seja possível
adicioná-lo.
6. Permite utilizar as ferramentas de debug dos navegadores.
7. Comunidade forte e ativa, em parte pelo fato da utilização do
AngularJS
8. Open Source
Desenvolvimento Mobile
E porque IONIC ?
9. Componentes de UI próprios de cada plataforma (automático)
10. Componente de listagem que renderiza apenas os itens
visíveis (collection-repeat)
11. Permite a navegação de voltar pelos botões da interface, pelo
botão do aparelho ou puxando a tela
12. Mantém as Views em cache e o estado de cada tela, até
mesmo a posição do scroll é mantida
13. Diversos Componentes de UI
14. +700 ícones disponíveis
15. SVGs Animados de loading que podem ser alterados com css
http://ionicframework.com/
Desenvolvimento Mobile
E porque IONIC ?
● ngCordova: biblioteca javascript que permite acessar recursos
Cordova com diretivas Angular - http://ngcordova.com/
Desenvolvimento Mobile
E porque IONIC ?
Labpreview web de cada plataforma
Desenvolvimento Mobile
E porque IONIC ?
Desenvolvimento Mobile
E porque IONIC ?
Desenvolvimento Mobile
E porque IONIC ?
Cloud IONIC
Desenvolvimento Mobile
E porque IONIC ?
Referênciashttp://ionicframework.com/
https://www.owasp.org/index.php/Mobile#tab=Home
http://giorgiofellipe.com.br/ionic-present
http://www.luisaambros.com/blog/diferenca-entre-aplicativos-nativos-hibridos-e-mobile-web-apps/
http://mobilexpert.com.br/apps/outros/materias/13160/windows-supera-ios-no-brasil-android-continua-lider
https://www.linkedin.com/pulse/20140612154131-26248656-ionic-framework-porque-utilizar