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

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

Flutterでニュースアプリを作る(匿名認証とお気に入り登録処理)

f:id:mbaasdevrel:20200307220041p:plain

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

前回は記事の詳細表示を実装しましたので、今回は匿名認証とお気に入り登録処理を作ります。

匿名認証を行う

匿名認証自体は ncmb.User.loginAsAnonymous() だけでできますので難しいことはありません。ただし、アプリは毎回匿名認証を行うのではなく、shared_preferencesを使ってデータをアプリ内に残しています。このデータはNCMB SDKを初期化する際に復元しています。

この復元データに残っているセッションIDが有効であるかは分かりません(期限切れの可能性があります)。そのため、まずデータを取得して検証を行う必要があります。

var user = await widget.ncmb.User.CurrentUser();
if (user == null) {
  await widget.ncmb.User.loginAsAnonymous();
} else if (!(await user.enableSession())) {
  var authData = user.get('authData') as Map;
  await widget.ncmb.User.logout();
  await widget.ncmb.User.loginAsAnonymous(id: authData['anonymous']['id']);
}

もしセッションが無効であったならば、一旦ログアウト処理を実行し、再度同じIDで匿名認証を行います。

お気に入りアイコンを表示する

まず記事詳細画面において、星アイコンを表示します。これをタップした時の処理として、お気に入り登録処理を実装します。すでにお気に入りに登録されている場合を想定して、favoritedがtrueまたはfalseかによって表示を変更しています。

  bool favorited;
  
  @override
  void initState() {
    super.initState();
    checkFavorited();
  }

  IconData favoriteIcon() {
    return favorited ? Icons.star : Icons.star_border;
  }

  Future<void> checkFavorited() async {
    setState(() {favorited = false;});
    var query = widget.ncmb.Query('Favorite');
    query.equalTo('entry', widget.object);
    _favorite = await query.fetch();
    if (_favorite != null) {
      setState(() {favorited = true;});
    }
  }

f:id:mbaasdevrel:20200307215742p:plain

お気に入り登録処理を実装する

タップ時のイベントを使ってお気に入り登録処理を実行します。Aclを使うことで、セキュアにデータ管理できます。保存した後、favoritedをtrueにして星アイコンを変更しています(白抜きから塗りつぶしに)。

    var user = await widget.ncmb.User.CurrentUser();
    var acl = widget.ncmb.Acl();
    acl
      ..setPublicReadAccess(false)
      ..setPublicWriteAccess(false)
      ..setUserReadAccess(user.get('objectId'), true)
      ..setUserWriteAccess(user.get('objectId'), true);

    _favorite = widget.ncmb.Object('Favorite');
    _favorite
      ..set('entry', widget.object)
      ..set('acl', acl);
    await _favorite.save();
    setState(() {
      favorited = true;
    });

お気に入り削除処理について

今度は逆に登録しているお気に入りを削除する処理を作成します。これはあらかじめ取得している_favoriteを削除するだけです。

  Future<void> removeFavorite() async {
    if (_favorite != null) {
      await _favorite.destroy();
    }
    setState(() {favorited = false;});
  }

まとめ

今回までの処理で記事一覧から画面遷移して詳細画面を表示する処理ができあがりました。次回は登録したお気に入りだけを表示する処理を作成します。なお、コードはNCMBMania/flutter_news: Flutter SDKを使ったニュースアプリデモです。にて公開しています。実装時の参考にしてください。

中津川 篤司

中津川 篤司

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