mobile dev - aplicativos

30
Mobile Dev Alex do Espírito Santo

Upload: alex-espirito-santo

Post on 14-Feb-2017

47 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Mobile Dev - Aplicativos

Mobile Dev

Alex do Espírito Santo

Page 2: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Pensar em mobile e ́ pensar nas pessoas

Pensar em mobile e ́ pensar no comportamento das pessoas

Page 3: Mobile Dev - Aplicativos

Desenvolvimento Mobile

A internet e ́ uma so ́, na ̃o ha ́ separac ̧a ̃o entre os meios digitais e o usua ́rio esta ́ no centro.

Page 4: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Precisamos estar presente

Page 5: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Como ?

Responsividade é uma opção

Page 6: Mobile Dev - Aplicativos

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

Page 7: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Decidimos por app !

E o que fazer diante disso ?

Page 8: Mobile Dev - Aplicativos

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

Page 9: Mobile Dev - Aplicativos

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

Page 10: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Quais as principais Plataformas ?

Page 11: Mobile Dev - Aplicativos

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

Page 12: Mobile Dev - Aplicativos

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!!!

Page 13: Mobile Dev - Aplicativos

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:

Page 14: Mobile Dev - Aplicativos

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?

Page 15: Mobile Dev - Aplicativos

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?

Page 16: Mobile Dev - Aplicativos

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

Page 17: Mobile Dev - Aplicativos

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

Page 18: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Plugins

Page 19: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Plugins

Page 20: Mobile Dev - Aplicativos

Desenvolvimento Mobile

Escolhemos ...

Page 21: Mobile Dev - Aplicativos

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

Page 22: Mobile Dev - Aplicativos

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

Page 23: Mobile Dev - Aplicativos

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/

Page 24: Mobile Dev - Aplicativos

Desenvolvimento Mobile

E porque IONIC ?

● ngCordova: biblioteca javascript que permite acessar recursos

Cordova com diretivas Angular - http://ngcordova.com/

Page 25: Mobile Dev - Aplicativos

Desenvolvimento Mobile

E porque IONIC ?

Labpreview web de cada plataforma

Page 26: Mobile Dev - Aplicativos

Desenvolvimento Mobile

E porque IONIC ?

Page 27: Mobile Dev - Aplicativos

Desenvolvimento Mobile

E porque IONIC ?

Page 28: Mobile Dev - Aplicativos

Desenvolvimento Mobile

E porque IONIC ?

Cloud IONIC

Page 29: Mobile Dev - Aplicativos

Desenvolvimento Mobile

E porque IONIC ?

Page 30: Mobile Dev - Aplicativos

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