2日間でLINEの主要4つのAPIを使ってみた。[実装編]
はじめに
今回の記事は、2daysハッカソンでLINEの主要APIの機能(Messaging API, CEK, LINE Beacon, LINE Pay)を実装したので、その話をします。 多分自分一人ではこの昨日全て実装することはできませんでした。チームのみんなで一致団結して、することで2daysのハッカソン期間中に十分な睡眠戻りながら、4つの機能を実装することができました。
アイディア部門を書いたので、今回はエンジニア視点から意識した部分を書いてみたいです。
メンバー構成
メンバー的には、自分・会社の同期・現地で意気投合したエンジニアさんの3人チームで参加しました。役割的には次のような感じです。
自分 : Messaging API, PM, CEK, Pay 同期 : Messaging API, CEK エンジニアさん : Messaging API, Beacon
制作物
「鎌倉観光を荷物なしでシュシュっといけるbot」を作成しました。 大きく分けると次の3つの機能です。
- 名所に近づくとBeaconに反応してClovaが観光案内をしてくれる機能
- 駅に近づくと帰りの時間をアナウンスしてくれる機能
- お土産屋さんに近づくとお土産の一覧を教えてくれて、LINE Payで決済でき、お届けしてくれる機能
実際にしたこと
実際に実施したことは以下の2つが大きいです。 - ファイル分割によるタスク分割 - ペアプロによる結合テスト 実際に作業したリポジトリはこちらです(4geru/line-boot-award-tokyo)。
ファイル分割によるタスク分割
具体的には以下のようにファイルを分割しました。
- それぞれのAPI
- clova.js
- beacon.js
- server.js(サーバー・botを司る)
- line-pay.js
- それぞれのメッセージに合わせたjsファイルの作成
- intro.js(観光地紹介のカルーセル)
- items.js(お土産紹介のカルーセル)
- message_object.js(その他のメッセージのテンプレート)
ペアプロによる結合テスト
結合部分は二人で、ペアプロを行い修正していきました。 修正した箇所では、ファイル分割・リファクタリングも同時に行い、可読性・汎用性の高いコードに修正しました。
詰まったポイント
アイディア編にも書いた通り「Beacon → リッチメニュー → LINE Pay → 購入・決済 」までのフローの部分が苦労しました。 この部分では、beacon, bot, flex message, line payあたりの技術を詰め込んでいます。
次にしたいこと
ハッカソンで作ったコードなので、予選を通った場合さらにリファクタリングをし、本戦までに、実際に鎌倉旅行をしてみます。 また、様々なAPIを利用したので、テンプレートエンジン化してみたいと思います。
