Capacitor와 Vue.js로 모바일 앱 구축하기

게시 됨: 2022-03-10
빠른 요약 ↬ 이 튜토리얼에서는 Capacitor와 Vue.js 및 Ionic 4 웹 구성 요소와 같은 최첨단 웹 기술을 사용하여 Android 및 iOS용 크로스 플랫폼 모바일 애플리케이션을 구축하는 방법을 배웁니다. 또한 Capacitor를 활용하여 동일한 코드 기반을 사용하는 데스크톱 및 웹과 같은 다른 플랫폼을 대상으로 할 수 있습니다.

최근 Ionic 팀은 Capacitor라는 Apache Cordova 및 Adobe PhoneGap의 오픈 소스 영적 후계자를 발표했습니다. Capacitor를 사용하면 최신 웹 기술로 애플리케이션을 빌드하고 웹 브라우저에서 기본 모바일 장치(Android 및 iOS), 심지어 Electron을 통한 데스크톱 플랫폼까지 모든 곳에서 실행할 수 있습니다. 및 프론트 엔드 웹 기술.

가장 인기 있는 하이브리드 모바일 프레임워크인 Ionic은 현재 Cordova 위에서 실행되지만 향후 버전에서는 Capacitor가 Ionic 앱의 기본 옵션이 될 것입니다. Capacitor는 또한 Capacitor 프로젝트에서 기존 Cordova 플러그인의 사용을 허용하는 호환성 레이어를 제공합니다.

Ionic 애플리케이션에서 Capacitor를 사용하는 것 외에도 Vue, React, Angular with Material, Bootstrap 등과 같은 선호하는 프런트 엔드 프레임워크 또는 UI 라이브러리와 함께 Ionic 없이 사용할 수도 있습니다.

이 자습서에서는 Capacitor와 Vue를 사용하여 Android용 간단한 모바일 애플리케이션을 빌드하는 방법을 살펴봅니다. 사실, 언급한 바와 같이 애플리케이션은 몇 가지 명령만 사용하여 주요 운영 체제에서 PWA(프로그레시브 웹 애플리케이션) 또는 데스크톱 애플리케이션으로 실행할 수도 있습니다.

또한 일부 Ionic 4 UI 구성 요소를 사용하여 데모 모바일 애플리케이션의 스타일을 지정할 것입니다.

점프 후 더! 아래에서 계속 읽기 ↓

커패시터 기능

커패시터에는 Cordova와 같은 다른 솔루션에 대한 좋은 대안이 되는 많은 기능이 있습니다. Capacitor의 몇 가지 기능을 살펴보겠습니다.

  • 오픈 소스 및 무료
    Capacitor는 MIT 라이선스에 따라 라이선스가 부여되고 Ionic과 커뮤니티에서 유지 관리하는 오픈 소스 프로젝트입니다.
  • 크로스 플랫폼
    Capacitor를 사용하여 하나의 코드 기반으로 앱을 빌드하고 여러 플랫폼을 대상으로 할 수 있습니다. 몇 가지 더 많은 명령줄 인터페이스(CLI) 명령을 실행하여 다른 플랫폼을 지원할 수 있습니다.
  • 플랫폼 SDK에 대한 기본 액세스
    네이티브 SDK에 액세스해야 할 때 커패시터가 방해가 되지 않습니다.
  • 표준 웹 및 브라우저 기술
    Capacitor로 구축된 앱은 표준 웹 API를 사용하므로 애플리케이션도 크로스 브라우저가 되며 표준을 따르는 모든 최신 브라우저에서 잘 실행됩니다.
  • 확장 가능
    플러그인을 추가하거나, 필요에 맞는 플러그인을 찾을 수 없는 경우 간단한 API를 통해 사용자 정의 플러그인을 생성하여 기본 플랫폼의 기본 기능에 액세스할 수 있습니다.

요구 사항

이 튜토리얼을 완료하려면 다음 요구 사항을 갖춘 개발 머신이 필요합니다.

  • 컴퓨터에 Node v8.6+ 및 npm v5.6+ 가 설치되어 있어야 합니다. 공식 웹 사이트로 이동하여 운영 체제에 맞는 버전을 다운로드하십시오.
  • iOS 앱을 빌드하려면 Xcode가 설치된 Mac이 필요합니다.
  • Android 앱을 빌드하려면 Android SDK와 함께 Java 8 JDK 및 Android Studio를 설치해야 합니다.

Vue 프로젝트 만들기

이 섹션에서는 Vue CLI를 설치하고 새 Vue 프로젝트를 생성합니다. 그런 다음 Vue 라우터를 사용하여 애플리케이션에 탐색을 추가합니다. 마지막으로 Ionic 4 구성 요소를 사용하여 간단한 UI를 빌드합니다.

Vue CLI v3 설치

명령줄에서 다음을 실행하여 npm에서 Vue CLI v3 설치부터 시작하겠습니다.

 $ npm install -g @vue/cli

npm 구성에 따라 패키지를 전역으로 설치하려면 sudo 를 추가해야 할 수도 있습니다.

새 Vue 프로젝트 생성

Vue CLI를 설치한 후 CLI에서 다음을 실행하여 새 Vue 프로젝트를 생성하는 데 사용합니다.

 $ vue create vuecapacitordemo

프로젝트의 루트 폴더를 탐색하고 다음 명령을 실행하여 개발 서버를 시작할 수 있습니다.

 $ cd vuecapacitordemo $ npm run serve

프론트엔드 애플리케이션은 https://localhost:8080/ 에서 실행됩니다.

웹 브라우저에서 https://localhost:8080/ 을 방문하면 다음 페이지가 표시되어야 합니다.

뷰 애플리케이션
Vue 애플리케이션(큰 버전 보기)

Ionic 4 추가

애플리케이션에서 Ionic 4 구성 요소를 사용하려면 npm의 핵심 Ionic 4 패키지를 사용해야 합니다.

Vue 프로젝트의 public 폴더에 있는 index.html 파일을 열고 다음 <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> 을 추가하세요. <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> 파일의 헤드에 있는 태그.

이것은 public/index.html 의 내용입니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuecapacitordemo</title> </head> <body> <noscript> <strong>We're sorry but vuecapacitordemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div></div> <!-- built files will be auto injected --> <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> </body> </html>

npm에서 Ionic 코어 패키지의 현재 버전을 얻을 수 있습니다.

이제 src/App.vue 를 열고 템플릿 태그에 있는 내용을 삭제한 후 template 태그에 다음 내용을 추가합니다.

 <template> <ion-app> <router-view></router-view> </ion-app> </template>

ion-app 은 Ionic 구성 요소입니다. 다른 구성 요소를 래핑하는 최상위 구성 요소여야 합니다.

router-view 는 Vue 라우터 콘센트입니다. 경로와 일치하는 구성 요소는 Vue 라우터에 의해 여기에서 렌더링됩니다.

Vue 애플리케이션에 Ionic 구성 요소를 추가한 후 브라우저 콘솔에서 다음과 유사한 경고를 받기 시작할 것입니다.

 [Vue warn]: Unknown custom element: <ion-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <HelloWorld> at src/components/HelloWorld.vue <App> at src/App.vue <Root>

이는 Ionic 4 구성 요소가 실제로 웹 구성 요소이기 때문에 Vue에 ion 접두사로 시작하는 구성 요소는 Vue 구성 요소가 아님을 알려야 하기 때문입니다. 다음 행을 추가하여 src/main.js 파일에서 이를 수행할 수 있습니다.

 Vue.config.ignoredElements = [/^ion-/]

이러한 경고는 이제 제거되어야 합니다.

Vue 구성 요소 추가

두 개의 구성 요소를 추가해 보겠습니다. 먼저 src/components 폴더에서 모든 파일을 제거하고( App.vue 에서 HelloWorld.vue 구성 요소에 대한 가져오기도 제거) Home.vue 및 About.vue 파일을 추가합니다.

src/components/Home.vue 를 열고 다음 템플릿을 추가합니다.

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor </ion-title> </ion-toolbar> </ion-header> <ion-content padding> The world is your oyster. <p>If you get lost, the <a href="https://ionicframework.com/docs">docs</a> will be your guide.</p> </ion-content> </ion-app> </template>

다음으로 동일한 파일에 다음 코드를 추가합니다.

 <script> export default { name: 'Home' } </script>

이제 src/components/About.vue 를 열고 다음 템플릿을 추가합니다.

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor | About </ion-title> </ion-toolbar> </ion-header> <ion-content padding> This is the About page. </ion-content> </ion-app> </template>

또한 동일한 파일에 다음 코드를 추가합니다.

 <script> export default { name: 'About' } </script>

Vue 라우터로 탐색 추가하기

Vue 라우터가 아직 설치되지 않은 경우 프로젝트의 루트 폴더에서 다음 명령을 실행하여 설치를 시작합니다.

 npm install --save vue-router

다음으로 src/main.js 에서 다음 가져오기를 추가합니다.

 import Router from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue'

이것은 Vue 라우터와 "Home" 및 "About" 구성 요소를 가져옵니다.

이걸 더해:

 Vue.use(Router)

경로 배열로 Router 인스턴스를 만듭니다.

 const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] })

마지막으로 Router 인스턴스에 대해 Vue에 알립니다.

 new Vue({router, render: h => h(App) }).$mount('#app')

이제 라우팅을 설정했으므로 두 개의 "홈" 및 "정보" 구성 요소 사이를 탐색하는 몇 가지 버튼과 메서드를 추가해 보겠습니다.

src/components/Home.vue 를 열고 다음 goToAbout() 메서드를 추가합니다.

 ... export default { name: 'Home', methods: { goToAbout () { this.$router.push('about') },

template 블록에서 goToAbout() 메서드를 트리거하는 버튼을 추가합니다.

 <ion-button @click="goToAbout" full>Go to About</ion-button>

이제 "정보" 구성 요소에 있을 때 집으로 돌아갈 수 있는 버튼을 추가해야 합니다.

src/components/About.vue 를 열고 goBackHome() 메서드를 추가합니다.

 <script> export default { name: 'About', methods: { goBackHome () { this.$router.push('/') } } } </script>

그리고 template 블록에 goBackHome() 메서드를 트리거하는 버튼을 추가합니다.

 <ion-button @click="goBackHome()" full>Go Back!</ion-button>

실제 모바일 장치 또는 에뮬레이터에서 응용 프로그램을 실행할 때 크기 조정 문제가 발생합니다. 이 문제를 해결하려면 뷰포트를 올바르게 설정하는 일부 meta 태그를 추가하기만 하면 됩니다.

public/index.html 에서 페이지 head 에 다음 코드를 추가합니다.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no">

커패시터 추가

두 가지 방법으로 커패시터를 사용할 수 있습니다.

  • 처음부터 새 Capacitor 프로젝트를 만듭니다.
  • 기존 프런트 엔드 프로젝트에 Capacitor를 추가합니다.

이 자습서에서는 Vue 프로젝트를 먼저 생성하고 이제 Vue 프로젝트에 Capacitor를 추가하기 때문에 두 번째 접근 방식을 사용합니다.

Vue와 커패시터 통합

Capacitor는 모든 최신 JavaScript 응용 프로그램에 포함되도록 설계되었습니다. Vue 웹 애플리케이션에 Capacitor를 추가하려면 몇 가지 단계를 따라야 합니다.

먼저 npm에서 Capacitor CLI와 코어 패키지를 설치합니다. Vue 프로젝트에 있는지 확인하고 다음 명령을 실행합니다.

 $ cd vuecapacitordemo $ npm install --save @capacitor/core @capacitor/cli

다음으로 다음 명령을 실행하여 앱 정보로 Capacitor를 초기화합니다.

 $ npx cap init

Capacitor 명령을 실행하기 위해 npx 를 사용하고 있습니다. npx 는 npm v5.2.0과 함께 제공되는 유틸리티이며 npm 레지스트리에서 호스팅되는 CLI 유틸리티 및 실행 파일을 쉽게 실행할 수 있도록 설계되었습니다. 예를 들어 개발자는 npm 실행 스크립트를 사용하지 않고도 로컬에 설치된 실행 파일을 사용할 수 있습니다.

Capacitor CLI의 init 명령은 Android 및 iOS와 같은 Capacitor용 기본 기본 플랫폼도 추가합니다.

또한 이름, 애플리케이션 ID(주로 Android 애플리케이션의 패키지 이름으로 사용됨) 및 애플리케이션 디렉토리와 같은 애플리케이션에 대한 정보를 입력하라는 메시지가 표시됩니다.

필요한 세부 정보를 입력하면 Vue 프로젝트에 Capacitor가 추가됩니다.

명령줄에 애플리케이션의 세부 정보를 제공할 수도 있습니다.

 $ npx cap init vuecapacitordemo com.example.vuecapacitordemo

애플리케이션의 이름은 vuecapacitordemo 이고 ID는 com.example.vuecapacitordemo 입니다. 패키지 이름은 유효한 Java 패키지 이름이어야 합니다.

"축전기 프로젝트를 시작할 준비가 되었습니다!"라는 메시지가 표시되어야 합니다.

또한 Vue 프로젝트의 루트 폴더에 capacitor.config.json 이라는 파일이 추가되었음을 알 수 있습니다.

Vue 프로젝트에서 Capacitor를 초기화할 때 CLI에서 제안하는 것처럼 이제 대상으로 지정하려는 기본 플랫폼을 추가할 수 있습니다. 이렇게 하면 웹 응용 프로그램이 추가하는 각 플랫폼에 대한 기본 응용 프로그램으로 바뀝니다.

그러나 플랫폼을 추가하기 직전에 Capacitor에 빌드된 파일을 찾을 위치, 즉 Vue 프로젝트의 dist 폴더를 알려야 합니다. 이 폴더는 Vue 애플리케이션의 build 명령( npm run build )을 처음 실행할 때 생성되며 Vue 프로젝트의 루트 폴더에 있습니다.

Capacitor의 구성 파일인 capacitor.config.json 에서 webDir 을 변경하여 이를 수행할 수 있습니다. 따라서 www 를 dist 로 바꾸면 됩니다. 다음은 capacitor.config.json 의 내용입니다.

 { "appId": "com.example.vuecapacitordemo", "appName": "vuecapacitordemo", "bundledWebRuntime": false, "webDir": "dist" }

이제 dist 폴더를 만들고 다음 명령을 실행하여 Vue 프로젝트를 빌드해 보겠습니다.

 $ npm run build

그 후 다음을 사용하여 Android 플랫폼을 추가할 수 있습니다.

 npx cap add android

프로젝트를 살펴보면 android 네이티브 프로젝트가 추가되었음을 알 수 있습니다.

이것이 Capacitor를 통합하고 Android를 대상으로 하는 데 필요한 전부입니다. iOS 또는 Electron을 대상으로 하려면 각각 npx cap add ios 또는 npx cap add electron 을 실행하십시오.

커패시터 플러그인 사용

Capacitor는 개발자가 HTML, CSS 및 JavaScript의 세 가지 웹 기둥을 사용하여 웹과 주요 데스크톱 및 모바일 플랫폼에서 기본적으로 실행되는 애플리케이션을 구축할 수 있도록 하는 런타임을 제공합니다. 그러나 각 플랫폼에 대한 특정 저수준 코드를 사용할 필요 없이 카메라와 같은 장치의 기본 기능에 액세스할 수 있는 플러그인 세트도 제공합니다. 플러그인은 당신을 위해 그것을 수행하고 그 문제에 대해 정규화된 높은 수준의 API를 제공합니다.

Capacitor는 또한 Ionic 팀에서 제공하는 공식 플러그인 세트에서 다루지 않는 기본 기능에 대한 사용자 정의 플러그인을 빌드하는 데 사용할 수 있는 API를 제공합니다. 문서에서 플러그인을 만드는 방법을 배울 수 있습니다.

문서에서 사용 가능한 API 및 핵심 플러그인에 대한 자세한 내용을 찾을 수도 있습니다.

예: 커패시터 플러그인 추가

애플리케이션에서 Capacitor 플러그인을 사용하는 예를 살펴보겠습니다.

경고, 확인, 입력 프롬프트, 작업 시트에 대한 기본 모달 창을 표시하는 데 사용되는 "Modals" 플러그인을 사용할 것입니다.

src/components/Home.vue 를 열고 script 블록의 시작 부분에 다음 가져오기를 추가합니다.

 import { Plugins } from '@capacitor/core';

이 코드는 @capacitor/core 에서 Plugins 클래스를 가져옵니다.

다음으로 대화 상자를 표시하는 다음 메서드를 추가합니다.

 … methods: { … async showDialogAlert(){ await Plugins.Modals.alert({ title: 'Alert', message: 'This is an example alert box' }); }

마지막으로 template 블록에 버튼을 추가하여 이 메서드를 트리거합니다.

 <ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>

다음은 대화 상자의 스크린샷입니다.

커패시터 기본 모달 상자
기본 모달 상자(큰 버전 보기)

문서에서 자세한 내용을 찾을 수 있습니다.

대상 플랫폼용 앱 빌드

프로젝트를 빌드하고 대상 플랫폼에 대한 기본 바이너리를 생성하려면 몇 가지 단계를 따라야 합니다. 먼저 간단히 살펴보겠습니다.

  1. Vue 애플리케이션의 프로덕션 빌드를 생성합니다.
  2. 모든 웹 자산을 Capacitor에서 생성된 기본 프로젝트(이 예에서는 Android)로 복사합니다.
  3. Android Studio(또는 iOS용 Xcode)에서 Android 프로젝트를 열고 기본 IDE(통합 개발 환경)를 사용하여 실제 기기(연결된 경우) 또는 에뮬레이터에서 애플리케이션을 빌드하고 실행합니다.

따라서 다음 명령을 실행하여 프로덕션 빌드를 만듭니다.

 $ npm run build

다음으로 Capacitor CLI의 copy 명령을 사용하여 웹 자산을 기본 프로젝트에 복사합니다.

 $ npx cap copy

마지막으로 Capacitor CLI의 open 명령을 사용하여 기본 IDE(이 경우 Android Studio)에서 기본 프로젝트(이 경우 Android)를 열 수 있습니다.

 $ npx cap open android

Android Studio가 프로젝트와 함께 열리거나 기본 프로젝트 파일이 포함된 폴더가 열립니다.

안드로이드 스튜디오 프로젝트
Android Studio에서 열린 Capacitor 프로젝트(큰 버전 보기)

그래도 Android Studio가 열리지 않으면 IDE를 수동으로 열고 "파일" → "열기…"로 이동한 다음 프로젝트로 이동하여 IDE 내에서 android 폴더를 엽니다.

이제 Android Studio를 사용하여 에뮬레이터 또는 실제 기기를 사용하여 앱을 실행할 수 있습니다.

커패시터 데모 프로젝트
커패시터 데모 프로젝트(큰 버전 보기)

결론

이 자습서에서는 Vue 및 Ionic 4 웹 구성 요소와 함께 Ionic Capacitor를 사용하여 웹 기술로 모바일 Android 애플리케이션을 만들었습니다. GitHub 리포지토리에서 이 자습서 전체에서 만든 데모 애플리케이션의 소스 코드를 찾을 수 있습니다.