'Tools/ionic2'에 해당되는 글 4건

ionic2+firebase 연동하기- typings를 이용

1. 설치방법

1) 파이어베이스 설치

- $ npm install firebase --save

- 자신의 프로젝트 경로에 설치한다

2) typings 설치

- $ npm install -g typings

3) ionic 의 firebase 의존관계 설정

- $ typings install --save firebase

아이오닉2(ionic2) 디렉토리 구성 - Project Structure

1. ./src/index.html

- 앱의 시작 역할을 하며 script, css, bootstrap 셋팅 을 하고 앱을 시작한다

- 개발시에 수정되는 일이 거이 없다

1) 소스 하단

<script src="cordova.js"></script> <script src="build/main.js"></script>

- <script src="cordova.js"></script> : 브라우저 404 경우 코르도바를 인젝션 한다

- <script src="build/main.js"></script> : 아이오닉, 앵큘러와 앱의 스크립드들을 연결 한다

2. ./src/

- 이 폴더 아래에서 주요 개발 환경이 이루어 진다

- ionic serve 라는 명령어를 입력하면 src/하위 파일들이 타입스크립트에서 브라우저에서 이해할 수 있는 자바스크립트로 변환(transpiled)된다

1) src/app/app.module.ts 

- 만드는 앱의 입구 역할을 한다

@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

- 모든 앱은 루트 모듈이 존재하고 이곳에서 루트 모듈을 설정한다. 또한 루트 콤포넌트를 설정한다(src/app/app.component.ts)

- pages 폴더에 페이지를 추가할 때마다 모듈에도 같이 추가해야 한다

2) src/app/app.component.ts

- 앱이 로드 될때 실행되는 첫번 째 컴포넌트 이다

- 루트 컴포넌트(app.components.ts + app.html + app.scss)

- 새로운 페이지를 만든다면 해당 루트 컴포넌트를 각각 만들어야 한다

3) theme 

- 디자인 작업

4) main.ts

- 루트 컴포넌트를 가져와서 실제적으로 앱에 붙인다

3. ./src/app/app.html

- 앱의 주요 템플릿이다

4. node_modules

- 아이오닉 개발에 필요한 모듈이나 플러그인 설치

- package.json을 이용해서 npm 설치를 한다

5. platform

- 앱의 결과물이 담긴다

6. plugins

- 코도바를 위한 플러그인

7. resources

- icon.png, splash.png가 들어 있으면 처음 앱의 실행(스플레쉬) 화면 설정에 관여

8. config.xml

- 코도바 설정, 앱 전체를 위한 파일

- widget id를 이용하여 앱을 구분한다

- 스플레쉬 화면을 설정한다(preference)

9. pages

- 페이지를 실제적으로 만들 때 사용된다

- html, scss, ts 로 기본적인 구성을 가진다

아이오닉2(ionic2) 설치하기 - Installing ionic2

1. npm 설치

- ionic2 을 설치 하기 위해 npm이 필요하다

- npm 다운로드 : https://nodejs.org/ko/

2. ionic2 + cordova 설치

- 코르도바(cordova)와 ionic2를 설치한다

- npm install -g cordova ionic

3. app 실행

- ionic start --v2 myApp tabs

- myApp : 앱 이름

- --v2 : 아이오닉 버전 2를 사용하기 위해서추가

- 위 표시된 부분을 변경하면 초기 템플릿을 변경 할 수 있다

- cd myApp

- ionic serve

- 아이오닉 서버를 이용하여 브라우저에 바로 빌드 된다

1) 아이오닉 서버를 킬때

- ionic serve -c -l

- 위와 같이 실행하면 콘솔 로그를 남길 수 있다

아이오닉2(ionic2) 란?

1. 정의

- 하이브리드 앱 중 하나

- 코도바(cordova) 라는 개발 프레임 워크 위에서 작동하며 앵귤러(angular) 코드를 사용한다

- 크로스 플랫폼 개발

- 아이오닉 주소 : http://ionicframework.com/

2. 장점

- 멀티 플랫폼이다. 웹 소스를 이용하여 android, ios , window 환경에서 실행 가능하다

- UI 컴포넌트

- Angular의 장점 수용

3. 단점

- native 앱에 비하여 성능이 느리다

- angluarjs2, typescript 학습 필요