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

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

Capacitor는 SvelteKit 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있는 기능을 제공하며, 네이티브 모바일 앱을 개발할 필요가 없으며, React Native와 같은 새로운 기술을 학습할 필요가 없습니다.

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

Capacitor에 대해 알아보세요.

__CAPGO_KEEP_0__은 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이저입니다! 애플리케이션을 네이티브 웹뷰로 wrapping하고 Xcode 및 Android Studio 프로젝트를 생성하는 데 native device 기능에 대한 접근을 제공하는 플러그인을 제공합니다. 예를 들어, 카메라를 사용하는 JavaScript bridge를 통해.

Capacitor은 복잡한 설정이나 steep learning curve가 없는 네이티브 모바일 앱을 만들 수 있게 해줍니다. API이 가볍고 Capacitor로 streamlined된 기능을 제공하여 프로젝트에 쉽게 통합할 수 있습니다.

SvelteKit 앱을 준비하세요.

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

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

명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더가 보일 것입니다. build 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다. dist __CAPGO_KEEP_0__을 SvelteKit 앱에 추가하세요.

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

Adding Capacitor to Your SvelteKit App

This folder will be used by __CAPGO_KEEP_0__ later, but for now, we need to set it up correctly. sync 명령어.

먼저, Capacitor CLI 프로젝트 내에서 개발 의존성으로 설치하고 설정하세요. 설정 중에 이름과 번들 ID에 대한 기본값을 수락하려면 “엔터” 키를 누르세요.

다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치하세요.

마지막으로, 플랫폼을 추가하고 Capacitor는 프로젝트의 루트 디렉토리에 각 플랫폼을 위한 폴더를 생성할 것입니다:

# 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

이 시점에서, SvelteKit 프로젝트 내에서 새로운 ios 및 android 폴더를 볼 수 있을 것입니다.

이것은 실제 네이티브 프로젝트입니다!

앱을 나중에 Android 프로젝트에 접근하려면 Android Studio를 설치해야 합니다. iOS의 경우 Mac가 필요하고.

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 시 사용되는 기본 capacitor 설정들이 포함되어 있습니다. 주의할 것은 웹 디렉토리 경로인 "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

정적 어댑터를 사용한 svelte.config.js 파일을 업데이트한 후, 우리는 prerender 옵션을 추가하기 위해 +layout.js 페이지를 생성해야 합니다. src/routes 그리고 다음 export을 추가하세요: mobile 플랫폼을 추가하고 프로젝트를 다시 빌드하여 build 폴더를 생성한 후에:

export const prerender = true

페이지를 추가하고 업데이트 한 후에, 우리의 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 build 폴더를 생성해야 합니다. build 폴더 다음 명령어를 실행하여 할 수 있습니다. 첫 번째 명령어는 SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사합니다.

두 번째 명령어는

npm run build
npx cap sync

웹 __CAPGO_KEEP_0__을 native 플랫폼의 올바른 위치로同步합니다. npm run build 이러한 웹 __CAPGO_KEEP_0__은 앱에서 표시되도록합니다. npx cap sync The second command will sync all the web code into the right places of the native platforms so they can be displayed in an app.

그리고 sync 명령어는 native 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때, 다시 실행해야 합니다.이것을 모르고 있으면 프로세스를 완료한 것입니다. 따라서 기기를 통해 앱을 확인해 보세요. npx cap sync Build and Deploy Native Apps

iOS 앱을 개발하려면

Xcode

를 설치해야 하며 Android 앱을 개발하려면 Android Studio 를 설치해야 합니다. 또한 앱 스토어에서 앱을 배포하려면 iOS에서는 Apple Developer Program에 가입하고 Android에서는 Google Play Console에 가입해야 합니다. native 모바일 개발에 새로운 사람이라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 사용하여 쉽게 native 프로젝트를 열 수 있습니다. Build and Deploy Native Apps

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 android

native 프로젝트를 설정한 후, 연결된 장치에 앱을 배포하는 것은 쉽습니다. Android Studio에서, 모든 것이 준비되기를 기다리면, 설정을 변경하지 않고도 연결된 장치에 앱을 배포할 수 있습니다. 예를 들어, 다음과 같습니다.

android-studio-run

Xcode에서, 실제 장치에 앱을 배포하기 위해 서명 계정을 설정해야 합니다. 만약 이 과정을 이전에 수행하지 않았다면, Xcode는 개발자 프로그램에 등록되어야 한다는 것을 안내해 줍니다. 그 후, 연결된 장치에서 앱을 실행하기 위해 단지 플레이 버튼을 클릭하면 됩니다. 연결된 장치 선택은 위쪽에서 가능합니다. 예를 들어, 다음과 같습니다.

xcode-run

성공적으로 모바일 장치에 SvelteKit 웹 앱을 배포했습니다. 예를 들어, 다음과 같습니다.

하지만, 개발 중에는 더 빠른 방법도 있습니다...

Capacitor Live Reload

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

로컬 호스트 애플리케이션에 대한 접근 권한을 활성화하여 Live Reload를 사용하세요. On 네트워크에서 Capacitor 앱이 특정 URL에서 콘텐츠를 로드하는 것을 허용함으로써.

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

ipconfig getifaddr en0

Windows에서 실행:

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;

예시에서 보여진 것과 같이, 올바른 IP 주소와 포트 번호를 사용하십시오. 이제 이러한 변경 사항을 우리의 네이티브 프로젝트에 적용할 수 있습니다:__CAPGO_KEEP_0__

The

npx cap copy

The copy 명령은 sync, 하지만 웹 폴더의 변경 사항과 설정만 복사합니다. Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후,

앱이 자동으로 다시 로드되고 변경 사항을 표시합니다. 주의하십시오, 새로운 플러그인인 카메라를 설치하는 경우,

native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. native 파일을 변경할 수 없습니다.

정확한 IP와 포트를 사용하여 설정을 구성하십시오. 위의 code 블록은 SvelteKit의 기본 포트를示しています.

Capacitor 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이를 수행하려면, 몇 번 언급한 것처럼, 간단한 플러그인을 설치할 수 있습니다. 이를 위해 다음 명령어를 실행하세요:

npm i @capacitor/share

이런 특별한 기능도 없지만, native share dialog을 표시합니다! 공유 플러그인함수만 호출하면 됩니다. share() src/routes/index.svelte 새로운 플러그인을 설치할 때, sync operation을 수행하고 앱을 다시 배포해야 합니다. 이 명령어를 실행하세요.

<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 share dialog이 작동할 것입니다!

npx cap sync

iOS와 Android에서 앱이 더 자연스럽게 보이도록 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있습니다.

자연스러운 UI와 Capgo 네이티브 네비게이션 및 전환

I've worked for years with Ionic I've worked for years with Ionic cross-platform 애플리케이션을 만들기 위해, 그러나 SvelteKit과 통합하는 것은 해시하고 거의 가치가 없을 때 이미 가지고 있는 Tailwind CSS.

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

@capgo/capacitor-native-navigation — native navbar, iOS에서 Liquid Glass tab bar, Android에서 흐린 tab bar 스타일. 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 tab bar (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>

라우트된 페이지를 wrapping하세요. 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 (publiched as tailwind-capacitor On npm). It provides safe-areas Capacitor와 호환되는 유틸리티 및 기타 Tailwind 플러그인:

bun add -D tailwind-capacitor

In src/app.css:

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

__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 또는 가로 스크롤이 가능하다면

뷰포트 태그를 더 추가하거나 조정하는 것만으로는 문제를 해결할 수 없다. overflow-x: hidden 다음 순서대로 이러한 체크를 진행하십시오.

뷰포트 메타 태그가 올바르게 적용되었는지 확인하십시오.

In src/app.html, viewport meta 태그를 설정하세요. <head>:

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

iOS 안전 영역을 처리하기 위해 루트 wrapper에서만 사용하세요.

싱글 앱 셸을 생성하고 안전 영역 패딩을 적용하세요. 여러 중첩된 컴포넌트에서 적용하지 마세요:

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헤더, 모달, 레이아웃 wrapper에 중복된 안전 영역 패딩을 적용하면 UI가 잘린 것처럼 보거나 너무 크게 보입니다.

그리고 @capgo/tailwind-capacitor와 같은 유틸리티를 사용하여 동일한 셸에서 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe iOS

안전 영역을 Capacitor로 설정하세요. `contentInset` safe area `never` 첫 번째

In capacitor.config.ts, native inset을 비활성화하고 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 하세요. contentInsetMode: 'css'Tailwind CSS와 __CAPGO_KEEP_0__의 자동 콘텐츠 inset을 혼합하는 것은 일반적인 두 배 간격의 원인입니다.

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-*) 일반적으로 원인은 요소가 Tailwind CSS, 고정 픽셀 너비, 또는 큰

Safari Web Inspector에서 실행하세요:

Tailwind CSS의 경우 100vwTailwind CSS를 사용하여 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,
  }));

With Tailwind, replace w-screen __CAPGO_KEEP_0__ w-full __CAPGO_KEEP_0__ 100vw / w-screen__CAPGO_KEEP_1__

__CAPGO_KEEP_0__

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__CAPGO_KEEP_0__

Capgo

Capgo __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

Building Mobile Apps with SvelteKit과 Capacitor

__CAPGO_KEEP_0__을 사용 중이라면 Building Mobile Apps with SvelteKit과 Capacitor CI/CD 자동화 계획을 위해 연결하세요. Capgo CI/CD Capgo CI/CD에서 제품 워크플로우를 위해 Capgo Native Builds Capgo Native Builds에서 제품 워크플로우를 위해 Capgo Integrations Capgo Integrations에서 제품 워크플로우를 위해 CI/CD 통합 CI/CD 통합 구현 세부 사항을 위해 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항에 대해.

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

Capacitor에 대해 알아보세요.

SvelteKit 앱을 준비하세요.

Adding Capacitor to Your SvelteKit App

Xcode

Capacitor Live Reload

Capacitor 플러그인 사용

Native-feeling UI with Capgo Native Navigation and Transitions

Tailwind에서 안전한 영역

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

뷰포트 메타 태그가 올바르게 적용되었는지 확인하십시오.

iOS 안전 영역을 처리하기 위해 루트 wrapper에서만 사용하세요.

안전 영역을 Capacitor로 설정하세요. `contentInset` safe area `never` 첫 번째

Safari Web Inspector에서 실행하세요:

__CAPGO_KEEP_0__

Building Mobile Apps with SvelteKit과 Capacitor

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

Capacitor에 대해 알아보세요.

SvelteKit 앱을 준비하세요.

Adding Capacitor to Your SvelteKit App

Xcode

Capacitor Live Reload

Capacitor 플러그인 사용

Native-feeling UI with Capgo Native Navigation and Transitions

Tailwind에서 안전한 영역

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

뷰포트 메타 태그가 올바르게 적용되었는지 확인하십시오.

iOS 안전 영역을 처리하기 위해 루트 wrapper에서만 사용하세요.

안전 영역을 Capacitor로 설정하세요. contentInset safe area never 첫 번째

Safari Web Inspector에서 실행하세요:

__CAPGO_KEEP_0__

Building Mobile Apps with SvelteKit과 Capacitor

안전 영역을 Capacitor로 설정하세요. `contentInset` safe area `never` 첫 번째