Se você está começando como Gestor de TI, ou pensa em se tornar um, receba dicas para ter sucesso nessa posição (é grátis)!

Ionic – Seu primeiro APP em minutos no seu celular

Ionic - Seu primeiro APP em seu celular em minutos

Já conhece, ou ao menos já ouviu falar no Ionic?

Quer começar a desenvolver um APP híbrido e ainda não decidiu o que usar. Ionic é a resposta.

Nesse artigo não tenho a pretensão de lhe ensinar a desenvolver usando AngularJS ou mesmo o Ionic.

Quero apenas lhe dar o gostinho de ver seu primeiro APP em seu celular, seja ele iPhone ou Android, em poucos minutos.

Não acredita? Siga os simples passos que descrevo a seguir e ao final você verá que não estou mentindo, nem exagerando.

 

Ambiente

Windows 7 (64 bits) e (no meu caso) iOS 9.2.1, mas poderia ser um Android também.

 

Dependência

Programa que será necessário baixar para o tutorial:

 

Instalando o Node.js e o Ionic

  1. Localize onde você baixou o instalador do Node.js. Clique no executável do instalador, “node-v4.4.0-x64.msi“. Após a execução do instalador, clique sobre o botão “Next“.

    Ionic

  2. Aceite os termos da licença e clique sobre o botão “Next“.

    Ionic

  3. Escolha o local onde deseja instalar o Node.js. Caso não haja problema, deixe o local sugerido. Clique sobre o botão “Next“.

    Ionic

  4. Deixe as opções sugeridas. Clique sobre o botão “Next“.

    Ionic

  5. Clique sobre o botão “Install“.

    Ionic

  6. Clique sobre o botão “Finish“.

    Ionic

  7. Clique no “Iniciar” e no campo “Pesquisar programas e arquivos” digite “cmd” e não pressione o “Enter”:

  8. Clique sobre o “CMD” com o botão direito do mouse e execute a linha de comando do Windows como “Administrador”

    Ionic

  9. Antes de mais nada vamos testar se o Node.js foi instalado corretamente. Na linha de comando, digite os seguintes comandos:

    node -v (pressione a tecla ENTER)
    npm -v (pressione a tecla ENTER)
    copy con teste.js (pressione a tecla ENTER)
    console.log("Instalado!!!"); (pressione as teclas CTRL + Z)
    node teste.js (pressione a tecla ENTER)
    

    A saída dos comandos deve ficar semelhante a essa:

    Ionic

O NPM que vem incorporado ao pacote, é um utilitário de linha de comando que interage com o repositório online para publicação de projetos de código aberto para o Node.js, que ajuda na instalação de pacotes, gerenciamento de versão e gerenciamento de dependências.

É através dele que vamos instalar o Ionic.

  1. Na linha de comando, digite os seguintes comandos:

    npm install -g ionic (pressione a tecla ENTER)
    

    Ionic
  2. Teste se o Ionic foi instalado corretamente. Digite os seguintes comandos:

    ionic -v (pressione a tecla ENTER)
    

    Ionic

 

Criando o APP Ionic

  1. Crie uma pasta que armazenará seus projetos Ionic. Na linha de comando digite os seguintes comandos:

    mkdir testes_ionic (pressione a tecla ENTER)
    cd testes_ionic (pressione a tecla ENTER)
    
  2. Vamos a criação da aplicação. A sintaxe do comando para criação de aplicações Ionic é:

    ionic start <nome_da_aplicacao> <template_aplicacao>
    

    Onde:

    <nome_da_aplicacao> é o nome de sua aplicação.
    <template_aplicacao> pode ser uma das seguintes opções:

    • blank: Aplicação em branco.
    • tabs: Aplicação no formato de abas.
    • sidemenu: Aplicação com menu lateral.

    Para nosso primeiro exemplo criaremos uma aplicação com menu lateral. Digite os seguintes comandos:

    ionic start meuTeste sidemenu (pressione a tecla ENTER)
    

    Ionic

Antes do teste da aplicação em seu celular, podemos testá-la em seu browser. Para isso precisamos que a aplicação rode em um servidor web.

O Ionic tem um servidor incorporado para esse tipo de teste.

  1. Se posicione na pasta onde foi gerada a aplicação, que em nosso caso é: “testes_ionic/meuTeste”, em seguida inicie o serviço. Digite os seguintes comandos:

    cd meuTeste (pressione a tecla ENTER)
    ionic serve (pressione a tecla ENTER)
    

    Ionic

Seu browser padrão será iniciado automaticamente com a aplicação criada.

Ionic

 

Usando o ionicview

Aqui está a parte que mais me empolga.

Imagine que você deseja desenvolver uma aplicação para iPhone, mas é sua primeira aplicação e ainda não é um desenvolvedor oficial Apple.

Você nem mesmo tem um iMac ou qualquer equipamento Apple para gerar a build do APP.

Você gostaria de compartilhar seu APP, com amigos, clientes, ou quem desejar. Como fazer?

Com o ionicview isso é possível

  1. Baixe o APP ionicview, através da Apple Store ou do Google Play. Instale o APP em seu celular.

    Ionic

  2. Crie uma conta no site do Ionic, acessando o endereço: https://apps.ionic.io/signup. Informe seu nome, email e senha e clique no botão “CREATE IONIC ACCOUNT“.

    Ionic

  3. Como você acabou de criar a conta, ainda não há nenhuma aplicação disponível.

    Ionic

Vamos agora fazer o upload da aplicação para o site Ionic. Primeiro é necessário logar em sua conta.

  1. Na linha de comando do Windows, se posicione na pasta onde foi criada nossa aplicação. Digite os seguintes comandos:

    d:
    cd \testes_ionic\meuTeste (pressione a tecla ENTER)
    ionic login (pressione a tecla ENTER)
    

    Informe email e senha, informados na criação de sua conta no site Ionic.

    Ionic

  2. Para upload da aplicação para o site Ionic. Digite os seguintes comandos:

    ionic upload (pressione a tecla ENTER)
    

    Ionic

Agora vamos testar o APP em seu celular.

  1. Clique no APP ionicview em seu celular. Clique sobre o link “Log in“.

    Ionic

  2. Informe seu email e senha. Clique sobre o botão “LOG IN“.

    Ionic

  3. Sua aplicação já está disponível para uso. Clique sobre a aplicação “meuTeste“.

    Ionic

  4. Clique sobre a opção “VIEW APP“.

    Ionic

  5. Pronto! Como prometido, ai está seu primeiro APP, rodando em seu celular.

    Ionic

 

É isso o que eu preciso… e agora? O que faço?

O Ionic é um framework que vai ajudá-lo em seu desenvolvimento de aplicativos, utilizando o framework Javascript AngularJS.

Logicamente que é necessário que conheça Javascript e AngularJS.

Se você quer conhecer mais sobre Javascript e AngularJS, vou lhe dar o caminho das pedras.

Você já ouviu falar do Rodrigo Branas? Não?

Rodrigo é a referência em AngularJS no Brasil. Sua didática torna tudo muito mais simples. Assista a suas palestras e vídeos, que você vai entender o que digo:

 

Gostou do post?

Gostaria muito de saber sua opinião sobre o conteúdo através de um comentário seu logo aqui abaixo.

Caso ele tenha sido útil para você, aproveite para compartilhá-lo com um amigo ou amiga que precise de idéias como essas para ajudar em seu dia a dia.

Se quiser que avise sempre que houver uma atualização, deixe seu email abaixo.

Informe seu email e clique no botão ENVIAR!

Até o próximo post!

34 Comments

Add a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *