이 튜토리얼에서, 우리는 새로운 SvelteKit 앱에서 시작하여 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. optionally, Capacitor를 사용하여 __CAPGO_KEEP_1__를 통합할 수 있습니다. Capacitor는 SvelteKit 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 데 필요한 수정이나 새로운 기술인 React Native를 배우지 않고도 쉽게 변환할 수 있습니다. __CAPGO_KEEP_0__를 사용하여 SvelteKit 앱을 모바일 앱으로 변환하는 단계별 가이드를 따라서, __CAPGO_KEEP_1__를 사용하여 모바일 UI를 향상시키고 싶다면 Konsta UI를 통합할 수 있습니다. __CAPGO_KEEP_0__에 대해 알아보기
CapacitorJS는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이저입니다. Capacitor는 웹 애플리케이션을 네이티브 웹뷰로 wrapping하고, 네이티브 Xcode 및 Android Studio 프로젝트를 생성하는 데 도움이 됩니다. Capacitor의 플러그인은 자바스크립트 브리지를 통해 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor는 복잡한 설정이나 기울임꼴의 학습 곡선을 필요로 하지 않고도 훌륭한 네이티브 모바일 앱을 만들 수 있습니다. Capacitor의 __CAPGO_KEEP_1__은 프로젝트에 쉽게 통합할 수 있습니다. Capacitor를 사용하여 완전한 네이티브 앱을 만들 수 있습니다.
About Capacitor
새로운 SvelteKit 앱을 만들려면 다음 명령어를 실행하세요:
Capacitor enables you to create a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it easy to integrate into your project. You’ll be amazed at how simple it is to achieve a fully functional native app with Capacitor!
Cloudflare
Capacitor
npm create svelte@latest my-app
cd my-app
npm install
npm run build__CAPGO_KEEP_0__를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더가 보입니다. 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.
첫 번째로, Capacitor __CAPGO_KEEP_1__를 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 “엔터” 키를 누를 수 있습니다.
다음으로, 코어 패키지를 설치하고 iOS 및 Android 플랫폼에 관련된 패키지를 설치합니다. sync 마지막으로, 플랫폼을 추가하고 __CAPGO_KEEP_0__는 프로젝트의 루트 폴더에 각 플랫폼에 대한 폴더를 생성합니다:
__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__를 사용하여 __CAPGO_KEEP_2__를 생성합니다. Capacitor는 CLI를 사용하여 __CAPGO_KEEP_2__를 생성합니다. __CAPGO_KEEP_0__는 __CAPGO_KEEP_1__를 사용하여 __CAPGO_KEEP_2__를 생성합니다.
__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__를 사용하여 __CAPGO_KEEP_2__를 생성합니다.
Capacitor는 __CAPGO_KEEP_1__를 사용하여 __CAPGO_KEEP_2__를 생성합니다.
# 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 폴더가 SvelteKit 프로젝트에 생성되어야 합니다.
이것은 실제 네이티브 프로젝트입니다.
Android 프로젝트에 접근하기 위해서는 Android Studio를 설치해야 합니다. iOS는 Mac에서 사용해야 하며.
Xcode 를 설치해야 합니다. 또한 capacitor.config.ts 프로젝트 내의 파일은 Capacitor 동기화 시 사용되는 기본 설정이 포함되어 있습니다. 동기화 중에 주의해야 할 것은 webDir현재 잘못된 경로로 설정되어 있습니다.
이 문제를 해결하려면 capacitor.config.ts 파일을 열고 webDir:
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-static이제 __CAPGO_KEEP_0__ 설정을 업데이트한 후, Sveltekit 프로젝트를 정적 애플리케이션으로 변경하기 위해 정적 어댑터 패키지를 다운로드하세요. 패키지가 설치된 후, 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파일을 자동 어댑터에서 정적 어댑터로 변경해야 합니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_2__ __CAPGO_KEEP_3__ __CAPGO_KEEP_4__ __CAPGO_KEEP_5__ __CAPGO_KEEP_6__ __CAPGO_KEEP_7__ __CAPGO_KEEP_8__:
export const prerender = true__CAPGO_KEEP_9__ __CAPGO_KEEP_10__ __CAPGO_KEEP_11__ 빌드 폴더
다음 명령어를 실행하여 할 수 있습니다:
npm run build
npx cap sync첫 번째 명령어는 npm run build SvelteKit 프로젝트를 빌드하고 정적 빌드를 복사하며, 두 번째 명령어는 npx cap sync 웹 code을 네이티브 플랫폼의 올바른 위치에同步시켜 앱에서 표시되도록합니다.
그리고 sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로, 새로운 Capacitor 플러그인을 설치할 때는다시 실행해야합니다. npx cap sync 그러나 의식하지 못하고 프로세스를 완료했으니, 이제 기기를 통해 앱을 확인해 보세요!
네이티브 앱 빌드 및 배포
Build and Deploy Native Apps
iOS 앱을 개발하려면 Xcode 를 설치해야하고 Android 앱을 개발하려면 Android Studio 를 설치해야합니다. 또한 앱 스토어에 앱을 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야합니다.
native 모바일 개발에 새로운 사람이라면 Capacitor CLI를 사용하여 쉽게 iOS 및 Android의 native 프로젝트를 열 수 있습니다.
npx cap open ios
npx cap open androidnative 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 쉽습니다. Android Studio에서는 설정을 변경하지 않고도 앱을 연결된 장치에 배포할 수 있습니다. 예를 들어
Xcode에서는 실제 장치에 앱을 배포하려면 서명 계정을 설정해야합니다. 서명 계정을 설정한 적이 없다면 Xcode는 개발자 프로그램에 등록된 경우 개발자 프로그램을 통해 프로세스를 안내해줍니다. 그 후에 단순히 플레이 버튼을 클릭하여 연결된 장치에서 앱을 실행할 수 있습니다. 예를 들어
성공적으로 SvelteKit 웹 앱을 모바일 장치에 배포했습니다. 예를 들어
하지만 개발 중에 더 빠른 방법이 있습니다…
Capacitor Live Reload
이제는 모든 현대 프레임워크에서热 재로드를 사용해 보셨을 것입니다. 좋은 소식은 __CAPGO_KEEP_0__와 같은 기능성을 휴대용 장치에서 최소한의 노력으로도 얻을 수 있다는 것입니다.
로컬로 호스팅 된 애플리케이션에 대한 접근 권한을 활성화하여 네트워크에서 Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요.
첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우 터미널에서 다음 명령어를 실행하여 이를 알아내실 수 있습니다.
ipconfig getifaddr en0윈도우즈에서 실행하세요.
ipconfig그런 다음 IPv4 주소를 찾으세요.
Capacitor를 서버에서 직접 앱을 로드하도록 지시하기 위해, 우리의 설정에 추가 항목을 추가하세요. capacitor.config.ts file:
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__와 __CAPGO_KEEP_1__을 정확하게 입력하세요.예시와 같이 표시된 __CAPGO_KEEP_0__와 __CAPGO_KEEP_1__을 사용하세요.
이제 이러한 변경 사항을 원시 프로젝트로 복사할 수 있습니다.
npx cap copy명령어는 __CAPGO_KEEP_0__과 __CAPGO_KEEP_1__을 __CAPGO_KEEP_2__으로 업데이트하지 않고 copy 웹 폴더와 설정만 __CAPGO_KEEP_3__합니다. syncAndroid Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, Svelte 앱에서 __CAPGO_KEEP_0__을 변경하면 앱은 자동으로 __CAPGO_KEEP_4__됩니다. __CAPGO_KEEP_0__
__CAPGO_KEEP_0__는 __CAPGO_KEEP_5__과 __CAPGO_KEEP_6__과 유사합니다. __CAPGO_KEEP_0__는 __CAPGO_KEEP_7__만 __CAPGO_KEEP_8__합니다. and show the changes!
주의하십시오 이러한 카메라와 같은 새로운 플러그인을 설치할 경우, native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. 이 작업은 실시간으로 수행할 수 없습니다.
정확한 IP와 포트를 사용하여 구성해야 합니다. code 블록은 데모를 위해 기본 SvelteKit 포트를 보여주고 있습니다.
Capacitor 플러그인 사용
Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 몇 번 언급한 바 있습니다. 이를 수행하려면 다음 명령어를 실행하여 간단한 플러그인을 설치할 수 있습니다.
npm i @capacitor/shareShare 플러그인은 특별한 기능이 없지만 native 공유 대화상을 표시합니다!이제는 플러그인을 임포트하고 앱에서 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>이전에서 언급한 바와 같이 새로운 플러그인을 설치할 때, 동기화 작업을 수행하고 앱을 다시 장치에 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요.
npx cap sync버튼을 클릭한 후, 아름다운 네이티브 공유 대화 상자를 사용할 수 있습니다!
Konsta UI 추가
Nuxt 3 앱에서 Konsta UI를 사용하려면 tailwind이 이미 설치되어 있어야 합니다. 및 패키지를 설치하려면:
npm i konsta추가로, tailwind.config.js 파일을 수정해야 합니다:
// 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 Konsta UI를 사용하기 위해 기본(또는 커스텀) Tailwind CSS 설정을 확장하여 필요한 추가 변형 및 도우미 유틸리티를 추가합니다.
이제 메인 App 컴포넌트를 설정하여 글로벌 파라미터를 설정할 수 있습니다(예를 들어, theme).
웹 앱 전체를 wrapping해야 합니다. App Capacitor src/routes/+layout.svelte:
<script>
import { App } from 'konsta/svelte';
</script>
<App theme="ios">
<slot />
</App>Example Page
모든 설정이 완료되면, 우리는 SvelteKit 페이지에서 Konsta UI Svelte 컴포넌트를 사용할 수 있습니다.
예를 들어, 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>If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with SvelteKit and Capacitor!
__CAPGO_KEEP_0__
konsta-sveltekit
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__은 기존 웹 프로젝트를 기반으로 하는 네이티브 앱을 빌드하는 데 적합한 옵션입니다. 기존 웹 프로젝트의 UI를 유지하면서 __CAPGO_KEEP_1__을 공유할 수 있는 간단한 방법을 제공합니다. Capgo__CAPGO_KEEP_0__을 앱에 추가하는 것은 더 쉬워졌습니다. 앱 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.
Capgo을 SvelteKit 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요:
Capgo을 사용하여 더 빠르게 더 나은 앱을 빌드하는 방법을 배워보세요. 무료 계정으로 가입하세요. 오늘.
Capacitor을 사용하여 SvelteKit 앱을 빌드하는 방법을 계속 진행하세요.
__CAPGO_KEEP_0__을 사용하는 경우 Capacitor을 사용하여 SvelteKit 앱을 빌드하는 방법 __CAPGO_KEEP_0__ CI/CD Capgo CI/CD Capgo CI/CD Capgo Native Builds Capgo Native Builds를 위한 제품 워크플로우 Capgo Integrations Capgo Integrations를 위한 제품 워크플로우 CI/CD Integration CI/CD Integration의 구현 세부 사항에 대해 GitHub Actions Integration GitHub Actions Integration의 구현 세부 사항에 대해
