Desenvolvimento de Aplicativos Móveis Multiplataforma

José Augusto Cintra

Professor da Faculdade Sumaré – SP

Analista de TI da Empresa PRODAM – SP

[email protected]

htttp://www.html-apps.info

Desenvolvimento de

Aplicativos Móveis Multiplataforma

Introdução

Objetivo:

Apresentar tecnologias web que permitam a criação de aplicativos móveis

multiplataforma e compará-las às formas tradicionais de desenvolvimento.

Principais Plataformas Móveis

Apple

Sistema Operacional: IOS

Linguagem: Objective C

Android

Sistema Operacional:Android (Linux)

Linguagem: Java c/MáquinaVirtual Dalvik

Windows

Sistema Operacional:Windows Phone

Linguagem: C#,VB.NET, ...

Novas plataformas: Firefox,Tizen, ...

Características das Plataformas Móveis

Touch

Acelerômetro/Sensores

Multimídia aprimorada

GPS

Internet / Social

Novas Experiências de Usuário

Características das Plataformas Móveis

Novas formas de monetização:

Aplicativos pagos

Premium

Aplicativos “grátis”

Advertising

Propagandas

Freemium

Compra de itens individuais (in-app)

Dificuldades de Desenvolvimento

Diferentes plataformas:

Maiores oportunidades de vendas

Maior curva de aprendizado

Maiores custos

Manutenção complexa

Como minimizar essas dificuldades ???

Resposta: Utilizando uma única ferramenta que gere código

nativo para várias plataformas!

Por que não HTML?

Ou melhor:

WEB APPS

WEB Apps

Web Apps ou HTML Apps não diferem muito das aplicações web

tradicionais, a não ser por 3 detalhes:

Podem ser instaladas no dispositivo local (celular, tablet, desktop);

Podem ser executadas em modo offline;

Possuem acesso às APIs e manipulam recursos locais dos dispositivos

como câmera, acelerômetro, GPS, etc.

WEB Apps

Web Apps são escritas com tecnologias abertas e responsivas que se baseiam

na tríade HTML5, CSS3 e Javascript. Dessa forma, com ferramentas

apropriadas, é possível, por exemplo, executar uma aplicação web em um

dispositivo Android como se fosse uma aplicação nativa com acesso aos

recursos que a máquina disponibiliza!

Tecnologias

Essa magia é possível graças aos seguintes fatores:

Evolução do HTML e CSS HTML5 e seus novos recursos (Canvas,

áudio, novos controles, etc.).

Evolução do Javascript e novos frameworks

Design responsivo

Frameworks híbridos

Tecnologias

HTML5

Canvas Elemento usado para desenhar gráficos “on the fly”.

Audio Elemento que padroniza a execução de áudio.

Entrada de dados Novos controles sofisticados para interação com o

usuário

GPS O Recurso de Geolocalização do HTML5 permite determinar a

localização geográfica do usuário em termos de coordenadas

CSS3

Novas opções de formatação e recursos como media-queries e design

responsivo permitem construir interfaces próximas do visual dos

dispositivos mobile

Tecnologias

Armazenamento de Dados

A persistência de dados em webapps pode ser implementada através da API

Web Storage do HTML5 ou através de bancos de dados mobile.

Web Storage

sessionStorage Dados voláteis

localStorage Dados que persistem entre as sessões, mesmo após o encerramento

das aplicações com Javascript e SQLite

Bancos de Dados Mobile

Existem versões mobile dos principais bancos de dados do mercado que

disponibilizam APIS Javascript para utilização em webapps.

Tecnologias

Bibliotecas Javascript

Frameworks Mobile Facilitam a criação de interfaces responsivas com as

características dos dispositivos móveis

Jquery Mobile, Zepto.js, SenchaTouch

CanvasFacilitam o trabalho com o elemento HTML5 Canvas

oCanvas, KinectiJS (exemplo)

Audio Facilitam o trabalho com o elemento HTML5 Audio

Buzz, SoundJS

Touch Oferecem suporte para eventos “Touch”

Hammer, QuoJS

Tecnologias

Bibliotecas Javascript para criação de Jogos HTML5

Ambientes de desenvolvimento completos

Construct2 , GameMaker, GameSalad, etc.

Bibliotecas

Quintus, Crafty, Enchant, etc.

Tecnologias

Frameworks híbridos

Frameworks que criam uma ponte entre as aplicações nativas e as

aplicações WEB, fornecendo um gateway entre o WebApp e os dispositivos

móveis, permitindo criar uma aplicação que possua acesso aos recursos

locais como a câmera, o acelerômetro, etc.

PhoneGap, CocoonJS, IntelXDK

Ferramentas dessa natureza é que permitem que o webapp seja vendido

nas lojas e instalado nos diversos dispositivos.

Web Apps: Prós e Contras

Comparação em relação ao desenvolvimento multiplataforma

WebApp App Nativa

Performance - +

Acesso a recursos do dispositivo - +

Facilidade de Desenvolvimento + -Custo de Desenvolvimento + -Curva de aprendizado + -

Estratégias de desenvolvimento

1. Ter uma ideia (Parte mais difícil)

o Aplicativos simples muitas vezes dão melhores resultados

2. Escolher a forma de monetização

o Aplicativos “Grátis” podem ser um bom começo

3. Montar uma equipe de profissionais

o A menos que você possua muito tempo disponível

4. Desenvolver (Parte mais fácil)

o Basta possuir conhecimento de Javacript, HTML e CSS

5. Publicar (Muito trabalhoso)

o Diversas lojas, muita burocracia

6. Divulgar (Pode ser caro)

o As ferramentas gratuitas de marketing podem trazer resultados a

longo prazo

Referências

Links:

http://www.w3schools.com/html/default.asp

http://www.html-apps.info

http://pt.slideshare.net/rodrigocasca/phonegap-criando-aplicacoes-android-e-ios-com-html5

https://developer.mozilla.org/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps

Livros:

Jonathan Stark, “BuildingAndroid Apps with HTML, CSS and JavaScript”, 2010, O’Reilly

Pascal Rettig,” Professional HTML5 Mobile Game Development”,2012,JohnWiley & Sons Inc

<fim> Obrigado! </fim>