Hands-on Lab of Azure

    Microsoft Azure是微软基于云计算的操作系统,和Azure Services Platform一样,是微软“软件和服务”技术的名称。Windows Azure的主要目标是为开发者提供一个平台,帮助开发可运行在云服务器、数据中心、Web和PC上的应用程序。云计算的开发者能使用微软全球数据中心的储存、计算能力和网络基础服务。

透过管理界面可以看到其丰富的功能。

Hands-on Lab of Azure_第1张图片

而这些Azure模型中最容易上手的便是移动服务(Mobile Service)

Hands-on Lab of Azure_第2张图片

移动服务可以看作是借助web api,为前端应用提供各种网络资源(包括数据存储,通知推送,身份验证等)。Azure支持JavaScript和.Net两种后端语言,以JavaScript后端为例,如下几部操作便可以看到样例效果。

1.  环境搭建:VS2013update4以上版本以及Azure SDK;

2.  试用或者付费Azure帐号;

3.  管理页面(https://manage.windowsazure.cn/)新建移动服务,下载样例。

4.  本地运行即可以看到对远程数据库操作的效果。

 #   具体步骤(JS后端)

Exercise 1: 创建Mobile Service

这个练习显示如何为Windows 8应用添加一个基于Azure Mobile Service的后端服务。需要创建新的mobile service和一个简单的To do list app.

应用截图如下:

Hands-on Lab of Azure_第3张图片

Task 1 – 创建mobile service

步骤如下:

1.登录 Microsoft Azure Management Portal,打开Mobile Services.

2.点击新建按钮.

3.打开 计算 | Mobile Service, 点击创建.

Hands-on Lab of Azure_第4张图片        


4.创建移动服务页面, 在URL框内输入子域名,选择链接的Azure SQL Database选择服务所在区域以及后端的语言,并选择配置高级推送,到下一页面.

Hands-on Lab of Azure_第5张图片

5.创建新的Service Bus命名空间和推送中心或者选择已有的

Hands-on Lab of Azure_第6张图片

6.输入新数据库的名称、服务器管理员登录名和密码,或者选择已有的数据库,经过用户名和密码的验证,点击完成

Hands-on Lab of Azure_第7张图片

Task 2 – 创建应用

1.管理门户里点击Mobile Services, 选择刚创建的mobile service.

2.在快速开始栏选择Windows Store平台,扩展创建一个新的Windows Store app.

1)配置好VS环境

2)点击绿色按钮在SQL Database里创建TodoItem表

3)选择C#语言下载示例Todolist应用代码

Hands-on Lab of Azure_第8张图片

Task 3 – 运行应用

1.打开下载的压缩工程.

2.首先Build应用,通过nuget安装所有缺失的References.

3.在App.xaml.cs里去除注释保留创建的Mobile Service的URL和密钥而连接local host的语句注释掉{!没看到连接local host的语句呀}

Hands-on Lab of Azure_第9张图片

4.运行应用,点击Save按钮,将发送POST 请求到Azure mobile service请求的数据被插入TodoItem表中表中存储的项目被返回到应用显示在界面上

Hands-on Lab of Azure_第10张图片

Note: 数据插入和查询函数在MainPage.xaml.cs .

5.管理门户中点击数据然后点击TodoItems表格观察到数据被成功存储入表格中.

Hands-on Lab of Azure_第11张图片

Hands-on Lab of Azure_第12张图片

Task 4 – 查看代码

1.在solution explorer展开References文件夹看到 Microsoft.WindowsAzure.Mobile, 是Azure mobile Services Client SDK.

2.打开App.xaml.cs a, 看到MobileServiceClient class. 这是Mobile Services client SDK 提供的主要类用来提供应用和Azure Mobile Services的交互. 第一个参数是Mobile Service endpoint第二个参数Mobile Service 的Application Key.

public static MobileServiceClient MobileService

        = new MobileServiceClient(

            "https://todolist.azure-mobile.net/"

            ,"vIWepmcOXGPsYCJQDDcFBKsnOVxzLG52" );

3.打开MainPage.xaml.cs 看mobile service client如何用来插入更新删除数据:

创建一个handle用来操作table:

private IMobileServiceTable<TodoItem> todoTable = App.MobileService.GetTable<TodoItem>();      

插入:

private async void InsertTodoItem(TodoItem todoItem)

{

    await todoTable.InsertAsync(todoItem);

    items.Add(todoItem);                       

}

更新:

private async void UpdateCheckedTodoItem(TodoItem item)

{

    await todoTable.UpdateAsync(item);

    items.Remove(item);

}

读取:

private void RefreshTodoItems()

{

    items = todoTable

         .Where(todoItem => todoItem.Complete == false)

         .ToCollectionView();

    ListItems.ItemsSource = items;

}

Exercise 2: 添加自定义API

Task 1 – 创建自定义API

1.Azure Management Portal选择Mobile Service, 点击API.

2.点击创建 按钮创建一个新的自定义API.

Hands-on Lab of Azure_第13张图片

3.在创建new custom API 目录里, 完成API 名称设置访问权限.

Hands-on Lab of Azure_第14张图片

4.创建好后可以在门户里编辑脚本.

Hands-on Lab of Azure_第15张图片

5.添加下列代码到脚本中.

exports.post = function(request, response) {
    var mssql = request.service.mssql;
    var sql = "UPDATE todoitem SET complete = 1 " +
        "WHERE complete = 0; SELECT @@ROWCOUNT as count";
    mssql.query(sql, {
        success: function(results) {
            if(results.length == 1)
                response.send(200, results[0]);
        }
    })
};

 

6.保存脚本.

Note: Mobile Services不会在脚本执行期间保存状每次脚本执行一个新的全局context会被创建不要在脚本中定义任何状态变量如果需要保存状态可以创建一个table保存状态

Task 2 – 更新应用调用自定义API

1.Visual Studio里, 打开MainPage.xaml file, 在ButtonRefresh 这个Button element , 用下列XAML code 代替它{!在xaml编辑界面不好看}:

<StackPanel Orientation="Horizontal">
    <Button Margin="72,0,0,0" Name="ButtonRefresh"
            Click="ButtonRefresh_Click">Refresh</Button>
    <Button Margin="12,0,0,0" Name="ButtonCompleteAll"
            Click="ButtonCompleteAll_Click">Complete All</Button>
</StackPanel>

2.打开MainPage.xaml.cs code file, 添加下列class定义

public class MarkAllResult
{
public int Count { get; set; }
}

3. MainPage class 的RefreshTodoItems 方法确保 query 通过下列Where 方法被定义:

.Where(todoItem => todoItem.Complete == false)

这一item过滤使得已完成的项目不会被query返回.

4.MainPage class, 添加下列方法:

private async void ButtonCompleteAll_Click(object sender, RoutedEventArgs e)
{
    string message;
    try
    {
        // Asynchronously call the custom API using the POST method.
        var result = await App.MobileService
            .InvokeApiAsync<MarkAllResult>("completeAll",
            System.Net.Http.HttpMethod.Post, null);
        message =  result.Count + " item(s) marked as complete.";
        RefreshTodoItems();
    }
    catch (MobileServiceInvalidOperationException ex)
    {
        message = ex.Message;
    }
 
    var dialog = new MessageDialog(message);
    dialog.Commands.Add(new UICommand("OK"));
    await dialog.ShowAsync();
}

这个方法处理Click 事件InvokeApiAsync 方法在端上被调用会想自定义API发送POST请求结果通过自定义API返回给端展示成为一个消息对话

5.运行查看结果



ref:官方教程下载()

作者为微软-刘士君老师

貌似图都挂了,囧。。。

#  拾遗

打开下载的样例:

Hands-on Lab of Azure_第16张图片

按照前述教程创建表之后数据库页面如下

Hands-on Lab of Azure_第17张图片

点击下方“使用VS打开”,本地VS会自动打开连接远程数据库,输入Azure帐号和设置的数据库密码即可,登录之后如下图:

Hands-on Lab of Azure_第18张图片

按照教程F5运行样例,NuGet并没有顺利还原所有需要的包:

Hands-on Lab of Azure_第19张图片

可以看到Windows8.1的都还原成功了,只是缺少WP的NewtonSoft包,那就用前者替换之:

Hands-on Lab of Azure_第20张图片

顺利运行之后,按照教程继续做也非难事了

Hands-on Lab of Azure_第21张图片

Hands-on Lab of Azure_第22张图片

BTW,.Net后端的样例始终无法用NuGet还原所有包,一直是这个鸟样一 一+

Hands-on Lab of Azure_第23张图片




你可能感兴趣的:(Hands-on Lab of Azure)