__CAPGO_CREATING_MOBILE_APPS_WITH_LIVE_UPDATES_

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

Capacitor

This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use このチュートリアルでは、Quasarアプリの新しい作成から始め、Capgoを使用してモバイルアプリに移行するプロセスを指導します。また、Capgo を使用して、秒単位でアプリにライブ更新を送信することもできます。

Capacitor

について

With Capacitor, APIの素晴らしいネイティブモバイルアプリを手軽に作成できます。複雑な設定や学習曲線のあるものではありません。Capacitorを使用すると、プロジェクトに簡単に統合できるスリムで機能が簡素化されたものになります。私に任せれば、Capacitorを使って完全に機能するネイティブアプリを作成するのはとても簡単です。

Quasarアプリの準備

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

npm init quasar

Quasarプロジェクトの設定

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

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

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

コマンドを実行した後、 generate新しいプロジェクトが表示されるはずです。 dist プロジェクトのルートディレクトリにあるフォルダ。

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

Adding Capacitor to Your Quasar App

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

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

この時点で、__CAPGO_KEEP_0__によって新しいフォルダが観察できるはずです。

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

__CAPGO_KEEP_0__ iOS および Android Quasarプロジェクト内のフォルダ。

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

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 webDir, これはビルドコマンドの結果に指す必要があります。

この不正確さを直すには、 capacitor.config.json ファイルを開いて webDir:

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

以下のコマンドを実行してみましょう。

npm run generate
npx cap sync

最初のコマンド npm run generate は、Quasar プロジェクトをビルドし、静的ビルドをコピーするだけです。 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 もう一度実行する時が来た npx cap sync __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

iOSおよびAndroid用のネイティブアプリをビルドおよびデプロイ

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

ネイティブモバイル開発に新人ですか? Capacitor CLI を使用すると、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

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

android-studio-run

Xcodeで、実機にアプリをデプロイするには、署名アカウントを設定する必要があります。シミュレータにのみデプロイする場合は、実機にデプロイするには署名アカウントを設定する必要があります。署名アカウントを設定する必要がある場合は、Xcodeはプロセスをガイドします (ただし、再び、開発プログラムに登録する必要があります)。その後、デバイスに接続されているデバイスを選択して、上部に表示されているように、簡単に再生ボタンをクリックしてアプリを実行できます。ここでは、例を示します。

xcode-run

成功しました！QuasarのWebアプリをモバイルデバイスにデプロイしました。ここでは、例を示します。

しかし、開発中にこの方法を使用するには、もう少し速い方法があります。

Capgo Live Update

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

Integrating Capgo into your Quasar app is a straightforward process that empowers you to harness the power of real-time live updates. This step-by-step guide will walk you through the integration and implementation of Capgo Live Update, enabling you to deliver seamless updates.

Sign Up and Access the Capgo Dashboard:

It’s time to sign up, and get your API key to upload your first version! Begin by signing up for a Capgo account.

Install the Capgo SDK:

コマンドラインから、Capacitor アプリのルートディレクトリに移動して、以下のコマンドを実行してください:

npm i @capgo/capacitor-updater && npx cap sync Capacitor アプリにプラグインをインストールするには、以下のコマンドを実行してください。

code をコードプッシュの代わりに追加してください。

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

CapacitorUpdater.notifyAppReady()

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

Capgo CLOUDにログインしてください。:

まず、__CAPGO_KEEP_0__ にアカウントの __CAPGO_KEEP_1__ を使用してログインしてください。 all 最初のアプリを追加してください。まず、CLI Cloudに __CAPGO_KEEP_1__ を使用してアプリを作成してください。

`npx @capgo/cli@latest login YOU_KEY`

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

Let’s get started by first creating an app in Capgo Cloud with the CLI.

    npx @capgo/cli@latest app add

This command will use all variables defined in the Capacitor config file to create the app.

__CAPGO_KEEP_0__:

コマンドを実行して、codeをビルドし、Capgoに送信します。

npx @capgo/cli@latest bundle upload`

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

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

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

__CAPGO_KEEP_0__にアプリを送信した後、__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

__CAPGO_KEEP_0__の主なJavaScriptファイルにこの設定を追加します。:

次に、

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

CapacitorUpdater.notifyAppReady()

ビルドを実行します npm run build && npx cap copy アプリを更新するには。

ライブアップデートを受け取る:

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

  npx cap run [ios | android]

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

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

Capacitor プラグインの使用

Capacitor プラグインの使用方法をご紹介します。ご存知のとおり、プラグインを使用する方法をいくつかご紹介しました。プラグインを使用するには、以下のコマンドを実行して、プラグインをインストールする必要があります。

npm i @capacitor/share

「Share プラグイン」は、特別な機能はありませんが、ネイティブの共有ダイアログを表示します。プラグインをインストールする必要はありませんが、インストールしてみましょう。 Share プラグインインストールしたプラグインを使用するには、パッケージをインポートし、関連する関数を呼び出すだけです。アプリのコードを変更してみましょう。 share() 関数を呼び出すだけです。 pages/index.vue __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>

新しいプラグインをインストールする場合、同期処理を実行し、次にアプリをデバイスに再デプロイする必要があります。これを行うには、以下のコマンドを実行してください。

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

メイン設定を設定する必要がありますアプリ __CAPGO_KEEP_0__でグローバルパラメータを設定できるようにするためにはコンポーネントを設定する必要があります (例えば theme).

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

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

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

例ページ

すべての設定が完了したら、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最新の機能やバグ修正を常に利用できるように、リアルタイムでアプリに更新を追加することができます。

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

Creating Mobile Apps with live updates, Quasar and Capacitor.

Capacitor

Quasarアプリの準備

Adding Capacitor to Your Quasar App

iOSおよびAndroid用のネイティブアプリをビルドおよびデプロイ

Capgo Live Update

Capacitor プラグインの使用

Konsta UI を追加する

例ページ

まとめ