이 튜토리얼에서는 새로운 웹 앱을 만드는 방법에 대해 배울 것입니다. Quasar. 그 후에, Capacitor를 사용하여 모바일 앱으로 변환하는 방법을 배울 것입니다. 모바일에서 앱이 보이기 좋게 하려면.
Capacitor를 사용하면 Quasar 웹 앱을 모바일 앱으로 변환할 수 있습니다. React Native와 같은 새로운 방법을 배울 필요 없이.
이 튜토리얼은 새로운 Quasar 앱을 시작하여 Capacitor를 사용하여 네이티브 모바일 앱으로 이동하는 과정을 안내합니다. 또한, Capacitor를 사용하여 초과 시간 내에 앱에 실시간 업데이트를 전송할 것입니다. Capgo __CAPGO_KEEP_0__
Capacitor
CapacitorJS는 정말 게임 체이저입니다! __CAPGO_KEEP_0__를 웹 프로젝트에 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹뷰로 wrapping하고, Xcode 및 Android Studio 프로젝트를 생성할 수 있습니다. 또한, 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor를 사용하면 복잡한 설정이나 기울임의 학습 곡선이 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API와 streamlined 기능이 매우 가볍고, 프로젝트에 통합하는 것이 매우 쉬워집니다. 믿을 수 없을 정도로 Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있습니다.
Quasar 앱을 준비하는 방법
새로운 Quasar 앱을 만들려면 다음 명령어를 실행하세요.
npm init quasar
'App with Quasar CLI' 옵션을 선택한 다음 'Quasar v2'를 선택하세요.
네이티브 모바일 앱을 만들기 위해 __CAPGO_KEEP_0__가 필요합니다. export 프로젝트의 일부입니다. 따라서, Quasar 프로젝트를 빌드하고 복사할 수 있는 간단한 스크립트를 package.json에 포함시켜보겠습니다. package.json __CAPGO_KEEP_0__를 설치하여 Quasar 프로젝트를 빌드하고 복사할 수 있습니다.
{
"scripts": {
// ...
"build": "quasar build"
}
}명령어를 실행한 후 generate프로젝트의 루트 폴더에서 새로운 폴더를 찾을 수 있습니다. dist 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.
Capacitor를 Quasar 앱에 추가하는 방법
Adding Capacitor to Your Quasar App
첫째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 설치할 수 있습니다. sync __CAPGO_KEEP_0__
__CAPGO_KEEP_1__ Capacitor CLI As __CAPGO_KEEP_0__ 의 개발 의존성을 설치하고 프로젝트 내에서 설정합니다. 설정 중에 이름과 번들 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
이 시점에서, __CAPGO_KEEP_0__이 생성한 ios 및 android 폴더를 관찰할 수 있습니다. 이 폴더는 실제 네이티브 프로젝트입니다.
Android 프로젝트에 나중에 접근하려면 Android Studio를 설치해야 합니다.
Initialize __CAPGO_KEEP_0__ By this point, you should be able to observe new. 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 syncCapgo의 첫 번째 명령 npm run generate Capgo는 Quasar 프로젝트를 단순히 빌드하고 정적 빌드를 복사합니다. 두 번째 명령어는 npx cap sync 모바일 앱 내에서 올바른 위치에 웹 code을 동기화하여 사용자에게 표시할 수 있도록 합니다.
Capgo 플랫폼에서 sync 명령어를 실행할 때, 네이티브 플랫폼이 업데이트되고 플러그인도 설치될 수 있습니다. 따라서 새로운 Capacitor 플러그인 이제는 실행 시간입니다. npx cap sync 다시.
__CAPGO_KEEP_0__이 알게 모르게 완료되었습니다. 이제 실제 장치에서 앱을 확인해 보세요!
자연스럽고 사용자 문화적 맥락에 적합한 사용자 경험을 제공하기 위해 원어민의 표현을 사용하여 원본 텍스트를 번역합니다. 자연스럽고 사용자 문화적 맥락에 적합한 사용자 경험을 제공하기 위해 원어민의 표현을 사용하여 원본 텍스트를 번역합니다. 자연스럽고 사용자 문화적 맥락에 적합한 사용자 경험을 제공하기 위해 원어민의 표현을 사용하여 원본 텍스트를 번역합니다.
iOS 앱을 개발하기 위해서는 Xcode __CAPGO_KEEP_0__을 설치한 후, 안드로이드 앱의 경우 __CAPGO_KEEP_0__이 필요합니다. Android Studio 설치되었습니다. 또한 앱을 앱 스토어에 배포하려면 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 앱에 통합하는 것은 실시간 라이브 업데이트의 힘을 발휘하는 간단한 과정입니다. 이 단계별 안내서에서는 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을 CodePush 대신 Capacitor으로 앱에 추가하세요:
And then add to your app this code as a replacement of CodePush one:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()__CAPGO_KEEP_0__ 클라우드 로그인
Login to Capgo CLOUD:
First, use the 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_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 를 사용하여 앱을 업데이트하세요.
실시간 업데이트 받기:
애플리케이션을 __CAPGO_KEEP_0__에서 실시간 업데이트 받으려면, 장치나 에뮬레이터에서 앱을 실행해야 합니다. 이 작업을 가장 쉽게 하려면, 다음 명령어를 사용하여 로컬 앱을 에뮬레이터나 컴퓨터에 연결된 장치에서 실행하세요.
npx cap run [ios | android]앱을 열고 배경으로 보내고 다시 열어보세요. 로그에 앱이 업데이트를 수행했는지 확인하세요.
축하합니다! 🎉 첫 번째 실시간 업데이트 성공! 이게 시작일 뿐입니다. 실시간 업데이트에 대해 더 배우려면, __CAPGO_KEEP_0__ 플러그인 사용하기 __CAPGO_KEEP_0__ 플러그인 사용하기.
Capacitor 플러그인 사용하기
우리는 Capacitor 플러그인을 사용하는 방법에 대해 몇 번 언급한 적이 있지만 실제로 어떻게 작동하는지 살펴보겠습니다.
npm i @capacitor/share이것을 하려면 우리는 __CAPGO_KEEP_0__ 플러그인을 설치할 수 있습니다. 이 플러그인은 다음과 같은 명령어를 실행하여 설치할 수 있습니다. 이것은 "Share plugin"입니다. 하지만 그래도 native share dialog를 보여줍니다.이것을 위해서는 우리는 __CAPGO_KEEP_0__ 패키지를 임포트하고, 우리의 앱에서 해당 함수를 호출하면 됩니다. 그래서 우리는 "pages/index.vue"를 다음과 같이 변경해 보겠습니다. share() 이전에 언급한 것처럼 새로운 플러그인을 설치할 때 우리는 sync operation을 수행하고, 앱을 다시 배포해야 합니다. 이것을 하려면 다음 명령어를 실행하면 됩니다. 버튼을 클릭한 후에, 우리는 아름다운 native share dialog를 실제로 볼 수 있습니다! 다음으로, 우리는 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하여 iOS와 Android에서 앱을 더 네이티브하게 만들 수 있고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있습니다.
<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>네이티브한 UI를 만들기 위해 __CAPGO_KEEP_0__ Native Navigation and Transitions를 사용합니다.
npx cap sync나는 몇 년 동안 __CAPGO_KEEP_0__와 함께 일했습니다.
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
years with Capgo Ionic 다양한 플랫폼의 애플리케이션을 만들기 위해 사용하지만, Quasar와 통합하는 것은 복잡하고 거의 가치가 없을 때가 많습니다. 이미 가지고 있는 Tailwind CSS.
Quasar + Capgo 앱에서 원시 모바일 느낌을 원한다면, 웹 전용 UI 키트인 Konsta UI와 같은 Capgo 대신 Capacitor 플러그인을 사용하세요.
- @capgo/capacitor-native-navigation — iOS에서 Liquid Glass 탭바, Android에서 흐린 탭바 스타일을 사용하는 네이티브 네비게이션 바, 네이티브 창을 소유하는 플러그인이 루트 상태를 유지합니다.
- @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, 그리고 call setDirection('forward') 또는 setDirection('back') 이전으로 이동하기 전에.
원래 네비게이션 소유한 웹 헤더 또는 푸터를 중복하지 않도록 하세요. Using @capgo/capacitor-native-navigation Capgo에서 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation을 사용하는 방법 Using @capgo/capacitor-transitions.
Capgo에서 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions를 사용하는 방법
Tailwind에서 안전한 영역 Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor를 사용하세요. (publicly 발표되었습니다 tailwind-capacitor npm에서). 이 프로젝트는 safe-areas 기능과 다른 Capacitor-친화 Tailwind 플러그인:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Quasar 설정에 사용할 수 있는 유용한 기능을 사용하십시오. pt-safe, pb-safe, 및 px-safe 대신 __CAPGO_KEEP_0__에서 수동으로 작성한 코드를 사용하십시오. 이 프로젝트는 활발히 개발되고 있습니다 — Quasar 설정에 필요한 기능이 누락되어 있다면 env(safe-area-inset-*) __CAPGO_KEEP_0__에서 PR을 열어보십시오. open a PR on GitHub.
, iOS에서 콘텐츠가 잘려나가거나 shift되어 있거나 수평 스크롤이 가능하다면
뷰포트 태그를 수정하거나 __CAPGO_KEEP_0__에 추가하는 것만으로는 문제를 해결할 수 없습니다. 이 체크를 순서대로 진행하십시오. 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, pt-safe pb-safe px-safe 싱글 셸에 패딩을 적용하여 동일한 패딩을 표현할 수 있습니다.
iOS에서 Capacitor contentInset 첫 번째로 never 첫 번째로
In capacitor.config.ts, native inset이 disabled되어 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 하세요. contentInsetMode: 'css'CSS의 padding과 __CAPGO_KEEP_0__의 자동 콘텐츠 inset을 혼합하는 것은 일반적인 오버플로우의 원인입니다.
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-screen, a fixed pixel width, or a large min-width.
In Safari Web Inspector, run:
[...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 is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.
__CAPGO_KEEP_0__은 기존 웹 프로젝트 기반으로 native 애플리케이션을 빌드하는 데 적합한 옵션입니다. existing 웹 프로젝트의 __CAPGO_KEEP_1__을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다. 그리고 Capgo의 추가로,앱에 실시간 업데이트 기능을 더 쉽게 추가할 수 있습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 합니다.
Capgo를 Next.js 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요 :
Creating Mobile Apps with live updates, Quasar 및 Capacitor에서 계속 진행하세요.
__CAPGO_KEEP_0__를 사용하는 경우 Capacitor 앱을 위한 실시간 업데이트, Quasar 및 Capacitor. __CAPGO_KEEP_0__ 플러그인 작업을 계획하기 위해, 그것을 Capgo 플러그인 디렉토리와 연결합니다. Capgo 플러그인 디렉토리 내의 제품 워크플로우에 대해 Capacitor 플러그인에 의해 Capgo Capacitor 플러그인에 의해 Capgo의 구현 세부 사항에 대해 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구현 세부 사항에 대해 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우에 대해, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우에 대해.
