ionic capacitor 설치

ionic capacitor는 아파치 cordova처럼 하이브리드 웹앱을 제작할 수 있게 해주는 도구 입니다.

 

medium.com/@lyslg1018/ionic-capacitor-ae9f7e691e70

Ionic Capacitor —

capacitor를 설치하는 방법이 많이 있는데

가장 좋은 것이 capacitor 사이트의 설치 문서를 이용하는 것 같습니다.

 

대부분 문서들이 ionic 프로젝트 만들고 ionic app 만드는데

원본 매뉴얼에는 그런 것이 없거든요

 

capacitorjs.com/docs/getting-started

Capacitor: Cross-platform native runtime for web apps

oneboard@oneboarcBookPro ~ % cd github
oneboard@oneboarcBookPro github % mkdir myapp 
oneboard@oneboarcBookPro github % cd myapp
oneboard@oneboarcBookPro myapp % npm install @capacitor/core @capacitor/cli

added 57 packages, and audited 58 packages in 7s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New patch version of npm available! 7.4.0 -> 7.4.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.4.2
npm notice Run npm install -g npm@7.4.2 to update!
npm notice 
oneboard@oneboarcBookPro myapp % 

다음에 npx ( executes local binaries/scripts to avoid global installs ) 를 실행해서, 로컬 앱을 만들어 줍니다.

oneboard@oneboarcBookPro myapp % npx cap init
? App name myapp
? App Package ID (in Java package format, no dashes) myapp.oneboard.kr
✔ Initializing Capacitor project in /Users/oneboard/github/myapp in 2.55ms


🎉   Your Capacitor project is ready to go!  🎉

Add platforms using "npx cap add":

  npx cap add android
  npx cap add ios
  npx cap add electron

Follow the Developer Workflow guide to get building:
https://capacitorjs.com/docs/basics/workflow

 

마지막으로, 맥의 iOS 플랫폼을 추가하려 했더니...훈훈한 오류가 나옵니다 ㅠㅠ

 

oneboard@oneboarcBookPro myapp % npx cap add ios
[error] cocoapods is not installed. For information: https://guides.cocoapods.org/using/getting-started.html#installation
npm ERR! code 1
npm ERR! path /Users/oneboard/github/myapp
npm ERR! command failed
npm ERR! command sh -c cap "add" "ios"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oneboard/.npm/_logs/2021-01-16T02_21_06_993Z-debug.log

 

그래서 급하게 cocoapods를 찾아보니, 이것도 은근히 어려운 툴이네요 ㅠㅠ

 

developer-fury.tistory.com/6

[Xcode] CocoaPods(코코아팟) 설치 및 사용 방법

 

oneboard@oneboarcBookPro % sudo gem install cocoapods

 

자신만만하게 명령을 입력하니, 오류가 두두두둑

 

oneboard@oneboarcBookPro myapp % npx cap add ios 
✔ Installing iOS dependencies in 5.16s
✔ Adding native xcode project in: /Users/oneboard/github/myapp/ios in 50.78ms
✔ add in 5.22s
✔ Copying web assets from www to ios/App/public in 7.97ms
✔ Copying native bridge in 1.66ms
✔ Copying capacitor.config.json in 2.55ms
✔ copy in 23.06ms
✔ Updating iOS plugins in 988.59μp
  Found 0 Capacitor plugins for ios:
✖ Updating iOS native dependencies with "pod install" (may take several minutes): 
✖ update ios: 
[error] Analyzing dependencies
Adding spec repo `trunk` with CDN `https://cdn.cocoapods.org/`
Downloading dependencies
Installing Capacitor (2.4.6)
Installing CapacitorCordova (2.4.6)
Generating Pods project
Integrating client project
Pod installation complete! There are 2 dependencies from the Podfile and 2 total pods installed.
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

npm ERR! code 1
npm ERR! path /Users/oneboard/github/myapp
npm ERR! command failed
npm ERR! command sh -c cap "add" "ios"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oneboard/.npm/_logs/2021-01-18T12_20_35_669Z-debug.log

 

Xcode가 없구나. npx cap add ios는 Xcode가 없다고 오류를 ... ㅠㅠ...

 

oneboard.tistory.com/10

Xcode 설치하기

 

ios 디렉토리를 지우고 다시 설치를... 그런데...ㅠㅠ...

 

oneboard@oneboarcBookPro myapp % rm -r -f ios
oneboard@oneboarcBookPro myapp % npx cap add ios
ℹ Installing iOS dependencies – Skipping: already installed
✔ Adding native xcode project in: /Users/oneboard/github/myapp/ios in 25.80ms
✔ add in 27.34ms
✔ Copying web assets from www to ios/App/public in 3.64ms
✔ Copying native bridge in 3.93ms
✔ Copying capacitor.config.json in 2.93ms
✔ copy in 20.25ms
✔ Updating iOS plugins in 11.89ms
  Found 0 Capacitor plugins for ios:
✖ Updating iOS native dependencies with "pod install" (may take several minutes): 
✖ update ios: 
[error] Analyzing dependencies
Downloading dependencies
Installing Capacitor (2.4.6)
Installing CapacitorCordova (2.4.6)
Generating Pods project
Integrating client project
Pod installation complete! There are 2 dependencies from the Podfile and 2 total pods installed.
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

npm ERR! code 1
npm ERR! path /Users/oneboard/github/myapp
npm ERR! command failed
npm ERR! command sh -c cap "add" "ios"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oneboard/.npm/_logs/2021-01-19T13_23_48_289Z-debug.log

 

오류...오류... 구글을 찾으니, 아래의 주소를 줬고, 해결하는 명령은 아래와 같습니다.

 

# Change the path if you installed Xcode somewhere else.
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

 

github.com/nodejs/node-gyp/issues/569

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a

 

다시 ios 디렉토리를 지우고, 설치를 합니다. 잘 됩니다.

 

oneboard@oneboarcBookPro myapp % rm -r -f ios
oneboard@oneboarcBookPro myapp % npx cap add ios                                                
ℹ Installing iOS dependencies – Skipping: already installed
✔ Adding native xcode project in: /Users/oneboard/github/myapp/ios in 24.94ms
✔ add in 26.51ms
✔ Copying web assets from www to ios/App/public in 5.79ms
✔ Copying native bridge in 3.34ms
✔ Copying capacitor.config.json in 17.89ms
✔ copy in 36.58ms
✔ Updating iOS plugins in 917.39μp
  Found 0 Capacitor plugins for ios:
✔ Updating iOS native dependencies with "pod install" (may take several minutes) in 9.70s
✔ update ios in 9.71s

Now you can run npx cap open ios to launch Xcode

 

다음에는 android를 설치 합니다. 그냥 잘 됩니다.

 

oneboard@oneboarcBookPro myapp % npx cap add android 
✔ Installing android dependencies in 3.55s
✔ Adding native android project in: /Users/oneboard/github/myapp/android in 90.27ms
✔ Syncing Gradle in 671.89μp
✔ add in 3.65s
✔ Copying web assets from www to android/app/src/main/assets/public in 1.98ms
✔ Copying native bridge in 4.75ms
✔ Copying capacitor.config.json in 1.87ms
✔ copy in 18.06ms
✔ Updating Android plugins in 4.99ms
  Found 0 Capacitor plugins for android:
✔ update android in 20.97ms

Now you can run npx cap open android to launch Android Studio

 

그런데, android studio가 없네요. 

 

developer.android.com/studio

Download Android Studio and SDK tools  |  Android 스튜디오

 

다운로드 받은 것을 더블클릭하면 창이 나오는데,

창의 왼쪽 이미지를 오른쪽 이미지 위로 이동하면 andriod studio 프로그램이 응용 프로그램 폴더로 이동합니다.

이동된 android studio 프로그램을 더블 클릭하면 설치가 되고, ionic capacitor를 사용하기 위한 설치의 긴 대장정이 끝납니다.