序章

Vue Native は、クロスプラットフォームのモバイルネイティブアプリケーションを提供するように設計されたJavascriptフレームワークです。 これは、 ReactNativeプロジェクトに触発されています。

Vue Nativeは元々、 React-Vue のフォークでした。これは、開発者が同じコードベースでVueとReactを記述できるようにするコンパイラーです。

このチュートリアルでは、VueNativeで利用可能なAPIとコンポーネントについて学習するためのアプリケーションを構築します。

作成したアプリケーションは、GiphyプラットフォームでトレンドGIFを表示します。 Giphy API は、各トレンドgifに関連付けられたgif画像、タイトル、およびタイプを取得するために使用されます。 画像と詳細は、次のようなVueネイティブコンポーネントを使用して表示されます ScrollView, Text、 と Image.

注:このチュートリアルの最後に記載されているデプロイプロセスはAndroid固有です。 ただし、このプロセスは、iOSの展開に関心のある人にとってはまだ教育的である可能性があります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。 このチュートリアルには、ノード6.0.0以降が必要です。
  • npm (Nodeにパッケージ化されています)やYarnなどのノードパッケージマネージャー。 このチュートリアルでは、 npm. 使用したい場合 yarn、これらの手順を置き換える必要があります。
  • JavaScriptとVueに関する知識も役立ちます。 公式のVueドキュメントに従って、Vueのコアコンセプトとコンポーネントのいくつかに精通することができます。
  • Giphy APIを使用するには、Giphyアカウントを作成またはログインする必要があります。

Expo は、新しいアプリケーションのビルドと実行に使用されます。 Expoは、AndroidおよびiOSアプリケーションを構築するためにReactNativeを中心に構築されたオープンソースのツールチェーンです。 カメラやストレージなどのシステム機能へのアクセスを提供します。

まだお持ちでない場合 expo-cli グローバルにインストールすると、ターミナルで次のコマンドを実行できます。

  1. npm install --global [email protected]

注:後でアプリをデプロイする場合は、Expoアカウントが必要になります。

ステップ1—プロジェクトの設定

まず、プロジェクトを設定し、いくつかの依存関係をインストールする必要があります。 VueネイティブCLIは、アプリケーションのブートストラップに使用されます。

の新しいプロジェクトを初期化します vue-gifs ターミナルで以下を実行することにより npx:

  1. npx [email protected] init vue-gifs

このコマンドを実行すると、ExpoCLIを使用してこのプロジェクトのアプリケーションがブートストラップされます。

iOSおよびAndroidプラットフォーム用にビルドするには、 scripts のオブジェクト package.json ファイル:

package.json
{
  "name": "vue-gifs",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    ...
    "build:ios": "expo build:ios",
    "build:android": "expo build:android",
  },
  ...
}

次に、を更新します sdkVersion の中に app.json のExpoバージョンと一致するファイル package.json. を開きます app.json ファイルを作成し、以下のスニペットのように更新します。

app.json
{
  "expo": {
    "name": "vue-gifs",
    "description": "This project is really great.",
    ...
    "sdkVersion": "37.0.3",
    ...
  }
}

注:このチュートリアルをテストする時点で、VueNativeCLIにはReactNativeバージョンが必要です。 37.0.1 とエキスポバージョン 37.0.3. 後日、手動で変更する必要があるかもしれません app.jsonpackage.json ファイルと実行 npm install. SDK のアップグレードについては、Expoのドキュメントを参照してください。

プロジェクトを設定したので、アプリケーションのテストを開始する準備が整いました。

ステップ2—モバイルでのテスト

モバイルでアプリケーションをテストするために、ExpoCLIはアプリケーションをテストするためのさまざまな方法を提供します。 1つ目は、アプリケーションの実行後に生成されるURLを使用することです。 このURLにモバイルブラウザでアクセスして、アプリケーションをテストできます。

あなたがにいることを確認してください vue-gifs プロジェクトディレクトリと実行 npm start アプリケーションを起動するには:

  1. npm start

Expoは通常、アプリケーションを開始します :19002 したがって、 http:// localhost:19002 にアクセスして、ブラウザーでExpoDevToolsを表示してください。 開発ツール内で、プレビューリンクをSMSまたは電子メールとして携帯電話に送信できます。

外部トンネル、LAN、またはローカル接続の3つの接続オプションのいずれかを選択できます。 ローカル接続の場合、携帯電話と仕事用PCは同じネットワークに接続する必要がありますが、トンネルはすべての場合に機能します。

次に使用できるテスト方法は、 Expo MobileAppをダウンロードすることです。 AppleAppStoreとAndroidPlayStoreの両方で見つけることができます。 iOSでは、アプリをインストールした後、カメラを開き、ブラウザバージョンのアプリケーションからQRコードをスキャンして、携帯電話で実行します。 Androidでは、Expoアプリを直接使用してQRコードをスキャンし、アプリケーションを実行できます。 その後、アプリケーションがモバイルデバイスに表示されます。

モバイルデバイスでテストするための別のオプションは、エミュレーターまたはシミュレーターを使用することです。 macOSでAndroidStudioまたはXcodeを使用すると、それぞれのプラットフォーム用のエミュレーターまたはシミュレーターを起動できます。 選択したプラットフォーム用のツールをダウンロードしてインストールします。iOSの場合はXcode、Androidの場合はAndroidStudioです。 インストール後、コマンドを実行してアプリケーションを起動します。

iOSの場合、次を実行します。

  1. npm run ios

Androidの場合、次を実行します。

  1. npm run android

アプリをテストするためのさまざまなオプションを検討したので、アプリケーションをビルドする準備が整いました。

ステップ3—Giphyアプリケーションを作成する

次のステップは、 GiphyDeveloperプラットフォームでアプリを作成することです。

開発者アカウントのダッシュボードには、アプリの作成ボタンがあります。 ボタンをクリックすると、SDKまたはAPIのいずれかを選択できます。 このチュートリアルでは、APIで十分です。

次に、次のステップアプリの作成の順にクリックします。 アプリケーションに関する詳細を入力します。

アプリを作成すると、新しいアプリケーションがAPIキーとともにダッシュボードに表示されます。 このキーは、Giphyにリクエストを送信するときに使用されます。

GiphyのJavascriptSDK は、Giphyサービス自体にリクエストを送信するために使用されます。 このコマンドをから実行します vue-gifs パッケージをインストールするディレクトリ:

  1. npm install --save [email protected]

これで、プロジェクトはこのSDKを使用してGiphyAPIを使用する準備が整いました。

ステップ4—アプリコンポーネントを構築する

このステップでは、アプリコンポーネントをビルドします。 を開きます App.vue ルートフォルダにファイルを保存し、以下のスニペットのように更新します。

App.vue
<template>
    <view>
        <scroll-view class="scroll-view">
            <!-- TODO: Create gif item and header -->
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
              <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true,
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
    },
  };
</script>

<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

上記のスニペットでは、 App コンポーネントは、コンポーネントの要素を格納するscrollviewコンポーネントをレンダリングします。 activityindicatorのみが表示されます。 これは、APIの呼び出しが完了すると、gifのリストに置き換えられます。

Giphyクライアントは、開発者ダッシュボードから取得したAPIキーを使用してインスタンス化されます。 プレースホルダー文字列は必ずAPIキーに置き換えてください。 を呼び出す trending メソッドは、Giphyトレンドエンドポイントを呼び出します。 最初に提供されるパラメーターは gifs:これは、どちらのトレンドアイテムを返す必要があるかを示します。 gifs また stickers. 2番目のパラメーターは、次のようなオプションのパラメーターを提供するオブジェクトです。 limit, offset, rating、 と fmt (フォーマット)。

このコードで使用される唯一のパラメーターは limit 結果をに制限するパラメータ 20 アイテム。 この呼び出しはで行われます created コンポーネントのライフサイクル。 最後に、 gif listは、返された結果をレンダリングするために使用されます。

リロード後、アプリケーションはアクティビティインジケータを表示する必要があります。

アプリコンポーネントを作成したので、gifアイテムコンポーネントを作成する準備が整いました。

ステップ5—Gifアイテムコンポーネントを構築する

各gifアイテムは、 View 成分。 View コンポーネントは、フレームワークの重要な構成要素です。 フレックスボックス、スタイリング、アクセシビリティを使用したレイアウトをサポートしています。 各アイテムには、gif、タイトル、およびタイプが表示されます。

名前の付いたフォルダを作成します components ルートフォルダにあります。 以内 components ディレクトリ、という名前のファイルを作成します GifItem.vue 次のコードを追加します。

components / GifItem.vue
<template>
  <view class="container">
    <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
    <text class="title">{{titleCase(gif.title)}}</text>
  </view>
</template>

<script>
export default {
  name: "GifItem",
  props: ["gif"],
  methods: {
    titleCase(text) {
      const textArray = text.split(" ");
      return textArray
        .map(text => {
          const trimmedText = text.trim();
          return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
        })
        .join(" ");
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}
.img {
  height: 200px;
  width: 300px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 7px;
}
</style>

Image コンポーネントは、各gifのソースを表示するために使用され、 Text コンポーネントは、gifタイトルを表示するために使用されます。 The Image コンポーネントは source 小道具、これは uri 財産。

The titleCase メソッドは、各gifのタイトルを取得し、タイトルケースのテキストを返し、テキスト内の各単語の最初の文字を大文字にします。 The GifItem コンポーネントは単一の支柱を取ります gif.

を更新します App.vue 新しいファイルを含める GifItem 以下のスニペットを使用します。

App.vue
<template>
    <view>
        <scroll-view class="scroll-view">
            <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
                <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  import GifItem from './components/GifItem';

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
      this.loading = false;
    },
    components: {GifItem}
  };
</script>

<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

Expoアプリでアプリケーションを開くと、アプリはリストに積み上げられたgifを表示します。

ローカルアプリケーションがgifのリストを表示していない場合は、コードがこのチュートリアルのスニペットと一致していること、およびGiphyAPIキーが有効であることを確認してください。

ステップ6—ヘッダーコンポーネントの構築

アプリケーションがトレンドGIFのリストを取得して表示できるようになったので、アプリケーションのコンテキストを提供するヘッダーを含めましょう。 ビューコンポーネントは、アプリケーションのヘッダーとして機能する領域を作成するために使用されます。

というファイルを作成します header.vue 以内 components ディレクトリを作成し、以下のコードで更新します。

components / header.vue
<template>
    <view class="header-container">
        <text class="header">Trending</text>
    </view>
</template>

<script>
  export default {
    name: 'header.vue'
  };
</script>

<style scoped>
    .header-container {
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom-color: aquamarine;
        border-bottom-width: 1px;
        margin-top: 20px;
    }
    .header {
        font-size: 16px;
        color: black;
        opacity: 0.8;
        font-weight: 600;
        text-align: center;
    }
</style>

次に、 header コンポーネントに App 成分。 これにより、アプリケーションの上部にヘッダーが表示されます。 を更新します App.vue 含めるファイル Header 成分:

App.vue
<template>
    <view>
        <header/>
        <scroll-view class="scroll-view">
            ...
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  import GifItem from './components/GifItem';
  import Header from './components/header';

  export default {
    name: 'App',
    data() {
     ...
    },
    async created() {
      ...
    },
    components: {GifItem, Header}
  };
</script>

<style>
  ...
</style>

アプリケーションが更新されると、ヘッダーがアプリケーションの上部に追加されます。

Vue Nativeが提供するコンポーネントは、トレンドGIFのリストをレンダリング、順序付け、および表示するために必要なすべての作業を実行しました。

ステップ7— Androidへのアプリケーションのデプロイ(オプション)

注:これは、チュートリアルを完了するために必要ではないオプションの手順です。 これは、プロジェクトの作成からアプリストアの送信までのワークフローに関する教育目的で検討する必要があります。

このチュートリアルの最後のステップは、アプリケーションをAndroidPlayストアにデプロイすることです。

まず、更新する必要があります app.json Android固有のプロパティを含める。 を開きます app.json ファイルを作成し、ファイルを更新して、 android 分野:

app.json
{
  "expo": {
    ...
    "android": {
      "package": "com.vue.gifs"
    }
  }
}

The android.package フィールドは、アプリストアでパッケージを表す一意の値です。 パッケージの命名規則について詳しくは、こちらをご覧ください。

ファイルを更新した後、ターミナルウィンドウでこのコマンドを実行します。 vue-gifs ディレクトリ:

  1. npm run build:android

このコマンドは、キーストアを提供するか、新しいキーストアを生成するかを尋ねるプロンプトを表示します。 既存のキーストアがある場合は、このオプションを選択するか、Expoにアプリケーション用にキーストアを生成させることができます。

完了すると、アプリケーションのダウンロードリンクが生成されます。このリンクをクリックすると、APKのダウンロードがトリガーされます。

ダウンロードしたAPKをAndroidPlayストアにデプロイするには、 PlayConsoleにアクセスしてアカウントを作成してください。 続行する前に登録料を支払う必要があります。 登録が完了したら、このページにアクセスし、手順に従ってアプリケーションをPlayストアにアップロードします。

結論

Vue Nativeは、Vue.jsを使用してモバイルプラットフォーム用のアプリケーションを構築するための便利なフレームワークです。 Vue NativeはReactにコンパイルされ、ReactNativeが提供するコンポーネントを使用します。 執筆時点では、そのコンポーネントの一部では、実際のReactNativeコンポーネントを使用してJSXを作成する必要があります。 VueNativeはReactNativeと連携するため、公式のReactNativeドキュメントに従って詳細を確認できます。