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

이 강의에서는 새로운 Angular 앱을 시작하여 __CAPGO_KEEP_0__을 사용하여 네이티브 모바일 앱으로 전환할 것입니다. 또한 __CAPGO_KEEP_1__ Native Navigation 및 Transitions를 추가하여 네이티브 모바일 느낌을 제공하고 tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다. __CAPGO_KEEP_0__은 Angular 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있도록 해주며, React Native와 같은 새로운 기술을 배우지 않고도 네이티브 모바일 앱을 개발할 수 있습니다. app and transition into the native mobile app realm using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor

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

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

Capacitor에 대해 알아보세요.

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

Capacitor를 사용하면 복잡한 설정이나 steep 학습 곡선이 없이 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API가 얇고 Capacitor의 스트리밍된 기능으로 프로젝트에 통합하는 것이 쉬워집니다. 믿을 수 없을 정도로 Capacitor를 사용하여 완전한 네이티브 앱을 쉽게 구현할 수 있습니다!

Angular 앱을 준비하세요.

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

ng new my-app
cd my-app

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

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

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

명령어를 실행한 후에, build새로운 폴더를 프로젝트의 루트 폴더에서 찾을 수 있습니다. dist 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.

Angular 앱에 Capacitor 추가하기

Adding Capacitor to Your Angular App

첫째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID의 기본값을 수락하려면 “엔터”를 누를 수 있습니다. sync 다음으로, 코어 패키지와 iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.

명령어를 실행한 후에, Capacitor CLI 이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.

Angular 앱에 __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 폴더를 관찰할 수 있어야 합니다.

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

앨로우 앱을 나중에 접근하기 위해서는 Android Studio를 설치해야 합니다. iOS의 경우 Mac이 필요하고 Xcode를 설치해야 합니다.또한 Android Studio.

Xcode capacitor.config.ts Capacitor.config.ts 프로젝트 내의 파일로, __CAPGO_KEEP_0__ 동기화 시 사용되는 기본 설정이 포함되어 있습니다. 동기화 중에 주의해야 할 것은webDir

webDir capacitor.config.json 이 문제를 해결하려면 __CAPGO_KEEP_0__.config.json:

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

__CAPGO_KEEP_0__.config.json

npm run build
npx cap sync

을 열고 npm run build webDir npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인 을 설치할 때 다시 실행해야 합니다. npx cap sync 이제 알게 된 채로도 완료되었습니다. 이제 기기를 통해 앱을 확인해 보세요!

네이티브 앱 빌드 및 배포

iOS 앱을 개발하려면

Xcode 을 설치해야 하며 Android 앱을 개발하려면 Android Studio 을 설치해야 합니다. 또한 앱 스토어에서 앱을 배포하려면 iOS에서는 Apple Developer Program에 등록하고 Android에서는 Google Play Console에 등록해야 합니다. 네이티브 모바일 개발에 새로운 사람이라면

Capacitor CLI

npx cap open ios
npx cap open android

설치가 완료된 후 네이티브 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 간단합니다. Android Studio에서, 모든 것이 준비되기를 기다리면 연결된 장치에 앱을 배포할 수 있습니다. 설정을 변경하지 않고. 예를 들어:

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

축하합니다! Angular 웹 앱을 성공적으로 모바일 장치에 배포했습니다. 예를 들어:

하지만, 개발 중에 더 빠르게 수행할 수 있는 방법도 있습니다.

Capacitor Live Reload

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

로컬 호스트 애플리케이션에 대한 접근 권한을 활성화하여 라이브 리로드를 사용할 수 있습니다. 네트워크에서 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;

__CAPGO_KEEP_0__을 사용하여 정확한 IP 주소와 포트를 사용하세요.이 예에서는 기본 Angular 포트를 사용했습니다.

이러한 변경 사항을 적용하려면, 우리의 네이티브 프로젝트에 복사하세요:

npx cap copy

앱 copy 명령어는 Angular Mobile App Capacitor와 유사합니다. sync, 하지만 웹 폴더의 변경 사항과 구성만 복사하고 네이티브 프로젝트를 업데이트하지 않습니다. 웹 폴더의 변경 사항과 구성만 복사합니다. 네이티브 프로젝트를 업데이트하지 않습니다.

Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 앵귤러 앱에 변경 사항이 생기면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다. 앱이 자동으로 다시 로드되고 변경 사항을 표시합니다. 주의해야 할 점은

네이티브 프로젝트를 다시 빌드해야 하는 새로운 플러그인, 카메라 플러그인과 같은 플러그인을 설치하면 네이티브 파일이 변경되기 때문에 즉시 처리할 수 없습니다. 정확한 IP 주소와 포트를 사용해야 합니다. 위의 __CAPGO_KEEP_0__ 블록은 Angular의 기본 포트를 데모용으로 보여주고 있습니다.

code 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대한 예를 몇 번 언급했습니다. 이 플러그인을 설치하려면 다음 명령어를 실행하면 됩니다.

Capacitor

npm i @capacitor/share

이것은 특별한 것이 아닙니다. 공유 플러그인, 하지만 그래도 native 공유 대화 상자를 열어줍니다! share() 이것을 위해 우리는 이제 패키지를 임포트하고 앱에서 해당 함수를 호출하면 됩니다. 그래서 앱 컴포넌트를 src/app/app.component.ts에서 이렇듯 바꿔보겠습니다. 앞서 언급했듯이 새로운 플러그인을 설치할 때는 sync 연산을 수행하고 앱을 다시 장치에 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요. 버튼을 클릭한 후에, 아름다운 native 공유 대화 상자가 작동할 수 있습니다!

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

다음으로, 앱을 iOS와 Android에서 더 원시적으로 느끼게 하기 위해 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있습니다. 이 문제로는 가로 방향의 흐름 또는 안전 영역이 잘려 나가는 문제가 있습니다.

npx cap sync

원시적인 UI를 위한 __CAPGO_KEEP_0__ Native Navigation and Transitions

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

을 사용해 왔습니다. 앱을 iOS와 Android에서 더 원시적으로 느끼게 하기 위해 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, iOS에서 발생하는 일반적인 레이아웃 문제를 해결할 수 있습니다. 이 문제로는 가로 방향의 흐름 또는 안전 영역이 잘려 나가는 문제가 있습니다. 다양한 플랫폼을 위한 애플리케이션을 만들기 위해 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)으로 iOS 스타일의 페이지 전환과 iOS 에지 스와이프-백을 사용할 수 있습니다.

두 가지 모두 설치하세요.

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

라우팅된 페이지를 wrapping하세요. cap-router-outlet, cap-page, cap-content그리고 호출 setDirection('forward') 또는 setDirection('back') Capacitor live-update 대안 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법적 문단. 페이지/영역: 대안.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `alternatives_cta_questions` (대안 CTA 질문). | Appflow 비교/이동 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. 페이지/영역: ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `appflow_cta_questions` (Appflow CTA 질문). | Capawesome 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법적 문단. 페이지/영역: capwesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `capwesome_cta_questions` (Capwesome CTA 질문). | 컨설팅 서비스 페이지에서 HTML 텍스트 조각입니다. 역할: 섹션 서브 타이틀 또는 태그 라인. 페이지/영역: consulting.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지하십시오. 메시지 키 `consulting_faq_subtitle` (컨설팅 FAQ 서브 타이틀). | Appflow 비교/이동 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 페이지/영역: ionic-appflow.astro, ionic-enterprise-plugins.astro, solutions/ionic-enterprise-plugins.astro. 메시지 키 `appflow_plugins_or` (Appflow 플러그인 또는).

이전으로 이동하기 전에 하지 마십시오. 원래 네비게이션 소유하는 표면에 중복되는 웹 헤더 또는 푸터를 만들지 마십시오. Using @capgo/capacitor-native-navigation Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-transitions.

Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions

안전 영역에 Tailwind @capgo/tailwind-capacitor @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ 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";

Use 기능을 사용하여 pt-safe, pb-safe, 및 px-safe 대신 수동으로 뿌려지지 않도록 env(safe-area-inset-*) 개발 중인 프로젝트 — Angular 설정에 필요한 것이 빠진 경우 GitHub에 PR을 열어.

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

iOS에서 콘텐츠가 잘려나거나-shifted 또는 수평 스크롤 가능하다면 overflow-x: hidden 뷰포트 태그를 수정하거나 더 추가하는 것만으로는 해결되지 않는다.

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

In src/index.html, viewport meta 태그를 설정하세요. <head>:

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

iOS safe area를 한 번에 루트 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와 함께, 동일한 패딩을 표현할 수 있는 유틸리티를 사용하세요. pt-safe pb-safe px-safe 싱글 셸에

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

In capacitor.config.ts, native inset을 사용하고 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 해보세요: contentInsetMode: 'css'Mixing __CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS padding은 일반적인 더블 스페이싱의 원인입니다.

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

, 고정 픽셀 너비를 사용하는 요소, 또는 100vwSafari Web Inspector에서 실행하세요: w-screenTailwind를 사용하면 min-width.

를 사용하세요

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

with w-screen with w-full 가능할 때. 많은 수평 방향으로의 오버플로우 문제는 duplicated safe-area padding, 또는 고정 너비의 컨테이너에서 오는 것이 아니라 viewport meta 태그 자체에서 오는 것이 아니다. 100vw / w-screen결론

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

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그것은 사용자에게 항상 최신 기능과 버그 수정에 접근할 수 있도록 라이브 업데이트 추가가 더 쉬워졌다.

If you would like to learn how to add Capgo to your Angular app, take a look at the next article:

Building Mobile Apps with Angular and Capacitor에서 계속 진행하십시오.

Capgo를 사용하여 Building Mobile Apps with Angular and Capacitor 네이티브 미디어 및 인터페이스 동작을 계획하고 연결하려면 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.