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

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

Capacitor는 앵귤러 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있도록 해줍니다. 네이티브 모바일 앱을 만들기 위해 새로운 기술을 배우거나 significan트한 수정이 필요하지 않습니다.

앵귤러 앱을 네이티브 모바일 앱으로 변환하는 데 필요한 단계는 많지 않습니다.

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

Capacitor

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

Capacitor를 사용하면 복잡한 설정이나 steep learning curve가 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API가 얇고 Capacitor가 streamlined하여 프로젝트에 쉽게 통합할 수 있습니다. 믿을 수 있듯이, Capacitor를 사용하면 네이티브 앱을 쉽게 만들 수 있습니다!

앵귤러 앱 준비

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

ng new my-app
cd my-app

‘Angular’을 선택하세요. Angular 버전을 선택할 때

자연어 모바일 앱을 만들려면 프로젝트의 export 프로젝트를 내보내야 하므로, 간단한 스크립트를 package.json에 추가하여 프로젝트를 빌드하고 복사할 수 있도록 해보겠습니다: 명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더를 찾을 수 있습니다. 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 하지만 지금은 올바르게 설정해야 합니다.

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

__CAPGO_KEEP_0__를 Angular 앱에 추가하는 방법 build웹 앱을 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면, 나중에 단일 명령어만 실행하면 됩니다. dist To create a native mobile app, we require an export of our project. Thus, let’s include a straightforward script in our package.json that can be utilized to build and copy the Angular project:

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

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

Adding __CAPGO_KEEP_0__ to Your Angular App sync 명령어.

첫째로, 우리는 Capacitor CLI 를 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에 이름과 번들 ID의 기본값을 수락하려면

다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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 폴더가 iOS 와

android 폴더가 Angular 프로젝트 내에 생성되어야 합니다.

안드로이드 프로젝트를 나중에 접근하기 위해서는 설치해야 합니다. 안드로이드 스튜디오iOS의 경우 맥을 사용해야 하며 Xcode를 설치해야 합니다. Xcode.

또한 프로젝트에서 __CAPGO_KEEP_0__.config.ts 파일을 찾으셔야 합니다. 이 파일에는 동기화 시 사용되는 기본 __CAPGO_KEEP_0__ 설정이 포함되어 있습니다. 동기화 시 주의해야 할 것은 capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the 현재는 정확하지 않습니다.__CAPGO_KEEP_0__.config.json

파일을 열고 capacitor.config.json 파일을 업데이트 하세요. 웹 디렉토리:

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

다음 명령어를 실행하여 시도해 보세요:

npm run build
npx cap sync

첫 번째 명령어 npm run build 첫 번째 명령어는 단순히 Angular 프로젝트를 빌드하고 정적 빌드를 복사합니다. 두 번째 명령어는 웹 __CAPGO_KEEP_0__을 네이티브 플랫폼의 올바른 위치에同步시켜 앱에서 표시되도록합니다. npx cap sync 그리고 sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 code 플러그인을 설치하면 다시 명령어를 실행해야합니다.

새로운 플러그인을 설치하면 다시 명령어를 실행해야합니다. Capacitor plugins 이제 실제로 완료되었습니다. 이제 기기에서 앱을 확인해 보세요! npx cap sync 네이티브 앱 빌드 및 배포

iOS 앱을 개발하려면

iOS 앱을 개발하려면

__CAPGO_KEEP_0__ Xcode 설치되어 있어야 하며, 안드로이드 앱의 경우 안드로이드 스튜디오가 설치되어 있어야 합니다. 또한 앱을 스토어에 배포하려면 iOS의 경우 애플 개발자 프로그램에, 안드로이드의 경우 구글 플레이 콘솔에 등록해야 합니다. Android Studio 설치되어 있어야 합니다.

native 모바일 개발에 새로운 입문자라면 Capacitor CLI을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.

npx cap open ios
npx cap open android

네이티브 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 간단합니다. 안드로이드 스튜디오의 경우 모든 것이 준비될 때까지 기다리면 연결된 장치에 앱을 배포할 수 있습니다. 설정을 변경할 필요도 없습니다. 예를 들어:

Xcode의 경우 앱을 실제 장치에 배포하려면 서명 계정을 설정해야 합니다. 만약 이 과정을 처음으로 진행한다면 Xcode는 개발자 프로그램에 등록된 경우 이 과정을 안내해 줄 것입니다. 이후 단순히 플레이 버튼을 클릭하여 연결된 장치에서 앱을 실행할 수 있습니다. 장치 선택은 위쪽에서 가능합니다. 예를 들어:

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

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

Capacitor Live Reload

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

네트워크 내에서 로컬로 호스팅 된 애플리케이션에 접근할 수 있도록 __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요. 첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우 터미널에서 다음 명령어를 실행하여 이를 알아낼 수 있습니다: by having the Capacitor app load the content from the specific URL.

그런 다음 IPv4 주소를 찾으세요.

ipconfig getifaddr en0

__CAPGO_KEEP_0__이 서버에서 앱을 직접 로드하도록 지시하려면, 파일에 추가 항목을 추가하세요:

ipconfig

file:

We can instruct Capacitor to load the app directly from the server by adding another entry to our 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:4200',
    cleartext: true
  }
};

export default config;

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

명령어는 이와 유사하지만 웹 폴더와 설정만 업데이트하고 원시 프로젝트를 업데이트하지 않습니다.

npx cap copy

이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포할 수 있습니다. 앵귤러 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. copy 이러한 작업을 완료하기 위해 올바른 IP 주소와 포트를 사용하십시오. sync이 예시에서 기본 Angular 포트를 사용했습니다. 이제 이러한 변경 사항을 원시 프로젝트로 복사할 수 있습니다. 명령어는 이와 유사하지만 웹 폴더와 설정만 업데이트하고 원시 프로젝트를 업데이트하지 않습니다.

이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포할 수 있습니다. 앵귤러 앱에서 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. 이러한 작업을 완료하기 위해 올바른 IP 주소와 포트를 사용하십시오. 이 예시에서 기본 Angular 포트를 사용했습니다.

주의 사항 새로운 플러그인(예: 카메라) 설치 시에도 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다.

정확한 IP와 포트를 사용하여 구성해야 합니다. 위의 code 블록은 Angular 기본 포트를 데모용으로 보여주고 있습니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 실제로 사용해 보겠습니다. 이에 대한 예를 몇 번 언급했습니다. 이 간단한 플러그인을 설치하려면 다음 명령어를 실행하세요:

npm i @capacitor/share

Share 플러그인은 특별한 기능이 없지만 네이티브 공유 대화상자를 열 수 있습니다. 이 경우에만 패키지를 임포트하고 앱에서 해당 함수를 호출하면 됩니다. 따라서 앱 컴포넌트를 다음과 같이 변경하세요: 앱 컴포넌트를 다음과 같이 변경하세요:앱 컴포넌트를 다음과 같이 변경하세요: share() 앱 컴포넌트를 다음과 같이 변경하세요: 앱 컴포넌트를 다음과 같이 변경하세요: 앱 컴포넌트를 다음과 같이 변경하세요:

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 네비게이션과 전환을 사용하여, iOS에서 발생하는 일반적인 레이아웃 문제를 해결하고, 수평 스크롤이나 안전 영역이 잘려나가는 문제를 해결할 수 있습니다.

네이티브한 UI를 위한 Capgo 네이티브 네비게이션과 전환

여러 년 동안, Ionic 을 사용하여 크로스 플랫폼 애플리케이션을 개발했습니다. 그러나 Angular와 통합하는 것은 복잡하고, 이미 Tailwind CSS.

를 사용하고 있다면, 가치가 없습니다. Angular + Capacitor 앱에서 네이티브 모바일 느낌을 얻으려면, 웹 전용 UI 키트인 Konsta UI 대신 Capgo 플러그인을 사용하세요:

• @capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. Angular 라우터는 라우트 상태를 유지하고, 플러그인은 네이티브 창을 관리합니다.
• @capgo/capacitor-transitions — Ionic-style 페이지 전환과 iOS 에지 스와이프 백, WebView layer에서 수행됩니다. Ionic UI를 채택하지 않습니다.

설치 BOTH:

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') 이전으로 이동하기 전에

자세한 가이드를 참조하십시오: Using @capgo/capacitor-native-navigation 그리고 Using @capgo/capacitor-transitions.

안전 영역에 Tailwind

Tailwind CSS의 장치 안전 영역을 위해 사용하세요 @capgo/tailwind-capacitor 출판 tailwind-capacitor on 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";

Tailwind의 유용한 기능 pt-safe, pb-safe, px-safe 대신 env(safe-area-inset-*) 수동으로 프로젝트는 활발하게 개발 중입니다 — Angular 설정에 필요한 것이 빠진 경우 GitHub에 PR을 열어주세요.

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

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

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

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-capacitorAngular 모바일 앱을 위한 Capacitor pt-safe pb-safe px-safe 단일 셸에서 동일한 패딩을 표현할 수 있습니다.

Capacitor iOS contentInset __CAPGO_KEEP_0__ never 첫 번째

내 capacitor.config.ts, CSS (또는 Native Navigation의) contentInsetMode: 'css'CSS 패딩과 __CAPGO_KEEP_0__의 자동 콘텐츠 인셋을 혼합하는 것은 더블 스페이싱의 일반적인 원인입니다.

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_0__ 100vw, Tailwind w-screen, 고정픽셀 너비 또는 대형 min-width.

Safari Web Inspector에서 실행:

[...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를 사용하여 w-screen 대신 w-full 가능한 경우 많은 가로 스크롤 문제는 100vw / w-screen, 중복된 안전 영역 패딩 또는 고정 너비 컨테이너 — viewport meta 태그 자체에서 아님.

결론

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

그리고 __CAPGO_KEEP_0__ 추가로 Capgo, 앱에 실시간 업데이트 추가하기도 더 쉬워졌습니다. 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.

Angular 앱에 Capgo을 추가하는 방법을 배우고 싶다면, 다음 글을 참조하세요.

Capacitor을 사용하여 Angular 앱을 빌드하는 방법을 계속 진행하세요.

Angular 앱을 빌드하고 __CAPGO_KEEP_0__을 사용하는 경우 Capacitor을 사용하여 Angular 앱을 빌드하는 방법 __CAPGO_KEEP_0__을 사용하여 native 미디어 및 인터페이스 동작을 계획하고 있습니다. __CAPGO_KEEP_1__을 사용하여 __CAPGO_KEEP_0__과 연결하세요. capgo을 사용하여 capacitor-live-activities의 native 기능을 구현하는 경우 capgo을 사용하여 capacitor-live-activities의 구현 세부 정보를 구현하는 경우 capgo을 사용하여 capacitor-video-player capgo을 사용하여 capacitor-video-player의 native 기능을 구현하는 경우 capgo을 사용하여 capacitor-video-player capgo을 사용하여 capacitor-video-player capgo을 사용하여 capacitor-video-player Capacitor를 사용하여 모바일 앱을 구현하는 방법에 대한 구현 세부 정보는 @capgo/capacitor-video-player에서 찾을 수 있습니다. Capacitor를 사용하여 @capgo/capacitor-native-navigation을 사용하는 방법 Capacitor를 사용하여 @capgo/capacitor-native-navigation을 사용하는 방법에 대한 네이티브 기능