CapacitorJS를 사용한 다 플랫폼 앱 개발: 단계별 안내

모바일 애플리케이션 개발의 진화와 함께, 프로그레시브 웹 애플리케이션 (PWA)의 등장으로 새로운 크로스 플랫폼 런타임이 등장했습니다. 이 런타임은 웹 기반 애플리케이션을 앱 스토어에 존재하게 만듭니다. 이는 네이티브 code에만 의존하지 않습니다. CapacitorJS, 개발자들이 Android, iOS 및 웹에서 단일 자바스크립트 코드베이스를 사용하여 간단한 웹사이트를 애플리케이션으로 배포할 수 있도록 합니다. 이 접근 방식은 개발 비용을 크게 줄이고 코드 작성 효율성을 크게 향상시킵니다.

이 가이드에서는 추가 프레임워크 없이 단순한 자바스크립트만 사용하여 애플리케이션을 만들 것입니다. 2021년 pure JavaScript 앱 개발에 대한 리소스를 찾는 것이 어려웠지만, 우리는 pure JavaScript 앱 개발에 대한 전반적인 가이드와 CapacitorJS를 사용하여 native 플러그인을 활용하는 방법에 대한 가이드를 제공할 것입니다.

‣ 사전 요구 사항

시작하기 전에 다음 도구가 설치되어 있어야 합니다:

Node.js Node.js (v14.16.1) or higher
NPM __CAPGO_KEEP_0__ (v7.6.2)
or higher Android Studio
Android 앱 개발을 위해 Xcode

iOS 앱 개발을 위해 (macOS 전용): iOS 앱 개발은 macOS 기기에서만 가능합니다.

‣ Capacitor 프로젝트 설정

To create a Capacitor application, navigate to your desired folder and execute the following command in your terminal:

npm init @capacitor/app

설치 패키지와 프로젝트 설정을 위해 안내를 따라주세요. 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 새 스크립트 파일
새 스크립트 파일을 생성하세요. a new script file index.js in src/.
만들기 main 디렉토리에서 Vite config 파일을 만들기 vite.config.js main 디렉토리에서 Vite config 파일을 만들기
제거 파일 capacitor-welcome.js Your 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.js

Pure JavaScript로 적응하기 위해 파일을 수정하세요:

www/index.html

Pure JavaScript로 적응하기 위해 script imports를 제거하세요:

Your new folder structure should resemble: 아이오닉 PWA 요소 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> body에서 HTML 요소를 삭제하세요.
스크립트 임포트를 capacitor.js 로 업데이트하세요. js/main.js이것이 우리의 번들된 자바스크립트 파일입니다.
임포트를 삭제하세요. js/capacitor-welcome.js 이제 사용할 준비가되었습니다. index.html vite.config.js

Node.js 모듈을 번들링하기 위해

사용하세요. Vite, 우리는 __CAPGO_KEEP_0__의 번들 스크립트의 출력 목적지에 대한 구성 파일을 지정해야 합니다. __CAPGO_KEEP_0__.config.json 파일의 다음 구성은 파일을 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 으로 변경하세요. 이 조정은 __CAPGO_KEEP_0__이 파일을 번들링하지 않도록 허용하여 Vite를 대신 사용할 수 있도록 합니다. falseCapacitor 애플리케이션의 기본 설정이 완료되었으며, pure JavaScript로 앱을 개발하기 위해 개발을 시작할 준비가되었습니다.

With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.

지금까지의 groundwork를 마쳤다면, __CAPGO_KEEP_0.js 파일에서 애플리케이션 로직을 작성할 수 있습니다. 여기서, Node.js 모듈을 임포트할 수 있으며, 앱의 기능을 정의하고 CAPGO_KEEP_0__의 네이티브 플러그인을 사용할 수 있습니다.

__CAPGO_KEEP_0__ src/index.js Capacitor

변경 사항이 생기면 항상 Vite의 빌드 명령어를 실행하여 자바스크립트 파일을 번들링하세요.

vite build

이 명령어는 main.js 파일을 생성하여 www/js 디렉토리에 생성합니다. 이 파일은 index.html 파일을 참조합니다.

‣ 테스트 및 디버깅

Capacitor은 다양한 플랫폼에서 애플리케이션을 테스트하는 데 편리한 방법을 제공합니다. 다음 명령어를 사용하여 각 플랫폼의 개발 환경에서 앱을 열 수 있습니다:

안드로이드:

npx cap add android
npx cap open android

iOS (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로 계속 진행하세요.

만약 사용중이라면 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide __CAPGO_KEEP_0__ Plugin Directory와 연결하여 네이티브 플러그인 작업을 계획하세요. Capgo Plugin Directory Capgo Plugins by __CAPGO_KEEP_1__ Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Adding or Updating Plugins __CAPGO_KEEP_0__ Plugin Directory Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternatives를 대체하는 제품 워크플로우 Capgo Native Builds Capgo Native Builds를 위한 제품 워크플로우.

CapacitorJS를 사용하여 크로스 플랫폼 앱 개발하기: 단계별 가이드