실시간 업데이트와 함께 모바일 앱을 만드는 방법, Quasar 및 Capacitor.

이 튜토리얼에서, 우리는 새로운 웹 앱을 만들기 시작합니다. Quasar. 그 다음, 우리는 Capacitor를 사용하여 웹 앱을 모바일 앱으로 변환하는 방법을 배웁니다. 모바일에서 앱이 보이기 좋게 하려면.

Capacitor를 사용하면 Quasar 웹 앱을 모바일 앱으로 변환할 수 있습니다. 모바일 앱을 만들기 위해 많은 어려운 작업을 하거나 React Native와 같은 새로운 방법을 배울 필요가 없습니다.

이 튜토리얼에서는 새로운 Quasar 앱을 시작하여 Capacitor를 사용하여 모바일 앱으로 변환하는 방법을 안내합니다. 또한 Capacitor를 사용하여 네이티브 모바일 앱으로 이동하는 방법을 배웁니다. Capgo To your app in seconds live update send to.

Capacitor에 대해

CapacitorJS는 정말 게임 체이저입니다! 어떤 웹 프로젝트에도 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹뷰로 wrapping하고, 네이티브 Xcode 및 Android Studio 프로젝트를 생성하는 것이 가능합니다. 또한, 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.

Capacitor을 사용하면 복잡한 설정이나 steep 학습 곡선이 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API이 얇고 Capacitor의 스트리밍된 기능으로 인해 프로젝트에 통합하는 것이 매우 쉬워졌습니다. 믿을 수 있듯이 Capacitor을 사용하여 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있습니다.

Quasar 앱을 준비하는 중입니다.

새로운 Quasar 앱을 만들려면 다음 명령어를 실행하세요.

npm init quasar

Quasar 프로젝트 설정

“Quasar CLI와 함께 앱” 옵션을 선택한 다음 “Quasar v2”를 선택하세요.

네이티브 모바일 앱을 만들기 위해 프로젝트를 내보내야 하므로, export 프로젝트를 내보내려면 package.json에 package.json 이러한 __CAPGO_KEEP_0__을 사용하여 Quasar 프로젝트를 빌드하고 복사할 수 있습니다.

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

__CAPGO_KEEP_0__ 명령어를 실행한 후 generate, 프로젝트의 루트 폴더에 새로운 dist 폴더를 찾을 수 있습니다.

이 폴더는 나중에 Capacitor에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.

Adding Capacitor to Your Quasar App

웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면, 나중에 단일 sync 명령어만 실행하면 됩니다.

먼저 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 개발 의존성으로 설치하고, 프로젝트 내에서 설정합니다. 설정 중에는 이름과 번들 ID의 기본값을 수락하려면 “엔터” 키를 누를 수 있습니다. Capacitor CLI __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

마지막으로, 우리는 플랫폼을 추가할 수 있고, Capacitor은 프로젝트의 루트 폴더에 각 플랫폼별 폴더를 생성할 것입니다:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Quasar project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Capacitor 초기화

이 시점에서, 새로운 ios 및 android 폴더를 Quasar 프로젝트에 관찰할 수 있어야 합니다.

이것은 실제 네이티브 프로젝트입니다.

Android 프로젝트에 접근하기 위해서는 Android Studio를 설치해야 합니다. iOS의 경우 Mac가 필요하고 Xcode를 설치해야 합니다.__CAPGO_KEEP_0__은 __CAPGO_KEEP_0__을 __CAPGO_KEEP_0__합니다. __CAPGO_KEEP_0__은 __CAPGO_KEEP_0__합니다..

그리고 당신은 프로젝트에서 capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__설정들이 포함되어 있다. 주의할 것은

webDir capacitor.config.json 이 문제를 해결하려면 __CAPGO_KEEP_0__.config.json:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

파일을 열고

npm run generate
npx cap sync

webDir npm run generate 값을 업데이트 해보자. 다음 명령어를 실행해 보자: npx cap sync 모든 웹 code을 올바른 네이티브 플랫폼의 위치로同步시켜 앱에서 표시되도록합니다.

또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때마다 다시 실행해야합니다. 알고도 모르고 이제는 실제로 완료되었습니다. 따라서 기기를 통해 앱을 확인해 보세요. npx cap sync 네이티브 앱을 빌드하고 배포하세요.

iOS 앱을 개발하려면

Xcode

를 설치해야하고 Android 앱을 개발하려면 Android Studio 를 설치해야합니다. 또한 앱 스토어에서 앱을 배포하려면 iOS에서는 Apple Developer Program에 가입하고 Android에서는 Google Play Console에 가입해야합니다. __CAPGO_KEEP_0__는 protectedTokens에 포함되어 있으므로 __CAPGO_KEEP_0__는 그대로 유지됩니다. __CAPGO_KEEP_0__는 protectedTokens에 포함되어 있으므로 __CAPGO_KEEP_0__는 그대로 유지됩니다.

native 모바일 개발에 새로운 입문자라면 Capacitor CLI를 사용하여 쉽게 native 프로젝트를 열 수 있습니다.

npx cap open ios
npx cap open android

native 프로젝트를 설정한 후 앱을 연결된 기기로 배포하는 것은 쉽습니다. Android Studio에서는 모든 것이 준비되기를 기다리면 기기와 설정 변경 없이 앱을 연결된 기기로 배포할 수 있습니다. 예를 들어 다음과 같습니다.

android-studio-run

Xcode에서는 앱을 실제 기기에서 대신 시뮬레이터에서만 배포할 수 있도록 서명 계정을 설정해야 합니다. 이 과정을 처음으로 수행한 적이 없다면 Xcode는 개발자 프로그램에 등록되어야만 개발자 프로그램을 통해 프로세스를 안내해줍니다. 그 후에 단순히 플레이 버튼을 클릭하여 연결된 기기에서 앱을 실행할 수 있으며, 기기를 선택할 수 있습니다. 예를 들어 다음과 같습니다.

xcode-run

축하합니다! Quasar 웹 앱을 성공적으로 모바일 기기에서 배포했습니다. 예를 들어 다음과 같습니다.

그러나 개발 중에 더 빠르게 수행할 수 있는 방법도 있습니다.

Capgo Live Update

Capgo Live Update는 개발자들이 앱 업데이트를 전통적인 앱 스토어 제출 프로세스 없이 배포할 수 있는 서비스입니다. 이 방법은 버그를 빠르게 수정하거나 앱에 작은 업데이트를 수행할 수 있는 편리한 방법입니다. 앱 스토어 검토 프로세스를 기다리지 않고.

Capgo을 Quasar 앱에 통합하는 것은 실시간 라이브 업데이트의 힘을 발휘하는 간단한 과정입니다. 이 단계별 안내서에서는 Capgo Live Update의 통합 및 구현을 안내하여 무결점 업데이트를 제공할 수 있도록 도와줍니다.

Capgo 가입 및 Capgo 대시보드 접근:

API 키를 업로드할 첫 번째 버전을 받기 위해 가입하는 시간입니다! 시작하기 위해 Capgo 계정에 가입하세요.

Capgo SDK 설치:

Capacitor 앱의 루트 디렉토리에 명령 줄에서 직접 실행하세요.

npm i @capgo/capacitor-updater && npx cap sync Capacitor 앱에 플러그인을 설치합니다.

code을 CodePush 대신 앱에 추가하세요.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

__CAPGO_KEEP_0__ 플러그인에 설치가 성공적으로 완료되었다는 것을 native 플러그인에게 알려줍니다.

Capgo 로그인:

__CAPGO_KEEP_0__ CLOUD에 로그인하세요 all __CAPGO_KEEP_0__ apikey를 사용하세요 CLI에 로그인하기 위해 있는 계정 내에 있습니다.

`npx @capgo/cli@latest login YOU_KEY`

첫 번째 앱을 추가하세요.:

Capgo Cloud에서 CLI을 사용하여 첫 번째 앱을 생성해 보세요.

    npx @capgo/cli@latest app add

이 명령어는 Capacitor config 파일에 정의된 모든 변수를 사용하여 앱을 생성합니다.

첫 번째 버전을 업로드하세요.:

code을 빌드하고 Capgo으로 보내려면 다음 명령어를 실행하세요.

npx @capgo/cli@latest bundle upload`

기본적으로 버전 이름은 package.json 파일에 있는 이름이 됩니다.

체크인 Capgo 빌드가 있는지 확인하세요.

__CAPGO_KEEP_0__로 테스트할 수 있습니다. __CAPGO_KEEP_0__ 모바일 샌드박스 앱.

기본 채널 설정:

Capgo으로 앱을 전송한 후에, Capgo으로부터 앱이 업데이트를 받을 수 있도록 기본 채널을 설정해야 합니다.

npx @capgo/cli@latest channel set production -s default

업데이트를 검증하는 앱 설정:

main JavaScript 파일에 이 설정을 추가하세요.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

그 다음 npm run build && npx cap copy 앱을 업데이트하세요.

실시간 업데이트 받기:

Deploy에서 실시간 업데이트를 받으려면, 앱을 장치나 에뮬레이터에서 실행해야 합니다. 이 작업을 가장 쉽게 하려면, 다음 명령어를 사용하여 로컬 앱을 에뮬레이터나 컴퓨터에 연결된 장치에서 실행하세요.

  npx cap run [ios | android]

앱을 열고 배경에 두고 다시 열면, 로그에 앱이 업데이트를 수행했는지 확인할 수 있습니다.

축하합니다! 🎉 첫 번째 실시간 업데이트 성공! 실시간 업데이트는 여기서 시작됩니다. 더 많은 것을 배우려면, 완전한 실시간 업데이트 문서.

Capacitor 플러그인 사용

우리는 Capacitor 플러그인을 사용하는 방법에 대해 몇 번 언급한 적이 있지만 실제로 어떻게 작동하는지 살펴보겠습니다.

npm i @capacitor/share

쉽게 설치할 수 있는 플러그인을 설치하기 위해 다음 명령어를 실행할 수 있습니다. Share 플러그인은 특별한 기능이 없지만 그래도 native share dialog를 표시합니다!이제는 플러그인을 임포트하고 앱에서 해당 함수를 호출하기만 하면 됩니다. 따라서 pages/index.vue를 다음과 같이 변경해 보겠습니다. share() 새로운 플러그인을 설치할 때는 sync 연산을 수행하고 앱을 다시 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요. 버튼을 클릭한 후, 아름다운 native share dialog를 실제로 사용해 보세요! Konsta UI를 Quasar 앱에 사용하려면 먼저 tailwind가 설치되어 있어야 합니다.

<template>
  <div>
    <h1>Welcome to Quasar and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

Optionally Adding Konsta UI

npx cap sync

Konsta UI를 사용하려면

Konsta UI

Konsta UI Konsta UI 그리고 패키지를 설치하려면:

npm i konsta

또한, 다음을 수정해야합니다. tailwind.config.js 파일:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Konsta UI를 위해 필요한 추가 변형 및 도우미 유틸리티를 포함하여 기본 (또는 사용자 정의 한) Tailwind CSS 구성이 확장됩니다.

이제 메인 App 컴포넌트를 설정하여 전역 매개 변수 (예: theme).

전체 앱을 App 에 wrapping pages/_app.vue:

<template>
  <App theme="ios">
    <Quasar />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Example Page

모든 것이 설정되면, Quasar 페이지에서 Konsta UI Vue 컴포넌트를 사용할 수 있습니다.

예를 들어, pages/index.vue 그리고 그것을 다음으로 변경하십시오.

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Quasar & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

모바일 앱을 위한 모든 필요한 구성 요소를 설치한 후 live reload가 동기화되지 않으면 다시 시작하십시오. 그 후에, Quasar와 Capacitor를 사용하여 somewhat 원시적인 모바일 앱을 볼 수 있을 것입니다.

결론

Capacitor는 기존 웹 프로젝트를 기반으로 하는 원시적 애플리케이션을 빌드하는 데 적합한 옵션입니다. code를 공유하고 일관된 UI를 유지하는 단순한 방법을 제공합니다.

그리고 __CAPGO_KEEP_0__를 추가하는 것은 더 쉬워졌습니다. 앱에 live updates를 추가하여 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 합니다. Capgo를 Next.js 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하십시오.__CAPGO_KEEP_0__를 계속 사용하여 live updates, Quasar와 함께 모바일 앱을 만드는 방법을 계속 진행하십시오.

Capgo를 사용하여 모바일 앱을 만드는 방법을 계속 진행하십시오.

Capacitor를 사용하여 원시적 플러그인 작업을 계획하고 연결하십시오.

__CAPGO_KEEP_0__를 사용하여 원시적 플러그인 작업을 계획하고 연결하십시오. Capacitor를 사용하여 원시적 플러그인 작업을 계획하고 연결하십시오. __CAPGO_KEEP_0__를 사용하여 원시적 플러그인 작업을 계획하고 연결하십시오. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위해 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo에서 구현 세부 정보를 위해 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트에서 구현 세부 정보를 위해 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 대체에서 제품 워크플로우를 위해, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드에서 제품 워크플로우를 위해.

Creating Mobile Apps with live updates, Quasar and Capacitor.