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 플러그인을 사용하는 방법에 대해 설명합니다. 2021년 pure JavaScript 앱 개발에 대한 리소스를 찾는 것이 어려웠지만, 우리는 pure JavaScript 앱 개발에 대한 전반적인 튜토리얼을 제공하기 위해 여기 있습니다.
‣ 사전 조건
앱을 만들기 전에 다음 도구가 설치되어 있는지 확인하세요:
- Node.js (v14.16.1) or higher
- NPM (v7.6.2) or higher
- Android Studio 안드로이드 앱 개발을 위한 Android Studio
- Xcode iOS 앱 개발을 위한 Xcode (macOS만 지원)
주의iOS 앱 개발은 macOS 기기에서만 가능합니다.
‣ Capacitor 프로젝트 설정
To Capacitor 애플리케이션을 만들려면, 원하는 폴더로 이동하여 터미널에서 다음 명령어를 실행하세요:
npm init @capacitor/app설치 패키지 및 프로젝트 설정을 위해 Capacitor을 설치하는 데 따라야 합니다. Capacitor v3의 경우, 프로젝트 디렉토리는 다음과 같이 보입니다:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md초기 설정이 완료되면, 다음 단계로 진행할 준비가 되었습니다.
‣ 프로젝트 구조 재정리
Vite를 사용하여 JavaScript 파일을 번들링하기 때문에, 프로젝트 구조를 재정리해야 합니다.
- 새 폴더 메인 디렉토리에 새 폴더를 생성하세요.
src스크립트 파일 - 메인 디렉토리에 새 스크립트 파일을 생성하세요. 스크립트 파일
index.js스크립트 파일을 생성할 위치를 선택하세요.src/. - 스크립트 파일 Vite 설정 파일입니다.
vite.config.js주 디렉토리 내에 있습니다. - 제거 파일을
capacitor-welcome.jsYour new folder structure should resemble:www/js/.
‣ Pure JavaScript로 적응하는 방법
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.jsLet’s modify some files to work with pure JavaScript:
www/index.html
Ionic PWA Elements의 스크립트 임포트를 제거합니다.
- if you’re not releasing the app as a PWA: ‣ Pure JavaScript로 적응하는 방법 Let’s modify some files to work with pure JavaScript:
<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 요소를 문서의 본문에서 삭제합니다. -
스크립트 임포트를
capacitor.js으로 업데이트 합니다.js/main.js이것은 우리의 번들된 자바스크립트 파일입니다. -
삭제
js/capacitor-welcome.js임포트를 삭제합니다.index.html는 이제 준비되었습니다.
vite.config.js
Node.js 모듈을 Vite와 번들링하려면, 우리의 번들된 스크립트의 출력 위치를 지정하는 구성 파일이 필요합니다. src/index.js 및 프로덕션에 맞게 패키징하세요. 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
파일에서 capacitor.config.json 속성을 찾고 "bundledWebRuntime": true 속성을 false으로 변경하세요. 이 조정은 Capacitor이 파일을 패키지하지 않도록 하며, 대신 Vite를 사용하여 패키징을 수행할 수 있도록 합니다.
Capacitor 애플리케이션의 기본 설정이 완료되었으며, pure JavaScript로 앱을 개발하기 위해 준비되었습니다.
‣ 앱 개발
지금까지의 준비 작업이 끝났습니다. 이제는 애플리케이션 로직을 src/index.js 파일에서 작성할 수 있습니다. 여기서 필요한 Node.js 모듈을 임포트하고, 앱의 기능을 정의하고, Capacitor의 네이티브 플러그인을 사용하여 상호 작용할 수 있습니다.
변경 사항이 발생할 때마다 Vite의 빌드 명령어를 실행하여 JavaScript 파일을 패키징하세요.
vite build이 명령어는 JavaScript 파일을 패키징하여 main.js __CAPGO_KEEP_0__의 위치는 www/js __CAPGO_KEEP_0__의 위치는 해당 파일이 참조하는 index.html 디렉토리 내에 있습니다.
‣ 테스트 및 디버깅
Capacitor은 다양한 플랫폼에서 애플리케이션을 테스트하는 편리한 방법을 제공합니다. 다음 명령어를 사용하여 각 플랫폼의 개발 환경에서 애플리케이션을 열 수 있습니다.
For Android:
npx cap add android
npx cap open androidFor iOS (macOS only):
npx cap add ios
npx cap open iosFor Web/PWA:
npx cap serve이 명령어를 사용하면 Android Studio, Xcode, 또는 웹 브라우저에서 애플리케이션을 실행할 수 있으며, 필요에 따라 테스트 및 디버깅할 수 있습니다.
‣ 결론
CapacitorJS를 사용하여 pure JavaScript로 개발하는 크로스 플랫폼 애플리케이션은 단일 코드베이스로 여러 플랫폼에 앱을 만들 수 있는 비용 효율적인 방법입니다. 이 가이드를 따라 프로젝트를 설정하고 Vite를 사용하여 리스 트럭처링을 수행한 후, 개발을 위해 앱을 준비했습니다. 이 기초 위에서 강력하고 다양한 애플리케이션을 만들기 위해 빌드하기 시작했습니다.
모든 플랫폼에서 충분히 테스트하고 Capacitor의 네이티브 플러그인을 사용하여 앱의 기능성을 향상시키지 않으면 안됩니다. 행복한 코딩!
CapacitorJS를 사용하여 크로스 플랫폼 앱 개발하기: 단계별 가이드를 계속 진행하세요.
__CAPGO_KEEP_0__을 사용 중이라면 CapacitorJS를 사용하여 크로스 플랫폼 앱 개발하기: 단계별 가이드 __CAPGO_KEEP_0__ Plugin Directory와 연결하여 Capgo Plugin Directory의 제품 워크플로우에서 Capgo Plugin Directory의 __CAPGO_KEEP_1__에서 제공하는 플러그인 Capacitor 플러그인에 대한 구현 세부 정보는 Capacitor 플러그인에 의해 Capgo에서 제공됩니다. for the implementation detail in Capacitor Plugins by Capgo, 플러그인 추가 또는 업데이트에 대한 구현 세부 정보는 Ionic Enterprise Plugin Alternatives의 제품 워크플로우에서 Ionic Enterprise Plugin Alternatives에 대해 for the product workflow in Ionic Enterprise Plugin Alternatives, and Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로에 대해.
