ライブ更新機能付きモバイルアプリの作成、QuasarとCapacitor。

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

Capacitorを使用すると、QuasarのWebアプリをモバイルアプリに変換することができます。ハードなことを多くすることなく、React Nativeのような新しいアプリケーションを作成する方法を学ぶ必要はありません。

このチュートリアルでは、Quasarアプリの新しいプロジェクトから始めて、Capacitorを使用してネイティブモバイルアプリに移行するプロセスをガイドします。さらに、Capacitorを使用して、秒数でアプリにライブアップデートを送信します。 Capgo __CAPGO_KEEP_0__

About Capacitor

__CAPGO_KEEP_0__を使用すると、複雑なセットアップや急勾配の学習曲線なしで素晴らしいネイティブモバイルアプリを取得できます。__CAPGO_KEEP_1__と機能性がstreamlinedされているため、プロジェクトに簡単に組み込むことができます。私に任せれば、__CAPGO_KEEP_2__を使用して完全に機能するネイティブアプリを実現するのはとても簡単です。

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!

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

Quasarプロジェクトの設定

npm init quasar

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

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

export export プロジェクトのうちのどれかを選択します。したがって、Quasar プロジェクトに簡単なスクリプトを含めることができます。 package.json パッケージ.json

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

コマンドを実行した後 generate新しい dist フォルダがプロジェクトのルートに表示されます。

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

Adding Capacitor to Your Quasar App

ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初にいくつかの初期ステップを実行する必要がありますが、その後は単に 1 つのコマンドを実行するだけです。 sync 最初に、

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ をインストールできます。 Capacitor CLI 開発依存として追加し、プロジェクト内でセットアップする。セットアップ中は、名前とバンドルIDのデフォルト値に「Enter」を押すと設定されます。

次に、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

Initialize Capacitor

この時点で、Quasarプロジェクト内に実際のネイティブプロジェクトである「ios」、「android」フォルダが観察できるはずです。 これらは実際のネイティブプロジェクトです。 Androidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。 Capgo ios

android

Capgo 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 この問題を解決するには、 __CAPGO_KEEP_0__.config.json:

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

ファイルを開き、

npm run generate
npx cap sync

最初のコマンド npm run generate は、Quasar プロジェクトをビルドし、静的ビルドをコピーするだけです。2 番目のコマンド npx cap sync code をすべての Web に同步し、ネイティブプラットフォームの正しい場所に配置するため、表示されるアプリ内で表示されるようにします。

Sync コマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しい Capacitor プラグインをインストールしたときに、再度実行する必要があります。気づかなければならないことなく、実際には完了しています。なぜなら、デバイスでアプリを表示することができますから。 npx cap sync ネイティブアプリをビルドおよびデプロイする

iOS アプリを開発するには、

Xcode

がインストールされている必要があり、Android アプリを開発するには、 がインストールされている必要があります。 To develop iOS apps, you need to have Xcode installed, and for Android apps, you need to have Android Studio Android Studioでインストールされています。また、iOSとAndroidのアプリをアプリストアで配布する場合、Apple Developer Programに登録する必要があります。Google Play Consoleも同様です。

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

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

android-studio-run

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

xcode-run

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

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

Capgo Live Update

Capgo Live Update is a service that allows developers to deploy updates to their mobile apps without going through the traditional App Store submission process. This can be a convenient way to quickly fix bugs or make small updates to an app without waiting for the App Store review process.

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

Sign Upと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()

このコマンドを実行すると、

Capgo CLOUDにログイン:

最初は all __CAPGO_KEEP_0__ APIキーあなたのアカウントに存在するもので、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 ビルドが存在するかどうかを確認する

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

Make channel default:

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

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

Configure app to validate updates:

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

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

CapacitorUpdater.notifyAppReady()

Then do a npm run build && npx cap copy を実行して、アプリを更新してください。

Receive a Live Update:

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

  npx cap run [ios | android]

Open the app, put it in the background and open it again, you should see in the logs the app did the update.

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

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プラグインは何も特別なことはありませんが、native shareダイアログを表示します!Shareプラグイン share() を使用するには、パッケージをインポートし、関連する関数を呼び出すだけです。なので、 pages/index.vue を次のように変更してみましょう。

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

プラグインをインストールする際には、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。そうするには、次のコマンドを実行してください。

npx cap sync

ボタンを押すと、美しいnative shareダイアログが実際に動作します!

Konsta UIをQuasarアプリに追加するには、

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 Konsta UI のために必要な追加のバリアントとヘルパーユーティリティを含むデフォルトの (またはカスタムの) Tailwind CSS 設定を拡張します。

ここで、主な App コンポーネントを設定する必要があります。これで、グローバルパラメータ (例えば theme).

アプリ全体を App でラップする必要があります: pages/_app.vue:

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

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

例えば、

Example Page

Now when everything is set up, we can use Konsta UI Vue components in our Quasar pages. pages/index.vue targetLanguage":"Japanese",

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

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 Quasar and Capacitor!

texts":["と変更してください。",

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は既存のWebプロジェクトに基づいて構築されたネイティブアプリケーションのための優れたオプションであり、__CAPGO_KEEP_1__を簡単に共有し、UIの統一性を維持する方法を提供します。__CAPGO_KEEP_0__の追加により、さらに簡単にアプリにライブアップデートを追加できます。ユーザーは常に最新の機能とバグ修正にアクセスできるようになります。

CapgoをNext.jsアプリに追加する方法を学びたい場合は、次の記事を参照してください。

モバイルアプリの作成にlive updates、QuasarとCapacitorを使用します。