データの生成/読出し/更新/削除を行う ( Part 1 ) - Microsoft Azure Mobile Services ( JavaScript バックエンド )
こんにちは。
マイクロソフトの渡辺です。
Microsoft Azure Mobile Services の話が続きます。
※これまでの記事
- 「 Microsoft Azure Mobile Services を JavaScript および .NET バックエンドで作成してみる 」
- 「 Microsoft Azure Mobile Services の JavaScript/.NET バックエンド 選択による違い 」
- 「 Microsoft Azure Mobile Service でのデータ アクセスの仕組み 」
そろそろコードを書いて、実際に モバイル サービスを使ってみます。今日は、フロント/バックエンドともに JavaScript で書いていきます。
モバイル サービスにクライアント側からアクセスする準備
サービス/アプリから、モバイル サービスにアクセスする方法は、ブラウザ上の管理画面のクイックスタートから確認できます。
上図の画面の指示通り、コードをコピーして貼り付ければ OK です。念のため確認しておくと、
Import the azure mobile services library.
で、モバイル サービスを使うための JavaScript ライブラリを読み込んでおきます。その上で、
Initialization of azure mobile service client.
JavaScript コードの中で、MobileServiceClient のインスタンスを生成します。このインスタンス ( ここでは、client ) を使って、このあとモバイル サービスにアクセスしていきます。
データ操作の基本：CRUD ( Create, Read, Update, Delete ) の方法
まずは、CRUD、データの生成、読出し、更新、削除の方法を見ていきます。
準備として、管理画面から、Item テーブルを作成しておきます。管理画面のデータ タブを開き、新しくテーブルを作成してください。
また、構成タブに行き、動的スキーマはオンにしておきましょう。
これで準備は、完了です。
先ほど、MobileServiceClient を初期化したのに続けて、
- Item テーブルの取得
- Item テーブルへの新しい項目の追加
- Item テーブルからのデータ読出し
- Item テーブルにある項目の更新
- Item テーブルにある項目の削除
を行います。
まずは、テーブルの取得から新しい項目を追加し、それをテーブルから読み込んでみます。
Create and read items with Azure Mobile Service.
管理画面のデータ タブから Item テーブルを見てみると、新しくデータが追加されていることがわかります。
また、ブラウザのコンソールを見ると、テーブルから先ほど追加された項目が読みだされているのもわかります。
次は項目の更新と削除です。まずは、新しく追加した項目の text を "Updated Item" に変更してみます。
Update the created item in Azure Mobile Service
テーブルを見ると、新しく "Smaple Text" として追加した項目が、"Updated Text"になっていることがわかります。
そして、項目の削除です。項目の削除も更新の際と同様に、項目の id を指定して行います。ここでは例として、Item テーブルの項目を読出し、一番先頭のものを削除してみます。
Delete the item in Azure Mobile Service
実行の度に、Item テーブルから項目が減っていくのを確認してみてください。
以上が、JavaScript バックエンドのモバイルサービスにおけるデータ操作の基本です。次回は、もう少し細かい機能についてみていきたいと思います。
