Primeiras aulas do curso Ionic 3 parte 1: aplicações híbridas mobile ainda mais poderosas

Ionic 3 parte 1: aplicações híbridas mobile ainda mais poderosas

Começando com Ionic 3 - Introdução

Olá alunos e alunas. Meu nome é Gabriel Leite e serei seu instrutor nesse curso. A pedido da nossa cliente AluraCar, fomos incubidos de construir um aplicativo mobile para agendamento de test-drives dos carros da empresa, e ela deseja que tal aplicativo seja utilizado nas plataformas Android, iOS e Windows Phone.

A boa notícia é que não teremos que aprender cada uma das linguagens - Java para Android, Swift para iOS e a linguagem do Windows Phone - para desenvolver esse aplicativo, pois podemos utilizar ferramentas que possibilitam o desenvolvimento de aplicativos híbridos, permitindo que façamos o deploy para todas essas plataformas com um único código.

Uma dessas ferramentas disponíveis no mercado é o Ionic3, objeto dos nossos estudos. Com ele, desenvolveremos um código escrito em TypeScript, HTML e CSS, e conseguiremos fazer o deploy para as três plataformas pedidas pela nossa cliente. Além disso, o Ionic agilizará esse desenvolvimento ao remover a necessidade de testarmos a aplicação em um dispositivo físico. Com ele poderemos, por exemplo, visualizar por meio do navegador como a aplicação está ficando nas três plataformas.

Da esquerda para a direita, Android, iOS e Windows Phone.

Teremos uma listagem de carros, na qual poderemos selecionar um item, ver as fotos e outros dados do carro selecionado, adicionar acessórios e avançar no agendamento informando um cliente, um endereço, um e-mail e uma data para o test-drive. Ao longo do curso, aprenderemos os pormenores dessa ferramenta.

Bons estudos!

Começando com Ionic 3 - Instalando o Ionic

Agora que já temos toda a infraestrutura básica na nossa máquina, precisamos instalar o Ionic 3. Na realidade, além do Ionic, instalaremos também o Ionic Clear, a interface de linha de comando do Ionic que nos proverá algumas facilidades no desenvolvimento. Ambos são pacotes do Node.

No Prompt de Comando, executaremos npm install -g ionic@3.16.0 cordova@7.0.1 --save-exact.

A instrução npm serve para chamarmos o gerenciador de pacotes do node; g instalará de maneira global os pacotes necessários, de modo que poderemos acessá-los de qualquer terminal do computador; ionic@3.16.0 indicará a versão do Ionic que instalaremos (a que foi testada na criação desse curso); cordova@7.0.1 instalará a versão indicada do Cordova, uma dependência do Ionic que comentaremos mais tarde; e --save-exact define que salvaremos exatamente essas versões, evitando qualquer variação.

Instalando exatamente a versão 3.16.0 do Ionic, conseguiremos mitigar eventuais problemas de quebra do framework entre uma versão e outra, garantindo que o curso continuará sendo possível de ser realizado independentemente da versão atual do Ionic. Após a instalação, podemos executar o comando ionic info, que nos trará algumas informações do nosso ambiente, como a versão instalada, a versão do Node (no curso, 6.11.5, a melhor versão para trabalhar com o Ionic 3) e do npm (3.10.10).

O Cordova na realidade é uma dependência do Ionic que nos dará acesso direto às funcionalidades dos nossos aparelhos, enquanto o Ionic nos proverá os componentes para uma visualização exata da plataforma em que estaremos executando a aplicação, como botões e listas.

No próximo vídeo aprenderemos a criar o nosso primeiro projeto.

Começando com Ionic 3 - Criando o primeiro projeto

Você pode fazer o DOWNLOAD completo do projeto inicial e continuar seus estudos a partir deste capítulo.

No último vídeo fizemos a instalação do Ionic, e agora queremos criar um novo projeto. No terminal, utilizaremos o comando ionic start meuProjeto blank para iniciarmos um novo projeto com o nome meuProjeto e utilizando o template blank. Esse template é, na realidade, um projeto padrão que o Ionic provê. Existem também outras variações.

Esse comando fará o download do template escolhido e de todas as dependências que o Ionic necessita. Entretanto, ele baixará as dependências mais novas. Conforme as versões do Ionic e suas dependências são atualizadas, pode ser que o código desenvolvido deixe de funcionar, impedindo o prosseguindo com o curso.

Para evitarmos esse problema, não iremos criar uma aplicação do zero. Ao invés disso, você deverá fazer o download do projeto disponibilizado no início da transcrição. Sendo assim, após extrair a pasta zipada, acessaremos o seu diretório pelo Prompt de Comando.

Nesse ponto, deveríamos executar o comando npm install para instalarmos as dependências do Node, já que um projeto Ionic nada mais é do que um projeto comum do Node. No entanto, executaremos o comando ionic serve --lab para que a linha de comando do Ionic nos sirva a aplicação. Após pressionarmos "Enter", receberemos uma mensagem informando que a aplicação parece ser nova e perguntando se queremos instalar as dependências. Digitaremos "Y" (sim) e pressionaremos "Enter" novamente.

Finalizado o processo, veremos que o ionic serve --lab identificou que as nossas dependências não estavam instaladas e executou o npm install, em seguida dando início ao processo de build. Depois disso, somos informados que a aplicação já está rodando no endereço http://localhost:8100. Por padrão, ele também já abre o navegador do sistema operacional mostrando a página inicial da aplicação.

No caso da página inicial do template blank, teremos uma mensagem de boas vindas e um link para a documentação, que servirá de guia. No canto superior direito, na seção "Plataforms", podemos selecionar as plataformas do Android e do Windows Phone para visualizar as três ao mesmo tempo, o que acelerará o nosso processo de desenvolvimento.

No próximo vídeo analisaremos mais a fundo os arquivos criados pelo Ionic quando iniciamos esse projeto.

Sobre o curso Ionic 3 parte 1: aplicações híbridas mobile ainda mais poderosas

O curso Ionic 3 parte 1: aplicações híbridas mobile ainda mais poderosas possui 232 minutos de vídeos, em um total de 83 atividades. Gostou? Conheça nossos outros cursos de Multiplataforma em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Multiplataforma acessando integralmente esse e outros cursos, comece hoje!

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana