Closed18

FlutterとFirebaseでアプリ作ってくメモ

ひいらぎのぞみひいらぎのぞみ

プロジェクト作成から完成までの流れをメモしていこうと思います

設計図は全然ないです
けっこういきあたりばったりになると思ってます
こんな状態でどれくらいで完成まで持っていけるかみものですね

ひいらぎのぞみひいらぎのぞみ

アプリの機能的には、テキストをユーザー間で翻訳しあう感じの物です
Firebaseだけで実装できるかなくらいのラインで、自分が欲しい物という感じで決めました
できる限りFirebaseだけでなんとかしようと思ってますが、漏れちゃいそうならそれも仕方ないですね

ひいらぎのぞみひいらぎのぞみ

適当にGitリポジトリを作ります
その後Firebaseにプロジェクト作りました

ほいでFlutterプロジェクトも作りました

flutter create naniwo
ひいらぎのぞみひいらぎのぞみ

なんかプッシュできなくてうだうだしてしまった
それでは作っていきましょう
アナリティクスとかクラシュリとか入れても使わなそうなのは今回入れないことにします
最低限のものだけでいこうかと

というわけでまずはFirebase系のパッケージを入れてきます
今回はWebの対応は外します
一応Android iOSでいこうかと
パッケージ名が必要ですね
変えていきましょう

FirebaseHostingのURLにしときました

ひいらぎのぞみひいらぎのぞみ

次にFirebaseに各OSでアプリを追加します
アプリへの追加はここのを素直に参考にします
https://firebase.flutter.dev/docs/overview/
https://firebase.google.com/docs/flutter/setup?hl=ja&platform=android

開発用フレーバーは今回使いたくない
あれ色々面倒なことになるし規模小さいし
iOSは後回しにしようと思ったけどそれもそれで面倒なので今やっちゃいます

気分的にやっぱファイル入れたくないのでignoreに入れます

# Firebase
google-services.json
GoogleService-Info.plist

mainはこんなノリでサンプルのまんま
後でかえるんで

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _initializeFirebase = Firebase.initializeApp();

  
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initializeFirebase,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          debugPrint(snapshot.error.toString());
          return MaterialApp(home: Center(child: Text('error')));
        }
        if (snapshot.connectionState == ConnectionState.done) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: 'Flutter Demo Home Page'),
          );
        }
        return Center(child: CircularProgressIndicator());
      },
    );
  }
}

iOSつい不安でXcodeから起動しちゃうんだけど、Flutter側のビルド通さないといけないことあるからVSから一発撃っておくってメモ(pod系とか作るので)
どっちもビルド通ったぽいのでこみと

ひいらぎのぞみひいらぎのぞみ

次はGetX入れます
ちょっと過保護すぎてうーんって思っちゃう部分もあるけど、僕よわよわだしめちゃ楽だし使います
https://pub.dev/packages/get
ほいで適当に画面組んできましょね

ここで自分の為にもアプリの流れを確認しましょう
|ログイン画面|翻訳済一覧画面|未翻訳一覧画面|翻訳募集投稿画面|投稿詳細画面|翻訳追加画面
|-|-|-|-|-|-|-|
|[A]Twitterログイン|[V]翻訳済一覧|[V]未翻訳一覧|[V]投稿文章入力|[V]投稿文章|[V]投稿文章入力
|[A]Appleログイン(入れたくねぇ)|[A]翻訳募集する|[A]翻訳募集する|[A]投稿する|[A]翻訳追加|[A]投稿する
|-|[V]検索(多分入れない)|-|-|-|-|

雰囲気ですすめ過ぎててやばい感じですがこのままいきます
まず空っぽで流れるので作っていきます

いろんな事しながらやってたからうだうだしてしまった

ひいらぎのぞみひいらぎのぞみ

作業が進められない.....
集中力がアレですね
家からでてやったがいいでしょうけどもうーん

Twitteログイン入れました
Twitterデベロパコンソルからアプリ作って鍵をもらってきましょう
Firebaseコンソールからオンにしてその鍵を入れます
Twitterのコールバックには、ディープリンク?アプリをURIから開けるやつのURIにします

このコールバック設定場所が全然見つからなくてわりと迷ってしまった

アプリ側の設定はログイン用のパッケージの説明に書いてあるのでそのとおりにします
https://pub.dev/packages/twitter_login

ログインできたらFirebaseにちゃんと出てきました
よかた〜

ひいらぎのぞみひいらぎのぞみ

Twitterログイン
Androidだけで確認してiOSはまだですけど、Appleログインの時にまとめてやりますかね

次はFirebase Firestoreを入れましょか
Realtime Databaseと混同してて一瞬混乱してしまった
こういうのができてたの知らなかった.....

パッケージ足したらMulti dexにしてねって言われたのでしました
Firebase系がメソッド多いってことっすよね

ログイン時にアカウントデータを取っておいて、トップ画面に行った際にDBにユーザーデータが無ければアカウント設定画面に飛ばすようにしました
そこで保存を押せば保存されるって感じです

なんかAuthの方でもプロフィール画像とかユーザー名とか保存できるんね
個人完結ならそっちで済ませれるけど、他ユーザーからも投稿者の情報を表示したいからDBに入れとく事にしました
Authのデータは他社から見れないよね....?

こんなかんじに保存されたとさ

ひいらぎのぞみひいらぎのぞみ

言語選択画面を作りました
全部一覧であるとだるいので
英語での国名の表記ブレの感覚がむずい
デバッグだし大量で動きがもっさり
これなんとかできるかなぁほっとくかなぁ

ひいらぎのぞみひいらぎのぞみ

選択言語を保存するようにしました
保存はget_storageを使いました
すっかりGetXにズブズブになっちゃいましたね
便利すぎるからね

そういえばFirebase系が一応全部Null safeになりましたね
やった〜

ひいらぎのぞみひいらぎのぞみ

投稿一覧に一覧を出すようにしました
まだ翻訳前と済の判定は入ってないですね
まだ翻訳の投稿が無いので

進み遅いけどいいの
進まないよりは
次は投稿詳細ですかね

ひいらぎのぞみひいらぎのぞみ

今回の進捗報告です
とりあえずの投稿詳細画面を作りました

投稿の表示だけなので次は翻訳の送信ですね

Yowatari作ってる時は1日8時間くらい使ってたけど
これは最近で1日1時間多くて3時間くらいになってる
でも進んでるのでいいんです

ひいらぎのぞみひいらぎのぞみ

翻訳送信画面一応作りました

投稿詳細の下で直接送れるようにするでもいいかも

ちゃんと保存されたっぽいすね
次は返信後に投稿詳細に返信がでるようにする感じすかね
終わりが見えてきたかなぁ

ひいらぎのぞみひいらぎのぞみ

返信送信画面消して、投稿詳細から返信を送れるようにしました
こっちのがスッキリしてるしわかりやすいと思う

あとは一覧画面で返信があるかないかで出し分けたら終わり?
すこし調整とかは必要かもですけど
終わりが近い雰囲気ありますね

ひいらぎのぞみひいらぎのぞみ

やることメモらないと
そらで作ってるので

今は漏れ埋めとかバグ直しとかリファクタとかやってます
リファクタ楽しいけど進んでる感はあまり感じられない
多言語化のためのリストアップもしました
GetX便利すぎる

次は機能的には投稿の削除ですね
その後はユーザー間でも情報の見え方確認と
ユーザープロフィール表示とか
あとページングとかもやらないと
お気に入り機能も入れないと
通知も入れたほうがいいよなとか
まだやること意外とありましたね
でもコアはできたと思ってるので、うーんわからんけど
次にやろうとしてることが決まってるので、このプロジェクトは早くキリをつけたい

ひいらぎのぞみひいらぎのぞみ

投稿削除と返信削除はいりました
ユーザー間での投稿の見えの確認もできました
投稿者のプロフィールも開けるようにしました
まあまあ進められたかなぁ
iOSでも起動確認した
お気に入りは入れたいね
通知、検索、うーん

このスクラップは2021/05/31にクローズされました