이 튜토리얼에서, 우리는 새로운 웹 앱을 만들기 위해 Quasar를 사용하여 시작합니다. 나중에, 우리는 Capacitor를 사용하여 이 앱을 모바일 앱으로 변환하는 방법을 배울 것입니다. 만약 모바일에서 앱이 더 멋지게 보이기를 원한다면.
Capacitor를 사용하면 Quasar 웹 앱을 모바일 앱으로 변환할 수 있습니다. 이 과정을 통해, 모바일 앱을 만들기 위해 많은 어려운 작업이나 새로운 앱을 만드는 방법을 배울 필요가 없습니다. React Native와 같은 다른 앱을 만드는 방법과는 달리.
이 튜토리얼에서는 Quasar 앱을 새로 만들고 나서 Capacitor를 사용하여 모바일 앱으로 변환하는 과정을 안내합니다. 또한, Capacitor를 사용하여 앱에 실시간 업데이트를 보낼 수 있습니다. Capgo에 대해 알아보세요. CapacitorJS는 정말 게임 체이너입니다! __CAPGO_KEEP_0__를 웹 프로젝트에 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹뷰로.wrap하고, 네이티브 Xcode와 Android Studio 프로젝트를 생성합니다. 또한, 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor를 사용하면 복잡한 설정이나 steep 학습 곡선을 필요로 하지 않고도 멋진 네이티브 모바일 앱을 얻을 수 있습니다. __CAPGO_KEEP_1__이 매우 가볍고, __CAPGO_KEEP_2__의 streamlined 기능은 프로젝트에 쉽게 통합할 수 있도록 합니다. 믿을 수 있듯이, __CAPGO_KEEP_2__를 사용하면 완전히 기능하는 네이티브 앱을 쉽게 만들 수 있습니다.
Quasar 앱을 준비하세요.
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!
__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__을 사용하여 __CAPGO_KEEP_2__을 만드는 데 도움이 됩니다.
__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__을 사용하여 __CAPGO_KEEP_2__을 만드는 데 도움이 됩니다.
npm init quasar
Quasar App with Quasar CLI
native 모바일 앱을 만들기 위해 프로젝트를 내보내야 하므로, export package.json에 간단한 스크립트를 포함하여 프로젝트를 빌드하고 복사할 수 있도록 해보겠습니다. 명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더를 발견할 수 있을 것입니다. 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용될 것입니다. 하지만 현재는 올바르게 설정해야 합니다.
{
"scripts": {
// ...
"build": "quasar build"
}
}Quasar App에 __CAPGO_KEEP_0__ 추가 generateQuasar 프로젝트 설정 dist Quasar App with Quasar __CAPGO_KEEP_0__
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Quasar App
모바일 네이티브 컨테이너로 웹 앱을 패키지화하려면 몇 가지 초기 단계를 따르야 하지만, 그 이후로는 단일 명령어만 실행하면 됩니다. 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
__CAPGO_KEEP_0__ 는 프로젝트의 루트 폴더에 각 플랫폼별 폴더를 생성합니다: __CAPGO_KEEP_0__ 이 단계까지 진행하면 ios 및 android 폴더를 새로 관찰할 수 있습니다. Quasar 프로젝트의 폴더입니다.
실제 네이티브 프로젝트입니다!
앱을 나중에 Android 프로젝트에 접근하려면 Android StudioiOS의 경우 Mac가 필요하고 Xcode.
또한 프로젝트에서 capacitor.config.ts 파일을 찾으십시오. 이 파일에는 동기화 시 사용되는 기본 Capacitor 설정이 포함되어 있습니다. 주의할 것은 webDir입니다. 이 값은 현재 명령어의 결과로 정확하지 않습니다.
이 문제를 해결하려면 capacitor.config.json __CAPGO_KEEP_0__ 파일을 열고 업데이트 해보세요. webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}다음 명령어를 실행하여 시도해 보세요:
npm run generate
npx cap sync첫 번째 명령어는 단순히 Quasar 프로젝트를 빌드하고 정적 빌드를 복사합니다. npm run generate 두 번째 명령어는 웹 __CAPGO_KEEP_0__을 네이티브 플랫폼의 올바른 위치에同步시켜 앱에서 표시되도록합니다. npx cap sync 또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 code 플러그인을 설치하면 다시 실행해야합니다.
이것을 알지 못해도 실제로 완료되었습니다. 이제 기기에서 앱을 확인해 보세요! Capacitor plugins 이것을 알지 못해도 실제로 완료되었습니다. 이제 기기에서 앱을 확인해 보세요! npx cap sync 이것을 알지 못해도 실제로 완료되었습니다. 이제 기기에서 앱을 확인해 보세요!
이것을 알지 못해도 실제로 완료되었습니다. 이제 기기에서 앱을 확인해 보세요!
native 앱을 빌드하고 배포하세요
iOS 앱을 개발하려면 Xcode 를 설치해야하고 Android 앱을 개발하려면 Android Studio 를 설치해야합니다. 또한 앱을 스토어에 배포하려면 iOS에는 Apple Developer Program에 등록하고 Android에는 Google Play Console에 등록해야합니다.
native 모바일 개발에 새로운 사람이라면 Capacitor CLI를 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.
npx cap open ios
npx cap open android네이티브 프로젝트를 설정한 후에는 연결된 장치에 앱을 배포하는 것이 쉬워집니다. Android Studio에서는 설정을 변경하지 않고도 연결된 장치에 앱을 배포할 수 있습니다. 예를 들어:
Xcode에서는 실제 장치에 앱을 배포하려면 서명 계정을 설정해야합니다. 서명 계정을 설정한 적이 없다면 Xcode는 프로세스를 안내해줍니다(하지만 다시 한 번 Developer Program에 등록해야합니다). 그 후에 단순히 플레이 버튼을 클릭하여 연결된 장치에서 앱을 실행할 수 있습니다. 앱을 실행할 장치를 위쪽에서 선택할 수 있습니다. 예를 들어:
성공적으로 Quasar 웹 앱을 모바일 장치에 배포했습니다. 예를 들어:
개발 중에 더 빠른 방법이 있습니다...
Capgo Live Update
Capgo Live Update는 개발자들이 앱 스토어 제출 프로세스를 통하지 않고 모바일 앱에 업데이트를 배포할 수 있는 서비스입니다. 이 방법은 버그를 빠르게 고치거나 앱에 작은 업데이트를 적용할 수 있는 편리한 방법입니다. 앱 스토어 리뷰 프로세스를 기다리지 않고 업데이트를 적용할 수 있습니다.
Capgo Live Update를 통합하는 것은 Quasar 앱에 Capgo를 통합하는 것과 같습니다. 이 단계별 가이드는 Capgo Live Update의 통합과 구현을 안내하여 앱에 무결성 있는 업데이트를 제공합니다.
Capgo 계정으로 가입하고 Capgo 키를 얻어 첫 번째 버전을 업로드하세요!:
API에 가입하세요. Capgo __CAPGO_KEEP_1__을 설치하세요..
Install the Capgo SDK:
Capacitor 앱에 플러그인을 설치하세요.
npm i @capgo/capacitor-updater && npx cap sync Capacitor를 코드 푸시 대신 앱에 추가하세요:
code를 코드 푸시 대신 앱에 추가하세요:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()이 설치는 원시 플러그인에 성공적으로 설치되었다고 알려줍니다.
Capgo에 로그인하세요.:
먼저 __CAPGO_KEEP_0__에서 all 계정에 있는 apikey를 사용하여 __CAPGO_KEEP_0__에 로그인하세요. CLI에 첫 번째 앱을 추가하세요.
`npx @capgo/cli@latest login YOU_KEY`__CAPGO_KEEP_1__에서 첫 번째 앱을 만드는 것으로 시작하세요.:
Let’s get started by first creating an app in Capgo Cloud with the CLI.
npx @capgo/cli@latest app addCapacitor의 첫 번째 버전을 업로드하세요.
__CAPGO_KEEP_0__을 빌드하고 __CAPGO_KEEP_1__에 보내는 명령어입니다.:
Run the command to build your code and send it to Capgo with:
npx @capgo/cli@latest bundle upload`__CAPGO_KEEP_0__을 확인하세요.
__CAPGO_KEEP_1__ Capgo 만들어졌는지 확인합니다.
__CAPGO_KEEP_0__의 모바일 샌드박스 앱으로 테스트할 수 있습니다..
채널 기본 설정:
Capgo에 앱을 제출한 후에, Capgo에서 앱이 업데이트를 받을 수 있도록 채널 기본 설정을 해야 합니다.
npx @capgo/cli@latest channel set production -s default
업데이트를 검증하는 앱 설정:
__CAPGO_KEEP_2__에 다음 설정을 추가하세요.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()__CAPGO_KEEP_3__ npm run build && npx cap copy __CAPGO_KEEP_4__
__CAPGO_KEEP_5__:
__CAPGO_KEEP_6__
npx cap run [ios | android]앱을 열고, 배경으로 보내고 다시 열면, 로그에서 앱이 업데이트를 수행했는지 확인할 수 있습니다.
축하합니다! 🎉 첫 번째 Live Update를 성공적으로 배포했습니다. Live Update와 같은 기능을 사용할 수 있는 것은 이것만이 시작입니다. 더 많은 것을 배우려면 Live Updates 문서를 모두 확인하세요..
Capacitor 플러그인 사용
Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 몇 번 언급했듯이, 플러그인을 설치하는 방법에 대해 설명하겠습니다. 이를 위해, 다음과 같은 명령어를 실행하여 간단한 플러그인을 설치할 수 있습니다.
npm i @capacitor/shareShare 플러그인은 특별한 기능이 없지만, 그래도 native share dialog를 열어줍니다! 이에 대해, 이제는 앱에서 import한 패키지의 함수를 호출하면 됩니다. 따라서, pages/index.vue를 다음과 같이 변경해 보겠습니다. share() 플러그인을 설치할 때, 새로 설치한 플러그인에 대한 sync를 수행하고 앱을 다시 배포해야 합니다. 이를 위해, 다음 명령어를 실행하세요: __CAPGO_KEEP_0__을 __CAPGO_KEEP_0__으로 대체합니다. __CAPGO_KEEP_0__을 __CAPGO_KEEP_0__으로 대체합니다.
<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__을 __CAPGO_KEEP_0__으로 대체합니다.
npx cap syncAfter hitting the button, you can witness the beautiful native share dialog in action!
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.
Capgo Native Navigation and Transitions
__CAPGO_KEEP_2__는 여러 해 동안 Ionic 을 사용하여 크로스 플랫폼 애플리케이션을 개발해 왔습니다. 그러나 Quasar.
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 과 함께 사용하는 것보다
- @capgo/capacitor-transitions 보다 가치가 적으며, 이미 가지고 있는 경우에는 거의 사용하지 않습니다. For a native mobile feel in a Quasar + __CAPGO_KEEP_0__ app, use __CAPGO_KEEP_1__ plugins instead of web-only UI kits like Konsta 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',
},
});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>Wrap routed pages in cap-router-outlet, cap-page, cap-content, setDirection('forward') , setDirection('back') ,
, Using @capgo/capacitor-native-navigation , @capgo/capacitor-transitions.
안전 영역에 Tailwind
Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__에서 발표됨) tailwind-capacitor npm에서 제공하는 npm- 친화적인 Tailwind 플러그인: safe-areas Capacitor
npm add -D tailwind-capacitor__CAPGO_KEEP_0__와 같은 유용성을 사용하십시오. src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";__CAPGO_KEEP_0__ 대신에 pt-safe, pb-safe__CAPGO_KEEP_0__를 수동으로 뿌리지 않으십시오. px-safe __CAPGO_KEEP_0__는 활발히 개발되고 있습니다. — __CAPGO_KEEP_0__에 대한 Quasar 설정에 필요한 것이 빠진 경우에 대해. env(safe-area-inset-*) __CAPGO_KEEP_0__ open a PR on GitHub.
iOS 레이아웃 문제를 해결하기 (뷰포트, 안전 영역, 가로 스크롤)
iOS에서 콘텐츠가 잘려나가거나-shifted되거나 가로 스크롤이 가능하다면, 더 많은 overflow-x: hidden 또는 뷰포트 태그를 조정하는 것만으로 문제를 해결할 수 없다. 이러한 체크를 순서대로 진행하라.
뷰포트 메타 태그가 올바르게 적용되었는지 확인하라
또는 (Quasar HTML 템플릿에서) 뷰포트 메타 태그를 index.html iOS 안전 영역을 한 루트 wrapper에서만 처리하라 <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />싱글 앱 셸을 만들고 안전 영역 패딩을 거기에 적용하라 — 여러 개의 중첩된 컴포넌트에 적용하지 마라:
모든 페이지 콘텐츠를
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);
}헤더, 모달, 레이아웃 wrapper에 중복된 안전 영역 패딩이 있는 경우 UI가 잘려나가거나 너무 크게 보인다. .app-shellWith
__CAPGO_KEEP_0__ @capgo/tailwind-capacitor, __CAPGO_KEEP_0__을 사용하여 동일한 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe 단일 셸에서 "on that single shell."를 사용합니다.
Capacitor iOS를 설정합니다. contentInset __CAPGO_KEEP_0__ never 첫 번째
__CAPGO_KEEP_0__ capacitor.config.tsCSS (또는 Native Navigation의)가 안전 영역을 소유하도록 하려면 Native Navigation의 inset disabled를 사용하고 CSS를 사용하세요. contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS의 패딩을 혼합하는 것은 두 배의 간격이 발생하는 일반적인 원인입니다.
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Capacitor의 자동 콘텐츠 inset과 CSS의 패딩을 혼합하는 것은 두 배의 간격이 발생하는 일반적인 원인입니다. env(safe-area-inset-*) __CAPGO_KEEP_0__
실제로 부여되는 요소를 찾습니다.
일반적인 원인은 요소가 사용하는 100vw, Tailwind w-screen, 고정 픽셀 너비, 또는 큰 min-width.
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,
}));Tailwind와 함께 w-screen 가능한 경우 w-full 대부분의 가로 스크롤 문제는 100vw / w-screen, 중복된 safe-area 패딩, 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아니라 —에서 발생합니다.
결론
Capacitor은 기존 웹 프로젝트 기반의 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. existing web project의 code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.
그리고 __CAPGO_KEEP_0__의 추가 Capgo앱에 실시간 업데이트를 추가하는 것이 훨씬 더 쉬워졌습니다. 따라서 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.
Next.js 앱에 Capgo을 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요.
실시간 업데이트를 지원하는 모바일 앱을 만들기, Quasar와 함께 Capacitor을 계속 진행하세요.
__CAPGO_KEEP_0__을 사용하고 있다면 실시간 업데이트를 지원하는 모바일 앱을 만들기, Quasar와 함께 Capacitor을 계속 진행하세요. 자연스러운 플러그인 작업을 계획하고자 한다면, __CAPGO_KEEP_0__ Plugin Directory와 연결하세요. Capgo Plugin Directory에서 제품 워크플로우를 확인하세요. __CAPGO_KEEP_1__에서 개발한 Capgo 플러그인 Capacitor 플러그인에서 Capgo의 구현 세부 사항을 확인하세요. for the implementation detail in Capacitor Plugins by Capgo, 플러그인을 추가하거나 업데이트하는 방법의 구현 세부 사항을 확인하세요. __CAPGO_KEEP_1__ Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우에 대해 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우에 대해
