Bubbleは、プログラミングスキルがあまりなくても、ウェブアプリケーションを構築できるノーコードツールの一つです。コードを書くことなく、ドラッグ&ドロップのような操作で視覚的に開発することができ、スタートアップや個人開発者に人気で注目されているツールです。
今回はそんな便利なノーコードツールであるBubbleで、作成した画面からCSVファイルをアップロードし、用意しているデータベースへインポートする方法を紹介します。
CSVファイルの準備、前提条件
CSVファイル
今回使用するCSVのサンプルは以下からダウンロードが可能です。このデータの内容に合わせて以降の説明を記載します。
前提
ここからの手順を実現するためにはBubbleの「Starterプラン」以上が必要となります。
BubbleにCSVファイルをアップロード、データベースへインポートする手順
ここから実際に作成の手順を紹介します。
データベースを作成する
まずはインポート先となるデータベースを作成します。
今回はタスク管理システムを作成すると考え、「Todos」というdatabaseを作成することとします。
- タスクID：number
- タスク名：text
- 優先度： text
- 完了：yes / no
- 期限：date
ページ作成
CSVをデータベースへインポートするため、画面上からファイルをアップロードするページを作成します。
今回使用するElement一覧は以下となります。
- File Uploader
- Button
FIle Uploaderを配置
ファイルを登録する場所をFIle Uploaderで作成します。
Buttonを配置
「CSVアップロード」というボタンを作成します。
ボタンを押した後の処理を作成
「CSVアップロード」ボタンを押したら、画面上からアップロードしたCSVを、作成したデータベース（Todos）へ登録します。
- When「Button CSVアップロード is clicked」
- 「CSVアップロード」というボタンをクリックしたら
- Upload data as CSV（Step 1）
- Type of dataには、先ほど作成したデータベース（Todos）を設定
- CSV Fileには、 「CSV Uploader’s value」を選択（FileUploaderのエレメントを指定）
CSVデータがデータベースに登録されたかを確認する
Data -> Todosを確認し、設定したCSV通りにデータが入っていることを確認しましょう。
問題なくデータが入っていれば成功です。
よくあるトラブルと対処法
CSV形式エラー
データの不一致が考えられます。CSVのheaderと、Bubbleのカラム名は必ず一致するようにしましょう。
まとめ
今回はBubbleでCSVデータをアップロード、そしてデータベースへインポートする方法について紹介しました。別で用意しているスプレッドシートやExcelのデータをCSVにして、Bubbleに取り込みたい…などの場合に役立つのではないでしょうか。ぜひ一度実装してみてください。
