Building Mobile Apps with SvelteKit and Capacitor

이 튜토리얼에서, 우리는 새로운 SvelteKit 앱을 시작하고 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 Capgo Native Navigation 및 Transitions를 추가하여 네이티브 모바일 느낌을 제공하고 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 프로젝트 내에 생성되어야 합니다.

안드로이드 프로젝트에 나중에 접근하기 위해, 안드로이드 스튜디오를 설치해야 합니다. iOS의 경우, 맥을 사용하고 .

Xcode 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 __CAPGO_KEEP_0__.config.ts파일을 프로젝트에서 찾으셔야 합니다. 이 파일에는 SYNC 단계에서 사용되는 기본

__CAPGO_KEEP_0__ capacitor.config.ts webDir 웹 디렉토리:

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 페이지를 생성하여 prerender 옵션을 추가해야 합니다. prerender 옵션을 추가하기 위해 +layout.js src/routes 그리고 다음 export을 추가하세요. +layout.js:

export const prerender = true

추가 및 업데이트 후에 +layout.js 페이지를 추가하고 업데이트 한 후, 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 앱에서 표시할 수 있도록 웹 __CAPGO_KEEP_0__을 올바른 위치에 동기화합니다. +layout.js 폴더 다음 명령어를 실행하여 할 수 있습니다.

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

npm run build
npx cap sync

두 번째 명령어는 웹 __CAPGO_KEEP_0__을 모바일 플랫폼의 올바른 위치에 동기화하여 앱에서 표시할 수 있도록 합니다. npm run build build 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 이미 설치가 완료된 상태입니다. 이제 기기에서 앱을 확인해 보세요!

Build and Deploy Native Apps

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는 개발자 프로그램에 등록되어야 합니다. 그 후, 연결된 장치에서 애플리케이션을 실행하기 위해 단지 플레이 버튼을 클릭하면 됩니다. 연결된 장치의 선택은 위쪽에서 가능합니다. 예를 들어:

성공적으로 스벨트킷 웹 애플리케이션을 모바일 장치에 배포했습니다. 예를 들어:

하지만, 개발 중에 더 빠르게 수행할 수 있는 방법도 있습니다.

Capacitor Live Reload

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

로컬 호스트 애플리케이션에 대한 접근 권한을 활성화합니다. On 네트워크에서 Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하는 것입니다.

첫 번째 단계는 자신의 로컬 IP 주소를 찾는 것입니다. Mac을 사용하는 경우 터미널에서 다음 명령어를 실행하여 이를 찾을 수 있습니다:

ipconfig getifaddr en0

Windows에서 실행하십시오:

ipconfig

그런 다음 IPv4 주소를 찾으십시오.

Capacitor에 서버에서 앱을 직접 로드하도록 지시하기 위해, 파일에 추가 항목을 추가할 수 있습니다: capacitor.config.ts 정확한 IP 주소와 포트 번호를 사용하십시오.

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;

예시와 같이 표시되어 있습니다. 이제 이러한 변경 사항을 적용할 수 있습니다. native 프로젝트로 복사하여 적용하십시오:이

__CAPGO_KEEP_0__

npx cap copy

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

자동으로 앱이 다시 로드되고 변경 사항이 표시됩니다! 주의해야 할 점은 네이티브 프로젝트를 다시 빌드해야 하는 새로운 플러그인, 카메라와 같은 플러그인을 설치하면, 네이티브 파일이 변경되었기 때문에 즉시 처리할 수 없습니다.

정확한 IP 주소와 포트를 사용해야 합니다. 위의 __CAPGO_KEEP_0__ 블록은 SvelteKit의 기본 포트를示唆하기 위해 demonstration 목적으로 사용됩니다. __CAPGO_KEEP_0__ 플러그인 사용

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>

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

npx cap sync

이 버튼을 클릭한 후, 아름다운 네이티브 공유 대화창을 경험하실 수 있습니다!

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

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

저는 여러 해 동안 Ionic 다양한 플랫폼 앱을 만들기 위해 사용하지만 SvelteKit와 통합하는 것은 헛수고이며 이미 가지고 있는 경우에는 거의 가치가 없습니다. Tailwind CSS.

For a native mobile feel in a SvelteKit + Capacitor app, use Capgo plugins instead of web-only UI kits like 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',
  },
});

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 }) => {
  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 텍스트 조각입니다. 역할: 장기 마케팅 또는 법률 문단. 본문 키: alternatives_cta_questions (대안 CTA 질문). | Appflow 비교 / 이주 마케팅 복사본. 역할: 장기 마케팅 또는 법률 문단. 본문 키: appflow_cta_questions (Appflow CTA 질문). | Capawesome 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법률 문단. 본문 키: capwesome_cta_questions (Capwesome CTA 질문). | 컨설팅 서비스 페이지에서 HTML 텍스트 조각입니다. 역할: 섹션 서브 타이틀 또는 태그 라인. 본문 키: consulting_faq_subtitle (컨설팅 FAQ 서브 타이틀). | Appflow 비교 / 이주 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 본문 키: 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__ tailwind-capacitor On npm)에서 제공하는 npm safe-areas Capacitor와 Capacitor-친화적인 Tailwind 플러그인

bun add -D tailwind-capacitor

In src/app.css:

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

SvelteKit 프로젝트에 사용할 수 있는 유용한 __CAPGO_KEEP_0__ pt-safe, pb-safe, px-safe __CAPGO_KEEP_0__ 대신 env(safe-area-inset-*) __CAPGO_KEEP_0__ open a PR on GitHub.

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면

viewport 태그를 수정하거나 __CAPGO_KEEP_0__ overflow-x: hidden viewport meta 태그가 올바르게 적용되었는지 확인하세요

Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

In src/app.html, <head>:

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

iOS 안전 영역을 한 번에 처리하기

모바일 앱을 만들 때, iOS 안전 영역을 처리하는 방법

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

앱의 모든 콘텐츠를 한 번에 처리하는 방법 .app-shell.

안전 영역을 여러 개의 컴포넌트에 적용하면 UI가 잘린 것처럼 보거나 너무 크게 보인다. @capgo/tailwind-capacitor, pt-safe pb-safe px-safe Tailwind CSS의 유틸리티를 사용하여 안전 영역을 한 번에 처리할 수 있다.

Set Capacitor iOS contentInset Live Update 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-screen안전 영역 패딩이 중복되거나 고정 너비의 컨테이너에서 오는 것이 아니라 viewport meta 태그 자체에서 오는 것이 아니다.

결론

Capacitor은 기존 웹 프로젝트에 기반한 code을 빌드하는 데 있어 훌륭한 옵션입니다. existing web project에 기반한 code을 빌드하는 데 있어 훌륭한 옵션입니다.

그리고 __CAPGO_KEEP_0__을 추가함으로써 Capgo컨텍스트: Capgo UI의 더 긴 문자열에서 HTML 텍스트 프래그먼트 (부모 키 `submitting_a_pr_to_capgo`). 페이지/영역: Capgo 마케팅 웹사이트. 역할: 웹사이트 복사본. Seen in: contributing.astro 페이지. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지.

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를 사용하여 더 빠르게 더 나은 앱을 빌드하는 방법을 배워보세요. 자유 계정으로 가입하세요. today.

Building Mobile Apps with SvelteKit and Capacitor

만약 당신이 사용 중이라면 Building Mobile Apps with SvelteKit and Capacitor CI/CD 자동화 계획을 계속하기 위해 __CAPGO_KEEP_0__와 연결하세요 Capgo CI/CD Capgo CI/CD에서 제품 워크플로우 Capgo Native Builds Capgo Native Builds에서 제품 워크플로우 Capgo Integrations Capgo Integrations에서 제품 워크플로우 CI/CD 통합 CI/CD 통합에서 구현 세부 정보 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항