[ionic3] Ionic 3 시작하며 정리한 내용

# NPM 설치 목록

1. 설치한 패키지 버전 확인: npm show [패키지명] version

2. npm install -g cordova

3. npm install -g ionic 

# ionic 프로젝트 생성

1. ionic start [프로젝트명] [프로젝트템플릿명]

 (프로젝트템플릿명: blank, tabs, sidemenu, tutorial, githul-URL 등이 있습니다.)

2. ionic4 beta로 만들것인지 물어보는데 N 이라고 답하면 됩니다.

3. ionic cordova platform add android, ionic cordova platform add ios, ionic cordova platform add browser

 (플랫폼 추가)

4. ionic build ios, ionic build android

 (플랫폼 빌드)

5. ionic serve --lab

 (브라우저에서 안드로이드, IOS 를 동시에 볼 수 있습니다. 

 그리고 소스내용을 수정하면 자동 리프레시가 됩니다.)

6. ionic cordova run android --device 실제 안드로이드 디바이스에서 실행

 ionic cordova run browser 브라우저에서 실행

 ionic cordova emulate [<platform>] 예물레이터에서 실행

(실행 관련 옵션: https://ionicframework.com/docs/cli/cordova/run/)

# 페이지 추가: ionic에서 사용하는 페이지 추가

1. ionic g page [pageName]

# 서비스 생성

1. ionic g provider [providerName]

 => 프로바이더를 만들어서 사용하면 싱글톤 패턴이기 때문에 변수가 static 적용되어 사용됩니다.

# 컴포넌트 생성: 공통으로 사용하는 뷰 및 기능

1. ionic g component [componentName]

# 플러그인 Docs

1. HTTP 플러그인: https://ionicframework.com/docs/native/http/

# app.module.ts

1. declarations: 이 모듈에서 사용하는 뷰 클래스를 정의한다. Angular에는 컴포넌트, 디렉티브, 파이프 세 종류의 뷰 클래스가 있다.

2. imports: export로 공개된 클래스를 다른 컴포넌트 템플릿의 this 모듈에 선언해서 사용할 때 사용한다.

3. bootstrap: 루트 컴포넌트라고 하는 메인 어플리케이션의 뷰를 선언한다. bootstrap 항목은 루트 모듈에만 존재한다.

4. entryComponents: 라우터 구성에서 참조되는 컴포넌트

5. providers: 전역에서 사용되는 서비스를 해당 객체에서 사용할 수 있도록 생성하고 지정한다. 프로바이더는 앱의 모든 곳에서 접근할 수 있다.

# Ionic Tips

1. navbar에서 뒤로가기 버튼 숨기는 방법: <ion-navbar hideBackButton> 처럼 hideBackButton을 추가하면 된다.

2. When to Use Providers / Services / Injectables in Ionic : https://www.joshmorony.com/when-to-use-providersservicesinjectables-in-ionic/

3. 스플래시 및 아이콘 변경 방법: http://kamang-it.tistory.com/entry/Ionic-04%EC%95%84%EC%9D%B4%EC%BD%98%EA%B3%BC-%EC%8A%A4%ED%94%8C%EB%9E%98%EC%8B%9C-%EC%83%9D%EC%84%B1

4. 하드웨어 백버튼 관련: https://www.codementor.io/syseverton/ionic-3-solving-the-hardware-back-button-avoiding-to-close-the-app-k23a6wu4e

5. ionic cordodva run android --device시 기기와 타이임아웃이 자주 발생할때 기기 찾는 시간을 늘린다.

https://forum.ionicframework.com/t/error-device-communication-timed-out/40118/3

6. 패키지명과 앱 이름 변경시 플랫폼을 전부 삭제후 변경해야 변경이 적용됩니다.

7. build 혹은 run 시 cordova Could not find any matches for com.android.tools.build:gradle:2.3.+ as no versions of com.android.tools.build:gradle are available. 오류가 발생하면

platforms > android > app > build.gradle 에 buildscript 안에 mavenCentral() 를 추가합니다.

8. FCM Plugin 추가 후 android studio 툴에서 gradle 빌드시 이와 같은 오류가 날수 있습니다.

오류 발생원인은 repositories에서 2.3 이상의 버전을 찾을 수 없기 때문입니다. 그래서 repositories에 mavenCentroal()를 추가합니다.

Could not find any matches for com.android.tools.build:gradle:2.3.+ as no versions of com.android.tools.build:gradle are available.

이럴 경우

test-FCMPlugin.gradle 에서 오류가 날 경우 이와 깉이 buildscript를 변경한다.

buildscript {

    repositories {

        jcenter()

        mavenLocal()

        mavenCentral()

        maven {

          url 'https://maven.google.com'

        }

    }

    dependencies {

        classpath 'com.android.tools.build:gradle:2.3.+'

        classpath 'com.google.gms:google-services:3.1.+'

    }

}

# 설치한 플러그인

1. npm install --save @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer

2. ionic cordova plugin add cordova-plugin-camera --save : ios 일 경우 https://github.com/apache/cordova-plugin-camera 에서 퍼미션허용해줘야 합니다.

3. ionic cordova plugin add cordova-plugin-file --save

4. ionic cordova plugin add cordova-plugin-file-transfer --save

5. ionic cordova plugin add cordova-plugin-filepath --save

6. npm install whatwg-fetch --save : fetch polyfill: Html의 Fetch API의 Polyfill NPM

7. ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated: FCM 플러그인

8. npm install --save @ionic-native/fcm: FCM NPM

9. ionic cordova plugin add cordova-sqlite-storage: 스토리지 플러그인

10. npm install --save @ionic/storage: 스토리지 NPM

11. ionic cordova plugin add cordova-plugin-file-opener2

12. npm install --save @ionic-native/file-opener

13. ionic cordova plugin add cordova-plugin-screen-orientation

14. npm install --save @ionic-native/screen-orientation

# Visual Studio Code Plugin

1. angular language service

2. angular v4 typescript snippets

3. TSlint

# FCM

1. FCM 테스트 사이트: https://cordova-plugin-fcm.appspot.com/

2. 백그라운드 일때 노티피케이션 눌렀을때 작동을 시키려면 위 사이트에서 테스트 할때

Custom data parameters안에 키: click_action, 값: FCM_PLUGIN_ACTIVITY 를 넣어줘야 합니다.