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

이 강의에서는 새로운 Angular 앱을 시작하여 __CAPGO_KEEP_0__를 사용하여 native 모바일 앱으로 전환할 것입니다. optionally, Konsta UI도 추가할 수 있습니다. Angular Capacitor Konsta UI __CAPGO_KEEP_0__을 사용하여 Angular 웹 애플리케이션을 쉽게 네이티브 모바일 앱으로 변환할 수 있습니다.

Capacitor은 Angular 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 데 필요한 중요한 수정이나 React Native와 같은 새로운 기술을 배우지 않고 쉽게 변환할 수 있도록 해줍니다.

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

이 튜토리얼에서는 새로운 Angular 애플리케이션부터 시작하여 Capacitor를 사용하여 네이티브 모바일 앱으로 변환하는 과정을 안내합니다. 또한 optionally Capacitor를 사용하여 Konsta UI 를 사용하여 Tailwind CSS와 함께 모바일 UI를 향상할 수 있습니다.

Capacitor에 대해 알아보세요.

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

Capacitor를 사용하면 복잡한 설정이나 steep 학습 곡선이 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API와 streamlined 기능은 프로젝트에 쉽게 통합할 수 있도록 slim합니다. 믿을 수 없을 정도로 쉽게 Capacitor를 사용하여 완전히 기능하는 네이티브 앱을 얻을 수 있습니다.

Angular 앱을 준비하세요.

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

ng new my-app
cd my-app

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

모바일 앱을 만들기 위해서는 프로젝트를 내보내야 합니다. 따라서, Angular 프로젝트를 빌드하고 복사할 수 있는 간단한 스크립트를 package.json에 포함해 보겠습니다. __CAPGO_KEEP_0__ 명령어를 실행한 후, 프로젝트의 루트 폴더에 새로운 폴더를 찾을 수 있을 것입니다. __CAPGO_KEEP_0__ Cloudflare

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

Capacitor buildGitHub dist Capgo

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

Adding Capacitor to Your Angular App

SDK sync CLI

우선으로는 Capacitor CLI 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 “enter”를 눌러도 됩니다.

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

마지막으로는 플랫폼을 추가하고 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

이 단계까지 진행하면 Angular 프로젝트 내에서 새로운 ios 및 android 폴더를 관찰할 수 있을 것입니다.

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

Android 프로젝트에 대한 접근을 원한다면, 안드로이드 스튜디오iOS의 경우 맥을 사용해야 하며 Xcode.

프로젝트에서 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 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을 원활한 위치로同步시켜 native 플랫폼에서 앱으로 표시할 수 있도록합니다.

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

native 앱 빌드 및 배포

iOS 앱을 개발하려면

Xcode가 필요합니다. __CAPGO_KEEP_0__ 설치되어 있어야 합니다. 그리고 안드로이드 앱을 위한 경우, 안드로이드 스튜디오가 설치되어 있어야 합니다. 또한 앱을 스토어에 배포하려면 iOS와 안드로이드를 위한 Apple Developer Program과 Google Play Console에 등록해야 합니다. 안드로이드 스튜디오 native 모바일 개발에 새로운 입문자라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.

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

android-studio-run

xcode-run

angular-mobile-app

__CAPGO_KEEP_0__ Live Reload

Capacitor Live Reload

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

네트워크 내에서 실행 중인 로컬 애플리케이션에 대한 접근 권한을 활성화하고 실시간으로 재로드 by having the Capacitor app load the content from the specific URL.

네트워크 내에서

ipconfig getifaddr en0

로컬로 호스팅된 애플리케이션에 대한 접근 권한을 활성화하고

ipconfig

__CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요.

We can instruct Capacitor to load the app directly from the server by adding another entry to our 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;

그런 다음 IPv4 주소를 찾으세요. 정확한 IP와 포트이 예시에서 기본 Angular 포트를 사용했습니다.

이제 이러한 변경 사항을 우리의 네이티브 프로젝트로 복사하여 적용할 수 있습니다:

npx cap copy

The copy 명령어는 sync와 유사하지만, 웹 폴더와 구성만 복사하고 네이티브 프로젝트를 업데이트하지 않습니다. Android Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, Angular 앱에서 변경 사항이 생기면,

자동으로 앱이 다시 로드되고 변경 사항이 표시됩니다! 주의해야 할 점은 __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ __CAPGO_KEEP_0__ 플러그인을 설치하면 새로운 카메라와 같은 플러그인을 설치할 때도 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다. 즉, 동적으로 처리할 수 없습니다.

code 블록 위에 표시된 것은 Angular의 기본 포트를 데모 목적으로 보여주기 위해 표시한 것입니다. 따라서 code IP와 포트를 올바르게 사용해야 합니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 실제로 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 몇 번 언급했듯이, 간단한 플러그인을 설치하는 방법을 살펴보겠습니다. 이를 위해 다음 명령어를 실행하세요.

npm i @capacitor/share

__CAPGO_KEEP_0__ 플러그인은 특별한 기능이 없지만 네이티브 공유 대화상을 표시합니다. 이를 위해 패키지를 임포트하고 앱에서 호출할 수 있는 함수만 호출하면 됩니다. 따라서 __CAPGO_KEEP_0__를 __CAPGO_KEEP_1__로 변경하세요. __CAPGO_KEEP_0__ 플러그인을 설치할 때는 sync 연산을 수행하고 앱을 다시 배포해야 합니다. 이를 위해 다음 명령어를 실행하세요.__CAPGO_KEEP_0__ 버튼을 클릭하면 네이티브 공유 대화상을 실제로 볼 수 있습니다! share() __CAPGO_KEEP_1__를 __CAPGO_KEEP_2__로 변경하세요. __CAPGO_KEEP_2__를 __CAPGO_KEEP_3__로 변경하세요. __CAPGO_KEEP_3__를 __CAPGO_KEEP_4__로 변경하세요.

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

__CAPGO_KEEP_4__를 __CAPGO_KEEP_5__로 변경하세요.

npx cap sync

__CAPGO_KEEP_5__를 __CAPGO_KEEP_6__로 변경하세요.

Konsta UI 추가

Nuxt 3 앱에서 Konsta UI를 사용하려면 tailwind이 이미 설치되어 있어야 합니다. 그리고 다음 패키지를 설치해야 합니다:

npm i konsta

추가로, 다음 파일을 수정해야 합니다: tailwind.config.js Konsta UI를 사용하기 위해 기본 (또는 커스텀) Tailwind CSS 설정을 확장합니다.

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{html,ts}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig 이제 우리는 메인

App 컴포넌트를 설정해야 합니다. 이 컴포넌트를 통해 전역 매개변수 (예를 들어 Konsta UI를 사용하기 위해 앱 전체를 theme).

__CAPGO_KEEP_0__ App 로 wrapping해야 합니다. src/app/app.component.html:

<app>
  <h1>Welcome to Angular and Capacitor!</h1>
  <button (click)="share()">Share now!</button>
</app>

Example Page

Angular 페이지에서 Konsta UI Vue 컴포넌트를 사용할 수 있습니다.

예를 들어, src/app/app.component.html 그것을 다음과 같이 변경하세요.

<app>
  <page>
    <navbar title="My App" />

    <block strong>
      <p>
        Here is your Angular & Konsta UI app. Let's see what we have here.
      </p>
    </block>
    <block-title>Navigation</block-title>
    <list>
      <list-item href="/about/" title="About" />
      <list-item href="/form/" title="Form" />
    </list>

    <block strong class="flex space-x-4">
      <button>Button 1</button>
      <button>Button 2</button>
    </block>
  </page>
</app>

live reload가 설치된 모든 필요한 컴포넌트 후에 동기화가 안되는 경우, 다시 시작해 보세요. Angular와 Capacitor를 사용하여 somewhat 원생의 모바일 앱을 만들 수 있습니다.

결과로 다음 페이지를 볼 수 있습니다.

결론

Capacitor는 기존 웹 프로젝트를 기반으로 하는 원생 애플리케이션을 빌드하는 데 적합한 옵션입니다. code를 쉽게 공유하고 일관된 UI를 유지할 수 있습니다.

__CAPGO_KEEP_0__의 추가로, 앱에 실시간 업데이트 기능을 더 쉽게 추가할 수 있습니다. 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다. Capgo__CAPGO_KEEP_1__

Angular 앱에 Capgo을 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요: