In 이 튜토리얼에서, 우리는 새로운 SvelteKit 앱을 시작하고 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 Capgo 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 주고 tailwind-capacitor를 사용하여 안전한 영역을 사용할 수 있습니다.
Capacitor는 SvelteKit 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있도록 허용하며, React Native와 같은 새로운 기술을 배우지 않고도 네이티브 모바일 앱을 개발할 수 있습니다.
이 튜토리얼을 따라서 SvelteKit 앱을 Capacitor를 사용하여 모바일 앱으로 변환하는 단계별 가이드를 따라보세요. Capgo 네이티브 네비게이션, 전환 및 iOS 레이아웃 가이드를 포함하여.
Capacitor에 대해
CapacitorJS는 게임 체이저입니다! 웹 프로젝트에 쉽게 통합할 수 있으며, 네이티브 웹뷰에 애플리케이션을 wrapping하고 Xcode 및 Android Studio 프로젝트를 생성하는 데 사용할 수 있습니다. JavaScript 브리지를 통해 네이티브 장치 기능에 접근할 수 있는 플러그인을 제공합니다.
Capacitor는 복잡한 설정이나 기울임 곡선이 있는 학습 곡선을 필요로 하지 않습니다. API가 얇고 Capacitor가 streamlined되어 프로젝트에 쉽게 통합할 수 있습니다. Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있을 것입니다!
SvelteKit 앱을 준비하는
네이티브 모바일 앱을 만들기 위해 SvelteKit 앱을 생성하려면 다음 명령어를 실행하세요:
npm create svelte@latest my-app
cd my-app
npm install
npm run build명령어를 실행한 후, 새로운 build __CAPGO_KEEP_0__는 SvelteKit 앱을 네이티브 모바일 앱으로 쉽게 변환할 수 있도록 허용합니다. __CAPGO_KEEP_1__ 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 주고 tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다. dist 프로젝트의 루트 폴더에 있는 폴더.
이 폴더는 나중에 Capacitor에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.
Capacitor를 SvelteKit 앱에 추가하는 방법
웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면 됩니다. 그 후에는 단일 명령어만 실행하면 됩니다. sync 첫 번째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 '엔터'를 눌러도 됩니다.
다음으로, 코어 패키지와 iOS 및 Android 플랫폼에 관련된 패키지를 설치합니다. Capacitor CLI 이 시점에서, 새로운 폴더를 볼 수 있습니다.
ios
Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your SvelteKit 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 androidios ios 그리고 안드로이드 SvelteKit 프로젝트의 폴더
이것은 실제 네이티브 프로젝트입니다!
앱을 나중에 접근하기 위해 안드로이드 프로젝트에 접근하려면 안드로이드 스튜디오. iOS에 대해서는 맥을 사용해야 하며 Xcode.
또한 프로젝트에서 capacitor.config.ts 파일을 찾으세요. 이 파일에는 SYNC 시 사용되는 기본 Capacitor 설정이 포함되어 있습니다. SYNC 시 주의해야 할 것은 webDir이것은 현재 잘못된 것입니다.
이것을 고치려면 다음을 열어야 합니다. capacitor.config.ts 파일을 열고 웹 디렉토리(webDir) 항목을 업데이트해야 합니다. 우리가 설정을 업데이트한 후, Sveltekit 프로젝트를 정적 애플리케이션으로 변경하기 위해 정적 어댑터 패키지를 다운로드해야 합니다.:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configow that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:
npm i -D @sveltejs/adapter-staticsvelte.config.js 파일을 수정해야 합니다. 어댑터를 업데이트한 후, 정적 어댑터를 사용하기 위해
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
}
export default configsvelte.config.js 파일에 추가해야 하는 항목이 있습니다. 어댑터를 업데이트한 후, 정적 어댑터를 사용하기 위해 프리렌더 옵션을 만들기 위해 +layout.js 페이지에 src/routes 그리고 다음을 export하는 +layout.js:
export const prerender = true추가하고 업데이트 한 +layout.js 페이지에서, 우리는 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 build 폴더
다음 명령어를 실행하여 할 수 있습니다:
npm run build
npx cap sync첫 번째 명령어 npm run build SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사합니다. npx cap sync 두 번째 명령어는 웹 code을 원하는 위치에同步시켜 앱에서 표시할 수 있도록 합니다.
또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 __CAPGO_KEEP_0__ 플러그인을 설치하면 다시 명령어를 실행해야 합니다. Capacitor plugins네이티브 앱 빌드 및 배포 npx cap sync iOS 앱을 개발하려면 Xcode가 필요합니다.
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 설치되어야 하며, 안드로이드 앱의 경우 안드로이드 스튜디오가 안드로이드 스튜디오 설치되어야 합니다. 또한 앱을 스토어에 배포하려면 iOS의 Apple Developer Program과 안드로이드의 Google Play Console에 등록해야 합니다.
native 모바일 개발에 새로운 사람이라면 Capacitor CLI을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.
npx cap open ios
npx cap open android네이티브 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 쉽습니다. 안드로이드 스튜디오에서는 설정을 변경하지 않고도 앱을 연결된 장치에 배포할 수 있습니다. 예를 들어:
Xcode에서는 실제 장치에 앱을 배포하려면 서명 계정을 설정해야 합니다. 만약 이 과정을 처음으로 진행한다면 Xcode는 개발자 프로그램에 등록되어야 한다는 안내를 제공합니다. 그 후에 단지 플레이 버튼을 클릭하여 앱을 연결된 장치에 배포할 수 있습니다. 연결된 장치를 선택할 수 있습니다. 예를 들어:
성공적으로 스벨트킷 웹 앱을 모바일 장치에 배포했습니다. 예를 들어:
하지만 개발 중에 더 빠르게 할 수 있는 방법도 있습니다…
Capacitor Live Reload
이제는 모든 현대 프레임워크에서热 재로드를 사용하는 데 익숙해졌을 것입니다. 좋은 소식은 동일한 기능을 모바일 장치에서 사용할 수 있다는 것입니다. 모바일 장치에서 최소한의 노력으로!
로컬 호스트 애플리케이션에 대한 접근 권한을 활성화하고 라이브 리로드 네트워크에서 Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요.
첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우 터미널에서 다음 명령어를 실행하여 이를 알아낼 수 있습니다:
ipconfig getifaddr en0윈도우즈에서 실행하십시오:
ipconfig그런 다음 IPv4 주소를 찾으십시오.
Capacitor을 서버에서 앱을 직접 로드하도록 지시하려면, 파일에 추가 항목을 추가할 수 있습니다: capacitor.config.ts 파일을 사용하여
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'dist',
bundledWebRuntime: false,
server: {
url: 'http://192.168.x.xx:3000',
cleartext: true
}
};
export default config;정확히 사용하십시오. __CAPGO_KEEP_0____CAPGO_KEEP_0__
이제 이러한 변경 사항을 우리의 네이티브 프로젝트로 복사할 수 있습니다:
npx cap copyThe copy 이 명령어는 sync과 유사하지만 웹 폴더와 설정만 복사하고 네이티브 프로젝트를 업데이트하지 않습니다. 이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포할 수 있습니다. 그 후에, Svelte 앱에서 변경 사항을 수정하면
자동으로 앱이 재로드되고 변경 사항이 표시됩니다. 주의하십시오 이 변경 사항은 네이티브 프로젝트에 반영되지 않습니다.
이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포할 수 있습니다. 새로운 플러그인(예: 카메라) 설치 시에도 native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. 이 작업은 즉시 수행할 수 없습니다.
구성 파일에서 올바른 IP 및 포트를 사용해야 합니다. 위의 code 블록은 SvelteKit 기본 포트를 데모 목적으로 보여주고 있습니다.
Capacitor 플러그인 사용
Capacitor 플러그인 사용 예
npm i @capacitor/share__CAPGO_KEEP_0__ 플러그인은 몇 번 언급된 바 있습니다. 이를 사용하려면 다음 명령어를 실행하여 간단한 플러그인을 설치할 수 있습니다. __CAPGO_KEEP_0__ 플러그인은 특별한 기능이 없습니다. 그러나 native 공유 대화상을 표시합니다.Share 플러그인 share() 이 플러그인은 native 공유 대화상을 표시합니다. src/routes/index.svelte 플러그인을 설치할 때, 새로운 플러그인을 설치해야 하는 경우 sync 작업을 수행하고 앱을 다시 배포해야 합니다. 이를 위해 다음 명령어를 실행하세요.
<script>
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>
<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>버튼을 클릭하면 native 공유 대화상을 볼 수 있습니다!
npx cap syncnative 공유 대화상을 볼 수 있습니다!
다음으로, iOS 및 Android에서 Capgo 네비게이션 및 전환을 사용하여 앱을 더 원시적으로 느끼게 만들고, 수평으로 넘치거나 안전 영역이 잘려 나가는 iOS 레이아웃 문제를 해결할 수 있습니다.
원시적인 UI를 위해 Capgo 네이티브 네비게이션 및 전환을 사용하세요.
수년간 Ionic을 사용하여 크로스 플랫폼 앱을 개발해 왔습니다. Ionic Tailwind CSS와 함께 통합하는 것은 복잡하고 자주 사용하지 않습니다. 이미 Tailwind CSS를 사용하고 있다면 SvelteKit와 __CAPGO_KEEP_0__를 통합하는 것은 의미가 없습니다. Tailwind CSS 대신 SvelteKit + __CAPGO_KEEP_0__ 앱에서 원시적인 모바일 경험을 위해 __CAPGO_KEEP_1__ 플러그인을 사용하세요. Konsta UI와 같은 웹 전용 UI 키트 대신:.
@Capacitor/Capgo-native-navigation
- @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
- @capgo/capacitor-transitions 두 개를 모두 설치하세요.
Ionic-style 페이지 전환 및 iOS 에지 스와이프 백을 WebView layer에서 사용하여 Ionic UI를 채택하지 않고도 구현합니다.
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx 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 }) => {
goto(`/${id}`);
});앱 셸에서 네이티브 페이지 전환을 추가하세요:
<script>
import { goto } from '$app/navigation';
import { routerOutlet, page, setDirection } from '@capgo/capacitor-transitions/svelte';
import '@capgo/capacitor-transitions';
function openSettings() {
setDirection('forward');
goto('/settings');
}
</script>
<cap-router-outlet use:routerOutlet>
<cap-page use:page>
<cap-content slot="content">
<slot />
</cap-content>
</cap-page>
</cap-router-outlet>페이지를 감싸고 cap-router-outlet, cap-page, 그리고 cap-content, 그리고 호출하세요 setDirection('forward') 또는 setDirection('back') 자연적인 페이지 전환을 사용하기 전에 웹 헤더나 푸터를 중복하지 마세요. 네이티브 네비게이션은 그들만의 표면을 소유하고 있기 때문입니다.
자세한 가이드를 참조하세요: Using @capgo/capacitor-native-navigation 및 Using @capgo/capacitor-transitions.
안전 영역에 대한 Tailwind
Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor Tailwind CSS에서 장치 안전 영역을 사용하려면 tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:
bun add -D tailwind-capacitorTailwind CSS에서 장치 안전 영역을 사용하려면 src/app.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Tailwind CSS에서 장치 안전 영역을 사용하려면 pt-safe, pb-safeTailwind CSS에서 장치 안전 영역을 사용하려면 px-safe Tailwind CSS에서 장치 안전 영역을 사용하려면 env(safe-area-inset-*) Tailwind CSS에서 장치 안전 영역을 사용하려면 open a PR on GitHub.
iOS 레이아웃 문제를 해결하는 방법 (뷰포트, 안전 영역, 가로 스크롤)
iOS에서 콘텐츠가 잘려나가거나-shifted-되거나 가로 스크롤이 가능하다면, overflow-x: hidden 뷰포트 태그를 추가하거나 조정하는 것만으로는 문제를 해결할 수 없다.
다음 순서로 체크하여 문제를 해결하라.
뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하라. src/app.htmlIn <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />,
뷰포트 메타 태그를
html,
body,
body {
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);
}iOS 안전 영역을 한 번에 처리하라. .app-shell단일 앱 셸을 만들고 안전 영역 패딩을 적용하라 — 여러 개의 중첩된 컴포넌트에 적용하지 마라:
모든 페이지 콘텐츠를 @capgo/tailwind-capacitor모바일 앱을 만들 때, __CAPGO_KEEP_0__과 같은 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe 단일 셸에서.
Capacitor iOS contentInset 페이지: Live 업데이트 제품 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `live_update_dynamic_label_to` (Live Update Dynamic Label To). never 첫 번째
페이지: Live 업데이트 제품 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `live_update_dynamic_label_to` (Live Update Dynamic Label To). capacitor.config.ts페이지: Live 업데이트 제품 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `live_update_dynamic_label_to` (Live Update Dynamic Label To). contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 일반적인 더블 스페이싱의 원인입니다.
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) 일반적으로 부족한 요소는 CSS (또는 Native Navigation의)
own the safe area:
__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 일반적인 더블 스페이싱의 원인입니다. 100vwTailwind w-screen대형 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,
}));Tailwind 대신 w-screen 대신 w-full 가능한 경우 많은 가로 스크롤 문제는 100vw / w-screen, duplicated safe-area padding, 또는 고정 너비 컨테이너 — viewport meta 태그 자체에서 아님.
Conclusion
Capacitor은 기존 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. existing 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 code을 사용하는 간단한 방법을 제공합니다.
그리고 __CAPGO_KEEP_0__의 추가로 Capgolive 업데이트를 추가하는 것이 thậm chí 더 쉬워졌습니다. 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.
만들고 싶은 Capgo을 SvelteKit 앱에 추가하는 방법을 배우고 싶다면 다음 글을 참조하세요.
Capgo을 사용하여 더 빠르게 더 나은 앱을 빌드하는 방법을 배워보세요. 무료 계정으로 가입하세요. 오늘.
Capacitor으로 계속 진행하세요. SvelteKit와 Capacitor으로 모바일 앱을 빌드하는 방법
__CAPGO_KEEP_0__을 사용 중이라면 Capacitor으로 CI/CD 자동화 계획을 만드는 경우 Capacitor CI/CD와 연결하세요. __CAPGO_KEEP_0__ CI/CD에서 __CAPGO_KEEP_0__ CI/CD의 제품 워크플로우 Capgo Native Builds에서 Capgo Native Builds의 제품 워크플로우 Capgo Native Builds Capgo CI/CD Capgo Capgo 통합 Capgo CI/CD 통합 __CAPGO_KEEP_0__ GitHub for the implementation detail in GitHub Actions Integration.
