未分類

第一回 trerro作成講座 ~全体の機能&今後の流れ解説~

Ryu

こんにちは!NoCode WalkerのRyuです!

今回からは、タスク管理アプリとして有名なtrelloのクローンアプリtrerroの作り方をレクチャーしていこうと思います!

主に学べるテクニックとしては

  • トグル機能
  • リピーティンググループの中で一つだけ違う動作を実装
  • チームメンバーの追加
  • bubbleでの基本的なDB設計
  • ポップアップへのデータの受け渡し
  • set stateの便利な使い方
  • ドラッグ&ドロップの実装

などなど、多岐に渡ります!

もちろん、ここには書き切れない細かいテクニックも紹介していくので、皆さん是非ついてきてくださいね!

以下の動画で、どの程度のアプリが作成できるかをお見せしているのでお時間が大丈夫な方は見てイメージをつかんでいただければ幸いです。

機能解説

今後の流れ

今後の流れとしては、毎週1本ずつ記事を公開していきます。

第二回:ホーム画面のUI作成

初めのページのUIのみを配置していきます!その際の、具体的なデータベース接続などは行いません。そういった設定は第五回で行っていきます。

第三回:trerro画面のUI作成

実際のタスク管理ページのUIのみを配置していきます!その際の、具体的なデータベース接続などは行いません。そういった設定は第六回で行っていきます。

第四回:DB設計 & プラグイン導入

データベースの設計と、どうしてそういった構造にしているかを解説します。めちゃくちゃ大事な回になる予定です。

第五回:ホーム画面のUI設定

データベースを作成したので、リピーティンググループなどの詳細を設定していきます。

第六回:trerro画面のUI設定

第五回と同様。

第七回:ホーム画面のワークフロウ設定
(複数回に渡る可能性大)

いよいよ、ワークフロウの設定を行っていきます。この設定を行えばindexページでの動作が行えるようになります。

第八回:trerro画面のワークフロウ設定
(複数回に渡る可能性大)

最後に、タスク管理ページのワークフロウを設定して完成です!

まとめ

初回からお付き合いいただける方とは長い付き合いになるかと思いますが、このtrerroを作成し終わる頃には、bubbleで案件にとりかかれるくらいの実力が付きます!

もし、質問などがあればTwitterのDM、もしくはSlackの方でお声がけください!

それでは皆さん、これからしばらくの間、よろしくお願いします🙇‍♂️

ABOUT ME
IKD
UI/UXで差をつけろ | ノーコード関連のライター | プログラミングはたしなむ程度

COMMENT

メールアドレスが公開されることはありません。