SvelteKit와 Capacitor을 사용한 모바일 앱 개발

이 튜토리얼에서, 우리는 새로운 SvelteKit 앱을 시작하고 Capacitor을 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 Capgo Native 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 제공하고 tailwind-capacitor를 사용하여 안전한 영역을 사용할 수 있습니다.

Capacitor은 SvelteKit 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있는 기능을 제공하며, 네이티브 모바일 앱을 빌드하는 데 필요한 수정이나 새로운 기술을 배우지 않아도 됩니다.

이 단계별 가이드를 따라 Capacitor을 사용하여 SvelteKit 앱을 모바일 앱으로 변환하세요. Capgo Native Navigation, Transitions, 및 iOS 레이아웃 지침이 포함됩니다.

Capacitor에 대해 알아보세요.

CapacitorJS는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이너입니다. 애플리케이션을 네이티브 웹뷰로 wrapping하고 Xcode 및 Android Studio 프로젝트를 생성하는 데 사용할 수 있습니다. JavaScript 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.

Capacitor은 복잡한 설정이나 steep 러닝 커브가 없는 네이티브 모바일 앱을 만들 수 있는 놀라운 기능입니다. API이 얇고 Capacitor로 streamlined된 기능을 제공하여 프로젝트에 쉽게 통합할 수 있습니다.

스벨트킷 앱 준비하기

새로운 스벨트킷 앱을 만들려면 다음 명령어를 실행하세요:

npm create svelte@latest my-app
cd my-app
npm install
npm run build

명령어를 실행한 후 build 폴더가 프로젝트의 루트 폴더에 생성되어야 합니다. dist 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용되지만 현재는 올바르게 설정해야 합니다.

Capacitor을 스벨트킷 앱에 추가하기

Adding Capacitor to Your SvelteKit App

__CAPGO_KEEP_0__은 __CAPGO_KEEP_1__ Native Navigation, Transitions, 및 iOS 레이아웃 지침을 제공합니다. sync 명령어.

먼저, Capacitor CLI 개발 의존성으로

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__

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 android

다음으로, iOS와 Android 플랫폼에 관련된 패키지를 설치합니다. 마지막으로, 플랫폼을 추가하고 __CAPGO_KEEP_0__ 은 프로젝트의 루트 디렉토리에 각 플랫폼을 위한 폴더를 생성합니다: 이 시점에서

ios 폴더와 android 폴더가 SvelteKit 프로젝트에 생성되어야 합니다.

To access the Android project later, you need to install Android StudioFor iOS, you need a Mac and should install Xcode.

Additionally, you should find a capacitor.config.ts file in your project, which contains some basic Capacitor settings used during the sync. The only thing you need to pay attention to is the webDircontext: HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

, which must point to the result of your build command. Currently, it is incorrect. capacitor.config.ts __CAPGO_KEEP_0__.config.ts file and update the 웹 디렉토리:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

우리가 설정을 업데이트한 후, Capacitor을 변경하여 Sveltekit 프로젝트를 정적 애플리케이션으로 변환하기 위해 적절한 정적 어댑터 패키지를 다운로드해 보겠습니다.

npm i -D @sveltejs/adapter-static

패키지가 설치된 후, 우리는 다음을 변경해야 합니다. svelte.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 config

정적 어댑터를 업데이트한 후, 우리는 다음을 추가해야 합니다. 프리렌더 옵션을 추가하기 위해 +layout.js 페이지를 생성해야 합니다. svelte.config.js svelte.config.js svelte.config.js svelte.config.js svelte.config.js src/routes 그리고 다음 export을 추가하세요. +layout.js:

export const prerender = true

Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`)에서 HTML 텍스트 조각을 추가하고 업데이트 한 후, +layout.js 페이지를 추가하고 업데이트 한 후, 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 앱에서 표시할 수 있는 native 플랫폼에 웹 __CAPGO_KEEP_0__을同步화하세요. 폴더 이 작업을 수행하려면 다음 명령어를 실행하세요.

첫 번째 명령어는 SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사합니다.

npm run build
npx cap sync

두 번째 명령어는 웹 __CAPGO_KEEP_0__을 native 플랫폼의 올바른 위치에同步화하여 앱에서 표시할 수 있도록 합니다. npm run build The second command npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

그리고 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때 다시 실행해야 합니다. npx cap sync 이제 알지 못하는 채로 프로세스를 완료했습니다. 이제 기기를 통해 앱을 확인해 보겠습니다!

네이티브 앱 빌드 및 배포

iOS 앱을 개발하려면

Xcode 을 설치해야 하며 Android 앱을 개발하려면 Android Studio 을 설치해야 합니다. 또한 앱 스토어에 앱을 배포하려면 iOS에서는 Apple Developer Program에 등록하고 Android에서는 Google Play Console에 등록해야 합니다. 네이티브 모바일 개발에 새로운 사람이라면

Capacitor CLI

npx cap open ios
npx cap open android

애플리케이션을 연결된 장치에 배포하는 것은 쉽습니다. 안드로이드 스튜디오에서, 모든 것이 준비되기를 기다리면 연결된 장치에 애플리케이션을 배포할 수 있습니다. 설정을 변경하지 않고.

Xcode에서, 애플리케이션을 실제 장치에 배포하기 위해 서명 계정 설정을 구성해야 합니다. 시뮬레이터 대신. 이 과정을 처음으로 수행하지 않았다면, Xcode는 개발자 프로그램에 등록되어야 합니다. 그 후, 연결된 장치에서 애플리케이션을 실행하기 위해 단지 플레이 버튼을 클릭하면 됩니다. 연결된 장치의 목록에서 선택할 수 있습니다. 예를 들어:

축하합니다! SvelteKit 웹 애플리케이션을 성공적으로 모바일 장치에 배포했습니다. 예를 들어:

하지만, 개발 중에 이 과정을 더 빠르게 수행할 수 있습니다.

Capacitor Live Reload

이제, 모든 현대 프레임워크에서 핫 리로드를 사용해 왔을 것입니다. 좋은 소식은, 핫 리로드와 같은 동일한 기능을 모바일 장치에서 사용할 수 있습니다. 모바일 장치에서 최소한의 노력으로.

로컬 호스트 애플리케이션에 대한 접근 권한을 활성화하여 리브로드를 사용할 수 있습니다. On your network Capacitor 앱이 특정 URL에서 콘텐츠를 로드하는 것을 통해

The first step is to figure out your local IP address. If you’re using a Mac, you can find this out by running the following command in the terminal:

ipconfig getifaddr en0

On Windows, run:

ipconfig

그런 다음 IPv4 주소를 찾으세요.

We can instruct Capacitor to load the app directly from the server by adding another entry to our 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;

Be sure to use correct IP and port예를 들어 위의 예시와 같이.

Now, we can apply these changes by copying them over to our native project:

npx cap copy

그것 copy 명령어는 sync하지만 웹 폴더의 변경 사항을 복사하고 구성만 업데이트하는 것만 웹 폴더의 변경 사항과 구성만 복사하고 native 프로젝트를 업데이트하지 않습니다. Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후, Svelte 앱에서 변경 사항을 수정하면

자동으로 앱이 다시 로드 변경 사항을 보여줍니다! 주의해야 할 점은

카메라와 같은 새로운 플러그인을 설치하면 native 프로젝트를 다시 빌드해야 한다는 것입니다. 이는 native 파일이 변경되었기 때문입니다. 이 작업은 즉시 수행할 수 없습니다. 정확한 IP와 포트를 사용해야 합니다. 위의 __CAPGO_KEEP_0__ 블록은 SvelteKit 기본 포트를 데모용으로 보여주고 있습니다.

code 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대한 예를 몇 번 언급했습니다. 이 작업을 수행하려면 다음 명령어를 실행하여 간단한 플러그인을 설치할 수 있습니다.

Capacitor

npm i @capacitor/share

There’s nothing fancy about the 공유 플러그인, but it brings up the native share dialog! share() 이제는 패키지를 임포트하고 앱에서 함수를 호출하기만 하면 됩니다. 따라서, src/routes/index.svelte 을 다음으로 변경하세요:

<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>

앞서 설명한 것처럼 새로운 플러그인을 설치할 때는 sync 연산을 수행하고 앱을 다시 장치에 배포해야 합니다. 이를 수행하려면 다음 명령어를 실행하세요:

npx cap sync

버튼을 클릭한 후, 아름다운 네이티브 공유 대화 상자를 확인할 수 있습니다!

다음으로, iOS와 Android에서 앱이 더 네이티브하게 느껴지도록 Capgo 네비게이션과 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려나가는 iOS 레이아웃 문제를 해결할 수 있습니다.

네이티브-feeling UI with Capgo Native Navigation and Transitions

여러 년 동안 Ionic To cross-platform 애플리케이션을 만들기 위해, 그러나 SvelteKit와 통합하는 것은 해시하고 거의 가치가 없는 경우가 많습니다. 이미 가지고 있는 경우 SvelteKit + Tailwind CSS.

SvelteKit + Capacitor 앱에서 원시 모바일 느낌을 얻으려면 Capgo 플러그인 대신 웹 전용 UI 키트인 Konsta UI를 사용하세요.

• @capgo/capacitor-native-navigation — 원시 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. SvelteKit 라우터는 라우트 상태를 유지하고 플러그인은 원시 창을 관리합니다.
• @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는 흐린 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 }) => {
  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>

라우트된 페이지를 wrap하세요. cap-router-outlet, cap-page그리고 cap-content그리고 호출 setDirection('forward') 또는 setDirection('back') Capacitor live-update 대안 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법적 문단. seen in: 페이지 alternatives.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `alternatives_cta_questions` (대안 CTA 질문). | Appflow 비교 / 마이그레이션 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. seen in: 페이지 ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `appflow_cta_questions` (Appflow CTA 질문). | Capawesome 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법적 문단. seen in: 페이지 capwesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `capwesome_cta_questions` (Capwesome CTA 질문). | 컨설팅 서비스 페이지에서 HTML 텍스트 조각입니다. 역할: 섹션 서브 타이틀 또는 태그 라인. seen in: 페이지 consulting.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `consulting_faq_subtitle` (컨설팅 FAQ 서브 타이틀). | Appflow 비교 / 마이그레이션 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. seen in: 페이지 ionic-appflow.astro, 페이지 ionic-enterprise-plugins.astro, 페이지 solutions/ionic-enterprise-plugins.astro. 메시지 키 `appflow_plugins_or` (Appflow 플러그인 또는).

이동하기 전에 하지 마십시오. 네이티브 네비게이션이 웹 헤더 또는 푸터를 중복하지 않도록 하십시오. 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

안전 영역에 Tailwind @capgo/tailwind-capacitor @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ (publiched as tailwind-capacitor On npm)에서 제공하는 기능입니다. safe-areas Capacitor-친화적인 Tailwind 플러그인을 포함하여 다양한 유틸리티를 제공합니다.

bun add -D tailwind-capacitor

In __CAPGO_KEEP_0__에서 제공하는 기능을 사용하세요. src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

viewport, safeArea, horizontalOverflow과 같은 iOS 레이아웃 문제를 해결하세요. pt-safe, pb-safeiOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면, viewport 태그를 수정하거나 추가하는 것만으로는 해결되지 않습니다. px-safe viewport meta 태그가 올바르게 적용되어 있는지 확인하세요. env(safe-area-inset-*) viewport meta 태그가 올바르게 적용되어 있는지 확인하세요. open a PR on GitHub.

viewport meta 태그가 올바르게 적용되어 있는지 확인하세요.

viewport meta 태그가 올바르게 적용되어 있는지 확인하세요. overflow-x: hidden viewport meta 태그가 올바르게 적용되어 있는지 확인하세요.

viewport meta 태그가 올바르게 적용되어 있는지 확인하세요.

In src/app.html, <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOS

Create a single app shell and apply safe area padding there — not in multiple nested components:

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);
}

Wrap all page content inside .app-shellDuplicated safe-area padding in headers, modals, and layout wrappers often makes the UI look cropped or too large.

With @capgo/tailwind-capacitoron that single shell. pt-safe pb-safe px-safe iOS

Set Capacitor iOS contentInset context: Page/area: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To). never 첫 번째

In capacitor.config.ts, native inset을 사용하고 CSS (또는 Native Navigation의) contentInsetMode: 'css')가 safe area를 관리하도록 해주세요.

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Capacitor의 자동 콘텐츠 inset과 CSS padding을 혼합하는 것은 일반적인 double spacing의 원인입니다. env(safe-area-inset-*) 실제로 오버플로우가 발생하는 요소를 찾으세요.

일반적으로 원인은 요소가

, Tailwind 100vw, 고정 픽셀 너비를 사용하거나 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-screenviewport 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__은 기존 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. __CAPGO_KEEP_1__을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다. Capgo을 추가함으로써__CAPGO_KEEP_0__

If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:

Learn how Capgo can help you build better apps faster, __CAPGO_KEEP_0__을 SvelteKit 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요: __CAPGO_KEEP_0__이 당신이 더 빠르게 빌드할 수 있는 더 나은 앱을 빌드하는 데 어떻게 도움이 되는지 알아보세요.

Keep going from Building Mobile Apps with SvelteKit and Capacitor

만약 당신이 사용 중이라면 Building Mobile Apps with SvelteKit and Capacitor 자동화된 CI/CD를 계획하고 싶다면, 그것을 Cloudflare의 Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, CI/CD 통합 CI/CD 통합에 대한 구현 세부 정보 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항