Capa livro - Cordova avançado e PhoneGap, Casa do Código

Lançamento!

Se você quer aprender a fundo sobre desenvolvimento de aplicativos com Cordova e PhoneGap, saiu o meu livro sobre Cordova & PhoneGap pela editora Casa do Código, saiba mais clicando aqui.

Hello World com Ionic

Capa

Para quem me conhece sabe que eu gosto bastante de construir aplicativos híbridos, recentemente trabalhei em um projeto usando o framework Ionic, neste post rápido vou mostrar como fazer um Hello World com a plataforma em conjunto falo dos detalhes que me encantaram.

A primeira coisa a se fazer instalar o client do Ionic no terminal de comando:

npm install -g ionic

Com o cliente instalado, agora nós vamos iniciar um novo projeto em branco:

ionic start helloWorld blank

Com esse comando anterior será levantado um projeto em branco com a estrutura básica, uma coisa bem legal do Ionic é os gerador de estrutura, você consegue através de comando criar views, controllers, pipes, components, providers e tabs.

Para saber o que são pipes, components, providers e outros, consulte a documentação https://ionicframework.com/docs

A estrutura que foi criada foi a seguinte:

Estrutura HelloWorld

Repare que dentro de src -> pages -> home já existe uma view pronta, você pode adicionar outras páginas, repare que uma página tem:

  • home.html = arquivo html da página)
  • home.scss = arquivo css exclusivo daquela página, recomendo colocar aqui marcações somente referentes a página)
  • home.ts = arquivo typescript da página, onde fica a lógica da página, os métodos para interagir com os componentes da página)

Antes de continuar, vamos testar para ver se tudo está funcionando com o seguinte comando:

ionic serve

Seguindo, vamos criar um botão nessa página para emitir um alerta Ionic, com design bonito.

Vamos começar importando o componente de alerta dentro do home.ts, bem no início do arquivo que é onde importamos os componentes:

import { AlertController } from 'ionic-angular';

Agora, vou até o arquivo home.html e retiro o que veio dentro de <ion-content padding> e adiciono um botão, o código ficou assim:

<ion-header>
  <ion-navbar>
    <ion-title>
      Hello World
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button>Button</button>
</ion-content>

Só que para esse botão funcionar, precisamos chamar alguma função, nisso, vou até o arquivo home.ts criar uma chamada alertar:

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  alertar(){
    console.log("Envia um alerta");
  }
}

Agora eu volto ao home.html e adiciono uma chamada click:

<ion-header>
  <ion-navbar>
    <ion-title>
      Hello World
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="alertar()">Enviar alerta</button>
</ion-content>

Pronto, isso já deve me gerar um console.log, mais como somos detalhistas, vamos usar o que o Ionic tem de melhor, os componentes, vamos enviar um alerta, no lugar do console vou colocar um alerta:

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
              public alertCtrl: AlertController) {
  }

  alertar(){
    let alert = this.alertCtrl.create({
      title: 'Olá mundo!',
      subTitle: 'Esse é um exemplo de um componente Ionic',
      buttons: ['OK']
    });
    alert.present();
  }
}

Documentação de alertas: https://ionicframework.com/docs/components/#alert

Bem, e o resultado final do nosso aplicativo é o seguinte:

Resultado do app HelloWorld