QuasarとCapacitorを使用したリアルタイム更新のあるモバイルアプリの作成

このチュートリアルでは、Quasarを使用して新しいWebアプリを作成し始めます。 Quasar. その後、Capacitorを使用してWebアプリをモバイルアプリに変換する方法を学びます。モバイル用にアプリを改善したい場合は、

Capacitorを使用すると、QuasarのWebアプリをモバイルアプリに変換する必要がなくなるため、React Nativeのような別の方法を学ぶ必要がなくなる。

このチュートリアルでは、Quasarアプリの新しい作成から始め、Capacitorを使用してモバイルアプリに移行するプロセスを導きます。また、QuasarアプリにCapacitorを組み込むことで、ネイティブモバイルアプリの世界に進出することもできます。さらに、 Capgo 秒以内にアプリにライブアップデートを送信します。

についてはCapacitor

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

Capacitorを使用すると、複雑なセットアップや急勾配の学習曲線なしで素晴らしいネイティブモバイルアプリを取得できます。APIがスリムで機能性がstreamlinedなので、プロジェクトに簡単に取り入れることができます。私に任せれば、Capacitorで完全に機能するネイティブアプリを実現するのは驚くほど容易です。

Quasarアプリの準備

新しいQuasarアプリを作成するには、以下のコマンドを実行してください。

npm init quasar

「Quasar CLI」のオプションを選択し、「Quasar v2」を選択してください。

ネイティブモバイルアプリを作成するには、プロジェクトの export が必要です。したがって、プロジェクトに簡単なスクリプトを含めることができます。 package.json __CAPGO_KEEP_0__で利用できるQuasarプロジェクトを作成およびコピーすることができます。

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

コマンドを実行した後 generate新しい dist プロジェクトのルートディレクトリにフォルダが見つかります。

このフォルダは後でCapacitorによって使用される予定ですが、現在は正しく設定する必要があります。

CapacitorをQuasarアプリに追加する

ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、初期ステップを実行する必要がありますが、その後は単に1つのコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__と__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値に「Enter」を押してください。

package.json Capacitor CLI コマンドを実行した後

次に、コアパッケージとiOSおよびAndroidプラットフォームの関連パッケージをインストールする必要があります。

最後に、Capacitorはプロジェクトのルートディレクトリに各プラットフォームごとにフォルダを作成します。

# 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

この時点で、Quasarプロジェクト内に新しく ios と android フォルダが観察できます。

これらは実際のネイティブプロジェクトです。

Androidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。 iOSの場合はMacが必要で、Macをインストールする必要があります。__CAPGO_KEEP_0__ Xcode.

さらに、プロジェクト内で capacitor.config.ts ファイルを見つけることができなければなりません。このファイルには、Syncの際に使用される基本的なCapacitor設定が含まれています。変更する必要があるのは webDirのみです。この値は、ビルドコマンドの結果に指す必要があります。現在は正確ではありません。

この問題を解決するには、 capacitor.config.json ファイルを開き、 webDir:

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

の値を更新してください。

npm run generate
npx cap sync

変更を確認するには、以下のコマンドを実行してみてください。 npm run generate will simply build your Quasar project and copy the static build, while the second command 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.

Additionally, the sync command might update the native platforms and install plugins, so when you install a new Capacitor plugins it’s time to run npx cap sync again.

Without noticing, you are now actually done, so let’s see the app on a device!

CapgoでiOSアプリを開発するには、Xcodeがインストールされている必要があります。Androidアプリを開発するには、Android Studioがインストールされている必要があります。

Build and Deploy native apps CapgoでiOSアプリを開発するには、Xcodeがインストールされている必要があります。Androidアプリを開発するには、Android Studioがインストールされている必要があります。 To develop iOS apps, you need to have Xcode installed, and for Android apps, you need to have __CAPGO_KEEP_0__と__CAPGO_KEEP_1__を使用して、iOSとAndroidの両方のネイティブプロジェクトを簡単に開くことができます。

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

iOSとAndroidの両方のアプリを配布する場合、Google Play Consoleに登録する必要があります。

xcode-run

quasar-mobile-app

__CAPGO_KEEP_0__ Live Updateは、開発者がアプリの更新をデプロイするためのサービスです。

Capgo Live Updateは、開発者がアプリの更新をデプロイするためのサービスです。

Capgo Live Updateは、開発者がアプリの更新をデプロイするためのサービスです。

CapgoをQuasarアプリに統合することは、リアルタイムのライブ更新の力を引き出せる簡単なプロセスです。このステップバイステップのガイドでは、Capgo Live Updateの統合と実装を通して、滑らかな更新を提供することができます。

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

APIのキーゲットをアップロードする最初のバージョンに必要なAPIのサインアップの時期が来ました。始めに Capgoのアカウントにサインアップしてください.

CapgoのSDKをインストール:

Capacitorアプリのルートディレクトリからコマンドラインで直接実行してください:

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

codeをCodePushの代わりにアプリに追加してください:

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

CapacitorUpdater.notifyAppReady()

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

Capgo CLOUDにログイン:

__CAPGO_KEEP_0__ API KEYを取得するには all apikeyを使用してください CLIでログインするために利用できるアカウント内にあるものを表示します。

`npx @capgo/cli@latest login YOU_KEY`

アプリを追加:

Capgo CloudでCLIを使用して最初のアプリを作成しましょう。

    npx @capgo/cli@latest app add

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

最初のバージョンをアップロード:

codeをビルドし、Capgoに送信するコマンドを実行してください。

npx @capgo/cli@latest bundle upload`

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

チェックイン Capgo ビルドが存在するかどうかを確認します。

あなたの モバイルサンドボックスアプリでテストすることもできます。.

デフォルトチャンネルに設定:

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

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

アップデートを検証するアプリを設定:

主なJavaScriptファイルにこの設定を追加してください。

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

CapacitorUpdater.notifyAppReady()

次に、 npm run build && npx cap copy ローカルアプリをエミュレータまたはデバイスに起動するコマンドを実行してください。

デバイスまたはエミュレータでアプリを実行することで、アプリがDeployからライブアップデートを受信するようにする必要があります。:

アプリを開き、バックグラウンドに置き、再度アプリを開くと、ログにアップデートが実行されたことが確認できます。

  npx cap run [ios | android]

おめでとうございます！ 🎉 最初のライブアップデートを成功させました。これがライブアップデートの始まりです。ライブアップデートの詳細については、

ライブアップデートドキュメント ライブアップデートの詳細については、.

Capacitor プラグインを使用

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 plugin」は何も特別なことはありませんが、native share dialogを呼び出すのに役立ちます。 Shareプラグインこのプラグインを使用するには、パッケージをインポートし、関連する関数を呼び出すだけです。なぜなら、 share() pages/index.vue を次のように変更する必要があるからです。 新しいプラグインをインストールする場合、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。これを行うには、次のコマンドを実行してください。

<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>

ボタンをクリックすると、美しいnative share dialogが実際に動作することがわかります!

npx cap sync

オプションでKonsta UIを追加する

Quasarアプリで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: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig デフォルトの設定（またはカスタムの設定）を上書きすることで、Tailwind CSS の設定に追加のバリアントとヘルパー ユーティリティを追加します。

ここで、Quasar のページで使用するために、グローバル設定を設定するために使用する主な App コンポーネントを設定する必要があります。例えば、 theme).

アプリケーションの全体を囲むために使用する App の pages/_app.vue:

<template>
  <App theme="ios">
    <Quasar />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Example Page

すべての設定が完了したら、Quasar のページで Konsta UI Vue コンポーネントを使用できます。

例えば、 pages/index.vue と変更してください：

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Quasar & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

必要なすべてのコンポーネントをインストールした後、ライブリロードが同期していない場合は、すべてを再起動してみてください。 それが完了したら、QuasarとCapacitorで作成されたモバイルアプリを少しネイティブな見た目で見ることができます。

まとめ

Capacitorは既存のWebプロジェクトを基にしたネイティブアプリケーションを構築するための優れたオプションであり、codeを簡単に共有し、UIの統一性を維持する方法を提供します。

さらに、__CAPGO_KEEP_0__の追加により、最新の機能やバグ修正をユーザーに提供するために、ライブアップデートを簡単に追加できます。 CapgoをNext.jsアプリに追加する方法を学びたい場合は、次の記事を参照してください。執筆者

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