1. HOME
  2. ブログ
  3. IT技術
  4. 【Flutter】gRPCを使ってAPI通信を実装する【前編】

【Flutter】gRPCを使ってAPI通信を実装する【前編】

はじめに

近々gRPCを使ってAPI通信するFlutterアプリを開発する機会があるので、そこに向けた事前準備&備忘録として対応内容を記録していきます。

本記事ではgPRCの環境構築からUnary RPCを用いてFlutterアプリ上でHello, worldするまでの実装をまとめます。

また、本記事では触れないのですが、後編の記事では下記4つの通信方式すべてのパターンで実装した内容をまとめていく予定です。

  • Unary RPC (単一リクエスト, 単一レスポンス)
  • Server streaming RPC (単一リクエスト, 複数レスポンス)
  • Client streaming RPC (複数リクエスト, 単一レスポンス)
  • Bidirectional streaming RPC (複数リクエスト, 複数レスポンス)

gRPCとは?という部分の説明は省きますので、詳細を知りたい方は公式ドキュメントを御覧ください。

開発環境

開発環境は以下の通りです。

Dart2.18.2
Flutter3.3.4
protoc3.21.7

実装

まずはgRPCを使った実装の流れを把握するために、Hello, worldを出力する簡単なアプリを作成していきます。

環境構築

実装の前にDartでgRPCを利用するための環境構築を行います。

Dart

version 2.12以上のDartをインストールします。
今回はFlutter SDKのDartを参照するので省略します。

protoc

Protocol bufferのコンパイラであるprotocをインストールします。バージョンは3以上が必要です。
筆者はmacOSを使っているので、Homebrewをつかってインストールします。

※ バイナリをインストールして設定することも可能です。
(参考:Install pre-compiled binaries (any OS)

Dart plugin

本記事ではDartでProtocol compilerのDartプラグインをインストールします。

以上で環境構築は完了です。

サーバー側

Hello, worldのサンプルリポジトリが公式リポジトリに用意されていますが、今回は学習も兼ねて同様の環境を自分で作成していきます。

まずは任意のディレクトリで下記コマンドを叩いてサーバー側のプロジェクトを作成します。

続いて、プロジェクトのルートで protos ディレクトリを作成し、 helloworld.proto ファイルを protos ディレクトリ配下に作成します。

作成した helloworld.proto にHello, worldを返すサービスおよびリクエストとレスポンスを定義します。
ユーザー名を受け取って、メッセージを返却する形です。

次にgRPCのDart用コードを出力していくのですが、アプリ側と生成されたコードを共有したいので、自動生成されたファイルを参照できるパッケージを作成します。

server と同じディレクトリで下記コマンドを叩いて grpc_gen パッケージを作成します。

grpc_gen/pubspec.yaml に必要なパッケージを追加し、 lib 配下に src ディレクトリを作成しておきます。

準備ができたら、gRPCのDart用コードを出力していきます。

出力すると下記のような形になります。

 

利用する側がパッケージ内の個々のファイルを意識しなくても使えるように、 grpc_gen.dart で各ファイルをexportしておきます。

続いて、 server ディレクトリに戻って、 server/pubspec.yaml に必要なパッケージを追加します。

最後に GreeterServiceBase を継承した GreeterService クラスを lib/greeter_service.dart として作成し、 bin/server.dart 内でサーバーアプリを起動するmain処理を実装します。

これでサーバー側の実装および準備は完了です。

アプリ側

サーバー側の準備が完了したので、次はアプリ側の実装を行っていきます。

まずは server および grpc_gen と同じ階層でアプリ用のプロジェクトを作成します。

次に必要なパッケージを app/pubspec.yaml に追加していきます。

※状態管理に Riverpod 、ルーティングに GoRouter を利用します。

続いて、先程準備したサーバー側の処理を呼び出すための画面を実装します。
画面の機能としては、テキストの入力が完了したときにリクエストが送信され、レスポンスを受け取ると挨拶が表示されるというものを作っていきます。

まずはサーバーへアクセスするためのチャンネルを生成して返却する Provider を実装します。
Providerには autoDispose を付与して、本 Providerを参照している ProviderWidget が破棄されたときに channel.shutdown() が実行されるようにしています。

次に、入力した文字列を保持する StateProviderを作成します。
入力完了時に state が更新される想定です。

続いて、サーバーから取得した挨拶情報を取得する FutureProvider を作成します。
GreeterClientHelloRequest は先程サーバー側の準備で作成した grpc_gen パッケージからimportして利用します。
REST APIのようにJSONから型変換せずに安全に利用できるのが嬉しいですね!

最後に、表示する Widget を作成します。

全体のコードは下記のとおりです。

Hello, world用画面の全体のコード

動作確認

それでは動作確認です。

まずは、サーバー側アプリを実行します。

サーバーの準備ができたらアプリを起動しテキスト入力してみると…

無事サーバーとの通信ができていることが確認できました!

まとめ

今回はgRPCを使ってHello, worldするFlutterアプリを作成しました。

gRPCを使って通信することで、JSON変換周りやAPIクライアント周りを実装する必要がないので安全に通信できるようになりますね。

サーバー側からアプリ側の実装まで一通りの流れは把握できましたが、Hello, worldでは少し物足りない部分もあったので、後編の記事では下記4つの通信方式を使って色々なパターンで実装してみようと考えています!

  • Unary RPC (単一リクエスト, 単一レスポンス)
  • Server streaming RPC (単一リクエスト, 複数レスポンス)
  • Client streaming RPC (複数リクエスト, 単一レスポンス)
  • Bidirectional streaming RPC (複数リクエスト, 複数レスポンス)

gRPCをFlutterアプリで導入しようと考えている方の参考になれば幸いです。

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア