Backendlessチュートリアルミッション3- CODELESS CRUD ROOKIE

誰向けの記事か？

BackendlessのMission (Starter Pack with Codeless)、CODELESS CRUD ROOKIE のガイダンスを日本語で理解したい方

この記事の目的

この記事はBackendlessのMission、DATABASEの中の、CODELESS CRUD ROOKIEについて日本語で解説するものです。
BackendlessのStarter Pack with Codelessミッションを全てクリアすると、無料SPRINGBOARDプランを開放、FREE BACKENDLESS T-SHIRTを受け取ることができるみたいです。

報酬

2000 BBs(6.6ドル相当)が受け取れます。(500 BBs ×4 tasks)

Backendlessへの登録

アカウント作成がまだな方は下記リンクからどうぞ。また、有料課金時に「PROMO15」のプロモーションコードをお使いいただくと、１年間15% offになるみたいなので、有料プラン検討の場合は是非お使いください。

Backendless | Visual App Development Platform UI Builder and Backend

注意事項

この記事は2021年6月14日時点の情報であり、Backendlessの仕様変更等により、内容が異なる場合があります。あらかじめご了承ください。

Task - Add Object With API レコードをAPIで作る

報酬 - 500 BBs
難易度 - 簡単
ガイダンスYoutube

With this task you will save a new object in the database using the Backendless Database API. In order for the task to be recognized as complete, it is important that the object is saved in a database table called Person. For this task you will use Backendless UI Builder where you will create a UI page with the logic that saves an object in the database.

このタスクでは、Backendless Database API を使用して、新しいオブジェクトをデータベースに保存します。タスクが完了したと認識されるためには、オブジェクトが「Person」というデータベーステーブルに保存されていることが重要です。このタスクでは、Backendless UI Builderを使用して、データベースにオブジェクトを保存するロジックを持つUIページを作成します。

達成すべき内容：以前作成したテーブル「person」にAPIからレコードを作成する

1. FRONTENDタブをクリックしてタブをクリック

2. Button要素をドラッグ＆ドロップで追加

3. パズルのマークをクリック

4. 右側にある、「On Click Event」の「＋」ボタンをクリック

5. 左側のメニュー一覧のBACKENDLESSの下にある、「DataAPI」をクリック。「Save Object in Backendless」のピースをクリックするか、ドラッグしてワークフローに落とす

6.ジグゾーパズルのようになっているので、On Click Eventのブロックに合わせる。

7. Save Onject in Backendlessについている、table nameに、「Person」を入力

8. 同様にして、Systemの下のObjectを選択。Create Objectをクリックするかドラッグする。Objectとは、テーブルの列のこと。

9. Save Object in Backendlessのobjectの部分に、Create Objectを合わせる。

10. Create Objectの左上にある歯車マークをクリックして、列名を編集する

11. 列名を、「name」する。もう一つ列を追加したいので、左側のブロックからドラッグで持ってくる。

 12. 追加された列名を「age」にする。

13. 次に、それぞれの列に値を入力する。nameはText型、ageはnumber型
まずSystem下にあるTextのブロックをクリック、もしくはドラッグする

14. Textのブロックを「name」の部分に接続させる。「Joe」という値にする

15. 同様にして数値も追加していく。Systemの下の「Math」を選択。

16. 「age」のコネクタに接続して、「25」を入力する

17. 以上でロジックの設定は終了。（クリックされたら、テーブルPersonの列nameに"Joe"を、列ageに"25"を値としてレコードを作成）
保存するには、右上のPreviewから、デスクトップのアイコンをクリックすると、保存されてPreview画面が立ち上がる

18. 立ち上がったPreview画面のボタンを押してみる。何もUI上には起こらないが、Personテーブルには先ほどのロジックによってAPIからデータが登録されている。

ブロックは下図のように、Add Blockからテキストで探すことも可能。

ボタンを押してすぐにTableに更新が入るのは、Real Timeにデフォルトでチェックが入っているため。

Task - Retrieve Object With API レコードをAPIから取得

報酬 - 500 BBs
難易度 - 簡単
ガイダンスYoutube

With this task you will retrieve an object from the database using the Backendless Database API. In order for the task to be recognized as complete, an object must be retrieved from the Person table.

このタスクでは、Backendless Database API を使ってデータベースからオブジェクトを取得します。タスクが完了したと認識されるためには、Person テーブルからオブジェクトを取得する必要があります。

達成すべき内容：以前作成したテーブル「person」からレコードをAPIから取得する

1. FRONTENDタブ、UI Builderアイコン、USER INTERFACE画面。前回同様、Buttonを挿入する。（前回の分は削除して問題ないです。）

2. Input要素を２つ挿入する

3. Input要素一つ目のLabelを「Name」に、もう一つを「Age」に変更する

4. Input要素２つそれぞれに、「Read Only」のチェックを入れる

5. Button要素のLabelを「Get first Person object」に変更

6.  パズルのマークをクリック

7. Button要素の右側にある、「On Click Event」の「＋」ボタンをクリック

8. BACKENDLESSの下にあるData APIから、「Get first object from table」をクリックもしくはドラッグ

9. 「Get first object from table」は直接「On Click Event」に接続できないので（On Click Eventに値はない）、SYSTEMの下Objectから「Set Property in」を挿入する。これで、アプリのローカルストレージに格納する変数とDatabaseから引っ張ってくる値を結びつける。

10. 「On Click Event」-> 「Set property in」-> 「Get first object from table」の順にパズルを組む。
まずアプリのページ上に変数として値を仮保存したいので、「Page Data」を挿入。
また、propertyには、変数名として「personObject」を挿入
これにより、「クリックされたら、テーブルPersonの最初のレコードの値を、変数「personObject」に格納して、ページ上の保存領域に保存」というフローが完成。

11. USER INTERFACEに戻る

12. 次に、ページ上に保存されている変数「personObject」を先ほど挿入したInput要素に表示させる設定を行う。Input要素、Nameをクリックしロジックアイコンをクリック。

13. Value Logicに「personObject.name」を入力

14. 同様にして、Ageの要素をクリック、ロジックアイコンをクリックした後、Value Logicに「personObject.age」を入力。

15. これでページ変数と要素が結びついたのであとはテストを行えばOK。
前回同様、保存するには、右上のPreviewから、デスクトップのアイコンをクリックすると、保存されてPreview画面が立ち上がる

16. クリックすると、表示される

Task - Update Object With API レコードをAPIで更新する

報酬 - 500 BBs
難易度 - 簡単
ガイダンスYoutube

With this task you will update an existing object in the database using the Backendless Database API. In order for the task to be recognized as complete, an object must be updated in the Person table. If you work on the tasks in the same order as listed, you already will have a UI Builder page to continue with.

このタスクでは、Backendless Database API を使用して、データベース内の既存のオブジェクトを更新します。タスクが完了したと認識されるためには、Person テーブルでオブジェクトが更新されなければなりません。リストと同じ順番でタスクに取り組めば、すでにUIビルダーのページができているので、続けて作業することができます。

After you run the app, you can verify the object has been updated in the database. This can be done by clicking the Data icon in Backendless console and selecting the Person table. Value for the age property should be different than in the original code which saved the object.

アプリを実行した後、オブジェクトがデータベースで更新されたことを確認できます。これは、Backendless コンソールの Data アイコンをクリックし、Person テーブルを選択することで行うことができます。age プロパティの値は、オブジェクトを保存した元のコードとは異なるはずです。

達成すべき内容：以前作成したテーブル「person」のレコードをAPIから更新してageの値を変更する

今回はまず上書きされないエラーを出して、デバッグの方法まで解説されています。

1. FRONTENDタブ、UI Builderアイコン、USER INTERFACEから、Button要素を新しく挿入。Labelを「Save Changes」に変更

2. Button要素が増えた時のために、idを「saveChangesButton」に変更

3. NameとAgeのInput要素から、「Read Only」のチェックを外す。（これで取得した値を編集できるようにする）

3. Save Changesのボタン要素のロジックを開く

4. Button要素の右側にある、「On Click Event」の「＋」ボタンをクリック

5. BACKENDLESS下、Data APIの「Save Object in Backendless」をクリックまたはドラッグ。On Click Eventに接続。

6. 次にSystem下、Objectから「Get property of」を選択。

7. 下図のようにパズルを配置。table nameに「Person」、propertyには「personObject」を入力。Page上に保存されているので「Page Data」を挿入。

8. ここで、ひとまず流れは完成。今のままではエラーが起きるが、Previewして実行してみる。PreviewからGet first Person objectボタンを押して値を取得、Ageの値を変更して、Save Changesボタンを押してみる。
しかし、押してもBackendの値は変わらない。

9. エラーをチェックしてみる。まず、右クリックから、「Inspect（検証）」を選択

10. Consoleタブを開くと、エラーメッセージが読める。

11. 違う方法もある。Networkタブから、エラーになっている要素をクリック。

12. Previewタブをクリックすると、エラーメッセージが見える。このエラーメッセージは先ほどConsoleで見たものと同じ。

13. エラーメッセージを読むと、データ型が違うとのこと。Headersタブから値を確認すると、numberではなくtext型になっていることが分かる

14. USER INTERFACE画面に戻って、AgeのInput要素をクリック、TypeをNumberに変更する。

15. もう一度Previewから実行すると、更新が成功している

Task - Delete Object With API レコードをAPIで削除する

報酬 - 500 BBs
難易度 - 簡単
ガイダンスYoutube

With this task you will delete an existing object in the database using the Backendless Database API. In order for the task to be recognized as complete, an object must be deleted in the Person table.

このタスクでは、Backendless Database API を使用して、データベース内の既存のオブジェクトを削除します。タスクが完了したと認識されるためには、Person テーブルでオブジェクトが削除される必要があります。

達成すべき内容：以前作成したテーブル「person」にAPIからレコードを削除する

1. Buttonを挿入する。Labelを「Delete Object」に、Backgroundを赤色に変更する。

2. Delete ObjectボタンのLogicに移動、On Click Eventを挿入

3. BACKENDLESS下Data APIから、「Delete Table Object」を挿入

4. SYSTEM下のobjectから「Get property of」を挿入

5. 下図のように配置、名前を入力する。Delete Table Objectは、object(テーブルのレコード)もしくはobjectId(レコードのID)で指定できる。
これの意味は、
クリックされたら、
Table Personの
ページデータ上にある変数personObjectに該当するobject（レコード）を
テーブルから削除する

ObjectIdで指定したい場合は下図のようになる。

ObjectIdはTableから確認できる。

6. Previewから実行してみる。Get first propertyから、最初のレコードを取得、その後Deleteボタンを押すと、レコードが削除される。

以上です！お疲れ様でした。