이 튜토리얼에서, 우리는 새로운 웹 앱을 만드는 것을 시작합니다. 퀘사르. 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.
This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo live update를 앱에 몇 초만에 전송할 수 있습니다.
About Capacitor
CapacitorJS는 정말 게임 체이저입니다! 웹 프로젝트에 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹 뷰로.wrap하고, Xcode 및 Android Studio 프로젝트를 생성합니다. 또한, 플러그인은 JS 브릿지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor으로는 훌륭한 네이티브 모바일 앱을 간단한 설정과 기울임 없는 학습 곡선 없이 얻을 수 있습니다. API이 얇고 Capacitor로 최적화된 기능으로 프로젝트에 통합하는 것이 매우 쉬워집니다. 믿을 수 있게도, Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있습니다.
준비하는 Quasar 앱
Quasar 애플리케이션을 새로 만들려면 다음 명령어를 실행하세요.
npm init quasar
Pick the “App with Quasar CLI” option then “Quasar v2”.
native 모바일 앱을 만들기 위해서는 export 프로젝트의 일부로 사용할 수 있는 간단한 스크립트를 포함해 보겠습니다. package.json Quasar 프로젝트를 만들고 복사할 수 있는 패키지를 설치할 수 있습니다.
{
"scripts": {
// ...
"build": "quasar build"
}
}명령어를 실행한 후 generate새로운 폴더를 프로젝트의 루트 폴더에 찾을 수 있습니다. dist 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.
Quasar 앱에 Capacitor 추가하기
Quasar 앱에 Capacitor을 추가하는 방법
첫째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 “enter”를 누를 수 있습니다. sync command.
__CAPGO_KEEP_0__ Capacitor CLI __CAPGO_KEEP_0__
다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.
Capacitor에서 플랫폼을 추가할 수 있습니다. 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 폴더가 프로젝트에 생성되어야 합니다. ios android android iOS 및 Android 플랫폼에 대한 폴더가 생성되어야 합니다.
이것은 실제 네이티브 프로젝트입니다!
Android 프로젝트에 나중에 접근하려면 설치해야 합니다. 안드로이드 스튜디오Mac에서 개발해야 하며 Xcode를 설치해야 합니다. Xcode.
그리고 당신은 다음 것을 찾을 수 있어야 한다 capacitor.config.ts Capacitor.config.ts 파일은 프로젝트에 포함되어 있으며, Sync 동안 사용되는 기본적인 Capacitor 설정이 포함되어 있습니다. Sync 중에 주의해야 할 것은 webDir, 현재는 정확하지 않습니다.
이 문제를 해결하기 위해, capacitor.config.json 파일을 열고 webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Sync를 위해 다음 명령어를 실행해 보세요
npm run generate
npx cap sync첫 번째 명령어 npm run generate Quasar 프로젝트를 단순히 빌드하고 정적 빌드를 복사합니다. 두 번째 명령어는 npx cap sync code을 웹에서 가져와 네이티브 플랫폼의 올바른 위치에 동기화하여 앱에서 표시할 수 있도록 합니다.
또한 동기화 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때 플러그인 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 androidnative 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 쉽습니다. Android Studio에서는 설정을 변경하지 않고도 앱을 연결된 장치에 배포할 수 있습니다. 예를 들어:
Xcode에서는 실제 장치에 앱을 배포하려면 서명 계정을 설정해야 합니다. 서명 계정을 설정한 적이 없다면 Xcode는 개발자 프로그램에 등록한 경우 개발자 프로그램을 통해 프로세스를 안내합니다. 그 후에 단순히 플레이 버튼을 클릭하여 연결된 장치에서 앱을 실행할 수 있습니다. 예를 들어:
축하합니다! Quasar 웹 앱을 성공적으로 모바일 장치에 배포했습니다. 예를 들어:
하지만 개발 중에는 더 빠른 방법도 있습니다...
Capgo Live Update
Capgo Live Update은 개발자들이 앱 업데이트를 전통적인 앱 스토어 제출 프로세스 없이 배포할 수 있도록 하는 서비스입니다. 이 방법은 버그를 빠르게 수정하거나 앱에 작은 업데이트를 적용할 때 편리한 방법입니다.
Capgo을 Capgo 앱에 통합하는 것은 실시간 라이브 업데이트의 힘을 누릴 수 있는 간단한 과정입니다. 이 단계별 안내서에서는 Live Update의 통합과 구현을 통해 무결점 업데이트를 제공하는 방법을 안내합니다.
Capgo 가입 및 Capgo 대시보드 접근:
API 키를 받고 첫 번째 버전을 업로드할 준비가 되었습니다! 시작하기 위해 API 계정에 가입하세요. Capgo __CAPGO_KEEP_1__ 설치.
Install the Capgo SDK:
Capacitor 앱에 플러그인을 설치합니다.
npm i @capgo/capacitor-updater && npx cap sync Capacitor을 __CAPGO_KEEP_1__으로 대체하여 앱에 추가하세요:
code 플러그인에 설치가 성공적으로 완료되었다는 것을 native 플러그인에게 알려줍니다.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()__CAPGO_KEEP_0__ 로그인
Capgo CLOUD에 로그인하세요.:
__CAPGO_KEEP_0__ API키 all 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 업데이트를 적용하세요.
Live Update 수신:
Deploy에서 live update를 받으려면, 앱을 디바이스나 에뮬레이터에서 실행해야 합니다. 이 작업을 쉽게 하려면, 다음 명령어를 사용하여 로컬 앱을 에뮬레이터나 컴퓨터에 연결된 디바이스에서 실행하세요.
npx cap run [ios | android]앱을 열고, 배경에 두고 다시 열어보세요. 로그에 앱이 업데이트를 수행했는지 확인하세요.
축하합니다! 🎉 첫 번째 Live Update를 성공적으로 배포했습니다. Live Updates의 시작점입니다. 더 많은 것을 배우려면, Live Updates 문서를 완전히 참조하세요. 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/shareThere's nothing fancy about the Share pluginnative share dialog이 열리지만, 이에 대한 해결책은 package를 import하고, 해당 함수를 호출하는 것만으로 가능합니다. share() Share plugin pages/index.vue 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>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:
npx cap sync버튼을 클릭한 후에 아름다운 네이티브 공유 대화창을 실제로 경험할 수 있습니다.
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.
자연스러운 UI와 Capgo 네이티브 네비게이션 및 전환
Next, you can make the app feel more native on iOS and Android with __CAPGO_KEEP_0__ navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas. 아이오닉 cross-platform 애플리케이션을 만들기 위해 사용하지만, 퀘사르와 통합하는 것은 해시킹되고 거의 가치가 없을 때 이미 가지고 있는 경우 Tailwind CSS.
퀘사르 + Capacitor 앱에서 네이티브 모바일 느낌을 위해, 웹 전용 UI 키트인 Konsta UI와 같은 Capgo 플러그인 대신 사용하십시오:
- @capgo/capacitor-native-네비게이션 — 네이티브 네비게이션 바, Liquid Glass 탭 바 스타일 (iOS), Android에서 블러드 탭 바 스타일. 퀘사르 라우터는 라우트 상태를 유지하고 플러그인은 네이티브 창을 소유합니다.
- @capgo/capacitor-transition — 아이오닉 스타일의 페이지 전환 및 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, 그리고 호출 setDirection('forward') 또는 setDirection('back') 이동하기 전에 페이지를 wrap하지 마십시오. 네이티브 네비게이션 소유하는 웹 헤더 또는 푸터를 중복하지 마십시오.
자세한 가이드를 참조하십시오: Using @capgo/capacitor-native-navigation 그리고 @Capacitor-capgo/capacitor-transitions.
Tailwind에서 안전한 영역
Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (게시된) tailwind-capacitor on npm. safe-areas Capacitor-호환 Tailwind 플러그인을 제공하는 Capacitor:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Capacitor-호환 Tailwind 유틸리티를 사용하여 pt-safe, pb-safe, px-safe 대신 __CAPGO_KEEP_0__에서 env(safe-area-inset-*) 수동으로 __CAPGO_KEEP_0__을 뿌려두지 마십시오. 이 프로젝트는 활발히 개발되고 있습니다. — Quasar 설정에 필요한 __CAPGO_KEEP_0__이 빠져 있는 경우 GitHub에서 PR을 열어보십시오..
iOS 레이아웃 문제를 해결하는 방법 (뷰포트, 안전 영역, 가로 스크롤)
iOS에서 콘텐츠가 잘려 보이거나-shifted되거나 가로 스크롤이 가능하다면 더 많은 overflow-x: hidden Fixing
뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요.
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 to never first
In capacitor.config.ts, Native Navigation의 Safe Area를 위해 CSS (또는 Native Navigation)가 소유하고 있는 것을 선호합니다. contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 일반적인 더블 스페이싱의 원인입니다.
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mixing Capacitor의 자동 콘텐츠 인셋과 CSS를 혼합합니다. env(safe-area-inset-*) 일반적으로 원인은 요소가
, Tailwind
, 고정 픽셀 너비 또는 100vw, Tailwind w-screenfirst min-width.
In
[...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은 기존 웹 프로젝트 기반의 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.
그리고 __CAPGO_KEEP_0__을 추가함으로써, 앱에 실시간 업데이트를 더 쉽게 추가할 수 있습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 합니다. CapgoCreating Mobile Apps with live updates, Quasar 및 __CAPGO_KEEP_0__에서 계속 진행하세요.
Capgo을 사용하는 경우
Capacitor을 사용하는 경우
__CAPGO_KEEP_0__을 사용하는 경우 Capacitor Quasar와 __CAPGO_KEEP_0__을 사용한 모바일 앱 개발 Capgo Capgo 플러그인 디렉토리 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인 Capacitor의 구현 세부 사항을 위해 Capgo에 의해 구현됩니다. __CAPGO_KEEP_0__ 플러그인 __CAPGO_KEEP_1__ __CAPGO_KEEP_0__ 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인 Capgo 원생 빌드 for the product workflow in Capgo Native Builds.
