ノーコードで有名なBubble(バブル)
Bubbleの何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずは、レッスンチュートリアルから始めるのがいいです。
ここではBubbleのチュートリアルレッスンについて書いています。
Bubbleのチュートリアルレッスン
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m26d_114307426.jpg)
Bubbleには、チュートリアルレッスンがあります。
レッスンの順番にやっていくといいです。
チュートリアルレッスンでは、矢印が出てくるので、その矢印にしたがって進めていくといいです。
最初は、わけが分からないかもしれませんが、一通りやっていくと、あとで繋がってきて、なんとなく流れがわかるようになってきます。
まずは、流れに沿ってやってみて、どのようなものができるのかを確認してください。
それぞれに時間が書かれていますが、初めての方はおそらく、この時間では終わらないと思います。
ここでは、チュートリアルレッスン順(レッスン1~)で進めています。
Bubbleのチュートリアルレッスンの始め方
Bubbleのチュートリアルレッスンを始めるには、ホーム画面上部の「Academy」をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_132918494.jpg)
少しだけスクロールすると、INTERACTIVE LESSONというのがあります。
ここからレッスンを始めることができます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_132945057.jpg)
See allをクリックすると、基本学習のレッスンの一覧が出てきます。
(12のレッスンがあります)
Saving data
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_132428292.jpg)
【レッスン1】
Save addresses and display them on a map(住所を保存して地図に表示する)
4 minutes(4分)
データを保存(Saving data)して、地図上に一連の場所を表示するアプリケーションを作成します。
Saving dataの詳細はこちら
Building a sign-up system
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m27d_140337734.jpg)
【レッスン2】
Build a sign-up and login workflow(サインアップとログインのワークフローを構築する)
4 minutes(4分)
Building a sign-up system:サインアップシステムの構築
メールアドレスを使用して、ログイン・ログアウトができるアプリです。
Building a sign-up systemの詳細はこちら
Saving and modifying data
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_131837220.jpg)
【レッスン3】
Build a reddit-like app to vote on city names(都市名に投票するredditのようなアプリを作成する)
6 minutes(6分)
データの保存と変更(Saving and modifying data)を行います。
Saving and modifying dataは、都市名を入力して投票するウェブアプリケーションです。
Building a slideshow
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_213514464.jpg)
【レッスン4】
Create a beautiful picture slideshow(美しい写真のスライドショーを作成する)
2 minutes(2分)
スライドショーを作成します。PC内の写真をアップロードしてスライドショーにします。
Building a slideshowの詳細はこちら
Sending data to pages
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_114046837.jpg)
【レッスン5】
Share data among pages:ページ間でデータを共有する
6 minutes(6分)
Sending data to pages:ページへのデータの送信
Using conditions
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112331613.jpg)
【レッスン6】
Use conditions to refine what your app does(条件を使用してアプリの機能を改善する)
3 minutes(3分)
条件の使用を使ったアプロケーションです。
Using conditionsの詳細はこちら
Defining a field as a list of things
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m05d_121509882.jpg)
【レッスン7】
Attach a list of things to the current user(現在のユーザーにモノのリストを添付する)
5 minutes(5分)
項目のリストとしてのフィールドの定義を行います。
Defining a field as a list of thingsの詳細はこちら
⇒ Defining a field as a list of things
Using APIs and sending data to groups
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_205404185.jpg)
【レッスン8】
Using APIs and sending data to groupsは、APIの使用とデータのグループへの送信です。
GiphyアニメーションGIFを検索します。
3 minutes(所用時間:3分)
Using APIs and sending data to groupsの詳細はこちら
⇒ Using APIs and sending data to groups
Using external APIs
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211805236.jpg)
【レッスン9】
Using external APIsは、外部APIの使用を行います。
Search for songs in the iTunes APIは、iTunes APIで曲を検索します。
所要時間:3 minutes(3分)
Using external APIsの詳細はこちら
Using the chart element
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_132027086.jpg)
【レッスン10】
Using the chart elementは、グラフ要素の使用を行います。
所要時間5分
グラフ要素を使用して動的データを表示します。
Using the chart elementの詳細はこちら
Login with Facebook
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211851115.jpg)
【レッスン11】
Login with Facebookは、Facebookでログインするようにするアプリです。
ユーザーがFacebookにログイン/サインアップできるようにします。
3 minutes(3分)
フェイスブックのログイン、ログアウトがワンクリックでできます。
Login with Facebookの詳細はこちら
a to-do app
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_223216831.jpg)
【レッスン12】
卒業レッスンです。
「やることアプリ」の作製で、ここでは、To-Doのアプリを作ります。
所要時間:7 minutes(7分)
a to-do appの詳細はこちら
まとめ
バブルには、このようなレッスンがあります。
最初はこのようなレッスンを使用してバブルに慣れていくといいです。
レッスン一覧の下部の「CREATE A NEW APP」をクリックし、アプリ名を入力すると、自由にアプリを作れます。
ある程度、理解できたらアプリ作りに挑戦してください。
コメントを残す