아이오닉 소스를 파이어베이스에 배포하는 방법

Ionic 기능

  • Angular에서 아이오닉이 제공하는 컴포넌트로 앱 UI를 구현할 수 있습니다.
  • 안드로이드, iOS 네이비브 API를 사용할 수 있습니다.(카메라, 푸시 등)

UI Components, API, Ionic Native, Ionicons등 제

설치

1
2
3
$ npm install -g ionic@latest cordova
$ ionic start iweather [ blank / tab / sidemenu ] []()
$ ionic serve

page / provider 생성

1
2
$ ionic g page settings
$ ionic g provider weather

Native

  • core package 설치

    1
    npm install @ionic-native/core --save

  • Native package 설치

1
2
npm install @ionic-native/camera --save
ionic cordova plugin add cordova-plugin-camera
  • NgModule에 추가
  • ./src/app/app.module.ts
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ...

    import { Camera } from '@ionic-native/camera';

    ...

    @NgModule({
      ...

      providers: [
        ...
        Camera
        ...
      ]
      ...
    })
    export class AppModule { }

Firebase Web Deploy

ionic web build

1
$ ionic build browser

Firebase 설치 - public folder를 www로 지정

1
2
$ firebase init
$ firebase deploy

Ionic View

Dashboard

개발서버 Proxy설정

  • ionic.config.json 파일에 proxies 추가
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "name": "ionic-example",
      "app_id": "xxxxxxxx",
      "type": "ionic-angular",
      "integrations": {},
      "proxies":[
        {
          "path":"/api",
          "proxyUrl":"http://yourService.com/api"
        }
      ]
    }

##ionic page로 url 접근

1
$ ionic g page about

src/pages/about/about.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the AboutPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage({
  name: 'about',
  segment: 'about'
})
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }

}

reference

example

1
2
3
4
5
$ npm install -g ionic@latest cordova
$ ionic start iweather tab
$ ionic serve
$ ionic g page settings
$ ionic g provider weather

test

1
2
3
4
5
6
$ ionic cordova build ios
$ ionic cordova emulate ios

$ ionic cordova build android
$ ionic cordova emulate android
$ cordova build android --verbose //상세 정