이 튜토리얼에서는 새로운 SvelteKit 앱에서 시작하여 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. optionally, Capacitor를 통합할 수도 있습니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__를 사용하여 Tailwind CSS 모바일 UI를 향상시킵니다.
Capacitor는 SvelteKit 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있도록 해주며, 새로운 기술인 React Native를 배울 필요 없이도 큰 수정이나 학습이 필요하지 않습니다.
Capacitor를 사용하여 SvelteKit 앱을 모바일 앱으로 변환하는 단계별 가이드를 따르세요. 또한, 필요할 경우 Konsta UI를 사용하여 모바일 UI를 향상하세요.
Capacitor에 대해 알아보세요.
CapacitorJS는 게임 체이너입니다! 웹 프로젝트에 쉽게 통합할 수 있으며, 네이티브 웹뷰로 애플리케이션을 wrapping하고, 네이티브 Xcode 및 Android Studio 프로젝트를 생성할 수 있습니다. 플러그인은 JavaScript 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor는 복잡한 설정이나 기울임꼴의 학습 곡선을 필요로 하지 않습니다. API가 얇고 Capacitor가 간소화되어 프로젝트에 쉽게 통합할 수 있습니다. Capacitor를 사용하여 놀랍도록 간단하게 네이티브 모바일 앱을 만들 수 있습니다.
SvelteKit 앱을 준비하세요.
새로운 SvelteKit 앱을 만들려면 다음 명령어를 실행하세요.
npm create svelte@latest my-app
cd my-app
npm install
npm run build명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더가 보일 것입니다. build __CAPGO_KEEP_1__ dist __CAPGO_KEEP_2__
이 폴더는 나중에 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 androidandroid ios android 안드로이드 SvelteKit 프로젝트의 폴더들.
이것은 실제 네이티브 프로젝트입니다!
애플리케이션을 나중에 액세스하기 위해 안드로이드 프로젝트에 접근하려면 안드로이드 스튜디오를 설치해야 합니다.. iOS의 경우 Mac가 필요하고 Xcode를 설치해야 합니다. 또한 프로젝트에서.
__CAPGO_KEEP_0__.config.ts 파일을 찾으셔야 합니다. 이 파일에는 Sync 단계에서 사용되는 기본적인 capacitor 설정이 포함되어 있습니다. Sync 단계에서 주의해야 할 것은 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__
이 문제를 해결하려면 capacitor.config.ts 파일을 열고 __CAPGO_KEEP_0__.config.ts:
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-staticwebDir 설정을 업데이트 한 후, 우리의 __CAPGO_KEEP_0__
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설정을 업데이트 한 후, Sveltekit 프로젝트를 정적 애플리케이션으로 변경하기 위해 정적 어댑터 패키지를 다운로드하세요: 패키지가 설치된 후, svelte.config.js 파일을 자동 어댑터에서 정적으로 변경해야 합니다: 옵션을 생성하기 위해 + layout.js 페이지를 src/routes 그리고 다음 export을 layout.js에 추가하세요. layout.js에 추가하고 업데이트 한 후에 페이지를:
export const prerender = truelayout.js 페이지를 추가하고 업데이트 한 후에, 모바일 플랫폼을 추가하고 프로젝트를 다시 빌드하여 build 폴더 다음 명령어를 실행하여 할 수 있습니다.
build
npm run build
npx cap sync첫 번째 명령어 npm run build 첫 번째 명령어는 SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사하며, 두 번째 명령어는 웹 __CAPGO_KEEP_0__을 네이티브 플랫폼의 올바른 위치에同步시켜 앱에서 표시할 수 있도록 합니다. npx cap sync 또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 code 플러그인을 설치할 때 다시 Sync 명령어를 실행해야 합니다.
이미 알지 못했던 채로 프로세스를 완료했습니다. 이제 장치에서 앱을 확인해 보세요! Capacitor pluginsiOS 앱을 개발하려면 Xcode가 설치되어야 하며, Android 앱을 개발하려면 Xcode가 설치되어야 합니다. npx cap sync Xcode
Xcode
Xcode
Xcode Xcode Xcode Android Studio가 설치되어 있습니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. Capacitor를 사용하여 native 모바일 개발에 새로운 입문자라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 쉽게 열 수 있습니다.
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 androidandroid-studio-run
xcode-run
sveltekit-mobile-app
__CAPGO_KEEP_0__ Live Reload
이제 modern 프레임워크에서 모두 사용할 수 있는 hot reload 기능을 사용해 보셨을 것입니다. 좋은 소식은 Capacitor Live Reload과 같은 기능을 사용할 수 있다는 것입니다.
__CAPGO_KEEP_0__ 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__를 사용할 때 정확한 IP 주소와 포트를 사용하십시오., __CAPGO_KEEP_0__.
이러한 변경 사항을 적용하려면, __CAPGO_KEEP_0__ 프로젝트로 복사하세요.
npx cap copy명령어 copy 명령어와 유사하지만, __CAPGO_KEEP_0__ 폴더와 설정만 복사하고, __CAPGO_KEEP_0__ 프로젝트를 업데이트하지 않습니다. syncAndroid Studio 또는 Xcode를 통해 앱을 다시 배포하세요. 그 후, __CAPGO_KEEP_0__ 앱에서 변경 사항을 수정하면, 앱은 자동으로 다시 로드되고 변경 사항을 보여줍니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 프로젝트를 다시 빌드해야 하는 이유는 __CAPGO_KEEP_0__ 파일이 변경되었기 때문입니다. __CAPGO_KEEP_0__는 실시간으로 처리할 수 없습니다.
You can now deploy your app one more time through Android Studio or Xcode. After that, if you change something in your Svelte app, the app will automatically reload and show the changes!
Keep in mind that if you install new plugins such as the camera, it still requires a rebuild of your native project. This is because native files are changed, and it can’t be done on the fly.
code IP 및 포트를 올바르게 사용하세요. code 블록 위에 표시된 것은 SvelteKit 기본 포트를 데모 목적으로 보여주기 위해 사용됩니다.
Capacitor 플러그인 사용
Capacitor 플러그인을 실제로 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 언급한 적이 몇 번이나 있지만, 간단한 플러그인을 설치하기 위해 다음 명령어를 실행하세요.
npm i @capacitor/share__CAPGO_KEEP_0__ 플러그인은 특별한 기능도 없지만, native share dialog을 표시합니다! 이 경우에만 패키지를 임포트하고 해당 함수를 앱에서 호출하면 됩니다. 따라서, src/routes/index.svelte을 다음으로 변경하세요: share() 플러그인을 설치할 때마다 sync 연산을 수행하고 앱을 다시 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요: 버튼을 클릭한 후, 아름다운 native share dialog을 실제로 사용할 수 있습니다! Konsta UI를 추가하세요
<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>__CAPGO_KEEP_0__
npx cap sync__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
Nuxt 3 앱에서 Konsta UI를 사용하려면 __CAPGO_KEEP_0__이 이미 설치되어 있어야 합니다. 그리고 다음 패키지를 설치해야 합니다:
npm i konsta추가로, __CAPGO_KEEP_1__ 파일을 수정해야 합니다: tailwind.config.js __CAPGO_KEEP_2__는 기본 (또는 사용자 정의) Tailwind CSS 설정에서 일부 추가 변형 및 도우미 유틸리티를 확장합니다.
// import konstaConfig config
const konstaConfig = require('konsta/config')
// wrap config with konstaConfig config
module.exports = konstaConfig({
content: [
'./src/routes/**/*.{svelte}',
'./src/components/**/*.{svelte}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig 이제 메인
__CAPGO_KEEP_3__ 컴포넌트를 설정하여 전역 매개변수 (예를 들어 __CAPGO_KEEP_4__를 설정해야 합니다. theme).
__CAPGO_KEEP_5__를 앱의 모든 부분에 적용하려면 App __CAPGO_KEEP_6__를 사용해야 합니다. src/routes/+layout.svelte:
<script>
import { App } from 'konsta/svelte';
</script>
<App theme="ios">
<slot />
</App>__CAPGO_KEEP_7__
설정이 모두 완료되면, 우리는 Konsta UI Svelte 컴포넌트를 SvelteKit 페이지에서 사용할 수 있습니다.
예를 들어, src/routes/index.svelte 를 열고
<script>
import {
Page,
Navbar,
Block,
Button,
List,
ListItem,
Link,
BlockTitle,
} from 'konsta/svelte';
</script>
<Page>
<Navbar title="My App" />
<Block strong>
<p>
Here is your SvelteKit & Konsta UI app. Let's see what we have here.
</p>
</Block>
<BlockTitle>Navigation</BlockTitle>
<List>
<ListItem href="/about/" title="About" />
<ListItem href="/form/" title="Form" />
</List>
<Block strong class="flex space-x-4">
<Button>Button 1</Button>
<Button>Button 2</Button>
</Block>
</Page>모든 필요한 컴포넌트를 설치한 후 live reload가 동기화되지 않으면 다시 시작해 보세요. 그 후에, SvelteKit와 Capacitor를 사용하여 모바일 앱을 만들 수 있습니다.
결과로 다음 페이지를 볼 수 있습니다:
결론
Capacitor은 기존 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. existing web project의 code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.
그리고 __CAPGO_KEEP_0__를 추가함으로써, 앱에 실시간 업데이트를 추가하는 것이 thậm chí 더 쉬워졌습니다. 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다. Capgo를 SvelteKit 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요:live updates
If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:
Capgo을 사용하여 더 나은 앱을 더 빠르게 빌드하는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.
