このチュートリアルでは、まず新しい Angular アプリから始め、Capacitorを使用してネイティブモバイルアプリの世界に移行します。オプションで、Capacitorを使用してネイティブUIを強化することもできます。 Konsta UI モバイル用の改善されたUIにTailwind CSSを使用する。
Capacitorは、AngularのWebアプリケーションをネイティブモバイルアプリケーションに変換するのに役立ちます。React Nativeなどの新しいスキルを学ぶ必要はありません。
Angularアプリケーションのほとんどは、簡単な手順でモバイルアプリケーションに変換できます。
このチュートリアルでは、Angularアプリケーションの新しいプロジェクトから始め、Capacitorを使用してネイティブモバイルアプリケーションに移行するプロセスを説明します。さらに、オプションで Konsta UI を使用して、Tailwind CSSでモバイルUIを強化できます。
Capacitor
CapacitorJSはゲームチェンジャーです!あなたのWebプロジェクトに簡単に組み込むことができ、ネイティブのWebviewでアプリケーションをwrapし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。さらに、プラグインはカメラなどのネイティブデバイス機能へのアクセスを提供するJSブリッジを提供します。
Capacitorを使用すると、複雑なセットアップや急な学習曲線なしで素晴らしいネイティブモバイルアプリケーションを取得できます。APIとstreamlined機能はプロジェクトに簡単に統合できるようにします。私に任せると、Capacitorを使用して完全に機能するネイティブアプリを実現するのは驚くほど簡単です。
Angularアプリケーションの準備
新しいAngularアプリケーションを作成するには、以下のコマンドを実行してください:
ng new my-app
cd my-app「Angular」を選択してください。
ネイティブモバイルアプリを作成するには、プロジェクトのエクスポートが必要です。したがって、package.jsonに簡単なスクリプトを含めることができます。このスクリプトは、Angularプロジェクトのビルドとコピーを実行することができます。 export プロジェクトのpackage.jsonに、ネイティブモバイルアプリを作成するための簡単なスクリプトを含めることができます。 コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが表示されるはずです。 このフォルダは、後で__CAPGO_KEEP_0__によって使用される予定ですが、現在は正しく設定する必要があります。
{
"scripts": {
// ...
"build": "ng build --prod"
}
}__CAPGO_KEEP_0__をAngularアプリに追加する buildウェブアプリをネイティブモバイルコンテナにパッケージングするには、いくつかの初期ステップを実行する必要がありますが、後は単に1つのコマンドを実行するだけです。 dist Angular バージョンを尋ねられたときは “Angular” を選択してください。
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Angular App
プロジェクトのpackage.jsonに、ネイティブモバイルアプリを作成するための簡単なスクリプトを含めることができます。 sync command.
まず、 Capacitor CLI Capacitorを開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。
次に、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この時点で、Angularプロジェクト内に新しい ios と android フォルダを観察することができます。
nativeプロジェクトです!
Androidプロジェクトにアクセスするには、後で必要になります。 Android Studioをインストールする必要があります。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 これを修正するには、 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.
は、Web __CAPGO_KEEP_0__ をネイティブプラットフォームの正しい場所に同步します。これにより、ネイティブアプリ内で表示されるようになります。 Capacitor plugins __CAPGO_KEEP_0__ プラグイン npx cap sync をインストールした場合、もう一度
実行する必要があります。
気づかなければならないことはありませんが、実際には完了しています。
では、実機でアプリを確認してみましょう！ Xcodeをインストールし、Androidアプリの場合、Android Studioをインストールする必要があります。また、iOSとAndroidのアプリをアプリストアで配布する場合、Apple Developer Programに登録する必要があります。Google Play Consoleの場合も同様です。 Capacitorを使用すると、nativeモバイル開発の新人でも、両方のネイティブプロジェクトを簡単に開くことができます: nativeプロジェクトを設定した後、実機にアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、実機にアプリをデプロイする準備が整うのを待ちます。例えば: android-studio-run
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 androidxcode-run
angular-mobile-app
Capacitorを使用すると、nativeモバイル開発の新人でも、両方のネイティブプロジェクトを簡単に開くことができます:
android-studio-run
Capacitor Live Reload
__CAPGO_KEEP_0__は、すべての現代的なフレームワークと同様に、ホットリロードに慣れていると思います。 そして、良いニュースは、同じ機能をモバイルデバイスでも実現できることです。 モバイルデバイスでも、最小限の手間で同じ機能を実現できます。 ローカルホストのアプリケーションにライブリロード機能を有効にするには、__CAPGO_KEEP_0__アプリが特定のURLからコンテンツを読み込むように設定する必要があります。
ネットワーク上でアクセスできるようにするには、__CAPGO_KEEP_0__アプリがローカルホストのアプリケーションから直接読み込むように設定する必要があります。 最初のステップは、ローカルIPアドレスを調べることです。Macを使用している場合、ターミナルで以下のコマンドを実行して調べることができます。 by having the Capacitor app load the content from the specific URL.
次に、IPv4アドレスを探します。
ipconfig getifaddr en0__CAPGO_KEEP_0__にアプリを直接サーバーから読み込ませるように指示するには、ファイルに別のエントリを追加する必要があります。
ipconfig__CAPGO_KEEP_0__
Capacitor capacitor.config.ts __CAPGO_KEEP_0__
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ポートを使用しています。これらの変更を適用するには、nativeプロジェクトにコピーする必要があります。
コマンドは
npx cap copyですが、webフォルダと設定のみをコピーし、nativeプロジェクトを更新せずにします。 copy Android StudioまたはXcodeを使用してアプリを再度デプロイしてください。その後、Angularアプリに何か変更を加えた場合、 sync自動的にリロードされ、変更が表示されます! The command is similar to
but it will only copy over the changes made to the web folder and configuration, without updating the native project.
__CAPGO_KEEP_0__をご注意ください __CAPGO_KEEP_0__ プラグインをインストールした場合でも、ネイティブプロジェクトの再構築が必要です。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。
code の IP とポートを正しく設定してください。上記の code ブロックはデモ用にデフォルトの Angular ポートを示しています。
Capacitor プラグインの使用
Capacitor プラグインの使用方法をご紹介します。ご存知のように、Capacitor プラグインは何度もご紹介しました。インストールするには、以下のコマンドを実行してください。
npm i @capacitor/share「Share plugin」は何も特別な機能はありませんが、ネイティブの共有ダイアログを表示します。インポートする必要はありませんが、以下のようにアプリに呼び出す必要があります。 「src/app/app.component.ts」を以下のように変更してください。プラグインをインストールした場合でも、sync操作と再デプロイが必要です。以下のコマンドを実行してください。 share() __CAPGO_KEEP_0__ __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'
});
}
}__CAPGO_KEEP_0__
npx cap syncボタンをクリックすると、素晴らしいネイティブシェアダイアログが実行されます!
Konsta UIを追加
Nuxt 3アプリでKonsta UIを使用するには、 tailwindがすでにインストールされている必要があります パッケージをインストールするには
npm i konstaさらに、 tailwind.config.js ファイルを修正する必要があります:
// 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 Konsta UIのために必要な追加のバリアントとヘルパー ユーティリティを含む、デフォルトの(またはカスタムの)Tailwind CSS構成を拡張します。
ここで、主な App コンポーネントを設定する必要があります。グローバルパラメータ(例えば theme).
アプリ全体をラップする必要があります App in the src/app/app.component.html:
<app>
<h1>Welcome to Angular and Capacitor!</h1>
<button (click)="share()">Share now!</button>
</app>例のページ
すべての設定が完了したら、Konsta UI VueコンポーネントをAngularページで使用できます。
例えば、以下のように開いてみましょう。 src/app/app.component.html 必要なすべてのコンポーネントをインストールした後、ライブリロードが同期されていない場合は、すべてを再起動してみてください。そうすると、Angularと__CAPGO_KEEP_0__で構築されたモバイルアプリケーションを確認できます。
<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!
konsta-angular
__CAPGO_KEEP_0__は既存のWebプロジェクトを基にしたネイティブアプリケーションを構築するための優れたオプションです。__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:
