모바일 앱을 만들기 위해 Quasar와 Capacitor을 사용하여 실시간 업데이트.

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

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

이 튜토리얼에서는 Quasar 앱을 만들고 Capacitor를 사용하여 모바일 앱으로 변환하는 과정을 안내합니다. 또한 Capacitor를 사용하여 앱에 실시간 업데이트를 보낼 수 있습니다. Capgo __CAPGO_KEEP_0__

About Capacitor

__CAPGO_KEEP_0__를 사용하면 복잡한 설정이나 steep 학습 곡선이 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. __CAPGO_KEEP_1__와 streamlined 기능은 프로젝트에 쉽게 통합할 수 있도록 합니다. 믿을 수 없을 정도로 쉽게 __CAPGO_KEEP_2__를 사용하여 완전한 네이티브 앱을 만들 수 있습니다!

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

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

__CAPGO_KEEP_0__

npm init quasar

Quasar 프로젝트 설정

‘Quasar App with Quasar CLI’ 옵션을 선택하고 ‘Quasar v2’를 선택하세요.

native 모바일 앱을 만들기 위해, 우리는 프로젝트의 export 을 필요로 합니다. 따라서, package.json에 간단한 스크립트를 포함하여, Quasar 프로젝트를 빌드하고 복사할 수 있도록 하세요: 명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더를 찾으실 수 있습니다.

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

이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다. generate__CAPGO_KEEP_0__를 Quasar 앱에 추가하기 dist __CAPGO_KEEP_0__는 Capacitor입니다.

Capacitor는 Capacitor입니다.

모바일 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르야 하지만, 그 이후로는 단일 명령어만 실행하면 됩니다. sync 먼저, 우리는

__CAPGO_KEEP_0__ Capacitor CLI __CAPGO_KEEP_1__

를 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 '엔터'를 눌러도 됩니다.

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

Initialize Capacitor

__CAPGO_KEEP_0__ 는 프로젝트의 루트 폴더에 각 플랫폼을 위한 폴더를 생성합니다: Capgo를 초기화합니다. 이 단계까지 진행하면 ios 및 android 폴더를 볼 수 있을 것입니다. Quasar 프로젝트의 폴더들.

실제 네이티브 프로젝트입니다!

앱을 나중에 Android 프로젝트로 접근하려면 Android Studio를 설치해야 합니다. Android StudioiOS를 위해 Mac이 필요하고 Xcode를 설치해야 합니다. Xcode.

또한 프로젝트에서 __CAPGO_KEEP_0__.config.ts 파일을 찾으셔야 합니다. 이 파일에는 Sync 단계에서 사용되는 기본 __CAPGO_KEEP_0__ 설정이 포함되어 있습니다. 주의할 것은 webDir만이 현재 정확하지 않다는 것입니다. capacitor.config.ts 이것을 수정하려면 build 명령어의 결과를 가리키도록 Capacitor.config.ts 파일의 webDir를 수정해야 합니다. 현재는 정확하지 않습니다. 이것을 수정하려면__CAPGO_KEEP_0__.config.ts

파일을 열어야 합니다. capacitor.config.json __CAPGO_KEEP_0__.파일과 업데이트 하세요. webDir:

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

웹 디렉토리

npm run generate
npx cap sync

You can try it out by executing the following commands: npm run generate 첫 번째 명령어 npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

will sync all the web __CAPGO_KEEP_0__ into the right places of the native platforms so they can be displayed in an app. Capacitor plugins __CAPGO_KEEP_0__ 플러그인을 설치하면 npx cap sync 다시 실행하세요.

Without noticing, you are now actually done, so let’s see the app on a device!

native 앱을 빌드하고 배포하세요

iOS 앱을 개발하려면 Xcode 설치되어야 합니다. 또한 Android 앱을 개발하려면 Android Studio 설치되어야 합니다. 또한 앱 스토어에 앱을 배포하려면 iOS는 Apple Developer Program에, Android는 Google Play Console에 가입해야 합니다.

native 모바일 개발에 새로운 사람이라면 Capacitor CLI을 사용하여 쉽게 iOS 및 Android 프로젝트를 열 수 있습니다.

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 Live Update를 Quasar 앱에 통합하는 것은 단순한 과정으로, 실시간으로 업데이트를 받을 수 있는 힘을 발휘할 수 있습니다. 이 단계별 가이드는 Capgo Live Update의 통합과 구현을 안내하여, 앱에 무결성 있는 업데이트를 제공할 수 있습니다.

계정 만들기 및 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 로그인:

첫 번째로 사용하세요. all apikey CLI에 있는 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로 앱을 제출한 후에 채널 기본 설정을 변경하여 앱이 __CAPGO_KEEP_1__에서 업데이트를 받을 수 있도록 해야 합니다.:

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from 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에서 라이브 업데이트 받으려면 앱을 장치나 에뮬레이터에서 실행해야 합니다. 이 방법은 에뮬레이터나 컴퓨터에 연결된 장치에서 로컬 앱을 실행하는 가장 쉬운 방법입니다.:

__CAPGO_KEEP_1__

  npx cap run [ios | android]

앱을 열고 배경으로 보내고 다시 열면, 로그에서 앱이 업데이트를 수행했다는 것을 볼 수 있습니다.

축하합니다! 🎉 Live Update를 성공적으로 배포했습니다. Live Update는 Live Update를 사용할 수 있는 것 중 하나입니다. 더 많은 것을 배우려면 Live Update 문서를 완전히 참조하세요. Live Update 문서.

Capacitor 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 언급한 바 있습니다. 이를 수행하려면 다음과 같은 간단한 플러그인을 설치할 수 있습니다.

npm i @capacitor/share

__CAPGO_KEEP_0__ 플러그인은 특별한 기능이 없습니다. 그러나 native share dialog을 열 수 있습니다! 이를 위해 현재는 패키지를 임포트하고 앱에서 호출할 수 있는 함수만 필요합니다. 따라서 pages/index.vue를 다음과 같이 변경하세요. Share 플러그인은 특별한 기능이 없습니다. 그러나 native share dialog을 열 수 있습니다!__CAPGO_KEEP_0__ share() pages/index.vue __CAPGO_KEEP_0__ 새로운 플러그인을 설치할 때, sync 연산을 수행하고 앱을 다시 배포해야 합니다. 이를 위해 다음 명령어를 실행하세요.

<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>

__CAPGO_KEEP_0__

npx cap sync

버튼을 클릭한 후, 아름다운 네이티브 공유 대화창을 실제로 경험할 수 있습니다!

다음으로, 앱을 iOS 및 Android에서 더 네이티브하게 느끼게 하기 위해 Capgo 네비게이션 및 전환을 사용하고, 일반적인 iOS 레이아웃 문제를 해결하여 수평 스크롤이나 안전 영역이 잘려 나가는 문제를 해결할 수 있습니다.

수년간 Ionic을 사용하여 크로스 플랫폼 애플리케이션을 개발해 왔습니다. Ionic Quasar와 통합하는 것은 hacky하고, 이미 Tailwind CSS를 사용하고 있다면Rarely worth it입니다. Tailwind CSS.

Quasar + Capacitor 앱에서 네이티브 모바일 느낌을 얻으려면, 웹 전용 UI 키트인 Konsta UI 대신 Capgo 플러그인을 사용하세요:

@capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. Quasar 라우터는 라우트 상태를 유지하고, 플러그인은 네이티브 창을 관리합니다.
@capgo/capacitor-transitions — Ionic-style 페이지 전환 및 iOS 에지 스와이프 백을 WebView layer에서 사용할 수 있습니다. Ionic UI를 채택하지 않습니다.

설치 BOTH:

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

CSS inset 모드에서 네이티브 네비게이션을 구성하여 웹 콘텐츠가 네이티브 바를 존중하도록 하세요:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Liquid Glass 탭 바를 렌더링하세요 (iOS는 시스템 소유 렌더링을 사용하고 Android는 흐려진 WebView 백그라운드 사용):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

앱 셸에서 네이티브 페이지 전환을 추가하세요:

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

페이지를 감싸고 cap-router-outlet, cap-page, 그리고 cap-content, 그리고 setDirection('forward') 또는 setDirection('back') Capacitor live-update 대안을 비교하는 페이지에서 HTML 텍스트 프래그먼트입니다.

앱플로우 비교/이동 마케팅 복사본에서 HTML 텍스트 프래그먼트입니다. Using @capgo/capacitor-native-navigation 컨설팅 서비스 페이지에서 HTML 텍스트 프래그먼트입니다. (컨설팅 FAQ 서브 타이틀). Capacitor @capgo/capacitor-transitions.

안전 영역에 대한 Tailwind

Tailwind CSS에서 장치의 안전 영역을 사용하려면 Capacitor @capgo/tailwind-capacitor (__CAPGO_KEEP_0__에서 발표) tailwind-capacitor npm에서. 그것은 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

npm add -D tailwind-capacitor

Tailwind 플러그인과 함께 __CAPGO_KEEP_0__-친화적인 유틸리티: src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

In pt-safe, pb-safeTailwind의 유틸리티를 사용하십시오: px-safe , env(safe-area-inset-*) 대신에 __CAPGO_KEEP_0__를 수동으로 추가하지 마십시오. 프로젝트는 활발히 개발되고 있으므로, Quasar 설정에 필요한 것이 없다면 __CAPGO_KEEP_0__에 알려 주십시오. GitHub에 PR을 열기.

iOS 레이아웃 문제를 해결하기 (뷰포트, 안전 영역, 가로 스크롤)

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면 overflow-x: hidden 또는

뷰포트 태그를 조정하는 것만으로도 문제를 해결할 수 없다. 이러한 체크를 순서대로 진행하라.

뷰포트 메타 태그가 올바르게 적용되었는지 확인하라 index.html (또는 Quasar HTML 템플릿에서) <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

뷰포트 메타 태그를

iOS 안전 영역을 한 개의 루트 wrapper에서만 처리하라

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

싱글 앱 셸을 생성하고 안전 영역 패딩을 거기에 적용하라 — 여러 개의 중첩된 컴포넌트에서만 적용하지 마라: .app-shell모든 페이지 콘텐츠를

안전 영역 패딩이 중복되어 헤더, 모달, 레이아웃 wrapper에 적용되는 경우 UI가 잘려나거나 너무 크게 보일 수 있다. @capgo/tailwind-capacitor, __CAPGO_KEEP_0__을 사용하여 동일한 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe 단일 셸에서.

Capacitor iOS `contentInset` 으로 `never` 첫 번째

페이지 capacitor.config.ts, __CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 더블 스페이싱의 일반적인 원인입니다. contentInsetMode: 'css'실제로 부여되는 요소를 찾으십시오.

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Capacitor env(safe-area-inset-*) __CAPGO_KEEP_1__

__CAPGO_KEEP_0__

일반적인 원인은 요소가 사용하는 100vw, Tailwind w-screen, 고정 픽셀 너비, 또는 큰 min-width.

In Safari Web Inspector에서 실행:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

With Tailwind, 대체 w-screen 대신 w-full 가능한 경우. 많은 수평 방출 문제는 100vw / w-screen, 중복된 safe-area 패딩, 또는 고정 너비 컨테이너 — viewport meta 태그 자체에서 아님.

결론

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

그리고 __CAPGO_KEEP_0__ Capgo앱에 실시간 업데이트를 추가하는 것이 thậm chí 더 쉬워졌습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 보장합니다.

Next.js 앱에 Capgo을 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요.

실시간 업데이트를 지원하는 모바일 앱 만들기, Quasar 및 Capacitor에서 계속 진행하세요.

__CAPGO_KEEP_0__을 사용하고 있다면 실시간 업데이트를 지원하는 모바일 앱 만들기, Quasar 및 Capacitor에서 계속 진행하세요. __CAPGO_KEEP_0__을 사용하여 네이티브 플러그인 작업을 계획하고, __CAPGO_KEEP_0__ Plugin Directory와 연결하세요. Capgo Plugin Directory Capgo Plugin Directory Capacitor Plugins by Capgo Capacitor Plugins by Capgo 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternatives를 위한 제품 워크플로우 Capgo Native Builds Capgo Native Builds를 위한 제품 워크플로우

실시간 업데이트, Quasar 및 Capacitor를 사용하여 모바일 앱을 만드는 방법

About Capacitor

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

Capacitor는 Capacitor입니다.

native 앱을 빌드하고 배포하세요

Capgo Live Update

Capacitor 플러그인 사용

네이티브한 UI를 위한 Capgo 네이티브 네비게이션 및 전환

안전 영역에 대한 Tailwind

iOS 레이아웃 문제를 해결하기 (뷰포트, 안전 영역, 가로 스크롤)

뷰포트 태그를 조정하는 것만으로도 문제를 해결할 수 없다. 이러한 체크를 순서대로 진행하라.

뷰포트 메타 태그를

Capacitor iOS `contentInset` 으로 `never` 첫 번째

__CAPGO_KEEP_0__

결론

실시간 업데이트를 지원하는 모바일 앱 만들기, Quasar 및 Capacitor에서 계속 진행하세요.

실시간 업데이트, Quasar 및 Capacitor를 사용하여 모바일 앱을 만드는 방법

About Capacitor

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

Capacitor는 Capacitor입니다.

native 앱을 빌드하고 배포하세요

Capgo Live Update

Capacitor 플러그인 사용

네이티브한 UI를 위한 Capgo 네이티브 네비게이션 및 전환

안전 영역에 대한 Tailwind

iOS 레이아웃 문제를 해결하기 (뷰포트, 안전 영역, 가로 스크롤)

뷰포트 태그를 조정하는 것만으로도 문제를 해결할 수 없다. 이러한 체크를 순서대로 진행하라.

뷰포트 메타 태그를

Capacitor iOS contentInset 으로 never 첫 번째

__CAPGO_KEEP_0__

결론

실시간 업데이트를 지원하는 모바일 앱 만들기, Quasar 및 Capacitor에서 계속 진행하세요.

Capacitor iOS `contentInset` 으로 `never` 첫 번째