iOS와 Android 앱을 하나의 코드베이스로 빌드하고 싶으세요? Capacitor CLI simplifies the process, letting you create native apps using web technologies. Here’s what you’ll learn:
- Capacitor가 프로세스를 단순화하여 웹 기술을 사용하여 네이티브 앱을 만들 수 있도록 해줍니다. 여기서 무엇을 배울 수 있을까요?: Install Capacitor CLI and initialize your project in minutes.
- : Capacitor와 bun을 설치하고 프로젝트를 몇 분 만에 초기화할 수 있습니다.플랫폼 통합
- : iOS와 Android 지원을 간단한 명령어로 추가할 수 있습니다.라이브 업데이트 Capgo Capacitor를 사용하여 즉시 오버 더 에어 업데이트
- 일반적인 수정: 문제 해결을 위해 sync 오류나 빌드 실패와 같은 문제를 해결하세요.
시작하기 위한 주요 단계:
- 설치 Node.js, npm, JDK Xcode, 그리고 Android Studio.
- 프로젝트를 실행하고 초기화하세요.
npm install @capacitor/core @capacitor/cliiOS 및 Android 플랫폼을 추가하세요. - 그리고
npx cap add iosandnpx cap add android. - 선택 사항: Capgo을 위한 실시간 업데이트 __CAPGO_KEEP_0__.
Capacitor CLI을 설정하고 플랫폼을 구성하고 앱을 배포하는 모든 것을 다룹니다. 시작해 보겠습니다!
__CAPGO_KEEP_0__ Capacitor 프레임워크 문서 유튜브 비디오 플레이어
Node.js
(버전 14 이상) 및
- __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ npm
- 자바 JDK (11 버전 이상)
- Xcode (iOS 빌드용으로는 12 버전 이상)
- Android Studio (Android 빌드용)
- Capacitor CLI (6 또는 7 버전)
선택사항: 실시간 업데이트 기능을 활성화하려면 "Capgo 설정 가이드"아래의 단계를 따라주세요.
CLI 설치 단계
__CAPGO_KEEP_0__ 설치 전에 Node.js, npm, JDK, Xcode, 그리고 Android Studio set up. Once ready, you can install the Capacitor CLI by running:
npm install --save @capacitor/core @capacitor/cli
npx cap initThis command installs Capacitor and sets up its core components.
이 명령어는 __CAPGO_KEEP_0__을 설치하고 핵심 구성 요소를 설정합니다. 새로운 프로젝트 만들기 애플리케이션을 구축하기 위해 사용합니다.
새로운 프로젝트 만들기
프로젝트를 시작하기 위해 이 Capacitor CLI을 사용하여다음 단계를 따르세요:
mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist설정 파일 업데이트
파일을 편집하여 다음 설정을 포함합니다: capacitor.config.json 업데이트가 완료되면 __CAPGO_KEEP_0__을 프로젝트에 설정하기 위해 이 구성으로 사용합니다.
{
"appId": "com.company.app",
"appName": "My App",
"webDir": "dist",
"bundledWebRuntime": false,
"server": {
"hostname": "app.example.com",
"androidScheme": "https"
}
}Once updated, use this configuration to set up Capacitor for your project.
프로젝트 구축이 완료되면 iOS 및 Android 대상 설정을 시작합니다.
Now that the project scaffolding is done, it’s time to set up iOS and Android targets.
iOS와 Android 추가
Capacitor CLI을 사용하여 필요한 플랫폼별 패키지를 설치하기 시작하십시오.
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add androidiOS의 경우 Xcode 14 이상이 설치되어 있어야 하며, CocoaPods 1.11 이상, macOS 12 이상이 필요합니다. Android의 경우 Android Studio Giraffe (2022.3.1+), JDK 17 이상, Gradle 7.5 이상이 필요합니다. CocoaPods 1.11 이상 Gradle 7.5 이상
웹 애플리케이션의 변경 사항을 반영하기 위해 네이티브 타겟을 업데이트해야 합니다.
플랫폼 업데이트
웹 앱을 업데이트한 후에 다음 단계를 따라 플랫폼을 최신 웹 변경 사항과 동기화하십시오.
npm run build
npx cap sync명령어는 두 가지 작업을 처리합니다. cap sync 명령어는 두 가지 작업을 처리합니다.
- 업데이트된 웹 자산을 네이티브 플랫폼으로 복사합니다.
- 네이티브 구성 및 플러그인을 최신 변경 사항과 일치시킵니다.
IDE 설정
다음 IDE에서 플랫폼별 프로젝트를 열어 주세요:
npx cap open ios # Opens Xcode
npx cap open android # Opens Android StudioXcode에서:
- 개발 팀을 선택하세요.
- 인증서를 설정하세요.
- 배포 식별자를 업데이트하세요.
Android Studio에서:
- 애플리케이션 ID를 수정하세요.
build.gradle. - 서명용 키스토어를 구성하세요.
- debug 및 release 빌드 변형을 모두 설정하세요.
설정 후 프로젝트를 사용하여 npx cap build ios 또는 npx cap build androidCapacitor Live Update Alternatives npx cap sync Capacitor Live Update Alternatives
Capgo Capacitor Live Update Alternatives
Set up Capgo to enable instant over-the-air updates for your app.
Key Features of Capgo
Capgo offers several tools to streamline app updates:
- Capacitor Live Update Alternatives Capacitor Live Update Alternatives
- 업데이트는 배경에서 실행됩니다. 앱이 시작될 때.
- 분석 도구 업데이트 성공률과 사용자 참여도를 추적하는 데 도움이 됩니다.
- A 문제가 있는 업데이트에서 빠르게 복구할 수 있는 한 번 클릭으로 롤백 옵션
- 스테이징 롤아웃과 베타 테스트를 위해 채널 시스템을 사용하세요. 설치하는 __CAPGO_KEEP_0__
Installing Capgo
Capgo 시작하기를 위한 단계를 따르세요:
-
npm install --save @capgo/cli -
Capgo을 초기화하세요. 프로젝트에 적용하세요:
npx capgo init -
업데이트 빌드 및 배포:
npm run build npx capgo release -
앱을 열어 배경 업데이트 프로세스를 트리거하세요.
최선의 방법
- 채널을 사용하여 업데이트 테스트를 진행하고 모든 사용자에게 배포하기 전에 테스트하세요.
- 분석을 모니터링하여 업데이트가 성공적으로 전달되고 사용자가 유지되도록 하세요.
- 오류 추적을 활성화하여 문제를 일찍 해결하세요.
- 롤백 기능을 준비하여 문제를 신속하게 해결하세요.
Capgo은 Capacitor 8과 호환되며 CI/CD PIPELINE과 완벽하게 통합되며 Apple 및 Google 스토어 요구사항을 충족합니다.
일반적인 문제와 팁
플랫폼과 Capgo 설정을 완료한 후, 몇 가지 일반적인 오류를 마주할 수 있습니다. 이에 대한 해결 방법을 빠르게 알아보겠습니다.
환경 설정 오류
-
CLI 찾을 수 없음 오류: 명령어
npx cap실패합니다. 해결 방법: Runnpm install --save @capacitor/cli @capacitor/core명령어를 다시 실행해 보세요. -
Node 버전 불일치 오류 Error: CLI 명령어는 Node.js 버전 오류로 실패합니다. 수정: Node.js 버전 14 이상을 설치하십시오. 자세한 설치 방법은 설정 요구 사항을 참조하십시오.
설정 문제
-
설정 불일치 오류: 변경 사항이 반영되지 않습니다.
capacitor.config.json수정 : 프로젝트의 및appId값이 일치하는지 확인하십시오.webDir프로젝트의package.json그리고 웹 빌드 출력 폴더. -
플랫폼 동기화 오류 오류: 실행
npx cap sync결과는 플러그인 버전 충돌로 인해 발생합니다. 수정: 업데이트하고@capacitor/android그리고@capacitor/ios같은 주요 버전으로 업데이트한 후 다시 동기화 명령을 실행하세요.
빌드 및 배포
-
빌드 인증 실패 오류: iOS or Android builds fail due to missing certificates or a keystore. Fix: iOS or Android builds가 실패하는 이유는 인증서나 키스토어가 누락된 때문입니다.
build.gradle. -
Fix : Web 디렉토리가 존재하지 않습니다.:
npx cap syncError Fix: 웹 빌드 명령어 (예를 들어, __CAPGO_KEEP_0__ )를 먼저 실행한 후 플랫폼을 동기화하세요.npm run buildLive Update Issues
__CAPGO_KEEP_0__ Update Failures
- Capgo Update Failures
__CAPGO_KEEP_0__: 프로덕션 앱에서 업데이트가 나타나지 않는다.
Fix: 프로덕션 앱에서 업데이트가 나타나지 않는 문제를 해결하려면 Capgo API key Capacitor CLI 프로젝트 설정 가이드
capacitor.config.jsonCapacitor CLI 프로젝트 설정 가이드
더 많은 세부 정보는 Platform Setup 섹션에서 확인할 수 있습니다. 라이브 업데이트를 사용하는 경우 Capgo Setup Guide를 참조하여 추가적인 문제 해결 팁을 확인하세요.
Summary
Setup Review
Start your web app with Capacitor CLI, set up iOS and Android platforms, and optionally include Capgo for live updates.
Here’s how to get started:
- Capacitor CLI 프로젝트를 초기화하기 위해 Capacitor CLI을 사용하세요.
- 애플리케이션의 패키지 ID를 설정하고 웹 출력 디렉토리를 정의하세요.
- iOS 및 Android 플랫폼에 대한 지원을 추가하세요.
- Capgo을 설치하고 다음 명령어를 사용하여 설정하세요:
npm install --save @capgo/cli && npx capgo init
세부 설정 지침 또는 문제 해결에 대한 자세한 내용은 공식 Capacitor과 Capgo 문서를 확인하세요.
Capacitor CLI: 프로젝트 설정 안내서에서 계속하세요.
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__: 프로젝트 설정 안내서를 사용하여 대시보드 및 __CAPGO_KEEP_0__ 운영을 계획하고 있다면 __CAPGO_KEEP_0__ Overview와 연결하세요. Capacitor CLI: Project Setup Guide to plan dashboard and API operations, connect it with API Overview API __CAPGO_KEEP_1__ __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ API 키 구현 세부 정보에 대한 API 키 장치 장치에 대한 구현 세부 정보, 그리고 번들 번들에 대한 구현 세부 정보.
