Partager via

Doto Azure Mobile Services sample

  • Article

The doto sample is a simple, social to-do list application that demonstrates how easy it is to add the power of Azure Mobile Services to your Windows Store app.

This doto sample is an updated version of the sample for Windows 8 . Both versions use the Microsoft Azure Mobile Services in the same way.

This brief video gives you an overview of the functionality of doto and highlights some of the technology used in the sample code.

Key features

Doto uses the following features from Mobile Services:

  • Authentication using Microsoft account.
  • Structured storage with server scripts to provide validation and authorization.
  • Integration with Windows Notification Services to send Live Tile updates and toast notifications.

The Doto sample is a Windows Store app that allows you to:

  • Create multiple lists.
  • Add and delete items from your lists.
  • Share your lists with other users.
  • Add and delete items from shared lists.

The following tables are set up in Mobile Services for storing information about lists:

Table Name Description
Devices Contains information about each device that connects to the doto services.
Invites Contains information about invitations that have been sent, who they were sent to, and who sent them.
Items Contains the individual items in all the lists.
ListMembers Contains information about the lists such as the list name and who is connected to a list.
Profiles Contains the information about each user.
Settings An optional table that allows you to set a background picture or color.

 

The Mobile Services also provide integrated login services for the doto sample. This makes it easy to manage logging users into the doto system. See the LoginAsync method in the MainViewModel.cs file to see how these services work. You can also use the Live Connect SDK to implement single sign-on.

Mobile Services makes it easy to work with your data on the web. The Scripts folder of the sample contains a series of JavaScript files that can be associated with the database tables. These scripts are invoked when an associated table create, retrieve, update or delete operation is in invoked. You can add functionality like updating another table, pulling data from other tables or validating data as part of running these scripts.

Finally, Mobile Services provide the push notification functionality of the program. The app displays a toast notification to users when they have been invited to share a list and a tile notification when another user adds an item to a shared list. See the RegisterDeviceAsync method in the MainViewModel.cs file to see how the client registers to receive the notifications and then the channel_PushNotificationReceived event handler to see how it handles receiving a notification.

How to use the sample

To use the sample:

  1. If you do not have an Azure subscription already, then sign up for a free trial. This will enable you to host 10 mobile services for free.

  2. Install the command line tools for Azure.

  3. Download the credentials needed to talk to Azure. You need to do this once to manage all subsequent commands to Mobile Services.

    To do this:

    • Download the Azure management credentials by entering the command azure account download. This will open up a web page to login to the Management Portal for Azure. Once you log in, it will generate and prompt you to download a publishsettings file for your Azure subscription. Save this file to a location on your machine.

    • Import the publishsettings file from the saved location. This will configure your command line client to manage all your Azure services from the command line. To do this, enter the command:

      azure account import [SaveLocation]

  4. Create a Azure Mobile Service by entering the command:

    azure mobile create [AzureMobileServiceName] [sqlAdminUsername] [sqlAdminPassword]

  5. Setup the tables and set the permissions for the table operations for your Azure Mobile Service by entering the following commands:

    azure mobile table create [AzureMobileServiceName] devices --permissions insert=user,update=admin,delete=admin,read=admin

    azure mobile table create [AzureMobileServiceName] invites --permissions insert=user,update=user,delete=admin,read=user

    azure mobile table create [AzureMobileServiceName] items --permissions insert=user,update=admin,delete=user,read=user

    azure mobile table create [AzureMobileServiceName] listMembers --permissions insert=user,update=admin,delete=user,read=user

    azure mobile table create [AzureMobileServiceName] profiles --permissions insert=user,update=admin,delete=admin,read=user

    azure mobile table create [AzureMobileServiceName] settings --permissions insert=admin,update=admin,delete=admin,read=application

  6. Upload the scripts to your Azure Mobile Service which will set up the database. In the command line, change to the Scripts directory the under sample installation location. Run the following commands to upload this scripts:

    azure mobile script upload [AzureMobileServiceName] table/devices.insert.js

    azure mobile script upload [AzureMobileServiceName] table/invites.insert.js

    azure mobile script upload [AzureMobileServiceName] table/invites.read.js

    azure mobile script upload [AzureMobileServiceName] table/invites.update.js

    azure mobile script upload [AzureMobileServiceName] table/items.delete.js

    azure mobile script upload [AzureMobileServiceName] table/items.insert.js

    azure mobile script upload [AzureMobileServiceName] table/items.read.js

    azure mobile script upload [AzureMobileServiceName] table/listMembers.insert.js

    azure mobile script upload [AzureMobileServiceName] table/listmembers.delete.js

    azure mobile script upload [AzureMobileServiceName] table/listMembers.read.js

    azure mobile script upload [AzureMobileServiceName] table/profiles.insert.js

  7. Register your app to receive push notifications.

  8. In Microsoft Visual Studio, open the sample solution and right click the doto project and then select Store -> Associate App with the Store from the context menu. Complete the wizard by logging in and then select the app you previously registered in the store.

  9. Collect information from the Live Connect Developer Center.

    • Go to the Live Connect Developer Center and select your app in the My Applications list.
    • Once in your app, click Edit Settings.
    • Under API Settings, make a note of the Client ID, Client secret and the Package security identifier (SID) values.
    • Set the Redirect Domain to be the URI of your mobile service.

  10. Configure your Azure Mobile Service with the Client secret and Package security identifier values obtained in the previous step:

    azure mobile config set [AzureMobileServiceName] microsoftAccountClientId [ClientId]

    azure mobile config set [AzureMobileServiceName] microsoftAccountClientSecret [ClientSecret]

    azure mobile config set [AzureMobileServiceName] microsoftAccountPackageSID [PackageSID]

  11. Get the ApplicationUrl and ApplicationKey for your Azure Mobile Service:

    azure mobile show [AzureMobileServiceName]

  12. Update sample code so that the sample can talk to Mobile Services.

    • Open up the App.xaml.cs file.
    • Replace the mobile-service-url and mobile-service-key with the ApplicationUrl and ApplicationKey retrieved in the previous step. Now your Windows store app is all set to talk to your newly created Mobile Services.

  13. This step is optional. Doto uses the settings table to implement a simple updatable theming system. This allows the app developer to change the look of doto for all users. You can point to any background image you like and set any accent color. To set your own theme, you can connect to your SQL database which is backing up your Azure Mobile Service and insert/update the settings with a SQL script. This exercise demonstrates how you can perform operations directly on the SQL Azure database, including adding new columns and running scripts:

    • In the Management Portal for Azure, click on the database icon on the left.

    • Find the database that your Mobile Service is connected to by looking at your Mobile Service's dashboard in the portal. Choose the database then choose the Manage command on the dashboard.

    • This should open the SQL Database in the browser management experience. You may be prompted to open the appropriate IP addresses to allow your browser to connect.

    • Login using the administrator account for your SQL Server and choose New Query.

    • Run the following T-SQL script to manually create some columns and insert some new settings. Note that the schema name doto used below should be replaced with the name of your application.

      • ALTER TABLE doto.settings
      • ADD [key] nvarchar(50), [value] nvarchar(255)
      • GO
      • INSERT INTO doto.settings VALUES ('accentColor', '#769334'), ('backgroundImage', 'http://[someUrl]/dotoBackground.png');
      • Notice that when you start the doto app a different picture loads after startup based on the URL below.

How to doto

  1. To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.
  2. When first starting doto, you'll be asked to register. Adding your location details makes it easier to search for someone to search for you when they want to share a list.
  3. Once registered, you will be asked to create a new list. Choose the Create a new list button, enter a name for your list and select Save.
  4. You can add more lists at any time by using the bottom app bar. You can right click the screen to view the app bar.
  5. You can also use the bottom app bar to add, remove items, refresh the current list and invite other users or leave a list.
  6. You can switch between multiple lists by choosing the name of your list from the top left of the screen which will show a dropdown of all available lists.
  7. Doto was designed to be extremely simple. Items can be removed from a list but there is no way to edit an item or mark it complete. To remove items from the list, just select them and click remove item in the app bar.
  8. You can invite other users to share a list by clicking on the invite user button and searching for people by name. To test this feature, you may need to sign out, by using the settings charm, and then sign in again with a second Microsoft account account.
  9. When a user is invited to share a list, they will receive a toast notification. Users can then click the view invite button in the app bar to accept or reject an invite. Note that an invited user gets full permissions over your list, including the ability to invite other users.
  10. You can also go to the Management Portal for Azure, login and view your Mobile service and the saved data.