이 튜토리얼에서는 새로운 웹 앱을 만드는 방법에 대해 설명합니다. Quasar. 그 다음에, Capacitor를 사용하여 웹 앱을 모바일 앱으로 변환하는 방법을 배웁니다. 모바일에서 앱이 보이기 좋게 하려면.
Capacitor를 사용하면 Quasar 웹 앱을 모바일 앱으로 변환할 수 있습니다. React Native와 같은 새로운 방법을 배울 필요 없이.
이 튜토리얼은 새로운 Quasar 앱을 시작하여 Capacitor를 사용하여 네이티브 모바일 앱으로 이동하는 과정을 안내합니다. 또한, Capacitor를 사용하여 초단위 내에 앱에 실시간 업데이트를 전송할 것입니다. Capgo __CAPGO_KEEP_0__
CapacitorJS는 정말 게임 체이저입니다! Capacitor를 웹 프로젝트에 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹뷰로.wrap하고, Xcode 및 Android Studio 프로젝트를 생성할 수 있습니다. 또한, 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
__CAPGO_KEEP_0__를 사용하면 복잡한 설정이나 기울임꼴의 학습 곡선이 없는 네이티브 모바일 앱을 얻을 수 있습니다. __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 앱을 만들려면 다음 명령어를 실행하세요.
Quasar 프로젝트 설정
npm init quasar
네이티브 모바일 앱을 만들기 위해 CLI가 필요합니다.
export __CAPGO_KEEP_0__. __CAPGO_KEEP_0__ 프로젝트의 일부입니다. 따라서, Quasar 프로젝트를 빌드하고 복사할 수 있는 간단한 스크립트를 package.json에 포함시켜보겠습니다. package.json 명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더를 확인할 수 있습니다.
{
"scripts": {
// ...
"build": "quasar build"
}
}이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 하지만 현재는 올바르게 설정해야 합니다. generateQuasar 앱에 __CAPGO_KEEP_0__ 추가하기 dist 웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면, 나중에 단일 명령어만 실행하면 됩니다.
첫째로, Capacitor __CAPGO_KEEP_1__을 설치할 수 있습니다.
Adding Capacitor to Your Quasar App
translations3 sync translations4
translations5 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
이 단계까지 진행하면 Quasar 프로젝트 내에서 ios 및 android 폴더를 볼 수 있습니다. 이 폴더들은 실제 네이티브 프로젝트입니다. Android 프로젝트에 나중에 접근하려면 Android Studio를 설치해야 합니다. ios and android
ios
and android. iOS를 위해 Mac이 필요하고 Xcode.
또한 프로젝트에서 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 syncThe first command npm run generate Capgo는 Quasar 프로젝트를 단순히 빌드하고 정적 빌드를 복사합니다. 두 번째 명령어는 npx cap sync 모바일 네이티브 플랫폼의 올바른 위치에 모든 웹 code을同步하여 앱에서 표시할 수 있도록 합니다.
Capgo 설치 시, sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capgo를 설치할 때는 sync 명령어를 실행해 주세요. Capacitor 플러그인 이제 실행 시간입니다. npx cap sync 다시.
__CAPGO_KEEP_0__이 알게 모르게 완료되었습니다. 이제 실제 장치에서 앱을 확인해 보세요!
네이티브 앱을 빌드하고 배포하세요
iOS 앱을 개발하려면 iOS SDK를 사용하여 iOS 앱을 빌드하고 Capacitor를 사용하여 iOS 앱을 빌드하는 데 필요한 Xcode와 iOS Simulator를 설치해야 합니다. Xcode __CAPGO_KEEP_0__을 설치한 후, 안드로이드 앱의 경우 __CAPGO_KEEP_0__이 필요합니다. Android Studio가 설치되어 있습니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. native 모바일 개발에 새로운 사람이라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.
If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:
npx cap open ios
npx cap open androidandroid-studio-run
xcode-run
quasar-mobile-app
__CAPGO_KEEP_0__ Live Update
Capgo Live Update는 개발자들이 앱을 배포할 때 전통적인 앱 스토어 제출 프로세스를 거치지 않고 업데이트를 배포할 수 있는 서비스입니다. 이 방법은 버그를 빠르게 고치거나 작은 업데이트를 적용할 때 편리한 방법입니다.
Capgo Live Update는 개발자들이 앱을 배포할 때 전통적인 앱 스토어 제출 프로세스를 거치지 않고 업데이트를 배포할 수 있는 서비스입니다. 이 방법은 버그를 빠르게 고치거나 작은 업데이트를 적용할 때 편리한 방법입니다.
Capgo을 Quasar 앱에 통합하는 것은 실시간 라이브 업데이트의 힘을 누릴 수 있는 간단한 과정입니다. 이 단계별 안내서에서는 Capgo Live Update의 통합 및 구현을 안내하여, 업데이트가 무중단으로 제공되도록 도와줍니다.
Capgo에 가입하고 Capgo 대시보드에 접속하세요.:
API 키를 받고 첫 번째 버전을 업로드할 준비가 되셨다면, API에 가입하여 Capgo 계정을 생성하세요..
Capgo SDK을 설치하세요.:
Capacitor 앱의 루트 디렉토리에서 명령 프롬프트를 열고, Capacitor 앱에 다음 명령어를 실행하세요.
npm i @capgo/capacitor-updater && npx cap sync Capacitor 앱에 플러그인을 설치하세요.
code을 CodePush 대신 code으로 대체하여 앱에 추가하세요.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()이것은 네이티브 플러그인에 설치가 성공적으로 완료되었다는 것을 알려줍니다.
Capgo 클라우드에 로그인하세요.:
__CAPGO_KEEP_0__ API Key를 사용하여 all __CAPGO_KEEP_0__ API Key를 사용하여 계정에 있는 CLI으로 로그인합니다.
`npx @capgo/cli@latest login YOU_KEY`첫 번째 앱을 추가하세요.:
Capgo Cloud에서 CLI을 사용하여 첫 번째 앱을 생성하세요.
npx @capgo/cli@latest app addCapacitor config 파일에 정의된 모든 변수를 사용하여 앱을 생성하는 명령어입니다.
첫 번째 버전을 업로드하세요.:
다음 명령어를 실행하여 code을 빌드하고 Capgo로 전송하세요.
npx @capgo/cli@latest bundle upload`기본적으로 버전 이름은 package.json 파일에 있는 이름입니다.
체크인. Capgo 빌드가 있는지 확인하세요.
마이 '모바일 샌드박스 앱'과 함께 테스트할 수 있습니다. 마이 '모바일 샌드박스 앱'과 함께 테스트할 수 있습니다..
기본 채널 설정:
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 plugin"이지만, 그래도 native share dialog을 표시합니다! 이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다!이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다! share() 이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다! 이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다! 이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다!
<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>이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다!
npx cap sync이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다!
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 Native Navigation and Transitions
이것은 "Share plugin"이지만 그래도 native share dialog을 표시합니다! Ionic cross-platform 애플리케이션을 만들기 위해 사용하지만 Quasar와 통합하는 것은 불편하고 이미 가지고 있는 경우에만 가치가 있는 경우가 많습니다. Tailwind CSS.
Quasar + Capacitor 앱에서 원시 모바일 느낌을 얻으려면 Capgo 플러그인 대신 웹 전용 UI 키트인 Konsta UI를 사용하는 대신에 사용하세요.
- @capgo/capacitor-native-navigation — iOS에서 Liquid Glass 탭바, Android에서 흐린 탭바 스타일, 네이티브 창을 소유한 플러그인이 경로 상태를 유지하는 Quasar 라우터와 함께 네이티브 네비게이션 바.
- @capgo/capacitor-transitions — Ionic-style 페이지 전환과 iOS 에지 스와이프 백을 WebView layer에서 사용할 수 있습니다. Ionic UI를 채택하지 않습니다.
두 개 모두 설치하세요.
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncCSS 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') or
이동하기 전에 Using @capgo/capacitor-native-navigation Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-transitions.
Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
Safe areas with Tailwind @capgo/tailwind-capacitor (publicly disclosed as tailwind-capacitor on npm). It provides safe-areas utilties and other Capacitor-friendly Tailwind plugins:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Use utilities such as pt-safe, pb-safe, and px-safe instead of manually adding env(safe-area-inset-*) by hand. The project is actively developed — if something is missing for your Quasar setup, open a PR on GitHub.
iOS 레이아웃 문제를 해결하는 방법 (뷰포트, Safe Area, 및 수평 스크롤)
iOS에서 콘텐츠가 잘려나가거나-shifted, 또는 수평 스크롤이 가능하다면, overflow-x: hidden or viewport 태그만 조정하는 것만으로는 문제를 해결할 수 없다. 이 체크를 순서대로 진행하십시오.
뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요
내 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 싱글 셸에
Capacitor iOS contentInset To never first
In capacitor.config.ts, native inset을 사용하고 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 하세요. contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS padding을 혼합하는 것은 일반적인 오버플로우 원인입니다.
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-*) 오버플로우의 일반적인 원인은
, Tailwind
, 고정 픽셀 너비 또는 큰 100vwSafari Web Inspector에서 실행하세요: w-screenrun: 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,
}));With Tailwind, 대신 w-screen with w-full 가능한 경우에만 사용하세요. 많은 가로 방향으로의 오버플로우 문제는 100vw / w-screen, 중복된 safe-area 패딩 또는 고정 너비 컨테이너에서 오는 것이 아니라 viewport meta 태그 자체에서 오는 것입니다.
결론
Capacitor은 기존 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.
그리고 __CAPGO_KEEP_0__을 추가하는 것은 더 쉬워졌습니다. Capgo을 사용하여 앱에 실시간 업데이트를 추가하여 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 합니다.__CAPGO_KEEP_0__을 Next.js 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요.
Creating Mobile Apps with live updates, Quasar 및 Capgo에서 계속 진행하세요.
Capacitor을 사용하는 경우
__CAPGO_KEEP_0__을 사용하는 경우 Capacitor 앱을 만들기 위해 실시간 업데이트, Quasar 및 Capacitor을 사용합니다. __CAPGO_KEEP_0__을 사용하여 네이티브 플러그인 작업을 계획하고 연결하세요. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위한 Capacitor 플러그인에 의해 Capgo Capacitor 플러그인에 의해 Capgo의 구현 세부 사항을 위한 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구현 세부 사항을 위한 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우를 위한 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우를 위한
