Bubbleを使った自己紹介カード交換アプリ開発の経過報告③(〜8/4)
こんにちは!Bubbleを使った自己紹介カード交換アプリ開発の経過報告3回目をお届けします。
この開発の目的は、オンラインサロンメンバー同士のつながりを増やし、サロンの活性化、新規入会者の獲得を促進することです。
進捗報告フォーマットに基づいて、各メンバーが取り組んだこと、苦労した点、それをどのように解決したか、振り返りをしていきます。
リードエンジニア:じょん(@john01tgmck)
◾️ 取り組んだこと
・text shadowのCSS設定方法確認
・color pickerプラグインの設定確認
・複数ユーザーと複数の好きなツールの複数×複数の検索の実装テスト
・ChatGPTを使ったユーザーニックネームの作成
◾️ 苦労したこと
・backend workflowを使ったon a listの2重設定方法
◾️ どうやって解決したのか
・ChatGPTを使い、2重for文の概要を作成し、実装。一度紙に書き出し、AIに整理させることで実装時に迷いがなくなる
◾️ 振り返り
・機能実装前にはフローを書き出すことが大事
・メンバーに共有するために、FigJamを使ってナレッジを残している
エンジニア:トシ(@Craft_Sound_St)
◾️ 取り組んだこと
・Discordログイン時に、NoCodeCampメンバーでは無ければログインを弾く構造実装
・Discordログイン後に、NoCodeCampメンバーかどうかを判断して、ログイン後の挙動を変える処理実装開始
◾️ 苦労したこと
・Pop up上でDicord Login時に所属しているサーバーの情報を取得して、custom stateに記憶しようとすると429Error発生!custom stateに入れないで、通常のページ上でサーバー情報を引っ張ってくれば、問題なく動く
・上記のcustom stateへ入れたのち、Top pageでのPop upの表示分けにcustom state値を利用しようとしているが、実行順序の問題で上手く行かない
◾️ どうやって解決したのか
・原因不明で解析中。。。→Pop upのcustom stateは利用せず、pageのcustom Stateを利用で429Errorは解決
・Pop up振り分けの不具合は、新規登録ボタンクリック時に実行しているDiscordのサーバー名取得動作がPageLoadでもダブって実行されていたため。ここを解消させたら、custom stateを使用しても問題なく動作した
◾️ 振り返り
・APIのReturnを使って、その後の動作を処理するのは、実行順序が直列に行われなかったりするので、毎回プチ悩みするところ
エンジニア:ひろすぎ(@mt_hrk250)
◾️ 取り組んだこと
・Topページの作成
・フォントの文字を調整するためにCSSをかけないか検討
・マイページの作成
◾️ 苦労したこと
・フォント周りにボーダーを入れられなかった
・CSSを記載したもののうまく当たってくれず
◾️ どうやって解決したのか
・CSS TOOLSのpluginを導入し、CSSを記載した
・class指定、ID指定の概念を教えてもらった
・Align to parentと組み合わせてシャドウも表現した
PM兼デザイナー:あやさい(@ayasai27)
◾️ 取り組んだこと
・デザイン作成
・Bubbleを触って仕様確認
・チームに確認
◾️ 苦労したこと
・Bubbleのプラグイン探しと実際に使用できるのかの判断
◾️ どうやって解決したのか
・やりたかったことは、色を変更する際にこちらで決めた色でしか変更できないよりも、カラーピッカーから自分の好きな色を選んで変更すること。これが出来ると、より個人の良さを出せる幅が広がると思った。その際にそういうプラグインがないかどうか、それが実際に今回のアプリで実装できそうなのか、じょんさんに検証してもらった。
◾️ 振り返り
・朝会の時間をほぼほぼもらって、3日ほどかけて全ての画面をみんなに確認してもらった。たくさんフィードバックをもらえたので、良い改善ができたし、画面の移行もスムーズにいくイメージができた。また、アプリ内で使用するプラグインも、最終的には決めてもらったが、実装に入る前に提案できることは効率が良いなと思う。実際にBubbleを触って、仕様を提案できたことは、個人的にかなり嬉しかった!
まとめ
PMとしての役割が全うできずにいますが、それぞれが積極的に動いてくれるので、本当に助かっています。デザインの確認作業も3日に渡ったにも関わらず、細かい部分まで修正・改善案を考えてくれて、良きチームだなと感じました。これからはいよいよBubbleでの構築がメインになってくるので、盛り上がってきそうです。
最後まで読んでいただき、ありがとうございました!
次回の更新も頑張ります!