Bubble.ioのセットアップ

ノーコードでフロント開発ができるBubble.ioを初めて触れた際の個人メモ

---

# セットアップ
以下ページにアクセス

https://bubble.io/

「Get started for free」を押下
![000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/1685a424-1179-0186-e974-e5e0c1265075.jpeg)

今回はGoogleアカウントでログイン
![001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/2cf77c25-0539-8070-ffc4-35d746b8d0ad.jpeg)

質問はSkip
![002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/4cf3ef7b-af21-8ae1-2a5e-58695bc0e9c9.jpeg)

ブラウザ上で開発できるようになる
![003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/029d8a4e-37d1-571a-ce8a-f233705c0c94.jpeg)

# チュートリアル

https://bubble.io/welcome

![004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/65ae1212-b5de-1e4e-cdf0-57327ffd8c3e.jpeg)

## Saving data
- インプットした地点を地図で表示する

![009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/72078c24-056a-a889-e4f5-c7936e05da65.jpeg)

## Building a sign-up system
- ログイン、ログアウトを実装
- ログイン時のみメールアドレスが表示される

![016.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/e94bf502-a424-3938-a836-a716fb7f53e7.jpeg)

## Saving and modifying data
- インプットした地名をリスト表示する
- voteをデフォルト「1」から、アイコンクリックでカウントアップできる

![023.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/312e2005-59db-c35d-7626-dcc33378f6ba.jpeg)

## Building a slideshow
- プラグインを利用してスライドショーを実装

![026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/e25badc4-38f3-5fd2-93f6-a5ca8e4fc769.jpeg)

## Sending data to pages
- タイトルが画像をアップロードし、リスト表示
- アップロードした画像はタイトルリンクからページ遷移で表示

![031.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/137fda95-8b23-b5ff-edea-3b424375ebd8.jpeg)
![032.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/b9e32041-8eaa-5aa4-72ab-a433e13fcdb4.jpeg)


## Using conditions
- 「Hover me!」の色が変わる
- テキストボックスが空でないときにボタン押下するとアラートメッセージがポップアップ
![035.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/78ecf093-a23c-f1ad-791b-866b2537e8f5.jpeg)

## Defining a field as a list of things
- インプットした文字列をリストに追加
- アイコンクリックでリストから削除

![036.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/85e6b335-9f08-8be9-930a-444877264501.jpeg)

## Using APIs and sending data to groups
- プラグインを利用してGIFを検索、表示

![039.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/143d2d72-6a09-916f-6490-67b5b385866d.jpeg)

## Using external APIs
- プラグインを利用してiTunesを検索、表示
- 検索したタイトルを表示、リンクにiTUnesのURL

![040.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/8fd9cb8d-bd43-acab-b7bd-57211aa9c36a.jpeg)

## Using the chart element
- プラグインを利用してチャートを表示
- インプットしたx、yを追加、表示

![042.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/62627d50-1633-80f8-449c-5a55c163d306.jpeg)

## Login with Facebook
- プラグインを利用してログインを実装　※APIキー設定できずに画面作成まで
![043.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/64b4bddd-9e53-39f6-d706-69d456d8033e.jpeg)

## Graduation lesson: a to-do app
- todoと期限、完了ステータスをリストに追加（完了ステータスは非表示）
- 「Done」押下で完了ステータスが更新
- 完了したTODOはリストから除外


![044.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/b1db6234-4f38-d1ad-72bc-47f1d3a725b9.jpeg)

# 感想
- 一切コードを記述せずにGUIで画面実装できることは新体験
- プラグインを利用することで複雑なことも実現できそう
- 細かい仕様を実装できなさそう
    - Bubbleに合わせた仕様に変える方が早そう