ionic2

Angular2를 이용하여 하이브리트 앱 개발을 할 수 있는 프레임워크입니다.

필요한 것을 설치

npm install -g ionic cordova ios-deploy

프로젝트 만들기

이번에는 템플릿에 tutorial를 지정.
도중에 Dashboard를 이용할지 묻는데 이번에는 NO.

ionic start {プロジェクト名} {テンプレート}

우선 브라우저에서 확인해 봅시다.

cd {プロジェクト名}
ionic serve

보였다!

실제 기계로 확인해보십시오.

수중의 iOS10으로 해 본다.

Xcode로 계정 등록

Xcode > Preferences > Accounts > Add Apple ID

빌드

ionic cordova build ios --prod

Xcode로 빌드된 프로젝트 열기

{プロジェクト名}/platforms/ios/

실행 대상을 연결된 iPhone으로 변경

USB로 Mac과 iPhone을 연결합니다.iPhone 7 Plus 가 되어 있는 부분을 접속한 iPhone으로 변경한다.

서명 인증서 설정

Xcode에서 프로젝트를 두 번 클릭하고 General를 선택합니다.

Identity 의 Bundle Identifier 에 임의의 문자열 입력.

General > Signing > Add Accounts 선택.

내 Apple 계정을 두 번 클릭합니다.

No Signing 와 나오므로, 아래의 + 에서 추가.

iOS Developpers 선택.

실행

왼쪽 상단의 재생 버튼을 클릭!

아이폰의 락을 풀라고 말해지므로, 말하는 대로.

HOME 화면에 앱이 배치되어 있어야 합니다.

실행하려고 하면···, 할 수 없다.

iPhone에서 인증서를 신뢰합니다.

아이폰 設定 > 一般 > デバイス管理

내 Apple 계정이 표시되므로 탭하여 신뢰합니다.

이런 곳에서 실행.

HOME에서 앱 탭, 실제 기계 확인 완료!

페이지를 늘려보세요

tutorial 의 토글 메뉴에 링크를 추가해, 작성한 페이지에 날릴 때까지 구현한다.

버튼을 누르면 경고가 표시되는 페이지를 만들어 봅니다.

페이지 만들기

src/pages/ 아래에 새 페이지 폴더를 만듭니다.sample 폴더를 만들었습니다.

html 작성

sample.html 페이지 폴더에 만들기

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

<ion-content>
  <button ion-button block (click)="tappedAlert()">アラートが出るボタン</button>
</ion-content>

TS 만들기

sample.ts 페이지 폴더에 만들기

공식 경고 구성 요소를 사용합니다.

sample.ts

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';

@Component({
    selector: 'page-sample',
    templateUrl: 'sample.html'
})
export class SamplePage {
    constructor(public alertCtrl: AlertController) {
    }

    tappedAlert() {
        let alert = this.alertCtrl.create({
            title: 'Sampleアラートです！',
            subTitle: 'ここに説明を書きます。ionicでサンプル実装してみた！',
            buttons: ['おっけー']
        });
        alert.present();
    }
}

다른 설명이 필요한 곳

src/app/app.module.ts

import { SamplePage } from '../pages/sample/sample';

  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    SamplePage
  ],

  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    SamplePage
  ],

src/app/app.compornent.ts

import { SamplePage } from '../pages/sample/sample';

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage },
      { title: 'Sample', component: SamplePage },
    ];

확인

다시 빌드의 절차를 수행하고 실제 기계로 확인.

라고 생각하면 빌드로 굉장히 에러로 되어 있다··

분명히 서명 관계 오류. 조만간 Xcode로 서명을 만났으니까 ...

config.xml의 서명을 Xcode로 입력한 문자열로 변경하면 갈 수 있었다.

실제 기계 스쿠쇼

할 수 있었다!

요약

처음으로 iPhone 앱을 만져 보았습니다만 비교적 바삭바삭 갈 수 있었습니다!
하지만, 마지막 서명의 회피가 오히려 수상하다・・・w
서명 관계는 조사하면 수정합니다.