Angular와 Capacitor을 사용한 모바일 앱 개발

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

Capacitor은 Angular 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있도록 해주며, React Native와 같은 새로운 기술을 학습하거나สำคัญ한 수정이 필요하지 않습니다.

With just a few simple steps, most Angular applications can be transformed into mobile apps.

This tutorial will guide you through the process, starting with a new Angular app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

Capacitor에 대해 알아보기

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

Capacitor를 사용하면 복잡한 설정이나 steep learning curve가 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API가 매우 얇고 Capacitor의 기능이 streamlined되어 프로젝트에 쉽게 통합할 수 있습니다.

Angular 애플리케이션 준비하기

새로운 Angular 애플리케이션을 만들려면 다음 명령어를 실행하세요.

ng new my-app
cd my-app

Angular 버전을 선택할 때 'Angular'를 선택하세요.

네이티브 모바일 앱을 만들려면 프로젝트의 export 가 필요합니다. 따라서, package.json에 간단한 스크립트를 포함해 보겠습니다. __CAPGO_KEEP_0__ Angular 프로젝트를 만들고 복사할 수 있는 것을 사용할 수 있습니다.

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

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

이 폴더는 Capacitor에 의해 나중에 사용되지만 현재는 올바르게 설정해야 합니다.

Adding Capacitor to Your Angular App

웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면, 나중에 단일 sync 명령어만 실행하면 됩니다.

첫째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI 다음으로, 코어 패키지와 iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.

__CAPGO_KEEP_0__

마지막으로, 우리는 플랫폼을 추가할 수 있고, Capacitor은 프로젝트의 루트 폴더에 각 플랫폼별 폴더를 생성할 것입니다:

# 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

이 시점에서, 새로운 ios 및 android 폴더를 볼 수 있어야 합니다. Angular 프로젝트에 있습니다.

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

앱디바이스에 설치한 후에 Android 프로젝트에 접근하기 위해서는 Android Studio를 설치해야 합니다. iOS의 경우 Mac가 필요하고 Xcode.

를 설치해야 합니다. 또한, capacitor.config.ts Capacitor.config.ts 파일은 프로젝트에 포함된 기본 Capacitor 설정을 포함하고 있습니다. 이 설정은 동기화 과정에서 사용됩니다. 주의할 것은 webDirwebDir

__CAPGO_KEEP_0__.config.json capacitor.config.json 파일을 열고 webDir 다음 명령어를 실행해 보세요::

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

첫 번째 명령어는

npm run build
npx cap sync

Angular 프로젝트를 빌드하고 정적 빌드를 복사합니다. npm run build 두 번째 명령어는 npx cap sync 웹 code을 네이티브 플랫폼의 올바른 위치로同步합니다.

그리고 sync 명령어는 native 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때마다 다시 실행해야 합니다. __CAPGO_KEEP_0__를 다시 실행하세요. npx cap sync __CAPGO_KEEP_0__를 실행한 후에는 실제로 완료되었습니다. 이제 기기에서 앱을 확인해 보세요.

native 앱 빌드 및 배포

iOS 앱을 개발하려면

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

Capacitor : native iOS 프로젝트를 열기 위한 CLI 명령어입니다.

npx cap open ios
npx cap open android

__CAPGO_KEEP_0__

실기기에서 앱을 실행하는 데 필요한 서명 계정 설정을 완료해야 합니다. 만약 이 과정을 처음으로 진행한다면, Xcode는 개발자 프로그램에 등록되어야 한다는 것을 안내해 줍니다. 이후에, 앱을 연결된 기기에서 실행하기 위해 단순히 play를 클릭하면 됩니다. 기기를 선택할 수 있습니다.

모바일 기기에서 Angular 웹 앱을 성공적으로 배포했습니다.

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

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

export default config;

정확한 IP 주소와 포트 번호를 사용하세요. 이 예에서는 기본 Angular 포트를 사용했습니다.이 변경 사항을 적용하려면, 우리의 네이티브 프로젝트로 복사하세요.

The

npx cap copy

The copy __CAPGO_KEEP_0__ synccommand is similar to but it will only copy over the changes made to the web folder

and configuration, without updating the native project. You can now deploy your app one more time through Android Studio or Xcode. After that, if you change something in your Angular app, the app will automatically reload

and show the changes! Keep in mind

Note that you should use the correct IP and port in your configuration. The code block above shows the default Angular port for demonstration purposes.

Note that you should use the correct IP and port in your configuration. The Capacitor block above shows the default Angular port for demonstration purposes.

Using Capacitor Plugins in Action. Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

이것은 특별한 것이 아니지만, native share dialog을 열 수 있습니다. 공유 플러그인이것을 위해 우리는 이제 패키지를 임포트하고 앱에서 해당 함수를 호출하면 됩니다. share() src/app/app.component.ts 이전에도 언급했듯이 새로운 플러그인을 설치할 때, sync operation을 수행하고 앱을 다시 배포해야 합니다. 이 명령어를 실행하시면 됩니다.

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

버튼을 클릭하시면 native share dialog이 작동할 수 있습니다.

npx cap sync

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

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

Native-feeling UI with Capgo Native Navigation and Transitions

years with __CAPGO_KEEP_0__ years with __CAPGO_KEEP_0__ To cross-platform 애플리케이션을 만들기 위해, Angular와 통합하는 것은 헛갈리고 거의 가치가 없지만 이미 가지고 있는 경우 Tailwind CSS.

Angular + Capacitor 앱에서 원시 모바일 느낌을 얻으려면 Capgo 플러그인 대신 웹 전용 UI 키트인 Konsta UI를 사용하는 대신:

• @capgo/capacitor-native-navigation — iOS에서 Liquid Glass 탭바, Android에서 흐린 탭바 스타일을 사용하는 네이티브 네비게이션 바, Liquid Glass 탭바
• @capgo/capacitor-transitions — WebView layer에서 Ionic-style 페이지 전환 및 iOS 에지 스와이프 백, 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',
  },
});

리퀴드 글라스 탭바를 렌더링하세요 (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') 네이티브 네비게이션 소유하는 표면을 중복하지 않도록 웹 헤더 또는 푸터를 사용하지 마십시오.

전체 가이드를 참조하십시오: Using @capgo/capacitor-네이티브-네비게이션 및 Using @capgo/capacitor-전환.

안전 영역에 Tailwind

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__으로 출판됨). 그것은 tailwind-capacitor (npm)에서 제공됩니다. safe-areas Capacitor-친화적인 Tailwind 플러그인들:

bun add -D tailwind-capacitor

In src/styles.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__에 Angular 설정에 필요한 항목이 누락되어 있다면 GitHub에 PR을 열어보세요..

iOS 레이아웃 문제를 해결하는 방법 (뷰포트, Safe Area, 및 수평 스크롤)

iOS에서 콘텐츠가 잘려나가거나-shifted, 또는 수평 스크롤이 가능하다면 overflow-x: hidden 뷰포트 태그를 수정하거나 __CAPGO_KEEP_0__를 추가하는 것만으로는 문제를 해결할 수 없습니다. 이러한 체크를 순서대로 진행하세요.

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

In src/index.html, 뷰포트 메타 태그를 설정하세요. <head>:

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

iOS 안전 영역을 하나의 루트 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);
}

모든 페이지 콘텐츠를 내부에 감싸세요. .app-shell헤더, 모달, 레이아웃 wrapper에 중복된 안전 영역 패딩을 적용하면 UI가 잘린 것처럼 보거나 너무 크게 보입니다.

그것과 같은 패딩을 표현하기 위해 @capgo/tailwind-capacitor, utilities like pt-safe pb-safe px-safe 를 사용하세요.

Set Capacitor iOS contentInset 을 never 첫 번째로 설정하세요.

In __CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 일반적인 오버플로우 원인입니다. capacitor.config.ts, Native Navigation의 CSS (또는 Native Navigation의)가 safe area를 소유하도록 native inset을 비활성화하고 CSS (또는 Native Navigation의)가 safe area를 소유하도록 native inset을 비활성화하세요. contentInsetMode: 'css'Tailwind를 사용하여 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-*) 오버플로우의 일반적인 원인은 Tailwind, 고정 픽셀 너비 또는 큰

Safari Web Inspector에서 실행하세요:

Tailwind를 사용하여 CSS 패딩을 대체하세요. 100vwTailwind를 사용하여 CSS 패딩을 대체하세요. w-screenTailwind를 사용하여 CSS 패딩을 대체하세요. min-width.

Tailwind를 사용하여 CSS 패딩을 대체하세요.

[...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를 사용하여 CSS 패딩을 대체하세요. w-screen Tailwind를 사용하여 CSS 패딩을 대체하세요. w-full __CAPGO_KEEP_0__ 100vw / w-screen가능한 경우 많은 수평 방출 문제는

결론

Capacitor은 기존 웹 프로젝트에 기반한 네이티브 애플리케이션을 빌드하는 데 적합한 옵션으로, 간단한 방법으로 code을 공유하고 일관된 UI를 유지할 수 있습니다.

그리고 __CAPGO_KEEP_0__ 추가와 함께, 앱에 실시간 업데이트 기능을 더 쉽게 추가할 수 있습니다. 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다. Capgo을 Angular 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요:Building Mobile Apps with Angular and __CAPGO_KEEP_0__에서 계속 진행하세요.

Capgo을 사용하여

Building Mobile Apps with Angular and Capacitor

네이티브 미디어 및 인터페이스 동작을 계획하는 경우, __CAPGO_KEEP_0__을 연결하세요. 그것은 Capacitor을 사용하여 Building Mobile Apps with Angular and __CAPGO_KEEP_0__ Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities for the implementation detail in @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