In the evolving world of mobile application development, the rise of Progressive Web Applications (PWAs) has paved the way for new cross-platform runtimes. These runtimes enable web-based applications to be present in app stores without relying solely on native code. One such technology that facilitates this is CapacitorJS입니다. 이 기술은 Android, iOS, 웹에서 단일 자바스크립트 코드베이스를 사용하여 간단한 웹사이트를 애플리케이션으로 배포할 수 있도록 개발자에게 제공합니다. 이 접근 방식은 개발 비용을 크게 줄이고 코드 작성 효율성을 크게 향상시킵니다.
이 가이드는 CapacitorJS를 사용하여 pure JavaScript를 사용하여 애플리케이션을 만들고 native 플러그인을 사용하는 방법에 대한 전반적인 튜토리얼을 제공합니다.
‣ 사전 요구 사항
시작하기 전에 다음 도구가 설치되어 있어야 합니다:
- Node.js (v14.16.1) 또는 그 이상
- NPM (v7.6.2) 또는 그 이상
- Android Studio Android 앱 개발을 위해
- Xcode iOS 앱 개발을 위해 (macOS 전용)
주의: iOS 앱 개발은 macOS 기기에서만 가능합니다.
‣ Setting Up Your Capacitor Project
To create a Capacitor application, navigate to your desired folder and execute the following command in your terminal:
npm init @capacitor/appFollow the prompts to install the package and set up your project. With Capacitor v3, your project directory should look like this:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md초기 설정이 완료되면, 다음 단계로 진행할 준비가 되었습니다.
‣ 프로젝트 구조 변경
Vite를 사용하여 JavaScript 파일을 패키징하기 때문에, 프로젝트 구조를 변경해 보겠습니다:
- 새 폴더 메인 디렉토리에 생성하세요.
src새 스크립트 파일 - 새 스크립트 파일 a new script file
index.js__CAPGO_KEEP_0__src/. - __CAPGO_KEEP_1__ __CAPGO_KEEP_2__
vite.config.js__CAPGO_KEEP_3__ - __CAPGO_KEEP_4__ __CAPGO_KEEP_5__
capacitor-welcome.js__CAPGO_KEEP_6__www/js/.
__CAPGO_KEEP_7__
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js__CAPGO_KEEP_8__
__CAPGO_KEEP_9__
__CAPGO_KEEP_10__
- __CAPGO_KEEP_11__ Ionic PWA Elements 애플리케이션을 PWA로 출시하지 않는 경우:
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
삭제할
<capacitor-welcome>HTML 요소를 <body>에서. -
스크립트 임포트를
capacitor.js에서js/main.js. 이 파일은 우리의 번들된 자바스크립트 파일이 될 것입니다. -
임포트를 제거하세요. 이제
js/capacitor-welcome.js는 준비되었습니다.index.htmlvite.config.js
Node.js 모듈을 번들링하여 사용할 수 있도록 하려면
이 파일을 수정하세요. Vite__CAPGO_KEEP_0__ src/index.js 생산용 스크립트를 번들링하기 위해 __CAPGO_KEEP_0__ 구성 파일이 필요합니다. 다음 구성은 파일 www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});capacitor.config.json
__CAPGO_KEEP_0__.config.json capacitor.config.json 파일에서 "bundledWebRuntime": true 속성을 찾고 false으로 변경하세요. 이 조정은 Capacitor이 파일을 번들링하지 않도록 하여 Vite를 사용하는 데에 용이하게 합니다.
Capacitor 기본 설정이 완료되었으며, 이제는 pure JavaScript로 앱을 개발하기 위해 개발을 시작할 준비가 되었습니다.
‣ 앱 개발
__CAPGO_KEEP_0__의 기본 설정이 완료되었으므로, 이제는 pure JavaScript로 앱을 개발하기 위해 개발을 시작할 준비가 되었습니다. src/index.js Capacitor 앱의 애플리케이션 로직을 작성하기 위해 파일을 열 수 있습니다. 여기서, Node.js 모듈을 임포트할 수 있으며, 앱의 기능을 정의하고 Capacitor의 네이티브 플러그인을 사용할 수 있습니다.
__CAPGO_KEEP_0__의 변경 사항이 생기면 항상 자바스크립트 파일을 번들링하는 Vite의 빌드 명령어를 실행하세요.
vite build이 명령어는 main.js 파일을 생성합니다. 이 파일은 www/js 디렉토리에 생성되며, 그곳에서 index.html 파일이 참조합니다.
‣ 테스트 및 디버깅
Capacitor은 다양한 플랫폼에서 애플리케이션을 테스트하는 편리한 방법을 제공합니다. 다음 명령어를 사용하여 각 플랫폼의 개발 환경에서 앱을 열 수 있습니다.
안드로이드:
npx cap add android
npx cap open androidiOS (macOS 전용):
npx cap add ios
npx cap open ios웹/PWA:
npx cap serve이 명령어는 Android Studio, Xcode, 또는 웹 브라우저에서 애플리케이션을 실행하여 테스트 및 디버깅할 수 있도록 합니다.
‣ 결론
CapacitorJS를 사용하여 자바스크립트로만 개발하는 다중 플랫폼 앱을 개발하는 것은 단일 코드베이스로 여러 플랫폼에 앱을 만들기 위한 비용 효율적인 방법입니다. 이 가이드를 따르면 프로젝트를 설정하고 Vite를 위한 구조를 재정비하고 개발을 위한 앱을 준비했습니다. 이 기초 위에서 강력하고 다양한 애플리케이션을 만들기 위해 잘 나가고 있습니다.
모든 플랫폼에서 철저히 테스트하고 Capacitor의 네이티브 플러그인을 사용하여 앱의 기능성을 향상하세요. 행복한 코딩!
Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide에서 계속하세요.
CapacitorJS를 사용하는 경우 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide 네이티브 플러그인 작업을 계획하고 연결하기 위해 Capgo Plugin Directory Capgo Plugin Directory에서 제품 워크플로우 Capacitor Plugins by Capgo Capacitor Plugins by Capgo의 구현 세부 사항 Adding or Updating Plugins Adding or Updating Plugins의 구현 세부 사항 Ionic Enterprise Plugin 대체 옵션 Ionic Enterprise Plugin 대체 옵션의 제품 워크플로우에 대해, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우에 대해.
