Angular와 Capacitor를 사용하여 모바일 앱을 빌드하는 방법

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

Capacitor는 Angular 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 것을 쉽게 허용합니다. 네이티브 모바일 앱으로 변환하는 데 필요한 수정 사항이나 새로운 기술을 배우지 않아도 됩니다.

Angular 애플리케이션의 대부분은 몇 가지 단순한 단계만으로 모바일 앱으로 변환할 수 있습니다.

이 튜토리얼에서는 새로운 Angular 앱에서 시작하여 Capacitor를 사용하여 네이티브 모바일 앱 영역으로 전환하는 과정을 안내합니다. Capgo 네이티브 네비게이션, 전환 및 tailwind-capacitor를 사용하여 안전한 영역을 사용할 수 있습니다.

Capacitor에 대해 알아보기

CapacitorJS는 게임 체이저입니다! 웹 프로젝트에 쉽게 통합할 수 있으며, 네이티브 웹뷰로 애플리케이션을.wrap하고, 네이티브 Xcode 및 Android Studio 프로젝트를 생성합니다. 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.

Capacitor으로는 훌륭한 네이티브 모바일 앱을 간단한 설정이나 steep 학습 곡선 없이 얻을 수 있습니다. 그들의 얇은 API와 streamlined 기능이 프로젝트에 통합하기 위해 그것을 쉽게 통합하는 것을 만듭니다. 믿을 수 있듯이, Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 달성하는 것은 얼마나 쉬운지 놀랄 것입니다!

앵귤러 앱 준비

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

ng new my-app
cd my-app

앵귤러 버전을 선택할 때 "앵귤러"를 선택하세요.

네이티브 모바일 앱을 만들기 위해 프로젝트의 export 가 필요합니다. 따라서, 프로젝트의 package.json 에 간단한 스크립트를 포함하여 프로젝트를 빌드하고 복사할 수 있도록 하세요.

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더를 찾을 수 있습니다. buildexport dist package.json

이 폴더는 나중에 Capacitor에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.

Capacitor을 Angular 앱에 추가하는 방법

모바일 네이티브 컨테이너로 웹 앱을 패키징하려면 몇 가지 초기 단계를 따르면, 나중에 단일 명령어만 실행하면 됩니다. sync 첫째로, 우리는 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID의 기본값을 수락하려면 “엔터” 키를 누를 수 있습니다.

다음으로, iOS와 Android 플랫폼에 관련된 패키지를 설치해야 합니다. Capacitor CLI 이 시점에서, iOS와 Android 플랫폼의 폴더를 관찰할 수 있어야 합니다.

ios

and Capacitor은 iOS와 Android 플랫폼을 위한 폴더를 생성합니다.

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Angular 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

__CAPGO_KEEP_0__은 iOS와 Android 플랫폼을 위한 폴더를 생성합니다. __CAPGO_KEEP_0__은 iOS와 Android 플랫폼을 위한 폴더를 생성합니다. __CAPGO_KEEP_0__은 iOS와 Android 플랫폼을 위한 폴더를 생성합니다. 안드로이드 Angular 프로젝트의 폴더입니다.

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

앱을 나중에 액세스하려면 Android Studio을 설치해야합니다. iOS의 경우 Mac가 필요하고.

Xcode capacitor.config.ts Capacitor.config.ts 파일을 프로젝트에서 찾으십시오. 이 파일에는 Sync 중에 사용되는 기본 __CAPGO_KEEP_0__ 설정이 포함되어 있습니다. 주의할 것은webDir

이 문제를 해결하기 위해 capacitor.config.json 파일을 열고 webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

다음 명령어를 실행하여 테스트해 보세요.

npm run build
npx cap sync

첫 번째 명령어는 npm run build Angular 프로젝트를 빌드하고 정적 빌드를 복사합니다. 두 번째 명령어는 npx cap sync 웹 code을 모든 네이티브 플랫폼의 올바른 위치에同步시켜 앱에서 표시할 수 있도록합니다.

그리고 sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 Capacitor 플러그인을 설치하면 다시 실행해 주세요. npx cap sync __CAPGO_KEEP_0__ 플러그인을 설치하면

알고 계시지 않아도 이제 실제로 완료되었습니다. 이제 기기에서 앱을 보러 가 봅시다!

자연스럽게 네이티브 앱을 빌드하고 배포하세요.

iOS 앱을 개발하려면 Xcode가 설치되어 있어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어 있어야 합니다. 또한 앱 스토어에서 앱을 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. Xcode Android Studio 네이티브 모바일 개발에 새로운 사람이라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 사용하여 쉽게 네이티브 프로젝트를 모두 열 수 있습니다. 네이티브 프로젝트를 설정한 후 기기와 연결된 기기에서 앱을 배포하는 것은 쉽습니다. Android Studio에서는 설정을 변경하지 않고 기기와 연결된 기기를 선택하여 앱을 배포할 수 있습니다. 예를 들어:

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

Xcode에서는 실제 기기에서 앱을 배포하려면 서명 계정을 설정해야 합니다. 이 과정을 처음으로 진행한다면 Xcode는 개발자 프로그램에 등록되어 있어야 합니다. 이후에 단순히 플레이 버튼을 클릭하여 기기에서 앱을 실행할 수 있습니다. 기기를 선택할 수 있습니다. 예를 들어:

__CAPGO_KEEP_0__

성공적으로 앵귤러 웹 앱을 모바일 기기에 배포했습니다. 예를 들어,

개발 중에는 더 빠른 방법이 있습니다...

Capacitor Live Reload

모던 프레임워크에서 모두 핫 리로드를 사용해 오신 분이라면, 좋은 소식은 모바일 기기에서도 동일한 기능을 사용할 수 있다는 것입니다. effort! 로컬로 호스팅된 앱에 접근하기 위해 Live Reload를 활성화합니다.

네트워크에서 __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요. by having the Capacitor app load the content from the specific URL.

Windows에서 :를 실행하세요.

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:4200',
    cleartext: true
  }
};

export default config;

__CAPGO_KEEP_0__을 사용할 때는 올바른 IP 주소와 포트를 사용하십시오. 이 예에서는 기본 Angular 포트를 사용했습니다.이제 이러한 변경 사항을 적용할 수 있습니다. 이를 위해 native 프로젝트로 복사하십시오.

__CAPGO_KEEP_0__을 사용할 때는

npx cap copy

__CAPGO_KEEP_0__과 유사한 명령어입니다. 그러나 이 명령어는 웹 폴더와 구성만 업데이트하며 native 프로젝트를 업데이트하지 않습니다. copy __CAPGO_KEEP_0__ sync__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 Angular app, 앱이 자동으로 다시 로드되고 변경 사항을 보여주게 됩니다. 주의하십시오,

새로운 플러그인(예: 카메라) 설치 시에도 native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. 이러한 작업은 즉시 수행할 수 없습니다.

설정에서 올바른 IP와 포트를 사용해야 합니다. 위의 code 블록은 Angular 기본 포트를示唆하기 위해 사용됩니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이를 위해 우리는 이전에 몇 번 언급한 적이 있는 간단한 플러그인을 설치할 수 있습니다.

npm i @capacitor/share

Share 플러그인은 특별한 기능이 없지만 그래도 native 공유 대화상을 표시합니다. 이것을 위해 우리는 이제 플러그인을 임포트하고 앱에서 호출할 수 있는 함수를 호출하면 됩니다. 따라서 앱을 변경해 보겠습니다.function from our app, so let’s change the share() function from our app, so let’s change the Korean 이전에 설명한 것과 같이 새로운 플러그인을 설치할 때, sync 작업을 수행하고 앱을 다시 장치에 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요.

import { Component } from '@angular/core';
import { Share } from '@capacitor/share';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';

  async share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
}

버튼을 클릭한 후, 아름다운 네이티브 공유 대화창을 사용할 수 있습니다.

npx cap sync

iOS 및 Android에서 앱을 더 네이티브하게 느끼게 하려면 __CAPGO_KEEP_0__ 네비게이션 및 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려 나가는 문제를 해결하세요.

Capgo 네이티브 네비게이션 및 전환을 사용하여 네이티브-feeling UI를 구현하세요.

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic 을 사용하여 크로스 플랫폼 앱을 개발했지만, Angular와 통합하는 것은 복잡하고 드물게 가치가 있습니다. 이미 Tailwind CSS 를 사용하고 있다면.

Capacitor 앱에서 네이티브 모바일 느낌을 구현하려면 Capgo 플러그인을 사용하세요. 웹 전용 UI 키트인 Konsta UI 대신.

• @capgo/capacitor-native-navigation — 네이티브 네비게이션 바, Liquid Glass 탭 바를 iOS에서, Android에서 블러드된 탭 바 스타일을 지원합니다. Angular 라우터는 경로 상태를 유지하고; 플러그인은 네이티브 창을 소유합니다.
• @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 배경을 사용합니다):

import { inject } from '@angular/core';
import { Router } from '@angular/router';

const router = inject(Router);

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 }) => {
  router.navigate([`/${id}`]);
});

Add native page transitions in your app shell:

```typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-router-outlet #outlet platform="auto" swipe-gesture="auto">
      <router-outlet></router-outlet>
    </cap-router-outlet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('outlet') outlet?: ElementRef<HTMLElement>;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    if (this.outlet?.nativeElement) {
      setupRouterOutlet(this.outlet.nativeElement, { platform: 'auto', swipeGesture: 'auto' });
    }
  }

  openSettings() {
    setDirection('forward');
    this.router.navigate(['/settings']);
  }
}

라우팅된 페이지를 cap-router-outlet, cap-page, cap-content, setDirection('forward') , setDirection('back') ,

, @capgo/capacitor-native-navigation 및 @capgo/capacitor-transitions.

Tailwind에서 디바이스 안전 영역

Tailwind CSS에서 디바이스 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__에서 발표됨). Tailwind CSS에서 제공하는 __CAPGO_KEEP_0__-친화적인 유틸리티 및 플러그인: tailwind-capacitor on npm). It provides safe-areas Capacitor-친화적인 유틸리티를 사용하십시오:

bun add -D tailwind-capacitor

__CAPGO_KEEP_0__-friendly utilities such as src/styles.css:

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

__CAPGO_KEEP_0__-friendly utilities, and pt-safe, pb-safe__CAPGO_KEEP_0__-friendly utilities, and px-safe __CAPGO_KEEP_0__ env(safe-area-inset-*) Angular 환경에서 사용할 수 없는 기능이 있다면 GitHub에 PR을 열어보세요..

iOS 레이아웃 문제 해결 (뷰포트, 안전 영역, 가로 스크롤)

iOS에서 콘텐츠가 잘려나가거나-shifted되거나 가로 스크롤이 가능하다면 overflow-x: hidden 뷰포트 태그를 수정하거나 추가하는 것만으로는 해결되지 않는다. 이러한 체크를 순서대로 진행하세요.

뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요.

뷰포트 메타 태그를 src/index.htmliOS의 안전 영역을 한 개의 루트 wrapper에서만 처리하세요. <head>:

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

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

페이지 콘텐츠를 모두 wrapper 내에 감싸세요.

html,
body,
app-root {
  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-shell. 중복된 safe-area 패딩이 헤더, 모달, 레이아웃 wrapper에 적용되어 UI가 잘린 것처럼 보거나 너무 크게 보일 수 있습니다.

With @capgo/tailwind-capacitor, __CAPGO_KEEP_0__와 같은 패딩을 표현할 수 있는 유틸리티를 사용할 수 있습니다. pt-safe pb-safe px-safe on

Set Capacitor iOS contentInset Set __CAPGO_KEEP_0__ iOS never 를

첫 번째로 capacitor.config.tsIn contentInsetMode: 'css',

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__는 기존 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 적합한 옵션으로, __CAPGO_KEEP_1__를 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.

__CAPGO_KEEP_1__

padding이 더블 스페이싱의 일반적인 원인입니다. 100vwFind the real overflowing element w-screenThe usual culprit is an element using min-width.

Tailwind

[...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,
  }));

a fixed pixel width, or a large w-screen In Safari Web Inspector, run: w-full With Tailwind, replace 100vw / w-screenwith

when possible. Many horizontal overflow issues come from

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를 Angular 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요.

Building Mobile Apps with Angular과 Capacitor에서 계속 진행하세요.

__CAPGO_KEEP_0__을 사용하여 Building Mobile Apps with Angular과 Capacitor 를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고 있습니다. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities 를 capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, capgo/capacitor-live-activities 는 capgo/capacitor-live-activities의 네이티브 기능을 위한 것입니다. capgo/capacitor-live-activities의 구현 세부 정보는 @capgo/capacitor-live-activities에 있습니다. Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.