読者です 読者をやめる 読者になる 読者になる

tmytのらくがき

個人の日記レベルです

libcoding.so #1まとめ

なにをやったのか

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

  • Azure Mobile Services
  • Azure Websites
  • Windows Store App

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

このデモでは、JavascriptC#を使いましたが結局のところは 「みんな大好き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を実装した。 JavascriptAPIを実装して、データを格納する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:今どうなってるかはフォローしてない