私は自分のプログラミング経験を利用して、弟に没入型のクリスマスの朝を与えることにしました。私は兄が彼の贈り物を開く方法を理解するために彼の電話で遊ぶことができるゲームを作りました。キャッチは何ですか？ゲームを制御する唯一の方法は、Echoを介して音声アシスタントAlexaにコマンドを送信することです。
ゲーム
それで、私は簡単なゲームを作成しました-ダンジョンの迷路を横断します。私は8x 8のグリッドから始め、壁、鍵のかかったドア、地図上に隠されたアイテムでダンジョンの床をペイントしました。目標は、すべてのアイテムを見つけてダンジョンを通過することです。アイテムを見つけたら、そのアイテムに対応するギフトを開くことができます。
ゲームでは、移動または探索の2つのアクションを選択できます。探索-おやつや贈り物を開く機会を求めて部屋を探索し、移動します-隣接する部屋に移動します。移動すると、マップがいっぱいになり始め、移動するたびにレイアウトがより見やすくなります。すべての部屋で、Alexaは物語の一部を語っています。兄がダンジョンに深く入り込むほど、話は混乱します。いいですね
地図
モバイルアプリ
明日の冒険のスリルを刺激するために、毎年クリスマスイブに、私は兄にギフトを受け取るためのラミネートされたガイドを渡します。今年は、モバイルアプリのダウンロードリンクを暗号化するQRコードがあります。兄弟はアプリをインストールし、冒険の準備が整います。アプリ自体はとてもシンプルです。実際、このアプリケーションは地図を見るためだけのものです。すべてのコマンドはAlexaを経由するため、電話を見て次の動きを計画する以外に何もできません。
このアプリには、インベントリページとマップページの2つの画面があります。見つかったギフトとその画像は、在庫ページに表示されます。マップページには、探索された部屋とアイテムが見つかった場所が表示されます。
モバイルアプリページ
何かをすばやく開発する必要があるたびに、OutSystemsにアクセスし ます。これは、最小限のコードで直感的な開発プラットフォームであり、リアクティブなWebページ、Webサービス、およびモバイルアプリをすばやく構築できます。彼女の一番いいところは何ですか？コンセプトの証明に無料で使用できます！魔法の印象を与えるいくつかの可動部分があります：
- API。
- モバイルアプリ。
- アレクサスキル。
- WebSocket。
API
アプリケーションには、ロジックを実行して状態を保存するための頭脳が必要です。 Best Christmas Gift Brainは、OutSystemsに組み込まれているシンプルなAPIです。それは地図上の位置をロードし、動きをチェックし、あなたを動かし、そしてあなたに物語の少しを伝えます。アプリケーション全体には、ナビゲート用と現在の状態を取得するための2つのAPIエンドポイントしかありません。現在の状態を取得できるのは、アプリケーションを終了してアプリケーションに戻ったときだけです（兄弟が時々休憩を取ることを知っています）。舞台裏では、以下に、マップ、プロット、在庫のギフト、および部屋間の遷移を構築するデータモデルがあります。
ゲーム内の関係図。
OutSystemsを使用して、データモデル、文字移動ロジック、およびすべてを管理するためのRESTAPIを作成しました。フロントエンドを作成する時が来ました！
モバイルアプリ
繰り返しになりますが、OutSystemsがお手伝いします。このサービスには、コンポーネントを画面にドラッグアンドドロップして、すべてをモバイルアプリにアセンブルできるシンプルなユーザーインターフェイスがあります。そこで私は仕事に取り掛かり、2ページを描いて、どのギフトが見つかったか、マップ上のどの領域が探索されたかを追跡しました。APIを使用して、マップデータをロードし、画面に表示しました。私が言ったように、これは非常に単純なモバイルアプリケーションであり、あなたはそれを見ることができるだけです。CSSをいじって、クリスマスの画像をいくつか追加して、それで十分だと判断しました。
アレクサスキル
私は仕事で毎日AWSを使用しているので、プラットフォームのサービスの多くにかなり精通しています。しかし、私はこれまでAlexaのスキルを開発したことがありません。コンソールに近づいて、私はビデオを見始めました。AWSのAlexaチームは、彼らが何をしているかを本当に知っていることがわかりました。複雑な問題に対する単純な解決策の最良の表現の1つを見ました。スキルには2つの要素があります。
- 相互作用モデル。
- バックエンドコード。
インタラクションモデルは、特定のアクションをトリガーする単語またはフレーズを表示するだけです。いくつかのフレーズを入力し、インテントにマッピングしてから 、アプリのビルドボタンをクリックします。残りの魔法はコンソールで起こります。
Alexaスキルの2つの目的。
バックエンドコードも同様に簡単に記述できました。Alexa拡張機能をクラウドにプッシュすることで、VSコードでスキルコードを記述できます 。とても簡単です。呼び出されたときに各インテントが何をするかをコードで定義します。ゲームでは、私はそれぞれの意図私が使用して迅速な通話を書いたそうするために、OutSystemsに開発されたAPIと呼ばれる axiosを応答メッセージを繰り返すようにアレクサを求め、対応するAPIエンドポイントに。完了しました。
WebSocket
アプリケーションをテストしていると、何かを忘れていたことにすぐに気づきました。 Alexaがキャラクターを動かしているときにモバイルアプリを更新するにはどうすればよいですか？イベントが発生するたびにアプリケーションにデータを渡すものが必要でした。そしてそれは WebSocketでした。 WebSocketは基本的に、ブラウザ（またはモバイルアプリ）とサーバー間の双方向通信チャネルを開きます。これにより、サーバーを常にポーリングして更新を確認する代わりに、メッセージをすぐに受信でき ます。
WebSocket内では多くのことが起こっています。私にとって幸運なことに、消費者にとってすべてをより簡単にすることに焦点を当てている企業があります。プッシャーで無料のアカウントを作成しました 、数回クリックするだけでアプリを構成し、PusherをAPIとモバイルアプリに統合する準備ができました。WebSocketをパブリッシャー/サブスクライバーのアプローチと考えてください。システムで何かが発生すると、イベントが発生し、サブスクライバーはそれを受信してアクションを実行します。
キャラクターが部屋を移動したり探索したりするたびにプッシャーイベントを投稿するようにAPIを更新しました。また、APIによって返された履歴の一部をメッセージに含めました。簡単なJavaScriptイベントサブスクリプションコードスニペットをモバイルアプリに追加しました。サブスクリプションは画面上のデータを更新し、新しい履歴を表示します。私のエコーを使った簡単なテストでは、私が言葉を話すとすぐにキャラクターがマップ内を移動することがわかりました。かっこいいですね
プッシャーコントロールパネルには、WebSocketメッセージのグラフが表示されます。
曝露
私はクリスマス前にこの記事を書いています。私の兄はまだゲームを完了する喜びを持っていません。昨年、メッセージングとコールギフトのレビューでは、アイデアが複雑すぎて運に頼りすぎていたことがわかりました。私はそれを心に留め、次にどこに行くべきかについてのヒントを与えるゲームを開発しました。
信じられないかもしれませんが、去年のプレゼントで兄を怒らせたくありませんでした。私はこの贈り物が彼の人生の中で特別で楽しい機会であり、開発者としての私のスキルを開発し、学ぶ機会になることを望んでいます。今年のプレゼントは良い妥協点だと思います。それもかなり複雑ですが、従うべき話があります。さらに、私は多くの現代的で素晴らしい技術を使わなければなりません。
そしてそれは無料です！このギフトのために私がしたことはすべて無料枠で可能です。つまり、費用は私の時間だけでした。ストーリーを考え出し、地図を描き、すべてをまとめるのに約30時間かかりました。それは確かに投資でした。クリスマスに、彼女がそれだけの価値があるかどうかを調べます。間違いなく結果を報告します。メリークリスマス！
割引トレーニング-新しい2021年に、自分への贈り物をしてみませんか？また、HABRプロモーションコード は、バナーの割引に10％を追加することで、このギフトをさらに快適にします。
