{"id":33,"date":"2015-09-25T20:59:07","date_gmt":"2015-09-25T23:59:07","guid":{"rendered":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/conhecendo-um-pouco-do-phonegap\/"},"modified":"2015-09-25T20:59:07","modified_gmt":"2015-09-25T23:59:07","slug":"conhecendo-um-pouco-do-phonegap","status":"publish","type":"post","link":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/conhecendo-um-pouco-do-phonegap\/","title":{"rendered":"Conhecendo um pouco do PhoneGap"},"content":{"rendered":"<p>Todos os dias surgem novos aplicativos nas lojas de aplicativos das plataformas existentes e com a populariza\u00e7\u00e3o dos <em>smartphones<\/em> a demanda por clientes buscando solu\u00e7\u00f5es para dispositivos m\u00f3veis tamb\u00e9m aumenta. Por\u00e9m muitos desconhecem o processo de constru\u00e7\u00e3o de um app e o que \u00e9 necess\u00e1rio para desenvolver e publicar.<\/p>\n<p>O questionamento mais importante \u00e9:<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma1.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-94\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma1.fw_.png\" alt=\"multiplataforma1.fw\" width=\"364\" height=\"101\" \/><\/a><\/p>\n<p>Neste cen\u00e1rio temos que avaliar algumas vari\u00e1veis e necessidades. Alguns exemplos:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th>Plataforma<\/th>\n<th>Ferramenta<\/th>\n<th>Linguagem<\/th>\n<\/tr>\n<tr>\n<td>iOS<\/td>\n<td>Xcode<\/td>\n<td>Objetive-C, Swift<\/td>\n<\/tr>\n<tr>\n<td>Android<\/td>\n<td>Eclipse ou Android Studio<\/td>\n<td>Java<\/td>\n<\/tr>\n<tr>\n<td>Windows Phone<\/td>\n<td>Visual Studio<\/td>\n<td>.Net<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Problemas de desenvolvimento do mesmo aplicativo para v\u00e1rias plataformas:<\/strong><\/p>\n<ul>\n<li>Tempo; e<\/li>\n<li>Equipe de desenvolvimento especializada em cada plataforma.<\/li>\n<\/ul>\n<p><strong>O mundo ideal:<\/strong><\/p>\n<ul>\n<li>Desenvolver um \u00fanico aplicativo que rode em v\u00e1rias plataformas.<\/li>\n<\/ul>\n<p>Dependendo na necessidade do cliente, ou da ideia que se tem para um novo app, a solu\u00e7\u00e3o \u00e9 simples: Web Apps<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma2.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-98\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma2.fw_.png\" alt=\"multiplataforma2.fw\" width=\"555\" height=\"369\" \/><\/a><\/p>\n<p><strong>Web Apps<\/strong> s\u00e3o sites com vers\u00e3o pr\u00f3pria para aplicativos, onde sua interface fornece uma melhor intera\u00e7\u00e3o com usu\u00e1rio quando acessados por <em>smartphones<\/em> ou dispositivos m\u00f3veis. Podem tanto ser acessados via browser do <em>smartphone<\/em> ou um aplicativo que apenas aponta para uma URL.<\/p>\n<p>O ponto negativo\u00a0de Web Apps \u00e9 que estes n\u00e3o permitem acesso ao hardware do dispositivo, como por exemplo a c\u00e2mera do <em>smartphone<\/em> ou <em>tablet<\/em>. Quando h\u00e1 necessidade de acesso a recursos de hardware os web apps n\u00e3o atendem.<\/p>\n<p>Aqui entramos num ponto importante sobre a defini\u00e7\u00e3o de <strong>Apps Nativos<\/strong>: permitem acesso direto a API do dispositivo para acesso ao hardware atrav\u00e9s da plataforma em execu\u00e7\u00e3o.<\/p>\n<p>Agora que sabemos a defini\u00e7\u00e3o de Apps Nativos e Web Apps podemos fazer a seguinte an\u00e1lise: Para que um aplicativo possa ser feito usando tecnologia Web mas que permita acesso ao hardware \u00e9 necess\u00e1rio uma tecnologia que tenha um pouco de Nativo e um pouco de Web. Estas s\u00e3o chamadas Apps H\u00edbridas.<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma3.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-101\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma3.fw_-300x139.png\" alt=\"multiplataforma3.fw\" width=\"300\" height=\"139\" \/><\/a><\/p>\n<p>Uma App H\u00edbrida reune o melhor dos dois mundos. \u00c9 aqui que chegamos ao <strong>PhoneGap<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma4.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-102\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma4.fw_.png\" alt=\"multiplataforma4.fw\" width=\"754\" height=\"326\" \/><\/a><\/p>\n<p>O Phonegap \u00e9 um <em>framework<\/em> multiplataforma que possibilita a cria\u00e7\u00e3o de aplicativos m\u00f3veis utilizando tecnologia web (HTML + CSS + Javascript) para serem executados em diversas plataformas como Android, iOS, Windows Phone, \u00a0BlackBerry, Firefox OS, entre outros.<\/p>\n<p>Ele funciona como um empacotador de c\u00f3digo que atrav\u00e9s de uma WebView permite utiliza\u00e7\u00e3o de c\u00f3digo HTML5 no desenvolvimento do app e permite acesso as APIs nativas de cada plataforma.<\/p>\n<p>Pensando neste modelo em forma de camadas, teremos o seguinte:<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma5.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-103\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma5.fw_-1024x476.png\" alt=\"multiplataforma5.fw\" width=\"649\" height=\"265\" \/><\/a><\/p>\n<p><strong>Atrav\u00e9s da API do PhoneGap \u00e9 poss\u00edvel acessar:<\/strong><\/p>\n<ul>\n<li>C\u00e2mera<\/li>\n<li>Aceler\u00f4metro<\/li>\n<li>B\u00fassola<\/li>\n<li>Contatos<\/li>\n<li>Arquivos<\/li>\n<li>Geolocaliza\u00e7\u00e3o<\/li>\n<li>M\u00eddias<\/li>\n<li>Rede<\/li>\n<li>Notifica\u00e7\u00f5es<\/li>\n<li>Armazenamento do pr\u00f3prio browser<\/li>\n<\/ul>\n<p>No site oficial do Phonegap \u00e9 poss\u00edvel consultar as plataformas suportadas e as APIs pass\u00edveis de utiliza\u00e7\u00e3o em cada uma delas.<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot129.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-104\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot129.jpg\" alt=\"ScreenShot129\" width=\"627\" height=\"359\" \/><\/a><\/p>\n<p>Fonte:\u00a0<a href=\"http:\/\/phonegap.com\/about\/feature\/\" target=\"_blank\" rel=\"noopener\">http:\/\/phonegap.com\/about\/feature\/<\/a><\/p>\n<p>Um detalhe importante \u00e9 que o PhoneGap por si s\u00f3 n\u00e3o possui recursos visuais, pois esta n\u00e3o \u00e9 sua fun\u00e7\u00e3o. Para isso existem outros <em>frameworks<\/em> web que podem ser utilizados junto ao PhoneGap para criar interfaces de apps.<\/p>\n<p>Alguns dos frameworks existentes s\u00e3o:<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma6.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-106\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma6.fw_.png\" alt=\"multiplataforma6.fw\" width=\"494\" height=\"274\" \/><\/a><\/p>\n<p>Alguns tem complexidade maiores, outros menores, mas todos utilizam tecnologia Web, portanto basta que tenha conhecimento de HTML5 para que consiga utilizar estes <em>frameworks<\/em>.<\/p>\n<p>Outra discuss\u00e3o muito comum nos estudos de frameworks multiplataformas \u00e9 a diferen\u00e7a entre PhoneGap X Cordova.<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma7.fw_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-107\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/multiplataforma7.fw_-300x138.png\" alt=\"multiplataforma7.fw\" width=\"300\" height=\"138\" \/><\/a><\/p>\n<p>Analisando atrav\u00e9s de uma sequ\u00eancia de fatos, temos o seguinte para ilustrar a defini\u00e7\u00e3o e diferen\u00e7a entre PhoneGap e Cordova.<\/p>\n<ul>\n<li>PhoneGap foi criado pela Nitobi<\/li>\n<li>Adobe comprou o PhoneGap<\/li>\n<li>PhoneGap virou produto da Adobe<\/li>\n<li>Adobe doou o c\u00f3digo fonte para a Apache<\/li>\n<li>Nasceu o Apache Cordova<\/li>\n<li>Adobe manteve o PhoneGap como produto<\/li>\n<\/ul>\n<p>Em quest\u00e3o de c\u00f3digo, a codifica\u00e7\u00e3o \u00e9 a mesma.<\/p>\n<p>Ferramentas extras do PhoneGap: PhoneGap Build e PhoneGap Emulator<\/p>\n<p>Este foi um resumo r\u00e1pido sobre o PhoneGap que aproveitei para fazer ap\u00f3s ministrar um Workshop na FAI &#8211; Centro de Ensino Superior em Gest\u00e3o, Tecnologia e Educa\u00e7\u00e3o sobre PhoneGap na Pr\u00e1tica abordando estes <em>frameworks<\/em> apresentados aqui. Em um pr\u00f3ximo artigo irei explicar o processo de instala\u00e7\u00e3o e alguns outros pontos para quem est\u00e1 iniciando. Fique ligado!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Todos os dias surgem novos aplicativos nas lojas de aplicativos das plataformas existentes e com a populariza\u00e7\u00e3o dos smartphones a demanda por clientes buscando solu\u00e7\u00f5es para\u2026<\/p>\n","protected":false},"author":1,"featured_media":34,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[23,27,4,25,22,26,28,24],"class_list":["post-33","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phonegap","tag-android","tag-apps","tag-ios","tag-multiplataforma","tag-phonegap","tag-web","tag-web-apps","tag-windows-phone"],"_links":{"self":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":0,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/media\/34"}],"wp:attachment":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}