👨‍🍳

【Flutter】 個人開発でレシピ投稿アプリを作ったのでまとめてみる

4 min read

はじめに

はじめまして!shuheiといいます!
Flutterを使ったスマホアプリ開発を行なっています!

先日、レシピ投稿アプリ 『MEALPO(ミールポ)』 をリリースしました 🎉
今回は、作ったアプリと開発に使った技術について紹介していきたいと思います!

アプリの紹介

MEALPOはミール(レシピ)を作成して、投稿することができるアプリです。
カロリーやマクロ栄養素(タンパク質、脂質、糖質)をレシピに記載できるので、筋トレやダイエットをしている人のレシピ管理アプリとしても使うことができます。

iOS:

https://apps.apple.com/us/app/mealpo/id1593719809#?platform=iphone

Android:

https://play.google.com/store/apps/details?id=com.sh.mealpo

開発の経緯

友人の悩みをスマホアプリで解決できそう!と思い、開発を始めました。
私には筋トレ大好きマッチョの友人がいるのですが、食事にもかなりこだわっていて、カロリーやマクロ栄養素(タンパク質、脂質、糖質)をきっちり計算して食事を作っています。そのレシピはスマホのメモアプリに記録しているのですが、かなり見づらく不便に感じているとのことでした。加えて、レシピのレパートリーが少なく、焼いた鶏胸肉と米だけ、といった淡白な食事を摂る日が多くなってしまい、飽きるという悩みもありました。

そこで、栄養素が記録できるレシピを簡単に作成できる & 他のユーザーが作成したレシピを見ることができて、レパートリーを増やすことができる、そんなアプリがあれば、友人の悩みも解決しそう!と思い、今回のアプリを作ることにしました。

主な機能

MEALPOでは以下の機能を使うことができます。

  • レシピ作成機能
  • レシピ投稿機能(非公開設定あり)
  • レシピ検索機能
  • 通知機能(プッシュ通知ではなく、アプリ内のリアルタイム通知)
  • SNS機能
    • タイムライン
    • フォロー
    • いいね
    • マイページ

主な使用技術

Flutter × Firebase

MEALPOはFlutterFirebaseを使って開発を行っています。
個人開発の規模であれば、この2つの組み合わせで簡単にアプリを作ることができます。

  • Flutter
  • Firebase
    • Authentication
    • Cloud Firestore
    • Cloud Functions
    • Analytics
    • Remote Config

https://firebase.flutter.dev/

データ構造

今回使用しているFirestoreのデータ構造は以下のようになっています。

サブコレクションを活用し、各ユーザーが画像のようなデータを持つ形にしています。
一覧を取得したい場合は、コレクショングループクエリを使って取得します。

  Future<List<Meal>> fetchMeals() async {
    //'meal'という名前のコレクションを横断的に取得する
    final query = FirebaseFirestore.instance.collectionGroup('meal');
    final snapshot = await query
        // 省略
        .limit(10)
        .get();

参考記事

https://techblog.sgr-ksmt.dev/2019/12/31/160623/

アーキテクチャ

Riverpod + Flutter hooks + StateNotifier + freezedの組み合わせで状態管理を行い、関心事や機能ごとにcontrollerを作成する形をとっています。
今までは、Riverpod + ChangeNotifier + MVVMで開発を行なっていましたが、別のアーキテクチャも試してみたいと思い、今回使ってみました。

参考記事

https://nobuhikosawai.com/insight-from-small-flutter-app-1/#はじめに
https://qiita.com/_masaokb/items/fe77495db0aeba226d2a

Dart-defineを使った開発環境分け

開発環境と本番環境のデータベースの切り替えを行うために、Dart-defineを使って開発環境分けを行いました。以下の記事がとても参考になりました。

参考記事

https://zenn.dev/riscait/articles/separating-environments-in-flutter

検索機能

MEALPOではレシピ名と材料名からレシピを検索することが可能です。
検索機能はAlgoliaElasticsearchを使うなどの方法があるかと思います。今回はそれらの導入は行わず、以下の記事の方法を使い、Firestoreのみで検索機能を実装しました。
理由としては、レシピの投稿数が少ないので現状、簡易的なものでよかったのと、Algoliaなどを導入した際の料金が気になる(ここが一番大事)からです。
しかし、複雑な条件での検索はできないので、投稿数が増えてきた場合はAlgoliaなどの導入も検討したいと思っています。

参考記事

https://qiita.com/oukayuka/items/d3cee72501a55e8be44a

アカウント削除機能(退会機能)

FirebaseのExtensionsを使い、以下の流れでアカウント削除機能を実装しています。

1. ユーザーがアカウント削除操作時に、Firestoreにuidを登録
2. それをトリガーにCloud FunctionsでAuthenticationのユーザーを削除
3. Authenticationのユーザー情報が削除されると、ExtensionsによってFirestoreやstorageに保存されている情報が削除される。

iOSではアカウント作成機能がある場合、アカウント削除機能(退会機能)の実装が必須となっています。

https://firebase.google.com/products/extensions/firebase-delete-user-data?hl=ja
https://developer.apple.com/app-store/review/guidelines/

強制アップデート機能

FirebaseのRemote Configを使い、強制アップデート機能を実装しました。
バグを直したり、新しい機能を追加したとしても、ユーザーがアプリをアップデートしてくれなければ意味がありません。
特に初回リリースして間もない時は、バグの修正や機能の追加でアップデートを行うタイミングが多いと思うので、初回リリース時から導入したほうがいいと感じました。

参考記事

https://qiita.com/kasa_le/items/a7bae1b9aef6dfde2504

今後について

MEALPOですが、最低限の機能でリリースを行なったため、機能不足感が否めません。
今後は、機能の拡充やUI、UX部分の改善を中心に改善していきたいと思います!
なにより使ってくれる友人やユーザーの声を聞きながら、使ってくれる人が気持ちよく使えるようなアプリを目指してアップデートを行っていきたいと思います!

最後に

友人の悩みを解決したいと思って始めた今回のアプリ開発ですが 小さく始められて、痒いところに手が届くのがスマホアプリ開発の魅力の一つなのかなと感じました!小さいことでもいいので、誰かの役に立てるようなアプリを今後も作っていきたいです!そして、友人も喜んでいたのでよかったです 🎉

もし記事の内容が間違っていたり、もっとこうした方がいいんじゃない?というような箇所があれば、コメントで教えていただけると幸いです🙇‍♂️

最後までご覧頂き、ありがとうございました。
ご質問等あればTwitterまでお気軽にご連絡ください。

▼ 参加しているコミュニティ

https://kboyflutteruniv.com/

▼ Twitterアカウント

https://mobile.twitter.com/sh_app_dev

Discussion

ログインするとコメントできます