Ionic - 설치 및 새로운앱 시작

[IONIC Example]

설치 및 새로운 앱 시작

IONIC을 시작하고자 하는데 단순히 "Hello World"에 만족할 수 없다면 이 글이 큰 도움이 될것이다.

이 글은..

• IONIC 설치
• IONIC Start (새로운 앱 생성)
• IONIC Serve (실행)
• Hello World 출력 (Alert, AlertController)
• Rest Countries EU로 부터 REST API 호출 후 목록 출력

을 다룬다.

Ionic 설치 (Node가 설치되어 있어야함)

> npm install -g ionic
> npm install -g cordova

OSX(MAC)인 경우에는 

> sudo npm install -g ionic
> sudo npm install -g cordova

설치된 IONIC과 버전을 확인한다.

> ionic info

IONIC APP을 만든다. IONIC은 Start 명령으로 신규 앱을 만들어낸다.

> ionic start MySidemenuApp sidemenu




마지막의 sidemenu는 탬플릿(Template)을 지정한 것이며 blank, list, tabs등 몇가지가 있다.

Sidemenu 탬플릿을 선택하면 화면 상단 헤더에 햄버거 버튼이 만들어지며, 햄버거 버튼을 클릭하면 좌측에서 슬라이드 메뉴가 나타나는 형태이다. 

앱 이름인 MySidemenuApp 이란 폴더가 만들어졌다. 안으로 들어간후 앱을 실행한다.

> cd MySidemenuApp
> ionic serve -l

실행 옵션으로 -l (-lab)을 부여할 경우 ionic-lab 컨테이너를 통해 각 플랫폼 별 테스트가 가능하며, 생략할 경우 브라우저에 직접 실행된다. 

물론 -l을 생략한 후 크롬 개발자 도구를 이용해 플랫폼을 변경해가며 각 차이를 비교할 수도 있겠다.

이제 본격적으로

Hello World를 Alert을 이용하여 출력한다.

위 그림의 "TOGGLE MENU" 하단에 버튼을 만들어 클릭하면 "Hello World"를 출력할 계획이다.

버튼 생성은 IONIC Framework API에서 참조하며, 홈 화면에 만들어질 것이므로 home.html 부터 수정하도록 한다. 

./src/pages/home/home.html 열어 버튼을 하나 추가한다. 

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
  <button ion-button full color="secondary" (click)="sayHello()">Say Hello</button>
</ion-content>

./src/pages/home/home.ts 를 열어 click이벤트 발생시의 핸들을 작성한다.

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, 
    private alertCtrl: AlertController) {

  }

  sayHello() {
    let alert = this.alertCtrl.create({
      title: 'Greeting',
      message: 'Hello World',
      buttons: [
        {text: 'OK'}
      ]
    });
    alert.present();
  }

}

Alert은 물론 간단히 Native alert을 이용하여 출력할 수 있으나, AlertController를 이용하여 조금더 스맛폰 스럽게 꾸며보도록 하고...

ionic serve를 통해 자동으로 열렸던 브라우저가 아직 닫히지 않았다면 자동으로 빌드되어 화면이 갱신된다. 이제 버튼을 클릭해보라.

이제 메뉴를 토글하면 나오는 두번째 페이지 "List"에 Rest Countries EU의 모든 국가 목록을 REST API (JSON)으로 받아 목록화 한다.

https://restcountries.eu/rest/v2/all

우리가 사용할 주소다. 

우선 Angular의 HttpClientModule을 사용해야하므로 app.module.ts를 열어 Import한다.

./src/app/app.module.ts 를 열어 HttpClientModule을 import 하고 @NgModule() 어노테이션 imports에 추가한다.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpClientModule } from '@angular/common/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

./src/pages/list/list.ts 를 열어 HttpClient를 사용하여 국가목록을 받아 놓도록 한다.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  items: any[];

  constructor(public navCtrl: NavController, 
    public http: HttpClient,
    public navParams: NavParams) {

    this.http.get('https://restcountries.eu/rest/v2/all').subscribe((response:any) => {
      this.items = response;
    }, err => {
      console.log(err);
    });

  }

}

물론 기존의 list.ts와 비교하여 상당히 많이 수정된 모습이다. 대부분 지우거나 변경한 것이니 기존의 소스코드와 비교해보는것은 당신의 몫.

./src/pages/list/list.html을 열어 items로 받아놓은 국가목록을 출력하도록 한다.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let c of items">
      <ion-avatar item-left>
        <img src="{{c.flag}}">
      </ion-avatar>
      <h2>{{c.name}}</h2>
      <p>Capital: {{c.capital}}, Region: {{c.region}}</p>
    </ion-item>
  </ion-list>
</ion-content>

이 글은 아래 URL의글을 일부 참조하였습니다.

https://www.djamware.com/post/58e657b680aca764ec903c2d/ionic-3-and-angular-4-mobile-app-example

이 글의 소스코드는 아래에서

https://github.com/lugam/ionic-helloworld-exam