FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Flutterでニュースアプリを作る(NCMBの初期化とデータ登録)

f:id:mbaasdevrel:20200110154553p:plain

Flutter SDKが徐々にできあがってきましたので、これを使ってデモアプリを作ってみたいと思います。作るのはRSSフィードを表示して、それをお気に入り登録できるアプリです。データストアから一覧を表示して、詳細画面へ遷移するという流れは様々なアプリで応用できるでしょう。

今回はデータの投入とNCMBの初期化について解説します。

データの投入

アプリから直接RSSフィードを取得することもできますが、今回はmBaaSを経由します。mBaaSを経由することでXMLを解析することなく、SDK経由で手軽にデータを取得できるようになります。

データの取得はスクリプト機能を使います。NCMBMania/webapi-cache-script: スクリプト機能でWeb APIのレスポンスをキャッシュします利用しているコードを、スクリプト機能で呼び出します。

これを実行すると、FeedクラスとEntryクラスが作成されます。記事データはEntryクラスに投入されます。

f:id:mbaasdevrel:20200305225139p:plain

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を使ったニュースアプリデモです。にて公開しています。実装時の参考にしてください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。