Introdução a aplicativos híbridos com o Phonegap Parte IV

Clique aqui para ler Aplicativos Híbridos Parte 1

Clique aqui para ler Aplicativos Hibridos Parte 2

Clique aqui para ler Aplicativos Hibridos Parte 3

Caso de Sucesso: Kindle Store

Entrevista Mark Zureberg, sobre HTML5 Não estar pronto "Nosso maior erro foi apostar em HTML5", diz Zuckerberg

Quem não gostou nada desa declaração foi a equipe de Developers da Sencha Touch que em reposta fez o vídeo abaixo, demonstrado a sua versão de aplicativo o Fastbook totalmente desenvolvido em HTML5

Bom espero não ter perdido o foco da Palestra vamos voltar ao 

Phonegrap 

Pacote de aplicativos móveis na nuvem PhoneGap tira a dor de compilar aplicativos PhoneGap. 

Obter app-store prontos aplicativos sem a dor de cabeça de manter SDKs nativos. Nosso serviço de compilação PhoneGap faz o trabalho para você compilando na nuvem.

2008 -2011 - Cordova Phonegrap 

O PhoneGap produz um aplicativo estático composto de uma webview nativa e código para expor as funcionalidades de cada sistema para uma API em javascript. 

Seu código em HTML/CSS/JS será empacotado sem alterações significativas junto com o sistema nativo do PhoneGap e será executado como qualquer outra página da web, mas offline e com acesso às funções nativas. 

A engine que de fato executará o seu JavaScript depende de cada plataforma.

O aplicativo é implementado como uma página de web, nomeada index.html por padrão, que referencia qualquer arquivo CSS, JavaScript, de imagem, multimídia, ou qualquer outro recurso necessário para que este funcione. 

O app executa como um WebView dentro do encapsulamento da aplicação nativa, a qual você distribui para as lojas de aplicativos. 

Para que o aplicativo de web interaja com as diversas funcionalidades do dispositivo da mesma forma que aplicações nativas fazem, ele deve também referenciar o arquivo cordova.js, que provém as conexões com a API.


A aplicação continuará a ser uma aplicação feita em HTML + CSS + JS, que após o build, será encapsulada em um app, porém rodando como se fosse uma webview, dependendo do device/plataforma que, com o cordova, irá disponibilizar os recursos para acessar algumas funcionalidades nativas.

GitHub

GitHub é um Serviço de Web Hosting Compartilhado para projetos que usam o controle de versionamento Git. 

É escrito em Ruby on Rails pelos desenvolvedores da Logical Awesome (Chris Wanstrath, PJ Hyett e Tom Preston - Wernder). 

O GitHub possui planos comerciais e gratuitos para projetos de código aberto.

Este site possui funcionalidades de uma rede social como feeds, followers, wiki e um gráfico que mostra como os desenvolvedores trabalham as versões de seus repositórios.

O GitHub também possui um serviço parecido com o pastebin chamado Gist.

Alguns projetos importantes que estão hospedados no GitHub:

• BlogBridge
• Blueprint CSS Framework
• Capistrano
• Cute News (CutePHP)
• Diaspora (rede social)
• Haml
• JQuery
• Linux
• Merb
• MooTools
• Processing
• Prototype
• RSpec
• Rubinius
• Ruby on Rails
• script.aculo.us
• SproutCore
• YUI
• ASP.NET

Eduardo Erlo

Eduardo Erlo é formado em Ciência da Computação pela Universidade de Caxias do Sul - UCS Já trabalhou em projetos de desenvolvimento de ERP, sistemas de vendas online, sistemas acadêmicos, sistemas fiscais e sistemas web de grande número de acessos. 

Hoje trabalha como consultor autônomo em desenvolvimento de aplicações web de alta qualidade, utilizando como base tecnologias livres.

Links Fontes:

http://www.devmedia.com.br/aplicacoes-moveis-nativas-ou-web/30392

http://www.teclogica.com.br/blog/desenvolvimento-para-dispositivos-moveis-nativo-x-cross-platform/

http://www.cpgls.ucg.br/7mostra/Artigos/AGRARIAS%20EXATAS%20E%20DA%20TERRA/Desenvolvimento%20em%20Smartphones%20-%20Aplicativos%20Nativos%20e%20Web.pdf

http://developer.nokia.com/community/wiki/Arquitetura_de_aplica%C3%A7%C3%B5es_multiplataforma_para_dispositivos_m%C3%B3veis

http://www-03.ibm.com/software/products/pt/category/mobile-application-development

http://www.cin.ufpe.br/~tg/2003-1/vaab.PDF

http://www.devmedia.com.br/turbinando-aplicacoes-com-rest-e-backbone-js/29692

http://pt.wikipedia.org/wiki/Linguagem_server-side



http://tecnologia.terra.com.br/internet/quotnosso-maior-erro-foi-apostar-em-html5quot-diz-zuckerberg,4b98201fd70ea310VgnCLD200000bbcceb0aRCRD.html


http://www.midiatismo.com.br/midias-sociais/mark-zuckerberg-fala-sobre-erros-acertos-e-rumores-no-techcrunch-disrupt-sf-2012


http://pt.stackoverflow.com/questions/1630/afinal-phonegap-apache-cordova-realmente-compila-as-aplica%C3%A7%C3%B5es-em-puro-c%C3%B3digo

http://pt.wikipedia.org/wiki/GitHub

Aplicativos híbridos com o Phonegap Parte III

Clique aqui para ler Aplicativos Hibridos Parte 1

Clique aqui para ler Aplicativos Hibridos Parte 2

Third Party Frameworks

Apache Cordova PhoneGap, Sencha Touch & Xamarin Mobile são exemplos de ferramentas multiplataforma que fornecem o “embrulho” sobre as APIs. 

Isto ajuda na compatibilidade multiplataforma. Escrevemos o codigo numa linguagem e compilamos para as plataformas (?) alvo como WP, iPhone, android ou outros dispositivos suportados. 

Apache Cordova

Proporciona algumas das librarias JavaScript que podem ser invocadas, com código específico do dispositivo para as respectivas librarias JavaScript. 

Conclusão

Vimos quais e que são as vantagens da arquitetura multiplataforma e como e que a podemos implementar usando varias estratégias de desenvolvimento. 

Não existe uma metodologia que é sempre melhor, devemos utilizar aquela que serve melhor os nossos prepósitos. 

Arquitetura multiplataforma e altamente recomendável para aplicações empresariais visto que diminui o tempo necessário para chegar ao mercado pois ao utilizarmos código já existente podemos chegar aos nossos clientes alvos de plataformas diferentes de uma maneira muito mais rápida.

Linguagens de desenvolvimento

A Tabela 1 traz uma comparação das tecnologias dos principais sistemas operacionais do mercado.

Sistema Operacional	Linguagem de desenvolvimento preferencial	Tecnologia de interfaces	IDE	SO de desenvolvimento
iOS	Objective-C	Cocoa Touch	XCode	MacOS
Android	Java		Eclipse Android Studio	Windows, Linux, MacOS
Windows Phone	C#	Metro	Visual Studio	Windows

Observando a grande diferença de tecnologias, os desenvolvedores começaram a pensar em maneiras de criar aplicações que fossem compatíveis com todos os dispositivos. Foi esse descontentamento geral que fez com que os desenvolvedores buscassem novas alternativas para o desenvolvimento de aplicações móveis. Com o grande avanço da internet móvel, aplicações móveis utilizando tecnologias da web passaram a ser uma realidade nos smartphones.

Frameworks disponíveis

• Titanium

Usa

tecnologias web como HTML, CSS, JS, Python, Ruby e PHP

Pode

construir aplicativos móveis e para desktop

Possui

built-in analytics

Pode

acessar recursos do telefone como GPS e native UI

Suporta

iPhone, iPad e Android

• Ramp

Usa uma máquina virtual no telefone para executar aplicativos

escritos em UXML,

CSS e JS

Constrói

aplicativos móveis e para desktop

Tem

grande foco em segurança

Suporta

anúncios dentro dos aplicativos

Tem

um server-side que permite integração com sistemas internos da empresa

como intranets ou CRM

Suporta

uma vasta gama de telefones

• J2ME Polish

Usa

o padrão J2ME para aplicativos e tem uma ferramenta que pode transportar o

aplicativo para vários outros telefones, incluindo iPhone, Blackberry e

Android usando seus componentes native UI.

• PhoneGap

Usa

HTML e JavaScript para construir aplicativos

Oferece

acesso a recursos do telefone como GPS

Suporta

iPhone/iPad, Android, Palm, Blackberry e Symbian

• Grapple

Usa

HTML, CSS e JavaScript para construir aplicativos

Oferece

uma série de serviços profissionais como criação de aplicativos,

hospedagem, gerenciamento etc

• Open Plug

Usa

Flex para construir aplicativos

Suporta

iPhone/iPad, Android, Windows Mobile, Symbian, mas pode ter problemas com

o último Contrato de Licença da Apple devido ao seu uso de Flex e à sua

ligação com a Adobe)

• Rhomobile

Usa

HTML5 e Ruby

Hospeda

o IDE (Integrated Development Environment)

Suporta

iPhone, Windows Mobile, RIM, Symbian e Android

Oferece

acesso a recursos do telefone como GPS e câmera

Aplicativo Cross-Platform

O desenvolvimento Cross-Platform, consiste em um desenvolvimento único para várias plataformas. 

Atualmente, existem várias ferramentas que permitem essa abordagem, onde a parte visual é normalmente desenvolvida em HTML 5 e CSS e que são “renderizados” em um browser embutido no SDK padrão da linguagem nativa (Objective-C do iOS, Java do Android, etc.) tornando assim possível o desenvolvimento para várias plataformas. Abaixo são listadas duas das principais ferramentas do mercado e que foram utilizadas internamente:

Adobe Air: 

Utilizando o Adobe Air é possível programar em Actionscript 3.0 em background e desenvolver a parte visual utilizando MXL (linguagem de marcação da Adobe) ou ainda utilizando HTML 5/CSS. 

Atualmente é possível criar versões para Android, iOS e Blackberry Tablet OS. Para instalar um aplicativo desenvolvido utilizando o Adobe AIR é necessário ter instalado no dispositivo o Adobe AIR Runtime. 

Entretanto, ao tentar instalar um aplicativo desenvolvido no AIR, automaticamente é solicitada a instalação do o Adobe Air Runtime.  

O SDK do Adobe Air é totalmente gratuito, porém, o Flash Builder que é uma IDE também desenvolvida para Adobe, com uma série facilidades para desenvolvimento é paga. 


A referência da linguagem (Actionscript) é bem detalhada, porém a documentação da parte visual não é tão rica.

Motorola Rhomobile

A plataforma Rhodes foi adquirida pela Motorola no início de 2012 se tornando Rhomobile. No Rhomobile é possível desenvolver em Ruby, com o framework parecido com o já famigerado Rails, já a parte visual pode ser desenvolvida em HTML5 e CSS. Ao criar um projeto novo, já está incluso um “skin” em CSS de cada plataforma.  

A própria criação do projeto já contém uma rotina que determina em qual plataforma o aplicativo está rodando.  

Também possui uma vasta camada de abstração de banco de dados, tornando esta parte do desenvolvimento simples. 

Em contrapartida, a parte da sua API que trata requisições HTTP e Threads ainda é muito instável, além disso, a documentação e o suporte no Brasil deixam a desejar, principalmente nas questões de licenciamento do produto.

Outras ferramentas disponíveis no mercado:

• PhoneGap
• Appcelerator Titanium SDK
• MoSync

Aplicativos desenvolvidos em ferramentas cross-platform, geralmente diminuem consideravelmente o custo de um projeto, principalmente quando várias plataformas são envolvidas. 

Porém pelo fato de ser genérico, o acesso a recursos nativos se torna mais trabalhoso e frequentemente problemático. 

A parte visual também se transforma em um problema, pois em algumas ferramentas se comporta de maneira substancialmente diferente nos vários dispositivos suportados. 

Sendo assim, frequentemente é utilizado no desenvolvimento de aplicativos simples que não necessitam tanto de recursos nativos.

Sench Touch -> CLIQUE AQUI PARA CONHECER O SITE

Proporciona valiosos HTLM5 framework e api wrappers nativos. “Codificamos” uma vez e compilamos para uma diferente plataforma mobile fazendo dela uma aplicação multiplataformas. 

A grande promessa para as aplicações moveis é o HTML 5 que gerou uma polemica entre os developers do Facebook e Sench touch, o HTML 5 promete ser a solução para rodarmos aplicações nos dispositivos moveis, porém o pessoal do face não conseguir criar uma aplicativo bom e disse que o HTML5 ainda não estava instável que gerou um certo desconforto e incomodo no pessoal do Sancho touch que desenvolveu o Fastbook totalemnte em html 5 que provou ser mais rapido que o aplicativo desenvolvido pela própria equipe do facebook. Atualmente o próprio Firefox OS Mobile é totalmente desenvolvido com HTML5, Java e PHP.

Site Móvel (Web Mobile)

Com a popularização do HTML 5 e a sua adoção pelos navegadores dos dispositivos móveis, abriu-se uma nova frente para o desenvolvimento: 

os sites móveis.

O acesso aos recursos do dispositivo como câmera, GPS, acelerômetro etc., é possível, embora complicado em alguns momentos.

Um site móvel não depende de uma loja de aplicativos e a sua respectiva política de avaliação. 
Isso permite entregas rápidas, onde existe uma ágil implementação de novos recursos e correções de erros. O fato de não necessitar de instalação por parte do usuário também pode ser contado como um fator positivo. Em um site móvel não se deve simular o visual e comportamento de um aplicativo nativo. Usuários sabem distinguir entre uma ótima experiência em um aplicativo nativo e uma ótima experiência um site móvel. Para obter essa ótima experiência, a atenção deve ser focada em construir um site que tenha uma ótima usabilidade em telas de toque e/ou pequenas.
O custo de construir um site móvel é mais baixo do que construir aplicativos nativos para cada plataforma. É mais comum a existência de profissionais que conheçam a tecnologia envolvida. 
Entretanto, os sites móveis, obviamente tem um requisito principal, acesso à internet. 
Embora isto seja um requisito básico, nos Estados Unidos e na Europa, no Brasil a rede móvel ainda não é tão comum nos smartphones e tablets. Por isso, um site móvel torna-se mais interessante quando o aplicativo necessite essencialmente de acesso a web.

Links Fontes:

http://www.devmedia.com.br/aplicacoes-moveis-nativas-ou-web/30392  

http://www.teclogica.com.br/blog/desenvolvimento-para-dispositivos-moveis-nativo-

x-cross-platform/  

http://www.cpgls.ucg.br/7mostra/Artigos/AGRARIAS%20EXATAS%20E%20DA%

20TERRA/Desenvolvimento%20em%20Smartphones%20-%20Aplicativos%20Nativos%20e%20Web.pdf  

http://developer.nokia.com/community/wiki/Arquitetura_de_aplica%C3%A7%C3%B5es

_multiplataforma_para_dispositivos_m%C3%B3veis http://www-03.ibm.com/software/products/pt/category/mobile-application-development http://www.cin.ufpe.br/~tg/2003-1/vaab.PDF  

http://www.devmedia.com.br/turbinando-aplicacoes-com-rest-e-backbone-js/29692  

http://pt.wikipedia.org/wiki/Linguagem_server-side http://tecnologia.terra.com.br/

internet/quotnosso-maior-erro-foi-apostar-em-html5quot-diz-zuckerberg,4b98201fd70ea310VgnCLD200000bbcceb0aRCRD.html  

http://www.midiatismo.com.br/midias-sociais/mark-zuckerberg-fala-sobre-erros-acertos-e-rumores-no-techcrunch-disrupt-sf-2012 http://pt.stackoverflow.com/questions/1630/afinal-phonegap-apache-cordova-realmente-compila-as-aplica%C3%A7%C3%B5es-em-puro-c%C3%B3digo  

http://pt.wikipedia.org/wiki/GitHub

Introdução a aplicativos híbridos com o Phonegap Parte II

Clique aqui para ler Aplicativos Híbridos Parte 1

Cliente Side Web

Arquitetura de aplicações web no client-side

Aplicações web no client-side podem ser:

Isoladas (dispensando o server-side), possuindo apenas o front-end. 

Exemplo: uma aplicação JavaScript que mostra a hora local nas principais capitais mundiais;

Isoladas (dispensando o server-side), mas possuindo tanto front-end quanto back-end. 

Exemplo: uma aplicação JavaScript de controle de tarefas que armazene os dados no local storage do navegador;

Eduardo Erlo TchêLinux  2014

Integradas com o server-side, executando o front-end no client-side e o back-end no server-side. 

O client-side comunica-se com o server-side através de requisições HTTP, cujo formato da resposta é HTML, sendo assim diretamente processada pelo navegador. 





Exemplo: uma tradicional aplicação Struts de controle de entregas;
· Integradas com o server-side, mas agora executando tanto o front-end quanto uma parte do ­back-end no client-side, que se comunica com outro back-end no server-side. 

Aqui, o client-side também se comunica com o server-side através de requisições HTTP, mas o formato da resposta agora é JSON ou XML (pois transmitem apenas dados), sendo processada por um componente do client-side, que então gerará HTML e renderizará no navegador.

As aplicações inteligentes no client-side abordadas neste artigo seguem o quarto cenário apresentado, utilizando o estilo arquitetural REST e o formato de dados JSON.

Aplicações Híbridas

Na grande maioria dos casos, aplicações híbridas trazem a resposta para os desenvolvedores que desejam desenvolver para muitas plataformas, sem grande perda de desempenho. 

Essa abordagem permite ao desenvolvedor criar um núcleo do programa de forma nativa, o que permite que haja um controle sobre as funcionalidades (e pode permitir acesso à dispositivos do smartphone) da aplicação, e, dentro da aplicação, uma parte multiplataforma. 

Isso faz com que, em suma, a experiência do usuário que está utilizando a aplicação em um iOS seja a mesma que um em um Windows Phone, por exemplo, o que é muito importante em grande parte das aplicações.

Essa abordagem híbrida vem ganhando muito destaque nos últimos tempos, pois permite que o desenvolvedor aprenda apenas o básico sobre cada uma das plataformas, uma vez que a parte principal da aplicação será desenvolvida utilizando tecnologias web. 

Porém, novamente, há um porém: a conexão à internet. No caso do iOS, por exemplo, o controle WebView não suporta off-line caching, que serviria para salvar o estado da aplicação e utilizá-la, de alguma forma, sem conexão à internet.

Para finalizar esse artigo, é preciso lembrar de uma palavra chave, que foi discutida ao longo do texto: planejamento. 

Toda aplicação móvel precisa criar algum tipo de experiência com o usuário para ser interessante e utilizável. 

É por isso que as grandes empresas costumam realizar todos os tipos de pesquisas de campo antes de começar o desenvolvimento de qualquer produto. 

Por isso, é preciso sempre pensar no que é melhor para o usuário, antes de pensar no que é melhor para o desenvolvedor. 

Uma aplicação pode ser muito mais simples de ser desenvolvida usando tecnologias web. Porém, se aquele não for o melhor caminho para ela, invariavelmente ela não será um sucesso de vendas.

Aqui, vale um dica importante: coloque em uma planilha tudo que há de mais importante em uma aplicação móvel: interface e experiência do usuário, interoperabilidade, segurança, cosmética, funcionalidade, desenvolvimento, independência de plataforma, acesso a redes sociais, entre outros. 

Tudo o que você conseguir pensar que possa ser importante para a aplicação. Uma vez feito isso, dê uma nota para cada um dos tipos de desenvolvimento: nativo, web e híbrido. A partir desse estudo, é possível ter uma boa ideia do que esperar antes de começar a desenvolver realmente a aplicação.

Hybrid Apps 

No caso destas aplicações, a maior parte das mesmas são desenvolvidas usando padrões de Web e envolvidas numa “Shell” nativa. 

As “shells” permitem acesso a características especificas das plataformas “mobile” tais como GPS, camera, ou a aparência fornecida pelo UI da plataforma, etc



O diagrama acima mostra a comparação entre os vários tipos de estratégias de desenvolvimento de aplicações e indica a sua aptidão multi-plataforma, crescente da esquerda para a direita.


“Hybrid Apps” combina as vantagens de desenvolvimento de ambos os tipos de aplicações, “Web” e “Native”, e é a melhor escolha para criar aplicações multiplataforma. 

Abaixo estão a vantagens de usar tecnologia hibrida de desenvolvimento de aplicações:

• Multiplataforma & Partilha de código - “Code” apenas uma vez e usamo-lo para fazer o “deploy” em várias plataformas de dispositivios móveis. Usa o mesmo código de interface “UI” HTLM / third party library code para múltiplos dispositivos.
• Chamadas nativas usando a “Native Shell”
• O modo offline permite ter acesso à aplicações mesmo que a internet não se encontre disponível.
• Permite que um grande número de utilizadores possa obter a aplicação devido ao seu carácter multiplataforma.
• Pode-se aproveitar o dispositivo móvel para processamento, o que não é possível com aplicações web.
• Distribuição através da AppStore transmite uma sensação nativa relativamente aos updates (?).
• Pode-se oferecer notificações relativamente a uma determinada aplicação e seus respectivos updates.

Numa arquitetura multiplataforma usando métodos híbridos, a aplicação é desenvolvida usando tecnologias Web tais como HTML5, Javascript e CSS mas que correm dentro da “Shell” nativa da plataforma Mobile. 

As aplicações hibridas usam um tipo de web control/ web app template para apresentar o Web UI de maneira a que seja possível “codifica-lo” em tecnologias Web. Graças à sofisticação cada vez maior de ferramentas multiplataforma, o desempenho e melhorado drasticamente, e tanto o aspecto como a sensação que temos ao utilizar a aplicação é quase tao bom como ao UI nativo.

Hybrid Server App

Podemos criar uma aplicação Web Mobile, hospeda-la num servidor e simplesmente chamar o url na shell nativa. 

Nesta abordagem o processamento será todo feito no servidor. 

Podemos melhorar o desempenho fazer um “local caching”, apesar de não ser o ideal para aplicações cujo desempenho é crítico. 

Mudanças no Deploying serão fáceis pois basta mudar o código e por no servidor. Para criar uma aplicação Hybrid WP8 

usando esta abordagem:

Adicionamos um controle WebBrowser para a página da aplicação e direciona-lo para a aplicação Web hospedada no servidor.

Com isto a nossa aplicação multiplataformas fica instantaneamente pronta.

Links Fontes: 

http://www.devmedia.com.br/aplicacoes-moveis-nativas-ou-web/30392  

http://www.teclogica.com.br/blog/desenvolvimento-para-dispositivos-moveis-nativo-

x-cross-platform/  

http://www.cpgls.ucg.br/7mostra/Artigos/AGRARIAS%20EXATAS%20E%20DA%

20TERRA/Desenvolvimento%20em%20Smartphones%20-%20Aplicativos%20Nativos%20e%20Web.pdf  

http://developer.nokia.com/community/wiki/Arquitetura_de_aplica%C3%A7%C3%B5es

_multiplataforma_para_dispositivos_m%C3%B3veis http://www-03.ibm.com/software/products/pt/category/mobile-application-development http://www.cin.ufpe.br/~tg/2003-1/vaab.PDF  

http://www.devmedia.com.br/turbinando-aplicacoes-com-rest-e-backbone-js/29692  

http://pt.wikipedia.org/wiki/Linguagem_server-side http://tecnologia.terra.com.br/

internet/quotnosso-maior-erro-foi-apostar-em-html5quot-diz-zuckerberg,4b98201fd70ea310VgnCLD200000bbcceb0aRCRD.html  

http://www.midiatismo.com.br/midias-sociais/mark-zuckerberg-fala-sobre-erros-acertos-e-rumores-no-techcrunch-disrupt-sf-2012 http://pt.stackoverflow.com/questions/1630/afinal-phonegap-apache-cordova-realmente-compila-as-aplica%C3%A7%C3%B5es-em-puro-c%C3%B3digo  

http://pt.wikipedia.org/wiki/GitHub