Building Mobile Apps with Angular and Capacitor

이 튜토리얼에서는 새로운 Angular Capacitor를 사용하여 앱과 전환하여 네이티브 모바일 앱 영역으로 이동할 수 있습니다. optionally, Capacitor에 추가할 수도 있습니다. Konsta UI 네이티브 모바일 UI를 개선하기 위해 Tailwind CSS를 사용할 수 있습니다.

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

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

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

Capacitor에 대해 알아보기

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

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

Angular 앱을 준비하기

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

ng new my-app
cd my-app

Angular 버전을 묻히면 "Angular"를 선택하세요.

자연어 모바일 애플리케이션을 만들려면 프로젝트의 __CAPGO_KEEP_0__ 을 내보내야 합니다. 따라서 package.json에 간단한 스크립트를 포함하여 Angular 프로젝트를 빌드하고 복사할 수 있도록 하겠습니다. __CAPGO_KEEP_0__ 명령어를 실행한 후 프로젝트의 루트 폴더에서 새로운 폴더를 찾을 수 있습니다.

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

이 폴더는 나중에 __CAPGO_KEEP_0__에 의해 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다. build__CAPGO_KEEP_0__를 Angular 애플리케이션에 추가하는 방법 dist export

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

Adding Capacitor to Your Angular App

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

먼저 Capacitor CLI __CAPGO_KEEP_1__

를 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 “엔터” 키를 누를 수 있습니다.

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__ 는 프로젝트의 루트 폴더에 각 플랫폼을 위한 폴더를 생성합니다. 이 시점에서 Angular 프로젝트에서 새로운 ios

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

앱디바이스 프로젝트에 접근하기 위해서는 Android Studio를 설치해야 합니다. iOS는 Mac에서 사용해야 하며 Xcode.

를 설치해야 합니다. capacitor.config.ts Capacitor.config.ts 파일을 찾으세요. 이 파일에는 동기화 시 사용되는 기본 __CAPGO_KEEP_0__

설정들이 포함되어 있습니다. 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 will sync all the web code into the right places of the native platforms so they can be displayed in an app.

웹 __CAPGO_KEEP_0__을 원활한 위치로同步시켜 앱에서 표시되도록합니다. Capacitor plugins 자연 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 npx cap sync __CAPGO_KEEP_0__ 플러그인을 설치하면

다시 실행해야합니다.

알지 못한 채로 이제 실제로 완료되었습니다. 그래서 장치에서 앱을 보러 가 봅시다!

iOS 앱을 개발하려면 Xcode 를 설치해야하고, Android 앱을 개발하려면 Android Studio 를 설치해야합니다. 또한 앱 스토어에 앱을 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야합니다.

native 모바일 개발에 새로운 사람이라면 Capacitor CLI를 사용하여 쉽게 iOS 및 Android의 native 프로젝트를 열 수 있습니다.

npx cap open ios
npx cap open android

native 프로젝트를 설정한 후에는 연결된 기기에서 앱을 배포하는 것이 쉬워집니다. Android Studio에서는 설정을 변경하지 않고도 연결된 기기를 기다리면 됩니다. 예를 들어:

android-studio-run

Xcode에서는 실제 기기에서 앱을 배포하려면 서명 계정을 설정해야합니다. 서명 계정을 설정한 적이 없다면 Xcode는 개발자 프로그램에 등록된 경우 개발자 프로그램을 통해 프로세스를 안내합니다. 그 후에 단순히 플레이 버튼을 클릭하여 연결된 기기에서 앱을 실행할 수 있습니다. 예를 들어:

xcode-run

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

하지만 개발 중에 이 작업을 더 빠르게 하려면 다른 방법도 있습니다…

Capacitor Live Reload

이제는 모든 현대 프레임워크에서 핫 리로드를 사용해 익숙해졌을 것입니다. 좋은 뉴스는 당신이 동일한 기능성을 얻을 수 있다는 것입니다. 모바일 장치에서 최소한의 노력만으로도 가능합니다!

로컬로 호스팅된 애플리케이션에 대한 접근을 활성화하고 Live Reload를 네트워크에서 __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하세요. by having the Capacitor app load the content from the specific URL.

윈도우즈에서 :

ipconfig getifaddr en0

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

ipconfig

__CAPGO_KEEP_0__에 서버에서 앱을 직접 로드하도록 지시하기 위해 우리의 설정에 추가 항목을 추가할 수 있습니다.

Capacitor에 서버에서 앱을 직접 로드하도록 지시하기 위해 우리의 설정에 추가 항목을 추가할 수 있습니다. 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;

__CAPGO_KEEP_0__을 사용할 때는 정확한 IP 주소와 포트를 사용하세요. 예를 들어, 이 예시에서는 기본 Angular 포트를 사용했습니다.이제 이러한 변경 사항을 원시 프로젝트로 복사할 수 있습니다.

__CAPGO_KEEP_1__은

npx cap copy

__CAPGO_KEEP_2__과 유사하지만, copy __CAPGO_KEEP_3__을 업데이트하지 않고 웹 폴더와 구성만 복사합니다. syncAndroid Studio 또는 Xcode를 통해 앱을 다시 배포할 수 있습니다. 그 후에, Angular 앱에서 변경 사항이 발생하면 앱은 자동으로 다시 로드됩니다. __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__ 그리고 변경 사항을 보여줍니다!

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

code 블록 위에 표시된 것은 데모를 위해 기본 Angular 포트입니다. 올바른 IP 및 포트를 사용해야 합니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 실제로 사용하는 방법에 대해 살펴보겠습니다. 이를 위해 우리는 몇 번 언급한 적이 있지만 비교적 간단한 플러그인을 설치할 수 있습니다. 이를 위해 다음 명령어를 실행하세요.

npm i @capacitor/share

__CAPGO_KEEP_0__ 플러그인은 특별한 기능도 없지만 네이티브 공유 대화 상자를 열어줍니다! 이것을 위해 우리는 이제만 패키지를 임포트하고 앱에서 해당 함수를 호출하면 됩니다. 따라서 앱 컴포넌트의src/app/app.component.ts share() 를 다음과 같이 변경하세요: __CAPGO_KEEP_0__ 플러그인 사용 __CAPGO_KEEP_0__ 플러그인을 실제로 사용하는 방법에 대해 살펴보겠습니다. 이를 위해 우리는 몇 번 언급한 적이 있지만 비교적 간단한 플러그인을 설치할 수 있습니다. 이를 위해 다음 명령어를 실행하세요.

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

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the 다음 명령어를 실행하세요:

npx cap sync

After hitting the button, you can witness the beautiful native share dialog in action!

Konsta UI 추가

To use Konsta UI in your Nuxt 3 app, you need to have tailwind이 이미 설치되어야 합니다. 그리고 다음 패키지를 설치하세요:

npm i konsta

또한, 다음 파일을 수정해야 합니다: tailwind.config.js will default (또는 custom) Tailwind CSS config를 확장하여 Konsta UI에 필요한 추가 변형 및 도우미 유틸리티를 추가합니다.

// 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 Now we need to set up the main

App component so we can set some global parameters (like __CAPGO_KEEP_0__ theme).

웹 앱 전체를 wrap해야 합니다. App Capacitor 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>

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with Angular and Capacitor!

결과로 다음 페이지를 볼 수 있을 것입니다:

Conclusion

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앱에 실시간 업데이트를 추가하는 것이 훨씬 더 쉬워졌습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 하세요.

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