아이오닉 프레임워크

아이오닉 프레임워크

1.아이오닉 이란?

여러 하이브리드 앱개발 플랫폼이 있지만 ionic3는 단순 라이브러리가 아닌 앱개발 전체 과정을 포함하는 개발 플랫폼입니다. 최근 하이브리드 엔진 최적화가 활발히 진행되고 있으며 스마트폰 H/W의 성능도 향상되어 일부 앱을 제외하고는 스마트폰 앱을 네이티브로 개발할 이유는 더이상 없습니다. 특히나 하드웨어 기능이나 UI반응 속도와 상관없는 앱 서비스 개발은 고객 Needs에 빠르게 대응하는 개발의 속도가 더욱 중요합니다. 기본적으로 코르도바 개발 프레임웍 위에서 동작하고 앵귤러(AngularJS) 자바스크립트 프레임웍을 사용한다.

IOS앱 개발을 위해서는 OS X가 필수이나, 최근 다양한 방법으로 맥이 아닌 하드웨어 에서도 OS X 를 설치하고 있으며 이를 헥킨토시라 부른다. 헥킨토시를 사용하더라도 개발 환경과 최종 앱스토어 릴리즈 까지 문제 없는 것으로 알려져 있다.

아이오닉은 html(ion- 로 시작하는 아이온컴포넌트로 구성), scss, 타입스크립트로 이루어 진다.

2.설치하기

2-1.다운로드

1. node.js

   설치확인. 명령 프롬프트 창에서 node --version

2. visual studio code

3. jdk 1.8

4. 안드로이드 스튜디오

   Start 메뉴 > Computer > System Properties > Advanced System Properties를 선택합니다. 그런 다음 Advanced 탭 > Environment Variables를 열고 JDK 폴더(예: C:\Program Files\Java\jdk1.8.0_77)를 가리키는 새 시스템 변수 JAVA_HOME을 추가합니다.

   SDK MANGER 에서 SDK 를 업데이트하고, Vritual Device를 설치합니다.

   ​

2-2.환경변수 설정

1. 윈도 탐색기-> 내컴퓨터 우클릭 -> 설정변경 ->고급 탭 -> 맨아래 환경변수 클릭

2. 아래쪽 시스템 변수란에 새로만들기 클릭.

​ 변수이름:ANDROID_HOME

​ 변수 값: C:\Users<사용자계정>\AppData\Local\Android\Sdk 입력

3. 하나더 새로 만들기 클릭.

​ 변수이름:JAVA_HOME

​ 변수 값: C:\Program Files\Java\jdk1.8.0_144

4. 시스템 변수목록을 죽 내려가면서 Path 찾아서클릭.

​ 변수 값에 이것 추가 XXXX(원래 있는것);%JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

2-3.ionic 설치

npm install –g시스템전체 설치 ionic cordova

설치 확인 : ionic -version

3.프로젝트 생성 및 실행

3-1.ionic 프로젝트 생성하기

ionic <name> <template> [options]

예) ionic start sample blank

3-2.ionic 서비스 실행

생성된 프로젝트 폴더에서

ionic serve

ionic serve --lab (디바이스별 화면보기)

http://localhost:8100 으로 실행한다.

중지 : ctrl + c

3-3. 안드로이드 빌드

1. 샘플프로젝트에 안드로이드 플랫폼 추가하기

   Ionic cordova platform add android

2. 안드로이드로 빌드

   Ionic cordova build android (빌드실패시 스튜디오 안에서 sdk업데이트 )

3. 에뮬레이터 실행해보기

   ionic cordova emulate android

3-4.안드로이드 스튜디오 실행

Open an existing Android Studio project 선택하여 sample 프로젝트의 /platforms/android 폴더 선택

1. 가상에뮬레이터로 실행 ▶run -> devices 선택후 실행

- ionic 구조

4. ionic 따라해보기

4-1.LOGIN 페이지 추가

1. visual studio code 실행

2. 파일-폴더열기-sample 프로젝트 선택

3. 페이지 템플릿 추가 cmd 창에서 lonic g page login(페이지이름) 실행

4. /src/app/app.modules.ts 파일 수정

   import { BrowserModule } from '@angular/platform-browser';
   import { ErrorHandler, NgModule } from '@angular/core';
   import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
   import { SplashScreen } from '@ionic-native/splash-screen';
   import { StatusBar } from '@ionic-native/status-bar';
   ​
   import { MyApp } from './app.component';
   import { HomePage } from '../pages/home/home';
   import { LoginPageModule } from '../pages/login/login.module';
   ​
   @NgModule({
     declarations: [
       MyApp,
       HomePage
     ],
     imports: [
       BrowserModule,
       LoginPageModule,
       IonicModule.forRoot(MyApp)
     ],
     bootstrap: [IonicApp],
     entryComponents: [
       MyApp,
       HomePage
     ],
     providers: [
       StatusBar,
       SplashScreen,
       {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]
   })
   export class AppModule {}

   4. /src/app/app.components.ts 파일수정

      
      import { Component } from '@angular/core';
      import { Platform } from 'ionic-angular';
      import { StatusBar } from '@ionic-native/status-bar';
      import { SplashScreen } from '@ionic-native/splash-screen';
      ​
      import { LoginPage } from '../pages/login/login';
      ​
      @Component({
        templateUrl: 'app.html'
      })
      export class MyApp {
        rootPage:any = LoginPage; // root 페이지 바꾸기 
      ​
        constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
          platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
          });
        }
      }
      ​

      5. ionic serve 로 실행

      6.