{"id":548,"date":"2016-05-22T22:27:42","date_gmt":"2016-05-22T22:27:42","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=548"},"modified":"2018-09-11T15:15:19","modified_gmt":"2018-09-11T15:15:19","slug":"ionic-creator-crie-atraves-de-interface","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/","title":{"rendered":"Ionic Creator &#8211; Crie atrav\u00e9s de interface"},"content":{"rendered":"<p>Ionic Creator \u00e9 uma ferramenta de prototipagem <em>drag &amp; drop<\/em> para criar aplicativos excelentes com Ionic, tudo atrav\u00e9s de uma interface.<\/p>\n<p>J\u00e1 adiantando o assunto pra voc\u00ea, a melhor forma de reduzir tempo e consequentemente o custo para criar prot\u00f3tipos de aplicativos m\u00f3veis<!--more-->\u00a0h\u00edbridos totalmente funcionais \u00e9 com o Ionic Creator.<\/p>\n<p>Se voc\u00ea ainda n\u00e3o conhece o Ionic, comece por esse outro post aqui: <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-framework-desenvolvendo-mobile-apps\/\" target=\"_blank\" rel=\"noopener\">Ionic Framework &#8211; Desenvolvendo Mobile Apps<\/a><\/p>\n<p>Vamos ent\u00e3o come\u00e7ar a mexer com o Ionic Creator, para isso <a href=\"https:\/\/creator.ionic.io\/\" target=\"_blank\" rel=\"noopener\">acesse aqui o link<\/a>.<\/p>\n<h2>Conta Ionic Creator<\/h2>\n<div id=\"attachment_555\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-login-1.png\" target=\"_blank\" rel=\"attachment noopener wp-att-555\"><img decoding=\"async\" aria-describedby=\"caption-attachment-555\" class=\"wp-image-555 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-login-1-300x228.png\" alt=\"Login Ionic Creator\" width=\"300\" height=\"228\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-login-1-300x228.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-login-1-768x583.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-login-1.png 1006w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/228;\" \/><\/a><p id=\"caption-attachment-555\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<p>Se voc\u00ea ainda n\u00e3o tem conta, clique em\u00a0<em>Get Started<\/em>.<\/p>\n<p>O processo de cria\u00e7\u00e3o de conta \u00e9 bastante simples, basta preencher\u00a0<em>nome de usu\u00e1rio<\/em>,\u00a0<em>nome completo<\/em>,\u00a0<em>e-mail<\/em> e\u00a0<em>senha<\/em>.<\/p>\n<p>\u00c9 bem simples de preencher, mas se voc\u00ea tiver d\u00favida, pode deixar nos coment\u00e1rios.\u00a0Depois que voc\u00ea criar conta e fizer login, vamos criar um projeto.<\/p>\n<p>O Ionic Creator tem v\u00e1rios planos. O plano gratuito \u00e9 interessante e voc\u00ea consegue prototipar e depois exportar o que voc\u00ea fez, que j\u00e1 \u00e9 funcional,\u00a0que \u00e9 o principal objetivo da ferramenta.<\/p>\n<p>Se voc\u00ea tiver realmente uma necessidade de mais recursos, d\u00e1 uma olhadinha nos valores e funcionalidades aqui abaixo de cada plano.<\/p>\n<div id=\"attachment_557\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-planos.png\" target=\"_blank\" rel=\"attachment noopener wp-att-557\"><img decoding=\"async\" aria-describedby=\"caption-attachment-557\" class=\"wp-image-557 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-planos-300x191.png\" alt=\"Clique na imagem para ampliar\" width=\"300\" height=\"191\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-planos-300x191.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-planos-768x488.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-planos.png 798w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/191;\" \/><\/a><p id=\"caption-attachment-557\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h2>Criando Novo Projeto<\/h2>\n<p>&nbsp;<\/p>\n<p>Prefere aprender em v\u00eddeo?<\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class=\"youtube-player lazyload\" width=\"640\" height=\"360\" data-src=\"https:\/\/www.youtube.com\/embed\/zLIW4qqxI_0?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=pt-BR&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\"><\/iframe><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>Depois de criar a conta e fazer login, vamos criar seu primeiro projeto. Da mesma forma de quando criamos o projeto atrav\u00e9s da linha de comando, a primeira coisa que precisamos fazer \u00e9 dizer o nome do projeto e escolher um dos templates dispon\u00edveis.<\/p>\n<div id=\"attachment_565\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-criar-projeto-imc.png\" target=\"_blank\" rel=\"attachment noopener wp-att-565\"><img decoding=\"async\" aria-describedby=\"caption-attachment-565\" class=\"wp-image-565 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-criar-projeto-imc-300x232.png\" alt=\"Ionic Creator - IMC Felizardo\" width=\"300\" height=\"232\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-criar-projeto-imc-300x232.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-criar-projeto-imc.png 672w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/232;\" \/><\/a><p id=\"caption-attachment-565\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<p>Como exemplo, escolha o modelo\u00a0<em>Side Menu + Tabs<\/em> e coloque o nome do projeto de\u00a0<strong>IMC Felizardo<\/strong>.<\/p>\n<h2>\u00c1rea de Trabalho<\/h2>\n<div id=\"attachment_568\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-area-trabalho.png\" target=\"_blank\" rel=\"attachment noopener wp-att-568\"><img decoding=\"async\" aria-describedby=\"caption-attachment-568\" class=\"wp-image-568 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-area-trabalho-300x169.png\" alt=\"\u00c1rea de Trabalho Ionic Creator\" width=\"300\" height=\"169\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-area-trabalho-300x169.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-area-trabalho-768x434.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-area-trabalho-1024x578.png 1024w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-area-trabalho.png 1679w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/169;\" \/><\/a><p id=\"caption-attachment-568\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h3>Gest\u00e3o de P\u00e1ginas<\/h3>\n<p>Nesta \u00e1rea conseguimos criar novas p\u00e1ginas para o projeto, ou duplicar uma j\u00e1 existente. Tamb\u00e9m conseguimos dizer qual ser\u00e1 a p\u00e1gina padr\u00e3o do aplicativo.<\/p>\n<div id=\"attachment_569\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-gestao-paginas.png\" target=\"_blank\" rel=\"attachment noopener wp-att-569\"><img decoding=\"async\" aria-describedby=\"caption-attachment-569\" class=\"wp-image-569 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-gestao-paginas-300x238.png\" alt=\"Gest\u00e3o de P\u00e1ginas - Ionic Creator\" width=\"300\" height=\"238\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-gestao-paginas-300x238.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-gestao-paginas.png 312w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/238;\" \/><\/a><p id=\"caption-attachment-569\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h3>Componentes<\/h3>\n<p>O que realmente facilita a prototipagem e o desenvolvimento, \u00e9 a biblioteca de componentes do Ionic Creator. Voc\u00ea, vai poder desenvolver o componente que voc\u00ea quiser, totalmente customizado, atrav\u00e9s de HTML, CSS e JS, por\u00e9m, a plataforma j\u00e1 traz pronto para voc\u00ea uma lista com v\u00e1rias funcionalidades.<\/p>\n<div id=\"attachment_571\" style=\"width: 269px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-componentes.png\" target=\"_blank\" rel=\"attachment noopener wp-att-571\"><img decoding=\"async\" aria-describedby=\"caption-attachment-571\" class=\"wp-image-571 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-componentes-259x300.png\" alt=\"Ionic Creator - Componentes\" width=\"259\" height=\"300\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-componentes-259x300.png 259w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-componentes.png 315w\" data-sizes=\"(max-width: 259px) 100vw, 259px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 259px; --smush-placeholder-aspect-ratio: 259\/300;\" \/><\/a><p id=\"caption-attachment-571\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h2>Customizando App de IMC<\/h2>\n<p>Vamos mudar a tab de\u00a0<em>Camera<\/em> para\u00a0<em><strong>C\u00e1lculo de IMC<\/strong>.<\/em> Essa tab j\u00e1 \u00e9 a\u00a0p\u00e1gina padr\u00e3o do nosso app, ou seja, quando o app \u00e9 carregado, ela \u00e9 a primeira a aparecer.<\/p>\n<p>Na \u00e1rea de gest\u00e3o das p\u00e1ginas,\u00a0que vimos anteriormente, clique sobre o\u00a0<em>Tabs Controller<\/em>. Depois clique sobre o \u00edcone da c\u00e2mera, depois clique no painel ao lado. Em\u00a0<em>Title<\/em> coloque C\u00e1lculo de IMC. Na op\u00e7\u00e3o\u00a0<em>Icon<\/em> vamos utilizar um \u00edcone de calculadora. Escolha o \u00edcone que voc\u00ea achar mais legal e adequado pro nosso atual esquema de cores. Caso voc\u00ea quisesse, poderia colocar uma classe nesse bot\u00e3o, para poder acess\u00e1-lo depois, via CSS ou JavaScript.<\/p>\n<div id=\"attachment_572\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/troca-nome-icone-camera.gif\" target=\"_blank\" rel=\"attachment noopener wp-att-572\"><img decoding=\"async\" aria-describedby=\"caption-attachment-572\" class=\"wp-image-572 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/troca-nome-icone-camera.gif\" alt=\"Alterar \u00edcone e texto da tab\" width=\"300\" height=\"183\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/183;\" \/><\/a><p id=\"caption-attachment-572\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<p>Se voc\u00ea clicar na primeira p\u00e1gina &#8211; Camera Tab Default Page &#8211; vai perceber que n\u00f3s mudamos apenas o \u00edcone e o texto no controle das tabs. Vamos ent\u00e3o nessa p\u00e1gina e vamos customiz\u00e1-la.<\/p>\n<p>Troque o nome da p\u00e1gina tamb\u00e9m para\u00a0C\u00e1lculo de IMC.<\/p>\n<div id=\"attachment_574\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/troca-nome-tab.gif\" target=\"_blank\" rel=\"attachment noopener wp-att-574\"><img decoding=\"async\" aria-describedby=\"caption-attachment-574\" class=\"wp-image-574 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/troca-nome-tab.gif\" alt=\"Trocar nome da tab\" width=\"300\" height=\"149\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/149;\" \/><\/a><p id=\"caption-attachment-574\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h3>Miscellaneous<\/h3>\n<p>Na \u00e1rea de Miscellaneous, voc\u00ea consegue configurar algumas quest\u00f5es visuais da p\u00e1gina que est\u00e1 sendo editada. Por padr\u00e3o as op\u00e7\u00f5es de\u00a0<em>Padding<\/em>,\u00a0<em>Scrolling<\/em><em>\u00a0<\/em>e\u00a0<em>Header Margin<\/em> j\u00e1 vem marcadas, e pra ficar bonitinho, eu aconselho voc\u00ea a manter. Se voc\u00ea conhece um pouco de CSS\/ingl\u00eas pode imaginar o que cada op\u00e7\u00e3o faz.<\/p>\n<h3>Heading<\/h3>\n<p>Vamos adicionar um t\u00edtulo a p\u00e1gina de c\u00e1lculo de IMC, utilizando o componente Heading. Clique nele e arraste at\u00e9 dentro do celular, no centro da p\u00e1gina.<\/p>\n<p>Altere o texto para IMC Felizardo, a cor para #005BFF e o alinhamento para centralizado.<\/p>\n<div id=\"attachment_578\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-heading.gif\" target=\"_blank\" rel=\"attachment noopener wp-att-578\"><img decoding=\"async\" aria-describedby=\"caption-attachment-578\" class=\"wp-image-578 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-heading.gif\" alt=\"Adicionando heading ao app\" width=\"300\" height=\"141\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/141;\" \/><\/a><p id=\"caption-attachment-578\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h3>Input<\/h3>\n<p>Agora vamos inserir dois inputs, um para digitar a altura, em cent\u00edmetros e outro para digitar o peso, em kilos.<\/p>\n<p>No campo de altura coloque a propriedade\u00a0<em>Title<\/em> como Altura. A propriedade\u00a0<em>Type<\/em> como Number, para que assim o usu\u00e1rio s\u00f3 consiga digitar n\u00fameros nesse input. A propriedade\u00a0<em>Placeholder<\/em> preencha com cent\u00edmetros, para que o usu\u00e1rio consiga entender como deve preencher o campo. A propriedade\u00a0<em>Name<\/em> tem a fun\u00e7\u00e3o de colocar um nome, para que depois possamos recuperar o valor que foi digitado no campo com mais facilidade, para o nosso exemplo, digite altura. Por \u00faltimo, o\u00a0<em>Label Style<\/em> \u00e9 a forma como o r\u00f3tulo do campo ser\u00e1 exibido, escolha a op\u00e7\u00e3o Stacked.<\/p>\n<div id=\"attachment_579\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-input-altura.gif\" target=\"_blank\" rel=\"attachment noopener wp-att-579\"><img decoding=\"async\" aria-describedby=\"caption-attachment-579\" class=\"wp-image-579 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-input-altura.gif\" alt=\"Adicionando input para armazenar a altura\" width=\"300\" height=\"141\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/141;\" \/><\/a><p id=\"caption-attachment-579\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<p>Fa\u00e7a a mesma coisa para o campo peso, se tiver d\u00favidas clique na imagem abaixo para ver como eu fiz.<\/p>\n<div id=\"attachment_580\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-input-peso.gif\" target=\"_blank\" rel=\"attachment noopener wp-att-580\"><img decoding=\"async\" aria-describedby=\"caption-attachment-580\" class=\"wp-image-580 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-input-peso.gif\" alt=\"Adicionando input para o peso\" width=\"300\" height=\"141\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/141;\" \/><\/a><p id=\"caption-attachment-580\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<h3>Button<\/h3>\n<p>Pra finalizar essa tela, precisamos ter um bot\u00e3o pra calcular o IMC, ent\u00e3o vamos inserir um componente do tipo\u00a0<em>Button<\/em> com o texto Calcular.<\/p>\n<p>A propriedade\u00a0<em>Type<\/em> n\u00f3s n\u00e3o vamos alterar no momento, mas se quis\u00e9ssemos colocar um link para outra p\u00e1gina do nosso app, p\u00e1gina externa, e-mail ou telefone, poder\u00edamos us\u00e1-lo. Na propriedade\u00a0<em>Text<\/em>, coloque Calcular. Na propriedade\u00a0<em>Size<\/em>, que \u00e9 o tamanho do texto, coloque 22px.\u00a0Na propriedade\u00a0<em>Theme<\/em> coloque Balanced, para o bot\u00e3o chamar a\u00a0aten\u00e7\u00e3o do usu\u00e1rio. Por \u00faltimo\u00a0<em>Icon<\/em>, vamos colocar um \u00edcone que d\u00ea a visualiza\u00e7\u00e3o pro usu\u00e1rio de valida\u00e7\u00e3o. Depois de inserir o \u00edcone, troque a posi\u00e7\u00e3o em que ele aparece no bot\u00e3o, logo abaixo.<\/p>\n<div id=\"attachment_582\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-botao-calcular.gif\" target=\"_blank\" rel=\"attachment noopener wp-att-582\"><img decoding=\"async\" aria-describedby=\"caption-attachment-582\" class=\"wp-image-582 lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/adicionando-botao-calcular.gif\" alt=\"Adicionando bot\u00e3o para calcular\" width=\"300\" height=\"141\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/141;\" \/><\/a><p id=\"caption-attachment-582\" class=\"wp-caption-text\">Clique na imagem para ampliar<\/p><\/div>\n<p>Como exerc\u00edcio para voc\u00ea pegar o jeito do Ionic Creator, exclua uma das outras duas abas, e a que restar transforme em uma aba sobre o desenvolvedor, VOC\u00ca!<\/p>\n<p>Tamb\u00e9m, crie uma p\u00e1gina para ser acessada atrav\u00e9s do menu, que explique o IMC e sua tabela. M\u00e3os \u00e0 obra!<\/p>\n<p>Pra voc\u00ea dar uma olhada como o meu ficou, basta\u00a0<a href=\"https:\/\/creator.ionic.io\/share\/6167fb799f96\" target=\"_blank\" rel=\"noopener\">clicar aqui<\/a>.<\/p>\n<p>Veja aqui\u00a0<a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-exportando-e-gerando-apk\/\" target=\"_blank\" rel=\"noopener\">como exportar esse projeto pra sua m\u00e1quina, para poder edit\u00e1-lo, e como gerar o apk, o arquivo de instala\u00e7\u00e3o de apps do Android<\/a>!<\/p>\n<p>Qualquer d\u00favida pode deixar nos coment\u00e1rios ou falar comigo na <a href=\"http:\/\/www.facebook.com\/andrefelizardopage\" target=\"_blank\" rel=\"noopener\">minha p\u00e1gina no Facebook<\/a>!<\/p>\n<p>[wpdevart_like_box profile_id=&#8221;514623068560386&#8243; connections=&#8221;show&#8221; width=&#8221;300&#8243; height=&#8221;200&#8243; header=&#8221;small&#8221; cover_photo=&#8221;show&#8221; locale=&#8221;pt_BR&#8221;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ionic Creator \u00e9 uma ferramenta de prototipagem drag &amp; drop para criar aplicativos excelentes com Ionic, tudo atrav\u00e9s de uma interface. J\u00e1 adiantando o assunto pra voc\u00ea, a melhor forma de reduzir tempo e consequentemente o custo para criar prot\u00f3tipos de aplicativos m\u00f3veis<\/p>\n","protected":false},"author":1,"featured_media":550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[63,2,109,66,47,5],"tags":[11,12,49,16,17,52,53,60,23,25,55,56,57,58,59,36],"class_list":["post-548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aplicativos","category-dicas","category-ionic","category-ios","category-pc","category-tecnologia","tag-android","tag-app","tag-css","tag-dicas","tag-download","tag-front-end","tag-html","tag-html5","tag-ios","tag-iphone","tag-javascript","tag-js","tag-ui","tag-ux","tag-web","tag-windows-phone"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ionic Creator - Crie atrav\u00e9s de interface - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic Creator - Crie atrav\u00e9s de interface - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"Ionic Creator \u00e9 uma ferramenta de prototipagem drag &amp; drop para criar aplicativos excelentes com Ionic, tudo atrav\u00e9s de uma interface. J\u00e1 adiantando o assunto pra voc\u00ea, a melhor forma de reduzir tempo e consequentemente o custo para criar prot\u00f3tipos de aplicativos m\u00f3veis\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-22T22:27:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-09-11T15:15:19+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"393\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"Ionic Creator &#8211; Crie atrav\u00e9s de interface\",\"datePublished\":\"2016-05-22T22:27:42+00:00\",\"dateModified\":\"2018-09-11T15:15:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/\"},\"wordCount\":1199,\"commentCount\":11,\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/ionic-creator.png\",\"keywords\":[\"android\",\"app\",\"css\",\"dicas\",\"download\",\"front-end\",\"html\",\"html5\",\"ios\",\"iphone\",\"javascript\",\"js\",\"ui\",\"ux\",\"web\",\"windows-phone\"],\"articleSection\":[\"Aplicativos\",\"Dicas\",\"Ionic\",\"IOS\",\"PC\",\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/\",\"name\":\"Ionic Creator - Crie atrav\u00e9s de interface - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/ionic-creator.png\",\"datePublished\":\"2016-05-22T22:27:42+00:00\",\"dateModified\":\"2018-09-11T15:15:19+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"breadcrumb\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/ionic-creator.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/ionic-creator.png\",\"width\":750,\"height\":393,\"caption\":\"Ionic Creator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/ionic-creator-crie-atraves-de-interface\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic Creator &#8211; Crie atrav\u00e9s de interface\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ionic Creator - Crie atrav\u00e9s de interface - Blog do Andr\u00e9 Felizardo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/","og_locale":"pt_BR","og_type":"article","og_title":"Ionic Creator - Crie atrav\u00e9s de interface - Blog do Andr\u00e9 Felizardo","og_description":"Ionic Creator \u00e9 uma ferramenta de prototipagem drag &amp; drop para criar aplicativos excelentes com Ionic, tudo atrav\u00e9s de uma interface. J\u00e1 adiantando o assunto pra voc\u00ea, a melhor forma de reduzir tempo e consequentemente o custo para criar prot\u00f3tipos de aplicativos m\u00f3veis","og_url":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2016-05-22T22:27:42+00:00","article_modified_time":"2018-09-11T15:15:19+00:00","og_image":[{"width":750,"height":393,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#article","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"Ionic Creator &#8211; Crie atrav\u00e9s de interface","datePublished":"2016-05-22T22:27:42+00:00","dateModified":"2018-09-11T15:15:19+00:00","mainEntityOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/"},"wordCount":1199,"commentCount":11,"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png","keywords":["android","app","css","dicas","download","front-end","html","html5","ios","iphone","javascript","js","ui","ux","web","windows-phone"],"articleSection":["Aplicativos","Dicas","Ionic","IOS","PC","Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/","url":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/","name":"Ionic Creator - Crie atrav\u00e9s de interface - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#primaryimage"},"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png","datePublished":"2016-05-22T22:27:42+00:00","dateModified":"2018-09-11T15:15:19+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"breadcrumb":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png","width":750,"height":393,"caption":"Ionic Creator"},{"@type":"BreadcrumbList","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-crie-atraves-de-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic Creator &#8211; Crie atrav\u00e9s de interface"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-8Q","jetpack-related-posts":[{"id":590,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/ionic-creator-exportando-e-gerando-apk\/","url_meta":{"origin":548,"position":0},"title":"Ionic Creator &#8211; exportando e gerando apk","author":"Andr\u00e9 Felizardo","date":"23 de maio de 2016","format":false,"excerpt":"Continuando nossa jornada sobre o Ionic Creator, vamos agora exportar o app que fizemos na ferramenta, para podermos editar o c\u00f3digo e gerar o instalador para o Android (.apk). Se voc\u00ea n\u00e3o tem i-d-e-i-a do que \u00e9 Ionic, muito menos Ionic Creator, comece por aqui! No Ionic Creator, no canto\u2026","rel":"","context":"Em &quot;Aplicativos&quot;","block_context":{"text":"Aplicativos","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/aplicativos\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-parte-II.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-parte-II.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-parte-II.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-creator-parte-II.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1020,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/comecando-com-ionic-3\/","url_meta":{"origin":548,"position":1},"title":"Come\u00e7ando com Ionic 3","author":"Andr\u00e9 Felizardo","date":"10 de junho de 2018","format":false,"excerpt":"Ionic \u00e9 um framework para criar aplicativos mobile h\u00edbridos atrav\u00e9s de linguagens web (HTML, CSS e JS). Voc\u00ea pode aprender mais sobre o conceito do Ionic Framework aqui. Atualmente estamos no Ionic 3 (3.9.2 para ser exato), e o desenvolvimento do framework vem evoluindo bastante desde o lan\u00e7amento do Ionic\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"Come\u00e7ando com Ionic 3","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":868,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/quais-ferramentas-usar-com-ionic\/","url_meta":{"origin":548,"position":2},"title":"Quais ferramentas usar com Ionic &#8211; Ionic Developer Survey 2017","author":"Andr\u00e9 Felizardo","date":"29 de julho de 2017","format":false,"excerpt":"Pela primeira vez, esse ano a equipe do Ionic realizou uma pesquisa com mais de 13.000 desenvolvedores para saber o que eles est\u00e3o usando para desenvolver com o Ionic. Com esses dados, voc\u00ea que est\u00e1 querendo saber quais ferramentas usar com Ionic tanto no processo de desenvolvimento, tanto quanto IDEs\u2026","rel":"","context":"Em &quot;Aplicativos&quot;","block_context":{"text":"Aplicativos","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/aplicativos\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/07\/ionic-pesquisa-2017.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/07\/ionic-pesquisa-2017.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/07\/ionic-pesquisa-2017.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/07\/ionic-pesquisa-2017.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":527,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/ionic-framework-desenvolvendo-mobile-apps\/","url_meta":{"origin":548,"position":3},"title":"Ionic Framework &#8211; Desenvolvendo Mobile Apps","author":"Andr\u00e9 Felizardo","date":"14 de maio de 2016","format":false,"excerpt":"O que \u00e9 o Ionic Showcases Ionic Configura\u00e7\u00e3o e Instala\u00e7\u00e3o Node.js Cordova + Ionic Criando o primeiro app Divirta-se O que \u00e9 o Ionic? Ionic \u00e9 um framework livre e de c\u00f3digo aberto. O conceito principal desse framework, \u00e9 possibilitar a cria\u00e7\u00e3o de aplicativos mobile com linguagens web (HTML, CSS,\u2026","rel":"","context":"Em &quot;Aplicativos&quot;","block_context":{"text":"Aplicativos","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/aplicativos\/"},"img":{"alt_text":"Ionic logo","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":809,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/ionic-2-versao-final\/","url_meta":{"origin":548,"position":4},"title":"Ionic 2 &#8211; Vers\u00e3o Final","author":"Andr\u00e9 Felizardo","date":"26 de janeiro de 2017","format":false,"excerpt":"Vou repetir as palavras do Max: Hoje, eu estou incrivelmente animado\u00a0para anunciar o\u00a0Ionic 2. Depois de algumas releases candidates, hoje (25-01-17) foi anunciada a vers\u00e3o final do Ionic 2. Com o lan\u00e7amento da vers\u00e3o final do Angular 2\u00a0eu realmente estava ansioso por uma vers\u00e3o final do Ionic 2. Quando foi\u2026","rel":"","context":"Em &quot;Aplicativos&quot;","block_context":{"text":"Aplicativos","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/aplicativos\/"},"img":{"alt_text":"Ionic 2","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/ionic-2.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":623,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/splash-screen-ionic-e-icone\/","url_meta":{"origin":548,"position":5},"title":"Ionic &#8211; Splash Screen e \u00edcone","author":"Andr\u00e9 Felizardo","date":"20 de julho de 2016","format":false,"excerpt":"Depois que voc\u00ea come\u00e7a a brincar um pouco mais com Ionic, a necessidade de deixar o App mais bonitinho vai aparecendo. Se voc\u00ea ja gerou o apk do seu aplicativo,\u00a0deve ter se perguntado como altera a Splash Screen e o \u00edcone do seu App... Splash Screen Splash Screen \u00e9 a\u2026","rel":"","context":"Em &quot;Ionic&quot;","block_context":{"text":"Ionic","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/ionic\/"},"img":{"alt_text":"Ionic logo","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/05\/ionic-01.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=548"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/548\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/550"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}