Creating Mobile Apps with live updates, Quasar and Capacitor.

このチュートリアルでは、Quasarを使用して新しいWebアプリを作成し始めます。 Quasar後で、Capacitorを使用してモバイルアプリに変換する方法を学びます。モバイルでアプリが見栄えが良くなるようにしたい場合は。

Capacitorを使用すると、QuasarのWebアプリをモバイルアプリに変換することができます。React Nativeのような別の方法を学ぶことなく、多くのハードな作業を行う必要がなくなる。

このチュートリアルでは、Quasarアプリの新しい作成から始め、Capacitorを使用してネイティブモバイルアプリに移行するプロセスを導きます。また、Capacitorを使用して、秒単位でアプリにライブアップデートを送信することもできます。 Capgo コンテキスト:Capgo UIの長い文字列から取り出されたHTMLテキストのフラグメント (親キー`submitting_a_pr_to_capgo`). ページ/エリア:Capgoのマーケティングウェブサイト。役割:ウェブサイトのコピー。見つかった場所:contributing.astroページ。Capgo製品/ブランド名と開発者用語を完全に保持する。

Capacitor

CapacitorJSは本当にゲームチェンジャーです! どのWebプロジェクトでも容易に取り入れることができ、ネイティブのWebビューにアプリケーションをラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。さらに、プラグインはJSブリッジを使用してカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使用すると、複雑なセットアップや急勾配の学習カーブなしで素晴らしいネイティブモバイルアプリを取得できます。APIと機能性がstreamlinedなため、プロジェクトに簡単に統合できます。私に任せると、Capacitorを使用して完全に機能するネイティブアプリを達成するのはとても簡単です!

Quasarアプリを準備する

新しいQuasarアプリを作成するには、以下のコマンドを実行します:

npm init quasar

Pick the “App with Quasar CLI” option then “Quasar v2”.

Quasar v2 を選択して "Quasar Project を設定する" を選択します。 Quasar Project を作成するには、 export プロジェクトのパッケージ.json に、 Quasar Project を作成してビルドするための簡単なスクリプトを追加します。

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

コマンドを実行すると、プロジェクトのルートディレクトリに新しいフォルダが表示されます。 generateこのフォルダは、後で __CAPGO_KEEP_0__ が使用する予定ですが、現在は正しく設定する必要があります。 dist __CAPGO_KEEP_0__ を Quasar Project に追加する

Capacitor

Capacitor

To package any web app into a native mobile container, we must follow a few initial steps, but afterward it’s as simple as executing a single sync command.

Firstly, we can install the Capacitor CLI __CAPGO_KEEP_1__

as a development dependency, and then set it up within our project. During the setup, you can press “enter” to accept the default values for name and bundle 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 Quasar 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

Initialize __CAPGO_KEEP_0__ By this point, you should be able to observe new iOS と、 (context:Capgo marketing website. Role:Short UI label or navigation item. Seen in:page trust.astro. Message key `and` (And).) 「アンドロイド」 Quasarプロジェクト内のフォルダ。

それは実際のネイティブプロジェクトです!

Androidプロジェクトにアクセスするには、後で必要になります。 Android StudioiOSの場合はMacが必要で、Xcodeをインストールする必要があります。 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__.ファイルと更新する webDir:

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

Capgoのソリューションマーケティングページで見ることができるHTMLテキストのフラグメントです。

npm run generate
npx cap sync

以下のコマンドを実行してみましょう。 npm run generate 最初のコマンド 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__をネイティブプラットフォームの適切な場所にSyncし、表示するアプリに表示することができます。 Syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、Capacitorプラグインをインストールした場合 __CAPGO_KEEP_0__プラグイン npx cap sync を実行する必要があります。

気づかなければならないことなく、実際には完了しています。では、デバイスでアプリを確認してみましょう!

nativeアプリをビルドしてデプロイする

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 Android Studio がインストールされている必要があります。さらに、App Storeでアプリを配布する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

nativeモバイル開発に慣れていない場合は、Capacitor CLIを使用して、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、実機にアプリをデプロイすることは簡単です。Android Studioでは、設定を変更することなく実機にアプリをデプロイすることができます。例えば、

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。実機にアプリをデプロイするのではなくシミュレータにのみデプロイする場合は、設定を変更する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、実機にアプリをデプロイするには、上部で実機を選択してから、実行をクリックするだけです。例えば、

成功しました！QuasarのWebアプリをモバイルデバイスにデプロイしました。例えば、

しかし、開発中にはもっと速くする方法もある…

Capgo Live Update

Capgo Live Updateは、開発者がアプリの更新をアプリストアの通常の提出プロセスを経ることなく、配信できるサービスです。この方法は、バグを修正したり、アプリの小さな更新を迅速に実行したりするのに便利です。

QuasarアプリにCapgoを統合することは、リアルタイムのライブ更新の力を手に入れるための簡単なプロセスです。このステップバイステップのガイドでは、Capgo Live Updateの統合と実装を通して、シームレスな更新を提供することができます。

Capgoアカウントにサインアップして、Capgoダッシュボードにアクセス:

最初のバージョンをアップロードするために、APIキーを取得するためにサインアップする時間です。まずは Capgoアカウントにサインアップする.

Capgo SDKをインストールする:

コマンドラインから、Capacitorアプリのルートディレクトリに直接、次のコマンドを実行します。

npm i @capgo/capacitor-updater && npx cap sync Capacitorアプリにプラグインをインストールする

次に、アプリにcodeをCodePushの代わりに追加します:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

このコマンドは、ネイティブプラグインにインストールの成功を通知します。

Login to Capgo CLOUD:

最初に、 all apikey CLIに登録されているAPIキーを使用してログインしてください。

`npx @capgo/cli@latest login YOU_KEY`

最初のアプリを追加してください。:

Capgo Cloudにアプリを作成し、CLIで開始してください。

    npx @capgo/cli@latest app add

このコマンドは、Capacitorのconfigファイルに定義されているすべての変数を使用してアプリを作成します。

最初のバージョンをアップロードしてください。:

Run the command to build your code and send it to Capgo with:

npx @capgo/cli@latest bundle upload`

デフォルトでは、バージョン名はpackage.jsonファイルに記載されているものになります。

チェックインしてください。 Capgo ビルドが存在する場合。

私が作ったモバイルサンドボックスアプリで試すこともできます。 デフォルトチャンネルを設定.

Capgoにアプリを送った後、デフォルトチャンネルを設定して、アプリが__CAPGO_KEEP_1__からアップデートを受け取るようにする必要があります。:

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from Capgo.

npx @capgo/cli@latest channel set production -s default

main JavaScriptファイルに次の設定を追加してください。:

次のコマンドを実行して、アプリを更新してください。

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

ライブアップデートを受け取る npm run build && npx cap copy アプリケーションがDeployからライブアップデートを受け取るには、デバイスまたはエミュレータでアプリを実行する必要があります。簡単な方法は、次のコマンドを実行して、ローカルアプリをエミュレータまたはコンピューターに接続されたデバイスで起動することです。

__CAPGO_KEEP_1__:

__CAPGO_KEEP_0__

  npx cap run [ios | android]

アプリを開き、バックグラウンドに置き、再度アプリを開きます。ログに表示されるように、アプリがアップデートを実行したことを確認してください。

おめでとうございます！ 🎉 ご自身の初めてのライブアップデートを成功させました。これがライブアップデートの始まりです。ライブアップデートの詳細については、ドキュメントを参照してください。 ライブアップデートドキュメント.

Using Capacitor Plugins

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

Share プラグインは、特別な機能はありませんが、ネイティブの共有ダイアログを表示します! Share プラグインを使用するには、以下のコードを追加してください。pages/index.vue を変更するには、以下のコードを追加してください。 share() プラグインをインストールした後、同期処理を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。 同期処理を実行するには、以下のコマンドを実行してください。 __CAPGO_KEEP_0__

<template>
  <div>
    <h1>Welcome to Quasar and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

__CAPGO_KEEP_0__

npx cap sync

ボタンを押した後、素晴らしいネイティブシェアダイアログの実行を目撃できます!

次に、iOSとAndroidでアプリをよりネイティブに感じさせるために、Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

ネイティブフィーリングのUIとCapgoネイティブナビゲーションとトランジション

数年間、 イオニック を使用してクロスプラットフォームアプリケーションを構築してきましたが、 クアサーの.

For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation を持っている場合、ほとんどの場合、価値がありません。クアサーの+__CAPGO_KEEP_0__アプリでネイティブモバイルフィーリングを実現するには、ウェブのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。
• @capgo/capacitor-native-navigation —ネイティブナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーしたタブバーのスタイル。クアサーのルーターはルートの状態を維持し、プラグインはネイティブのブラウザを管理します。

Capgoのインストールは両方必要です。

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

CapacitorのCSSインセットモードでネイティブのナビゲーションを設定して、ウェブコンテンツがネイティブのバーを尊重するようにします。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Liquid Glassタブバーをレンダリングします (iOSはシステム所有のレンダリングを使用し、AndroidはぼやけたWebViewバックグラウンドを使用します)。

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.push(`/${id}`);
});

ネイティブのページトランジションをアプリシェルに追加します。

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

ルーティングされたページを cap-router-outlet, cap-page、 cap-content、 setDirection('forward') または setDirection('back') before navigating. Do not duplicate web headers or footers when native navigation owns those surfaces.

See the full guides: Using @capgo/capacitor-native-navigation と呼びます。 Using @capgo/capacitor-transitions.

Safe areas with Tailwind

Tailwind CSSのデバイスセーフエリアを使用するには @capgo/tailwind-capacitor Capacitorで公開 tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

npm add -D tailwind-capacitor

In src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Capacitorの機能、 pt-safe, pb-safeの代わりに px-safe 手動で env(safe-area-inset-*) プロジェクトは積極的に開発されています。Quasarの設定で不足しているものがあれば GitHubのPRを開く.

iOSレイアウトの問題を修正する (ビュー ポート、セーフ エリア、水平オーバーフロー)

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、ビュー ポートタグを追加したり変更したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビュー ポートメタタグが正しく適用されていることを確認する

(またはQuasarのHTMLテンプレート内)

ビュー ポートメタタグを設定する index.html iOSセーフエリアを1つのルートラッパーからハンドルする <head>:

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

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく:

すべてのページコンテンツを

html,
body,
#q-app {
  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);
}

セーフエリアのパディングを複数回追加したり、ヘッダー、モーダル、レイアウトラッパーに追加したりすると、UIが切り取られたり大きすぎるように見えることがあります。 .app-shellセーフエリアのパディングを

__CAPGO_KEEP_0__のPRを開く @capgo/capacitor, __CAPGO_KEEP_1__ を使用して同じパディングを表現できます。 pt-safe pb-safe px-safe シングルシェル上で。

Capacitor を contentInset 「~」 never に設定します。

最初に capacitor.config.ts「~」 contentInsetMode: 'css'で

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) ) がセーフエリアを管理するようにします。

__CAPGO_KEEP_0__ の自動コンテンツインセットと CSS のパディングを組み合わせると、ダブルスペースの原因となることがよくあります。

Safari Web インスペクターで実行します。 100vw, Tailwind w-screen, 固定ピクセル幅、または大きい min-width.

In Safari Web インスペクターで実行します。

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

Tailwindの場合、 w-screen を置き換えます。 w-full 可能な限り 100vw / w-screen水平方向のオーバーフロー問題の多くは、

、安全エリアのパディングが重複したり、固定幅のコンテナから来ています — ではなく、ビューポートのメタタグ自体からです。

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__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を簡単に共有し、UIの統一性を維持する方法を提供します。 Capgoの追加により、最新の機能やバグ修正を常に利用できるように、リアルタイムの更新をアプリに追加するのは、もうとても簡単です。

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

Keep going from Creating Mobile Apps with live updates, Quasar and Capacitor.

Capacitorを使用している場合 Creating Mobile Apps with live updates, Quasar and Capacitor. Capacitorを使用して、ネイティブプラグインの作業計画を立てるには、Capacitorプラグインディレクトリと接続する必要があります。 Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capacitorプラグインの実装詳細 プラグインの追加または更新 イオニック エンタープライズ プラグインの代替 イオニック エンタープライズ プラグインの代替の製品ワークフローについて Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについて