Flutter SDKが徐々にできあがってきましたので、これを使ってデモアプリを作ってみたいと思います。作るのはRSSフィードを表示して、それをお気に入り登録できるアプリです。データストアから一覧を表示して、詳細画面へ遷移するという流れは様々なアプリで応用できるでしょう。
今回はデータの投入とNCMBの初期化について解説します。
データの投入
アプリから直接RSSフィードを取得することもできますが、今回はmBaaSを経由します。mBaaSを経由することでXMLを解析することなく、SDK経由で手軽にデータを取得できるようになります。
データの取得はスクリプト機能を使います。NCMBMania/webapi-cache-script: スクリプト機能でWeb APIのレスポンスをキャッシュしますで利用しているコードを、スクリプト機能で呼び出します。
これを実行すると、FeedクラスとEntryクラスが作成されます。記事データはEntryクラスに投入されます。
Flutter SDKのインポート
Flutterアプリのベースはflutterコマンドで作成します。
$ flutter create flutter_news
そしてpubspec.yamlを編集します。
dependencies: flutter: sdk: flutter ncmb: ^0.1.1 # 追加
ライブラリをインポートします。
$ flutter pub get
キーの隠蔽化
次にFlutterでキーを隠蔽化するで紹介したflutter_dotenvを使います。再度pubspec.yamlを編集します。
dependencies: flutter: sdk: flutter ncmb: ^0.1.1 # 追加 flutter_dotenv: ^2.0.1 # 追記 flutter: assets: # 追加 - .env # 追加
再度コマンドを実行します。
$ flutter pub get
lib/main.dart を開いてライブラリをインポートします。
import 'package:flutter_dotenv/flutter_dotenv.dart';
そしてmain関数を次のように編集します。
void main() async { await DotEnv().load('.env'); runApp(MyApp()); }
プロジェクトのルートディレクトリ直下に .env ファイルを作成します。内容は キー=値 を改行で書いていきます。
APPLICATION_KEY=aaa CLIENT_KEY=bbb
これでキーの隠蔽化の準備は完了です。
Flutter SDKの初期化
まずFlutter SDKをインポートします。
import 'package:ncmb/ncmb.dart';
そして MyApp クラスの build メソッド内で初期化します。
NCMB ncmb = NCMB(DotEnv().env['APPLICATION_KEY'], DotEnv().env['CLIENT_KEY']);
これで初期化が完了します。
まとめ
ここまででNCMBを利用する準備が完了しました。次回はデータストアを使って、記事一覧を表示してみます。なお、コードはNCMBMania/flutter_news: Flutter SDKを使ったニュースアプリデモです。にて公開しています。実装時の参考にしてください。
