c3에서 하이브리드 앱을 만들어 보자. - 도입편

공식 문서

개발 환경

macOS High Sierra

$ node -v
v8.9.1
$ npm -v
5.5.1

위의 설치 등은 할애.

Ionic CLI 설치

프로젝트에 맞는 cordova와 ionic을 설치합니다.

$ npm install -g [email protected] [email protected]

설치가 완료되면 확인합니다.

$ cordova -v
7.1.0
$ ionic -v
3.18.0

지정한 것이 들어 있으면 OK.
이번에는 버전을 지정하고 있지만 @이후를 생략하면 최신판이 설치됩니다.

새 프로젝트 만들기

새로운 ionic 프로젝트를 시작하려면 다음 명령으로 한 번만 진행됩니다.
이번에는 'myapp'이라는 프로젝트를 만들어 봅시다.

$ ionic start myapp

곧 뭔가 들려요.

$ ionic start myapp

? What starter would you like to use:
  tabs ............... ionic-angular A starting project with a simple tabbed interface
❯ blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter

ionic에서는 여러가지 템플릿이 준비되어 있어 선택할 수 있는 것 같네요.
여기는 간단한 blank를 선택합니다.

도중에 다음을 들을 수 있습니다만 우선 일단 no로 해 둡시다.

? Install the free Ionic Pro SDK and connect your app? (Y/n)

설치가 끝나면 프로젝트 디렉토리로 이동

$ cd myapp

시작해보기

브라우저로 시작

blank라는 템플리로 프로젝트가 작성되었으므로, 우선은 브라우저로 기동해 봅시다.

$ ionic serve

브라우저가 시작되고 다음이 표시되면 성공합니다.

플랫폼 추가

ios로 시작하려면 먼저 platform을 추가합니다.

$ ionic cordova platform add ios

안드로이드 버전의 경우

$　ionic cordova platform add android

그렇다면 오케이.

플랫폼 추가가 끝나면 루트 디렉토리에 여러 파일과 디렉토리가 생성됩니다.

플랫폼 추가 전

total 376
-rw-r--r--    1 ryo  staff      87 12  1 11:25 ionic.config.json
drwxr-xr-x  470 ryo  staff   15040 12  1 11:25 node_modules
-rw-r--r--    1 ryo  staff  174444 12  1 11:25 package-lock.json
-rw-r--r--    1 ryo  staff    1083 12  1 11:25 package.json
drwxr-xr-x    9 ryo  staff     288 12  1 11:25 src
-rw-r--r--    1 ryo  staff     576 11 30 14:08 tsconfig.json
-rw-r--r--    1 ryo  staff     178 11 30 14:08 tslint.json
drwxr-xr-x    7 ryo  staff     224 12  1 11:36 www

플랫폼 추가 후

total 408
-rw-r--r--    1 ryo  staff    6208 12  1 11:48 config.xml
-rw-r--r--    1 ryo  staff     108 12  1 11:47 ionic.config.json
drwxr-xr-x  476 ryo  staff   15232 12  1 11:48 node_modules
-rw-r--r--    1 ryo  staff  183173 12  1 11:48 package-lock.json
-rw-r--r--    1 ryo  staff    1593 12  1 11:48 package.json
drwxr-xr-x    4 ryo  staff     128 12  1 11:48 platforms
drwxr-xr-x    9 ryo  staff     288 12  1 11:48 plugins
drwxr-xr-x    7 ryo  staff     224 12  1 11:47 resources
drwxr-xr-x    9 ryo  staff     288 12  1 11:25 src
-rw-r--r--    1 ryo  staff     576 11 30 14:08 tsconfig.json
-rw-r--r--    1 ryo  staff     178 11 30 14:08 tslint.json
drwxr-xr-x    7 ryo  staff     224 12  1 11:36 www

ios로 시작

※사전에 xcode 의 인스톨은 끝나 둡시다.
에뮬레이터가 일어나 브라우저에 표시되는 것과 같은 것이 표시되면 성공입니다.

$ ionic cordova run ios

덧붙여서 $ ionic cordova platform add ios 를 실행하지 않고, 이 명령만으로도 platform의 추가와 실행까지 해 줍니다.

실제 기계로 확인하고 싶다면 실제 기계를 PC에 연결하십시오.

$ ionic cordova run ios --device

그러면 실제 기기에 앱이 설치되어 확인할 수 있습니다.

덤

xcode나 android studio가 들어 있지 않거나, 에뮬레이터 기동하고 싶지 않거나,
스마트 폰을 확인하고 싶지만 브라우저에서 기동하고 나서 스마트 폰 표시로 바꾸는 것 귀찮아—라고 사람은 이 명령으로 스마트폰 표시를 확인할 수 있습니다.

$ ionic serve --lab