Building Mobile Apps with Angular and Capacitor

이 튜토리얼에서는 새로운 Angular 앱을 시작하여 __CAPGO_KEEP_0__를 사용하여 모바일 앱으로 전환할 것입니다. optionally, Konsta UI도 추가할 수 있습니다. Angular app and transition into the native mobile app realm using Capacitor. Optionally, you can also add Konsta UI __CAPGO_KEEP_0__를 사용하여 Angular 웹 애플리케이션을 Tailwind CSS를 사용하여 개선된 모바일 UI로 변환하는 것이 가능합니다.

Capacitor는 Angular 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 것을 쉽게 할 수 있게 해주며, React Native와 같은 새로운 기술을 배울 필요 없이도 네이티브 모바일 앱을 개발할 수 있습니다.

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

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

Capacitor에 대해 알아보세요.

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

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

Angular 애플리케이션 준비하기

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

ng new my-app
cd my-app

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

native 모바일 앱을 만들기 위해서는 프로젝트의 __CAPGO_KEEP_0__ 을 내보내야 합니다. 따라서, Angular 프로젝트를 빌드하고 복사할 수 있는 간단한 스크립트를 package.json 에 포함시켜보겠습니다.

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

명령어를 실행한 후 build프로젝트의 루트 폴더에 새로운 dist __CAPGO_KEEP_0__

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

Capacitor

폴더는 나중에 sync __CAPGO_KEEP_0__

우선으로는 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에 이름과 번들 ID의 기본값을 수락하려면 “enter”를 눌러도 됩니다. Capacitor CLI 다음으로는 iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.

마지막으로는 플랫폼을 추가하고 __CAPGO_KEEP_0__은 프로젝트의 루트 디렉토리에 각 플랫폼을 위한 폴더를 생성할 것입니다:

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

ios 및 android 폴더를 관찰할 수 있어야 합니다. 그것들은 실제 네이티브 프로젝트입니다!

Android 프로젝트에 나중에 접근하려면 __CAPGO_KEEP_0__을 설치해야 합니다.

targetLanguage 안드로이드 스튜디오. iOS의 경우 Mac가 필요하고 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 __CAPGO_KEEP_0__ 설정이 포함되어 있습니다. 주의해야 할 것은

webDir capacitor.config.json 이 값이 정확하지 않다면 __CAPGO_KEEP_0__.config.json:

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

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

npm run build
npx cap sync

첫 번째 명령어 npm run build 는 단순히 Angular 프로젝트를 빌드하고 정적 빌드를 복사합니다. 반면 두 번째 명령어 npx cap sync 는 웹 code을 원활한 위치로 동기화하여 앱에서 표시할 수 있도록 합니다.

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

네이티브 앱 빌드 및 배포

iOS 앱을 개발하려면

Xcode가 필요합니다. To develop iOS apps, you need to have 설치되어 있어야 하며 안드로이드 앱의 경우 안드로이드 스튜디오가 설치되어 있어야 합니다. 또한 앱 스토어에 앱을 배포하려면 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

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

xcode-run

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

angular-mobile-app

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

__CAPGO_KEEP_1__ is not provided, so it will be replaced with an empty string.

Capacitor is not provided, so it will be replaced with an empty string.

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

네트워크 내에서 로컬로 호스팅 된 애플리케이션에 대한 실시간 재로드에 접근할 수 있습니다. 로컬로 호스팅 된 애플리케이션에 대한 실시간 재로드에 네트워크 내에서 접근할 수 있습니다. 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__를 서버에서 애플리케이션을 직접 로드하도록 지시하세요. 사용할 때는 항상 __CAPGO_KEEP_0__이 예시에서 기본 Angular 포트를 사용했습니다.

이제 이러한 변경 사항을 원시 프로젝트로 복사하여 적용할 수 있습니다:

npx cap copy

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

자동으로 앱이 다시 로드되고 변경 사항이 표시됩니다. 주의해야 할 점 변경 사항이 생기면 앱이 자동으로 다시 로드되고 변경 사항이 표시됩니다.

주의해야 할 점 이러한 카메라와 같은 새로운 플러그인을 설치하면, native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. 빌드가 동적으로 수행되지 않습니다.

code 블록에 표시된 것과 같이, 올바른 IP와 포트를 사용해야 합니다. 이 블록은 Angular 기본 포트를示唆하기 위해 demonstration 목적으로 사용됩니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 언급한 바가 있습니다. 이를 수행하기 위해, 우리는 fairly simple 플러그인을 설치할 수 있습니다. 이를 위해, 다음 명령어를 실행하면 됩니다.

npm i @capacitor/share

Share 플러그인은 기본적인 기능이 없지만, native share dialog를 표시합니다! 이를 위해, 우리는 package를 import하고, 우리의 앱에서 호출해야 하는function을 호출하면 됩니다. 따라서, 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

]}

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 컴포넌트를 설정하여 전역 매개변수 (예를 들어 앱의 모든 부분을 감싸는 theme).

을 사용하여 App __CAPGO_KEEP_0__ 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>