libcoding.so #1まとめ - tmytのらくがき

なにをやったのか

WebサイトとWindows8アプリを、Windows Azureを通して連携してみた。要素としては次の3つ。

Azure Mobile Services
Azure Websites
Windows Store App

このデモで見せたかったこと

このデモでは、JavascriptとC#を使いましたが結局のところは「みんな大好きJavascriptでサーバ実装がこんなにらくちん！」というところ。

Push通知とかわりかしめんどくさい印象があって、実際めんどくさいんだけれども Azure Mobile Servicesみたいなのを使えば割とらくしょーだよね。という感じ。

別にAzure Mobile Servicesを推したいというわけではないけど、僕自身が Javascript好きだし、昔のParseみたいに*1専用のライブラリとか不要という点で Azure Mobile Serviceを使っただけ。

デモで使ったコードなどなど

まず、Windows Azure上にクラウドサービスを2個作成。

1つめ。Azure Websites

今回、ブラウザから入力された文字列をクライアントへプッシュした。その際の、WebページをホスティングするためにAzure Websitesを使用した。

実際のところ別にそれだけのためにAzure使わなくていいと思うけどせっかくなので使っただけ。

2つめ。Azure Mobile Services

ブラウザと、クライアントから通信するためのAPIを実装した。 JavascriptでAPIを実装して、データを格納するSQLテーブルを宣言しただけ。

SQLには、usersというテーブルを作成し、tokenという文字列型のフィールドを設定した。

また、プッシュ通知用サーバトークンを設定した。このトークンは、Windows Store Apps開発者ダッシュボードから作成することができる。このトークンに関しては、Windows Store Apps上でプッシュ通知を使う際に一般的に必要になるものなので、ここでは割愛する。

サーバサイド

Azure Mobile Service上に2つのAPIを作成した。

/api/register

このAPIでは、クライアントを内部のデータベースに登録する。

exports.post = function(request, response){
    request.service.tables.getTable("users").insert({
        token: request.param("t")
    });
    response.send(200, "OK");
}

/api/notify

このAPIでは、Webサイトから入力されたテキストをクライアントアプリに通知する。

exports.post = function(request, response){
    request.service.tables.getTable("users").read({success: 
        function(results){
            for(var i = 0; i < results.length; ++i){
                request.service.push.wns.sendToastText01(results[i].token, {text1: request.param("s")});
            }
            response.send(200);
    }});
};

クライアントサイド

クライアントはふつうにWindows Store Appsを作り、次の設定を変更した。 - トースト通知を有効 - アプリをストアに関連づけ

そして、次のコードを挿入した。

private async void Register()
{
    var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    var c = new HttpClient();
    var ctx = new HttpFormUrlEncodedContent(new Dictionary<string, string> { { "t", channel.Uri } });
    await c.PostAsync(new Uri("http://libcoding-api.azure-mobile.net/api/register"), ctx);
}

そして、これを全部くっつけて、動かして、プッシュきたね！って感じでした。

*1:今どうなってるかはフォローしてない