{"id":102,"date":"2016-12-15T23:19:53","date_gmt":"2016-12-16T02:19:53","guid":{"rendered":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/comecando-com-ioniccordova\/"},"modified":"2016-12-15T23:19:53","modified_gmt":"2016-12-16T02:19:53","slug":"comecando-com-ioniccordova","status":"publish","type":"post","link":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/comecando-com-ioniccordova\/","title":{"rendered":"Come\u00e7ando o primeiro projeto Ionic\/Cordova"},"content":{"rendered":"

\"\"<\/a>
\nIonic<\/strong> \u00e9 um framework <\/em>criado no final de 2013 que visa a cria\u00e7\u00e3o de aplica\u00e7\u00f5es h\u00edbridas para dispositivos m\u00f3veis. \u00c9 um framework <\/em>focado na apar\u00eancia e intera\u00e7\u00e3o de aplicativos m\u00f3veis utilizando HTML, CSS e Javascript (AngularJS). \u00c9 um framework<\/em> similar a outros existentes no mercado como jQuery mobile, Sencha Touch, etc. Atrav\u00e9s da combina\u00e7\u00e3o entre o Ionic e o Cordova\/Phonegap(j\u00e1 explicado em outro post) \u00e9 poss\u00edvel criar aplicativos com interface pr\u00f3pria para dispositivos m\u00f3veis de forma h\u00edbrida, ou seja, ser\u00e3o aplica\u00e7\u00f5es web mobile<\/em> com acesso ao hardware do dispositivo tornando transparente para o usu\u00e1rio final que pensa estar utilizando uma aplica\u00e7\u00e3o nativa. Com um \u00fanico desenvolvimento \u00e9 poss\u00edvel rodar o mesmo aplicativo em v\u00e1rias plataformas como Android, iOS, Windows Phone, etc.<\/p>\n

O processo passo \u00e9 instalar o NodeJS no computador. O NodeJS \u00e9 um interpretador de c\u00f3digo Javascript.<\/p>\n

\"\"<\/a><\/p>\n

Baixe atrav\u00e9s do seguinte link: https:\/\/nodejs.org\/<\/p>\n

\"\"<\/a><\/p>\n

O processo de instala\u00e7\u00e3o \u00e9 simples, avan\u00e7ar at\u00e9 finalizar a instala\u00e7\u00e3o: Next<\/em>, Next<\/em>, Next<\/em>, Install<\/em>, Finish<\/em>.<\/p>\n

Abra o prompt de comando do Windows\u00a0(em modo administrador) ou o terminal do seu sistema operacional Linux ou MacOS, o primeiro passo para ter certeza da correta instala\u00e7\u00e3o do NodeJS \u00e9 verificar a vers\u00e3o instalada utilizando a seguinte linha de comando:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

node -v<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

Confira tamb\u00e9m a instala\u00e7\u00e3o do pacote npm, que ser\u00e1 utilizado na instala\u00e7\u00e3o do Ionic e Cordova. Utilize o comando abaixo, tamb\u00e9m no prompt de comando:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

npm -v<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

O pr\u00f3ximo passo \u00e9 instalar o Ionic, que ser\u00e1 instalado a partir do npm. Utilize o comando abaixo:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

npm install -g ionic<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

O par\u00e2metro “-g” significa uma instala\u00e7\u00e3o global, ou seja, ir\u00e1 permitir que seja feita instala\u00e7\u00e3o e execu\u00e7\u00e3o do ionic a partir de qualquer diret\u00f3rio.<\/p>\n

Aguarde o processo de instala\u00e7\u00e3o que pode demorar um pouco dependendo da velocidade da sua internet. Aten\u00e7\u00e3o para as mensagens de casos de Warning<\/em> e Error, caso aconte\u00e7a algum problema ser\u00e1 informado na pr\u00f3pria mensagem o que deve ser instalado antes para continuar a correta instala\u00e7\u00e3o do Ionic.<\/em><\/p>\n

Ap\u00f3s a instala\u00e7\u00e3o sempre confira utilizando o comando para consultar a vers\u00e3o para ter certeza que foi instalado corretamente. Utilize o comando abaixo:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

ionic -v<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

O pr\u00f3ximo passo \u00e9 a instala\u00e7\u00e3o do Cordova, utilizando o mesmo padr\u00e3o de instala\u00e7\u00e3o npm:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

npm install -g cordova<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

Aguarde o final da instala\u00e7\u00e3o e confira a instala\u00e7\u00e3o verificando a vers\u00e3o:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

cordova -v<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

Feito isso j\u00e1 temos nosso ambiente de desenvolvimento e compila\u00e7\u00e3o pronto para come\u00e7ar.<\/p>\n

O Ionic permite iniciar um projeto por linha de comando baseado em templates como tabs, maps, blank, sidemenu, etc. O padr\u00e3o quando n\u00e3o \u00e9 informado o template que desejamos \u00e9 o tab.<\/p>\n

Para criar um projeto, v\u00e1 at\u00e9 uma pasta de desenvolvimento de sua prefer\u00eancia no seu prompt de comando e execute o comando abaixo:<\/p>\n

[sourcecode language=”plain”]<\/p>\n

ionic start HelloWorld tabs<\/p>\n

[\/sourcecode]<\/p>\n

Onde: “HelloWorld” \u00e9 o nome do projeto e “tabs” \u00e9 o template desejado para cria\u00e7\u00e3o do projeto.<\/p>\n

\"\"<\/a><\/p>\n

Aguarde o download<\/em> do template e a cria\u00e7\u00e3o do projeto.<\/p>\n

Se visualizar o diret\u00f3rio do projeto HelloWorld ir\u00e1 observar a cria\u00e7\u00e3o de v\u00e1rias pastas de controle e configura\u00e7\u00e3o e v\u00e1rios arquivos criados automaticamente pelo Ionic. Aos poucos ir\u00e1 entender a fun\u00e7\u00e3o de cada uma dessas pastas e arquivos.<\/p>\n

Por hora o que precisa saber \u00e9 que o arquivo config.xml armazena informa\u00e7\u00f5es referentes a descri\u00e7\u00e3o do aplicativo, nome, autor, etc que ser\u00e3o utilizados na publica\u00e7\u00e3o do aplicativo em uma loja como Apple Store ou Play Store. \u00a0Outra informa\u00e7\u00e3o ainda mais importante \u00e9 a pasta “www” que armazena todos os arquivos do projeto, todas as p\u00e1ginas, scripts de transi\u00e7\u00e3o, imagens, etc. \u00c9 nesta pasta que iremos concentrar nossos esfor\u00e7os.<\/p>\n

\"\"<\/a><\/p>\n

Para abrir o projeto e ver o resultado, basta digitar o comando abaixo dentro da pasta do projeto :<\/p>\n

[sourcecode language=”plain”]<\/p>\n

ionic serve<\/p>\n

[\/sourcecode]<\/p>\n

\"\"<\/a><\/p>\n

Ser\u00e1 aberta uma tela em seu navegador com a p\u00e1gina que corresponde ao aplicativo com o tema de “tabs<\/em>” escolhido. Segue exemplos da navega\u00e7\u00e3o de telas do aplicativo:<\/p>\n

\"\"<\/a>\u00a0 \u00a0\"\"\u00a0 \u00a0\"\"<\/p>\n

Continuaremos em outro artigo, por enquanto \u00e9 s\u00f3.<\/p>\n

At\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ionic \u00e9 um framework criado no final de 2013 que visa a cria\u00e7\u00e3o de aplica\u00e7\u00f5es h\u00edbridas para dispositivos m\u00f3veis. \u00c9 um framework focado na apar\u00eancia e\u2026<\/p>\n","protected":false},"author":1,"featured_media":103,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[23,75,74,73,4,22],"class_list":["post-102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phonegap","tag-android","tag-apps-hibridas","tag-cordova","tag-ionic","tag-ios","tag-phonegap"],"_links":{"self":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts\/102","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=102"}],"version-history":[{"count":0,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/media\/103"}],"wp:attachment":[{"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.williamcleissondecarvalho.com.br\/blog\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}