はじめに

2021年4月からプログラミングを始めて、Swift、Rails、Vue、Flutter、Python、PHPなど、さまざまな技術を開発で使い、最終的にモバイルアプリエンジニアになろうと思い、アプリの開発を始めました。現在は、FlutterとSwiftを主に使用しています。今回はFlutterを使って、「カフェの時間」というアプリを開発しました。

Ios版

Android版

1. アプリの説明

■カフェの時間とは■

カフェの時間とは、カフェの写真を投稿して、カフェ好きを繋げるSNSです。
またカフェの時間はお店探しもすることができ、新しい発見をすることができます
■カフェの時間はこんな人におすすめ■

カフェが好きな人！カフェの時間ではカフェ好きの人達が行ったお店を見ることができます！また自分の行ったカフェを投稿することができます！
カフェを探している人！カフェの時間ではエリアごと、地図ごとから検索することができ、またカフェ好きの行ったお店を知ることができます！
スイーツ好きな人！スイーツが好きな人にもカフェの時間はおすすめです！スイーツの投稿ももちろんあります！

2. 機能紹介

投稿機能(タイムライン)

　　　　　
タイムラインのUIはとにかくこだわり何度も作り直しました。タイムラインには最新の投稿、フォローしているユーザーの投稿、人気の投稿の3つの構成でできています。投稿には、いいねやハッシュタグ、保存機能がついています。投稿の詳細ページには、お店の名前、現在地からの距離、価格帯、現在地からお店までの経路など、日常的にカフェに行く人にとっては、かなり便利な機能になっています。

検索機能

検索機能では、キーワード検索、ハッシュタグ検索、エリア検索、ジャンル検索、ユーザー検索があります。ここに関しては、とにかくユーザーがカフェと巡り会う機会を増やすために、何も考えずにカフェを調べれるように直接の記入を避けたりと、使いやすいUIや機能にしました。検索結果に関しては、人気で最新の投稿を表示するようにしています。

カフェマップ機能

カフェマップ機能では、ユーザーが投稿したお店を表示するような設計となっております。1、3、5、10、20km範囲にフィルターをかけることができます。またマーカーをタップすると、お店が表示され、お店の詳細ページに画面遷移します。

SNS機能

SNSなので、フォロー、フォロワー機能、ユーザーページは用意しました。

行ったことのあるカフェ管理機能

カフェ好きにとっては、行ったことあるお店の管理が一番大切だと思い、機能実装しました。自分自身がカフェを開拓するのが好きなので、そういった同じ感性を持っている方に向けて実装しました。
ps デートした場所の管理にもなる。(開発者はデートしていません)

3. 開発で苦労したこと

Google Map APIの使用

正直、ここで1週間は使ってしまいました。この二つを主に使用しました。
https://pub.dev/packages/google_maps_flutter
https://pub.dev/packages/flutter_google_places
この二つを理解するのに、日本語ドキュメントがなかったので、GitHubのSampleコードと公式Documentをひたすら読み続けて、完成しました。
実装したものがこちら↓
　　　　　

文字検索から位置情報を取得して、それを保存して、Mapに表示させる一連の流れがかなり初学者にはきつい部分がありました。

コードの一部(簡単なのに1番苦戦した)

if (result['status'] == 'OK') {
        return result['predictions']
            .map<Suggestion>((p) => Suggestion(
                p['place_id'],
                p['description'],
                p['structured_formatting']['main_text'],
                p['structured_formatting']['secondary_text']))
            .toList();
      }

packageの使い方はちゃんと理解してから使うことが大切だと学びました。

Providerを使い、n件ずつ読み込む

最初はデータを30件のみ取得する仕様にしていましたが、アプリ自体が重くなり、ユーザーが離れると感じたので、5件ずつ取得して、下まで行くとさらに5件取得するということをn回繰り返す仕様に作り直しました。
ここで躓いたのが、n件取得したけど、配列の中には同じものが入っているということでした。これはFireBaseのstartAfterを使い解決することができましたが、startAfterを理解してコードを書くまでが長かったです。

変数名、関数名の命名

ここに関しては、自分の命名センスがなく、後から見て、これなんだっけってなることが数回ありました。ただ開発中に自分の命名センスの問題に気づけたので、リーダブルコードを読み、改善しました。getの使い方が間違っていたりと、自分の経験の浅さを感じました。結論、リーダブルコードは最高。

リリースするための準備とリリース後

正直一番キツかったのが、Appleの審査です。合計4回はリジェクトされました。一番ひどかったのは、説明文を変えてほしいと2回も言われ、変更するけど、またリジェクトされるという僕の語彙力の無さが目立つだけの問題でした。ようやくリリースしたと思ったら、早期バグが発見され、すぐに修正、これを1週間繰り返しました。現在はバグが見つかっていないので、安心して寝れます。

Storage問題

投稿時に画像を圧縮せずにCloud Storageに送信していたため、読み込み量が多く、初日から読み取りの幅が8GBを超えてしまいました。これに関しては反省し、アプデで改善し、今はだいぶ収まっています。

Cloud Storageの写真の削除方法

final String getPath = doc.image.split("2F")[1];
final String filePath = getPath.split("?")[0];
FirebaseStorage.instance
        .refFromURL("任意のURL")
        .delete();
postsRef.doc(doc.docId).delete();

なぜか検索しても出てこなかったので、ゴリ押して削除するコードを書きました。
リリース直前で倒れかけながら書きました。Flutterはまだ発展途上なだけあって、documentが少ないので、初学者には厳しいなと感じた反面、このアプリ開発で自分が成長したと感じました。

4. 今後の展望

機械学習を使い、各ユーザーにとって、最高のカフェと巡り会えるようなシステム開発をしたいです。できれば、３ヶ月以内に簡単なおすすめ機能を実装したいです。
広告については、TikTokなどを使い、積極的にこのアプリを広めていこうと思います。
リリース2週間で約200人は達成できたので、2ヶ月以内に1000人、半年以内に5000人のユーザーを獲得していきたいです。個人的な展望ですが、カフェと連携してイベントを開くことやカフェ経営を夏限定で開店したいと思っています。そのためにもユーザーを獲得して、カフェアプリと言ったら、「カフェの時間」と言われるようなアプリをこれから開発していきたいです。

プログラミング歴8ヶ月の大学生が1ヶ月でSNSを開発した話