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

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

이 가이드는 CapacitorJS를 사용하여 pure JavaScript 애플리케이션을 만드는 방법에 대해 설명합니다. 2021년 pure JavaScript 애플리케이션 개발에 대한 리소스를 찾는 어려움에도 불구하고, 우리는 pure JavaScript 애플리케이션을 만드는 방법과 native 플러그인을 사용하는 방법에 대한 포괄적인 튜토리얼을 제공합니다.

‣ 사전 요구 사항

애플리케이션을 만들기 전에 다음 도구를 설치하십시오:

Node.js (v14.16.1) 또는
NPM (v7.6.2) 또는
Android Studio 안드로이드 앱 개발을 위해
Xcode iOS 앱 개발을 위해 (macOS만)

주의: iOS 앱 개발은 macOS 기기에서만 가능합니다.

‣ Capacitor 프로젝트 설정

Capacitor 애플리케이션을 만들려면, 원하는 폴더로 이동하여 터미널에서 다음 명령어를 실행하세요:

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를 사용하여 자바스크립트 파일을 패키징하기 때문에, 프로젝트 구조를 변경해 보겠습니다:

만들기 __CAPGO_KEEP_0__ 새 폴더 src __CAPGO_KEEP_1__ 메인 디렉토리 내.
__CAPGO_KEEP_2__ __CAPGO_KEEP_0__ 새 스크립트 파일 index.js __CAPGO_KEEP_1__ src/.
__CAPGO_KEEP_2__ Vite 설정 파일 __CAPGO_KEEP_1__ 메인 디렉토리 내. vite.config.js __CAPGO_KEEP_2__
__CAPGO_KEEP_3__ __CAPGO_KEEP_4__ capacitor-welcome.js __CAPGO_KEEP_5__ www/js/.

__CAPGO_KEEP_6__

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로 적응

Pure JavaScript를 사용하기 위해 파일을 수정해 보겠습니다:

www/index.html

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>

HTML 요소를 바디에서 삭제하세요. <capacitor-welcome> 스크립트 임포트를
에서 capacitor.js 로 업데이트 하세요. 이 파일은 우리의 번들된 JavaScript 파일입니다. js/main.js삭제하세요.
Live Update js/capacitor-welcome.js import. 사용자 index.html 은 이제 준비되었습니다.

vite.config.js

Node.js 모듈을 번들링하기 위해 Vite를 사용하려면 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

__CAPGO_KEEP_0__.config.json capacitor.config.json 파일 "bundledWebRuntime": true 에서 false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.

이러한 변경 사항으로 Capacitor 앱의 기본 설정이 완료되었으며, 자바스크립트로만 개발할 준비가 되었습니다.

‣ 앱 개발

지금까지의 준비 작업이 끝났습니다. 이제는 앱의 로직을 작성할 수 있습니다. 여기서 필요한 Node.js 모듈을 import하고, 앱의 기능을 정의하고, __CAPGO_KEEP_0__의 네이티브 플러그인을 사용할 수 있습니다. src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.

이 명령어는 __CAPGO_KEEP_0__ 디렉토리에 파일을 생성하고, __CAPGO_KEEP_0__ 디렉토리의 파일은 이 파일을 참조합니다.

vite build

‣ 테스트 및 디버깅 main.js __CAPGO_KEEP_0__은 다양한 플랫폼에서 앱을 테스트하는 편리한 방법을 제공합니다. 다음 명령어를 사용하여 각 플랫폼의 개발 환경에서 앱을 열 수 있습니다. www/js 안드로이드: index.html ‣ iOS:

‣ 웹:

Capacitor provides a convenient way to test your application on various platforms. Use the following commands to open your app in the respective platform’s development environment:

‣ 에뮬레이터:

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를 사용하여 pure JavaScript로 개발하는 크로스 플랫폼 애플리케이션은 단일 코드베이스로 여러 플랫폼에 앱을 만들 수 있는 비용 효율적인 방법입니다. 이 가이드를 따라하면 프로젝트를 설정하고, 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_KEEP_0__ Plugin Directory와 연결하세요. Capgo Plugin Directory에서 제품 워크플로우를 사용하세요. Capgo Plugin Directory Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 대체 Capgo 네이티브 빌드 Capgo 네이티브 빌드

CapacitorJS를 사용하여 단일 자바스크립트 코드베이스로 Android, iOS 및 웹 (PWA)에서 크로스 플랫폼 애플리케이션을 개발하는 단계별 안내서