ionic은 node.js가 필요하다.
node.js
맥에서 node.js 설치 한다.
(npm은 Node Packaged Manager의 약자입니다.)
1. Homebrew 설치
2. brew install node
3. node -v
4. npm -v
이제 ionic과 cordova를 설치 한다.
$ sudo npm install -g ionic cordova
설치가 완료되면 workspace를 만들고
해당 위치에서 프로젝트를 만들어 본다.
$ ionic start newApp tabs (탭 프로젝트)
$ ionic start newApp blank (빈 프로젝트)
그리고 플렛폼을 만들어야한다.
프로젝트 파일 경로로 이동을 해야지 만들기가 가능하다.
$ cd newApp
이동을 한 후에
$ ionic cordova platform add ios
$ ionic cordova platform add android
문서
이렇게 추가를 해주면 ios와 android 플렛폼 만들기를 완료한 것이다.
프로젝트 생성이 완료되었으니 이제 실행 명령어를 사용한다.
$ ionic serve
$ ionic serve --lab
위에 명령어로 실행하게 되면 기본적인 크롬 브라우저 창에서 뜬다.
하지만 아래 명령어로 실행할 경우 안드로이드, IOS, 윈도우에서 확인이 가능하게 지원되는 브라우저 창이 뜬다.
xcode에서 실행 해보기
2021.12.24. 기준
xcode 프로젝트를 열어 빌드하면 에러난다.
호환성 문제로, 해결 방법은 아래와 같다.
- www 폴더를 다시 import 해준다.
- 그래도 안되면 프로젝트를 다시 추가 해본다. (ionic cordova platform add ios)
동작 확인 완료
Android에서 실행 해보기
2021.12.24. 기준
Android 프로젝트를 열어 빌드하면 에러난다.
이제 지원하지 않는 whitelist 플러그인을 빼고 프로젝트를 다시 만들자.
$ ionic cordova plugin rm cordova-plugin-whitelist
$ ionic cordova platform add android
Gradle 버전을 올리고 지원하지 않는 파일을없애보자.
1. File -> Project Structure -> Gradle Version을 7.3.3 설정
2. import android.support.annotation.RequiresApi; 제거
3. @RequiresApi(Build.VERSION_CODES.LOLLIPOP) 제거
동작 확인 완료
수정적용 확인하기
- src>app>tab1>tab.page.html 파일에서 title을 원하는대로 변경 해봅니다.
- 저장과 동시에 띄워논 아이오닉 앱의 정보가 바뀌는 것을 확인
- config.xml 의 패키지명을 사용 가능한 것으로 변경
- 빌드 해본다
$ ionic cordova build ios
