{"id":56,"date":"2015-09-26T11:42:49","date_gmt":"2015-09-26T14:42:49","guid":{"rendered":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/criando-seu-primeiro-aplicativo-helloworld-com-phonegap\/"},"modified":"2015-09-26T11:42:49","modified_gmt":"2015-09-26T14:42:49","slug":"criando-seu-primeiro-aplicativo-helloworld-com-phonegap","status":"publish","type":"post","link":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/criando-seu-primeiro-aplicativo-helloworld-com-phonegap\/","title":{"rendered":"Criando seu primeiro aplicativo HelloWorld com PhoneGap"},"content":{"rendered":"<p>Este \u00e9 um artigo bem simples para exemplificar a cria\u00e7\u00e3o de um app Hello World utilizando o PhoneGap. N\u00e3o iremos construir recursos de um aplicativo, apenas dar in\u00edcio ao processo de cria\u00e7\u00e3o, deixar pronto para voc\u00ea se divertir criando sua pr\u00f3pria app.<\/p>\n<p>O primeiro passo \u00e9 ter o PhoneGap instalado em seu computador. Isso foi demonstrado em um artigo anterior, <a href=\"http:\/\/www.williamcleissondecarvalho.com.br\/2015\/09\/26\/instalando-o-phonegap\/\" target=\"_blank\" rel=\"noopener\">clique aqui<\/a> para visualizar.<\/p>\n<p>J\u00e1 com o PhoneGap instalado, abre o prompt de comando do seu computador:<\/p>\n<p>Execute o comando abaixo, alterando para o local do arquivo onde quer gerar seu projeto:<\/p>\n<p><strong>phonegap \u00a0create \u00a0C:helloworld \u00a0br.com.williamcleissondecarvalho.helloworld \u00a0HelloWorld<\/strong><\/p>\n<p>O comando tem a seguinte estrutura:<\/p>\n<p>phonegap create [LOCAL DO APP] [NOME DO PACOTE] [NOME DO APP]<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot141.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-135\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot141.jpg\" alt=\"ScreenShot141\" width=\"789\" height=\"282\" \/><\/a><\/p>\n<p>Se correr tudo bem ser\u00e1 exibida a mensagem que o app foi criado no local indicado. Se abrirmos a pasta onde o app foi gerado termos uma estrutura de pastas gerada automaticamente, conforme exemplo abaixo:<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot142.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-136\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot142.jpg\" alt=\"ScreenShot142\" width=\"694\" height=\"434\" \/><\/a><\/p>\n<p>Em vers\u00f5es anteriores do PhoneGap t\u00ednhamos que criar essa estrutura de diret\u00f3rios manualmente e principalmente criar o arquivo de configura\u00e7\u00e3o do app config.xml na m\u00e3o, o que dificultava o trabalho dos iniciantes. Agora o processo se tornou bem mais pr\u00e1tico.<\/p>\n<p>Desta estrutura de pastas, precisamos entender o seguinte:<\/p>\n<ul>\n<li>platforms: ser\u00e3o gerados os arquivos finais das plataformas quando executarmos o build da aplica\u00e7\u00e3o, por exemplo, iOS, Android, etc.<\/li>\n<li>plugins: ser\u00e3o armazenados os plugins que ser\u00e3o instalados no app para utiliza\u00e7\u00e3o, por exemplo, plugin de c\u00e2mera, plugin de acesso aos contatos, etc.<\/li>\n<li>www: pasta principal do aplicativo onde ser\u00e3o armazenados todos os arquivos web do app, HTML, Javascript e CSS.<\/li>\n<li>config.xml: arquivo de configura\u00e7\u00e3o do app, onde s\u00e3o definidos as informa\u00e7\u00f5es do app, nome, \u00edcone, telas de splash de cada plataforma, e defini\u00e7\u00f5es de plugins, etc.<\/li>\n<\/ul>\n<p>Basicamente \u00e9 isso, o app\u00a0base\u00a0j\u00e1 foi criado e voc\u00ea j\u00e1 pode iniciar o desenvolvimento do seu app.<\/p>\n<p>Para test\u00e1-lo voc\u00ea pode abrir diretamente no navegador o arquivo index.html localizado na pasta WWW. Existem diversas ferramentas de emula\u00e7\u00e3o, ou pode ser executa e emulado atrav\u00e9s do eclipse, Android Studio ou Xcode.<\/p>\n<p>Neste exemplo abaixo, utilizei um plugin do Google Chrome chamado <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/ripple-emulator-beta\/geelfhphabnejjhdalkjhgipohgpdnoc\" target=\"_blank\" rel=\"noopener\">Ripple Emulator<\/a> que exibe p\u00e1ginas web em formato de smartphones e tablets para testes de layout e formato de comportamento de sites e apps h\u00edbridas, bastante \u00fatil. A \u00fanica restri\u00e7\u00e3o \u00e9 que ele somente emula p\u00e1ginas web publicadas, e n\u00e3o arquivos locais, portanto \u00e9 necess\u00e1rio que esteja rodando um servidor apache em seu computador para conseguir executar o plugin, com <a href=\"http:\/\/www.wampserver.com\/en\/\" target=\"_blank\" rel=\"noopener\">WAMP<\/a> ou <a href=\"https:\/\/www.apachefriends.org\/pt_br\/index.html\" target=\"_blank\" rel=\"noopener\">XAMPP<\/a>.<\/p>\n<p><a href=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot143.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-139\" src=\"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-content\/uploads\/2015\/09\/ScreenShot143.jpg\" alt=\"ScreenShot143\" width=\"1439\" height=\"870\" \/><\/a><\/p>\n<p>Irei tratar uma ferramenta de emula\u00e7\u00e3o do pr\u00f3prio PhoneGap em um pr\u00f3ximo artigo, sobre PhoneGap Developer App. Fiquem ligados!<\/p>\n<p>At\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este \u00e9 um artigo bem simples para exemplificar a cria\u00e7\u00e3o de um app Hello World utilizando o PhoneGap. N\u00e3o iremos construir recursos de um aplicativo, apenas\u2026<\/p>\n","protected":false},"author":1,"featured_media":57,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[11,10,32,22],"class_list":["post-56","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phonegap","tag-aplicativo","tag-app","tag-hello-world","tag-phonegap"],"_links":{"self":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts\/56","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=56"}],"version-history":[{"count":0,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/media\/57"}],"wp:attachment":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}