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

컨텐츠 마케터 실시간 업데이트, Quasar 및 __CAPGO_KEEP_0__를 사용하여 모바일 앱을 만드는 방법. Later on, we’ll learn how to turn it into a mobile app using Capacitor. If you want to make your app look better on mobile.

With Capacitor, you can change your Quasar web app into a mobile app without needing to do lots of hard things or learn a completely new way of making apps like you would with something called React Native.

이 튜토리얼은 프로세스를 안내해 드립니다. 새로운 Quasar 앱을 시작하고 Capacitor를 사용하여 네이티브 모바일 앱으로 이동하는 과정을 포함합니다. 또한, Capacitor를 사용하여 Capgo 실시간 업데이트를 앱에 보내는 데 몇 초만 걸립니다.

대략 Capacitor

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

Capacitor를 사용하면 복잡한 설정이나 steep 학습 곡선이 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API와 streamlined 기능이 매우 가볍고, 프로젝트에 통합하는 데는 쉽습니다. 믿을 수 없을 정도로 쉽게 네이티브 앱을 완전히 기능하는 Capacitor를 얻을 수 있습니다.

Quasar 앱을 준비합니다.

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

npm init quasar

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

네이티브 모바일 앱을 만들려면 __CAPGO_KEEP_0__가 필요합니다. __CAPGO_KEEP_0__ 프로젝트의 일부입니다. 따라서, 간단한 스크립트를 프로젝트에 포함시켜보겠습니다. package.json Quasar 프로젝트를 빌드하고 복사할 수 있도록 사용할 수 있는 스크립트를 포함시킵니다.

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

명령어를 실행한 후 generate새로운 폴더를 프로젝트의 루트 폴더에 찾을 수 있습니다. dist 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 하지만 지금은 올바르게 설정해야 합니다.

Quasar 앱에 Capacitor 추가하기

Adding Capacitor to Your Quasar App

첫째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 설치할 수 있습니다. sync package.json

Quasar 프로젝트를 빌드하고 복사할 수 있도록 사용할 수 있는 스크립트를 포함시킵니다. Capacitor CLI 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중에는 이름과 번들 ID의 기본값을 수락하려면 “Enter” 키를 누를 수 있습니다.

다음으로 iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.

마지막으로 플랫폼을 추가하고 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

이 단계에서 새로운 ios 그리고 android 폴더가 Quasar 프로젝트 내에 생성되어야 합니다.

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

Android 프로젝트에 접근하려면 Android Studio를 설치해야 합니다. __CAPGO_KEEP_0__. iOS에서 사용하려면 Mac이 필요하고 Xcode를 설치해야 합니다. Xcode.

또한 프로젝트에서 __CAPGO_KEEP_0__.config.ts 파일을 찾으셔야 합니다. 이 파일에는 Sync 단계에서 사용되는 기본 __CAPGO_KEEP_0__ 설정이 포함되어 있습니다. Sync 단계에서 주의해야 할 것은 webDir만입니다. 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__.config.json 파일을 열고 webDir을 업데이트 하세요.__CAPGO_KEEP_0__.config.json

webDir을 업데이트 하세요. capacitor.config.json Sync 단계에서 주의해야 할 것은 webDir만입니다. Sync 단계에서 주의해야 할 것은 webDir만입니다.:

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

Sync 단계에서 주의해야 할 것은 webDir만입니다.

npm run generate
npx cap sync

첫 번째 명령어 npm run generate 는 단순히 Quasar 프로젝트를 빌드하고 정적 빌드를 복사합니다. 두 번째 명령어는 npx cap sync code

을 웹으로 동기화하고, 그 웹을 native 플랫폼의 올바른 위치에 복사하여 앱에서 표시할 수 있도록 합니다. Capacitor plugins __CAPGO_KEEP_0__ npx cap sync 을 설치하면 다시 명령어를 실행해야 합니다.

사실은 이제 완료되었지만, 장치에서 앱을 확인해 보겠습니다.

네이티브 앱 빌드 및 배포

iOS 앱을 개발하려면 Xcode 를 설치해야 하며, Android 앱을 개발하려면 안드로이드 스튜디오 설치되었습니다. 또한 앱 스토어에 앱을 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다.

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

npx cap open ios
npx cap open android

native 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 쉽습니다. 안드로이드 스튜디오에서는 설정을 변경하지 않고도 앱을 연결된 장치에 배포할 수 있습니다. 예를 들어:

Xcode에서는 앱을 실제 장치에 배포하기 위해 서명 계정을 설정해야 합니다. 만약 이 과정을 처음으로 진행한다면 Xcode는 개발자 프로그램에 등록된 상태여야 합니다. 그 후에 단지 플레이 버튼을 클릭하여 앱을 연결된 장치에 배포할 수 있습니다. 연결된 장치 선택은 위쪽에서 선택할 수 있습니다. 예를 들어:

성공적으로 Quasar 웹 앱을 모바일 장치에 배포했습니다. 예를 들어:

그러나 개발 중에는 더 빠른 방법도 있습니다...

Capgo Live Update

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

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

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

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

Capgo SDK 설치:

명령 프롬프트에서 Capacitor 앱의 루트 디렉토리로 직접 이동하여

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

code 앱에 플러그인을 설치합니다.

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

CapacitorUpdater.notifyAppReady()

__CAPGO_KEEP_0__ 대신 CodePush를 대체하는 __CAPGO_KEEP_0__를 앱에 추가하세요:

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

__CAPGO_KEEP_0__ 로그인 all __CAPGO_KEEP_0__ CLOUD에 로그인하세요. 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()

__CAPGO_KEEP_2__ npm run build && npx cap copy __CAPGO_KEEP_2__

실시간 업데이트 수신:

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

  npx cap run [ios | android]

앱을 열고 배경에 두고 다시 열면, 로그에 업데이트가 수행된 것을 확인할 수 있습니다.

축하합니다! 🎉 첫 번째 실시간 업데이트 배포를 성공적으로 완료했습니다. 실시간 업데이트와 같은 기능을 더 많이 사용할 수 있습니다. 더 자세한 내용은 Live Updates 문서를 참조하세요. 실시간 업데이트 문서.

Capacitor 플러그인 사용

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before.

npm i @capacitor/share

There’s nothing fancy about the Share pluginbut it anyway brings up the native share dialog! share() For this we now only need to import the package and call the according function from our app, so let’s change the pages/index.vue

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

to this:

npx cap sync

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with __CAPGO_KEEP_0__ Native Navigation and Transitions. iOS와 Android에서 더 자연스러운 UI를 만들 수 있습니다. 또한 iOS에서 발생하는 수평 스크롤이나 안전 영역이 잘려서 보이는 문제를 해결할 수 있습니다. 아이오닉 cross-platform 애플리케이션을 만들기 위해 사용하지만, Quasar와 통합하는 것은 hacky하고 이미 가지고 있는 경우에 자주 사용하지 않습니다. Tailwind CSS.

For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. Quasar 라우터는 경로 상태를 유지하고 플러그인은 네이티브 창을 관리합니다.
• @capgo/capacitor-transitions — 아이오닉 스타일의 페이지 전환 및 iOS 에지 스와이프 백(웹뷰层)으로 iOS 에지 스와이프 백을 사용하지 않고 아이오닉 UI를 채택하지 않습니다.

두 개 모두 설치하세요.

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',
  },
});

리퀴드 글래스 탭 바를 렌더링하세요(iOS는 시스템 소유 렌더링을 사용하고 Android는 흐린 웹뷰 백그라운드 사용):

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>

페이지를.wrap cap-router-outlet, cap-page, 그리고 cap-content, 그리고 call setDirection('forward') 또는 setDirection('back') 이동하기 전에 페이지를.wrap

See the full guides: Using @capgo/capacitor-native-navigation 그리고 Using @capgo/capacitor-transitions.

안전 영역에 Tailwind

디바이스의 안전 영역을 Tailwind CSS에서 사용하려면 @capgo/tailwind-capacitor (publicly 발표 된) tailwind-capacitor on npm). 이 프로젝트는 safe-areas 다양한 Capacitor-친화 Tailwind 플러그인과 함께

npm add -D tailwind-capacitor

In src/css/app.scss:

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

Quasar 설정에 사용할 수 있는 유용한 유틸리티를 제공합니다. pt-safe, pb-safe, px-safe 대신 env(safe-area-inset-*) 수동으로 __CAPGO_KEEP_0__-friendly Tailwind 플러그인을 사용합니다. open a PR on GitHub.

__CAPGO_KEEP_0__

iOS 레이아웃 문제를 해결하는 방법 overflow-x: hidden iOS에서 콘텐츠가 잘려나거나-shifted 또는 가로 스크롤이 가능하다면, viewport 태그를 수정하거나 __CAPGO_KEEP_0__를 추가하는 것만으로는 해결되지 않습니다. 이 체크를 순서대로 진행하세요.

뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요.

In 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와 함께, 동일한 패딩을 표현할 수 있는 유틸리티를 사용할 수 있습니다. pt-safe pb-safe px-safe 싱글 셸에서 __CAPGO_KEEP_0__ iOS

Set Capacitor iOS contentInset 까지 never 첫 번째

In capacitor.config.ts, contentInsetMode: 'css'자연스러운 inset을 사용하고 CSS (또는 Native Navigation의)

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS padding을 혼합하는 것은 일반적인 double spacing의 원인입니다.

실제로 오버플로우가 발생하는 요소를 찾으세요.

일반적으로 오버플로우가 발생하는 요소는 100vw, w-screen, min-width.

Tailwind, 고정 픽셀 너비, 또는 큰

[...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,
  }));

Tailwind를 사용하여 대체 w-screen 대신 w-full 가능한 경우에만 사용하세요. 많은 수평 방향으로 넘치는 문제는 100vw / w-screen중복된 안전 영역 패딩 또는 고정 너비 컨테이너에서 오는 것이 아니라, viewport meta 태그 자체에서 오는 것입니다.

결론

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

그리고 __CAPGO_KEEP_0__을 추가함으로써, 앱에 실시간 업데이트를 더 쉽게 추가할 수 있습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 합니다. Capgo을 Next.js 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요 :Creating Mobile Apps with live updates, Quasar 및 __CAPGO_KEEP_0__에서 계속 진행하세요.

Capgo을 사용하는 경우

Capacitor

__CAPGO_KEEP_1__ Capacitor Quasar와 __CAPGO_KEEP_0__을 사용한 모바일 앱 개발 Capgo을 연결하여 Capgo 플러그인 디렉토리 Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ 플러그인 __CAPGO_KEEP_1__ __CAPGO_KEEP_0__ 플러그인 업데이트 __CAPGO_KEEP_0__ 플러그인 업데이트 Capgo Native Builds Capgo 네이티브 빌드