見出し画像

ノーコードツールbubbleでLINEを作ってみた!Part.1

改めましてこんにちは!イベント主催者の木村太陽と申します!今回はご参加くださり誠にありがとうございました。

ご参加いただいた感想としてbubbleでの開発がよくわからなかった方や、時間内に開発が終わらなかった方もいらっしゃったようなのでLINE開発の部分をそのまま記事にしました!

本記事はLINE開発の「完全攻略版」です。初心者の方に向けて記事を書いているため既知の内容がある場合は読み飛ばしてしまって大丈夫です!4部構成になっており、だいぶ長尺になりますが復習がてらもう一度LINEを作ってみてください!実際のサンプルアプリはこちらです。


1. アプリ作成

まず初めに、Bubbleのアカウントを作成します。お使いのブラウザ(GoogleやSafariなど)で「Bubble」と検索してください。すると上の方にBubbleの広告が出てくるのでそれをクリックします。

スクリーンショット 2022-01-24 20.33.01

Get started」というボタンがページの一番右にあるのでそちらをクリックします。EmailとPasswordを求められるのでインプットに記入して下の「Get started」を押すと、ユーザー登録完了です!

スクリーンショット 2022-01-24 21.11.31

bubbleにログインした後、チュートリアルが出てくるのでそれを1旦、無視して一番下にある「Create a new app」でアプリの作成をしていきます。

スクリーンショット 2022-01-24 21.15.27

一番最初の「Name of this new app」はアプリの名前です。こちらはすでに使用されている名前は使用できないのでご注意ください。

アプリ作成後、初期設定で「start with a blank page」を選択、そのほかは全て「Okey」ボタンを押して大丈夫です。

画像8

2.DBの作成

LINEのデータタイプ構成は3つに分けることができます。

・User
・ルーム
・メッセージ

2-1.Userを作成しよう

スクリーンショット 2022-01-24 1.31.02

userのデータベースに対しては、デフォルトで設定されているものにさらにを追加します。

・image(LINEユーザーのトプ画)
・name(ユーザーの名前)

2-2.メッセージを作成しよう

スクリーンショット 2022-01-24 1.44.39

ユーザー同士のメッセージのやり取りを格納するデータです。

・メッセージテキスト(メッセージやりとりの内容)
・ユーザー(誰がメッセージを作ったのか)

2-3.ルームを作成しよう

スクリーンショット 2022-01-24 1.37.49

ユーザー同士がチャットをする「部屋」を作るデータです。この中にメッセージを格納していきます。

・メッセージ(メッセージテキストを複数格納)
・ルーム内のユーザー(ルーム内にいるユーザーを複数格納)

ここではlistという概念が非常に大事になってきます。listはデータ同士の関係が1対多の時によく使われます。今回では「ルーム」という1つのデータの中に複数のメッセージを格納したいのでlistを使用します。そして1つの「ルーム」に対して2人のユーザーが入ることが想定されるのでlistを使用します。

スクリーンショット 2022-01-24 2.01.49

次回

今回は主に開発の準備段階でした!次回は、LINEのホーム画面の作成をしていきます。下記のリンクから次の記事へ行きましょう!

僕がBubble学習初期のころに本当にお世話になったノーコードスクール「ゼンリョク」の詳細は下記から!


いいなと思ったら応援しよう!