Permalink
Browse files

415: first draft of the data iOS tutorial and other tutorial fixes

  • Loading branch information...
1 parent 27b092a commit 45f078472bef04871e58c89562c2dfdaec8b3ba1 @ggailey777 ggailey777 committed Oct 13, 2012
View
3 DevCenter/Mobile/Tutorials/mobile-services-get-started-ios.md
@@ -7,7 +7,8 @@
<span>Tutorial</span>
</div>
-# <a name="getting-started"> </a>Get started with Mobile Services
+# <a name="getting-started"> </a>Get started with Mobile Services for iOS
+
This tutorial shows you how to add a cloud-based backend service to an iOS app using Windows Azure Mobile Services. In this tutorial, you will create both a new mobile service and a simple _To do list_ app that stores app data in the new mobile service.
A screenshot from the completed app is below:
View
17 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-data-dotnet.md
@@ -3,6 +3,11 @@
<div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="14798" ismacro="true" umb_chunkname="MobileArticleLeft" umb_chunkpath="devcenter/Menu" umb_macroalias="AzureChunkDisplayer" umb_hide="0" umb_modaltrigger="" umb_chunkurl="" umb_modalpopup="0"><!-- startUmbMacro --><span><strong>Azure Chunk Displayer</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>
<div class="dev-center-os-selector">
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-dotnet/" title="Windows Store version" class="current">Windows Store app</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-ios/" title="iOS version">iOS app</a>
+ <span>Tutorial</span>
+</div>
+<div class="dev-center-os-selector">
<a href="/en-us/develop/mobile/tutorials/get-started-with-data-dotnet/" title=".NET client version" class="current">C# and XAML</a>
<a href="/en-us/develop/mobile/tutorials/get-started-with-data-js/" title="JavaScript client version">JavaScript and HTML</a>
<span>Tutorial</span>
@@ -26,7 +31,7 @@ This tutorial walks you through these basic steps:
This tutorial requires the [Mobile Services SDK].
-## <a name="download-app"></a>Download the project
+## <a name="download-app"></a><h2><span class="short-header">Download the project</span>Download the GetStartedWithData project</h2>
This tutorial is built on the [GetStartedWithData app][Developer Code Samples site], which is a Windows Store app. The UI for this app is identical to the app generated by the Mobile Services quickstart, except that added items are stored locally in memory.
@@ -46,7 +51,7 @@ This tutorial is built on the [GetStartedWithData app][Developer Code Samples si
Notice that the saved text is displayed in the second column under **Query and update data**.
-## <a name="create-service"></a>Create mobile service
+## <a name="create-service"></a><h2><span class="short-header">Create mobile service</span>Create a new mobile service in the Management Portal</h2>
Next, you will create a new mobile service to replace the in-memory list for data storage. Follow these steps to create a new mobile service.
@@ -83,7 +88,7 @@ Next, you will create a new mobile service to replace the in-memory list for dat
You have now created a new mobile service that can be used by your mobile apps. Next, you will add a new table in which to store app data. This table will be used by the app in place of the in-memory collection.
-## <a name="add-table"></a>Add a new table
+## <a name="add-table"></a><h2><span class="short-header">Add a new table</span>Add a new table to the mobile service</h2>
To be able to store app data in the new mobile service, you must first create a new table in the associated SQL Database instance.
@@ -118,7 +123,7 @@ To be able to store app data in the new mobile service, you must first create a
You are now ready to use the new mobile service as data storage for the app.
-## <a name="update-app"></a>Update the app
+## <a name="update-app"></a><h2><span class="short-header">Update the app</span>Update the app to use the mobile service for data access</h2>
Now that your mobile service is ready, you can update the app to store items in Mobile Services instead of the local collection.
@@ -174,7 +179,7 @@ Now that your mobile service is ready, you can update the app to store items in
Now that the app has been updated to use Mobile Services for backend storage, it's time to test the app against Mobile Services.
-## <a name="test-app"></a>Test the app
+## <a name="test-app"></a><h2><span class="short-header">Test the app</span>Test the app against your new mobile service</h2>
1. In Visual Studio, press the F5 key to run the app.
@@ -225,7 +230,7 @@ This tutorial demonstrated the basics of enabling a Windows Store app to work wi
Once you have completed the data series, try one of these other tutorials:
* [Get started with authentication]
- <br/>Learn how to authenticate users of your app with Windows Account.
+ <br/>Learn how to authenticate users of your app.
* [Get started with push notifications]
<br/>Learn how to send a very basic push notification to your app.
View
157 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-data-ios.md
@@ -4,11 +4,11 @@
<div class="dev-center-os-selector">
<a href="/en-us/develop/mobile/tutorials/get-started-with-data-dotnet/" title="Windows Store version">Windows Store app</a>
- <a href="/en-us/develop/mobile/tutorials/get-started-with-data-js/" title="iOS version" class="current">iOS app</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-ios/" title="iOS version" class="current">iOS app</a>
<span>Tutorial</span>
</div>
-# Get started with data in Mobile Services
+# Get started with data in Mobile Services for iOS
This topic shows you how to use Windows Azure Mobile Services to leverage data in an iOS app. In this tutorial, you will download an app that stores data in memory, create a new mobile service, integrate the mobile service with the app, and then login to the Windows Azure Management Portal to view changes to data made when running the app.
@@ -24,29 +24,27 @@ This tutorial walks you through these basic steps:
4. [Update the app to use Mobile Services]
5. [Test the app against Mobile Services]
-This tutorial requires the [Mobile Services SDK].
+This tutorial requires the [Mobile Services iOS SDK] and [XCode][Install Xcode].
-## <a name="download-app"></a>Download the project
+## <a name="download-app"></a><h2><span class="short-header">Download the project</span>Download the GetStartedWithData project</h2>
-This tutorial is built on the [GetStartedWithData app][Developer Code Samples site], which is a Windows Store app. The UI for this app is identical to the app generated by the Mobile Services quickstart, except that added items are stored locally in memory.
+This tutorial is built on the [GetStartedWithData app][GitHub], which is an iOS app. The UI for this app is identical to the app generated by the Mobile Services iOS quickstart, except that added items are stored locally in memory.
-1. Download the C# version of the GetStartedWithData sample app from the [Developer Code Samples site].
+1. Download the GetStartedWithData sample app from [GitHub].
- ![][10]
+2. In Xcode, open the downloaded project and examine the TodoService.m file.
-2. In Visual Studio 2012 Express for Windows 8, open the downloaded project and examine the MainPage.xaml.cs file.
+ Notice that there are five // TODO comments that specify the steps you must take to make this app work with your mobile service.
- Notice that added **TodoItem** objects are stored in an in-memory **ObservableCollection&lt;TodoItem&gt;**.
+3. Press the **Run** button (or the Command+R key) to rebuild the project and start the app.
-3. Press the **F5** key to rebuild the project and start the app.
-
-4. In the app, type some text in **Insert a TodoItem**, then click **Save**.
+4. In the app, type some text in the text box, then click the **+** button.
![][0]
- Notice that the saved text is displayed in the second column under **Query and update data**.
+ Notice that the saved text is displayed in the list below.
-## <a name="create-service"></a>Create mobile service
+## <a name="create-service"></a><h2><span class="short-header">Create mobile service</span>Create a new mobile service in the Management Portal</h2>
Next, you will create a new mobile service to replace the in-memory list for data storage. Follow these steps to create a new mobile service.
@@ -83,7 +81,7 @@ Next, you will create a new mobile service to replace the in-memory list for dat
You have now created a new mobile service that can be used by your mobile apps. Next, you will add a new table in which to store app data. This table will be used by the app in place of the in-memory collection.
-## <a name="add-table"></a>Add a new table
+## <a name="add-table"></a><h2><span class="short-header">Add a new table</span>Add a new table to the mobile service</h2>
To be able to store app data in the new mobile service, you must first create a new table in the associated SQL Database instance.
@@ -118,99 +116,117 @@ To be able to store app data in the new mobile service, you must first create a
You are now ready to use the new mobile service as data storage for the app.
-## <a name="update-app"></a>Update the app
+## <a name="update-app"></a><h2><span class="short-header">Update the app</span>Update the app to use the mobile service for data access</h2>
Now that your mobile service is ready, you can update the app to store items in Mobile Services instead of the local collection.
0. If you haven't already installed the [Mobile Services SDK], install it now.
-1. In the **Project** menu in Visual Studio, click **Add Reference**, then expand **Windows**, click **Extensions**, check **Windows Azure Mobile Services Managed Client**, and click **OK**.
+1. In the Project Navigator in Xcode, open both the TodoService.m and TodoService.h files located in the Quickstart folder, and add the following import statement:
+
+ #import <WindowsAzureMobileServices/WindowsAzureMobileServices.h>
+
+2. In Xcode, open the file TodoService.m, and locate the following commented line of code:
+
+ // Create an MSTable property for your items.
+
+ After this comment, create a property representation for your mobile services table by adding the following line of code inside the @interface declaration:
+
+ @property (nonatomic, strong) MSTable *table;
- ![][7]
+4. Open the ToDoService.h file and locate following commented line of code:
- This adds a reference to the Mobile Services client to the project.
+ // Create an MSClient property comment in the #interface declaration for the TodoService.
-2. In both the MainPage.xaml.cs and App.xaml.cs project files, add the following **using** statement:
+ After this comment, add the following line of code to create a property that represents the MSClient that connects to the service:
- using Microsoft.WindowsAzure.MobileServices;
+ @property (nonatomic, strong) MSClient *client;
-3. In the Management Portal, click **Mobile Services**, and then click the mobile service you just created.
+6. In the Management Portal, click **Mobile Services**, and then click the mobile service you just created.
-4. Click the **Dashboard** tab and make a note of the **Site URL**, then click **Manage keys** and make a note of the **Application key**.
+7. Click the **Dashboard** tab and make a note of the **Site URL**, then click **Manage keys** and make a note of the **Application key**.
![][8]
You will need these values when accessing the mobile service from your app code.
-5. In Visual Studio, open the file App.xaml.cs, uncomment the code that defines the **MobileService** variable, and supply the URL and application key from the mobile service in the **MobileServiceClient** constructor, in that order.
+8. Back in Xcode, open the TodoService.m and locate the following commented line of code:
- This creates a new instance of MobileServiceClient that is used to access your mobile service.
+ // Initialize the Mobile Service client with your URL and key
-6. In the file MainPage.xaml.cs, comment the line that defines the existing **items** collection, and uncomment the following lines:
+ After this comment, add the following line of code that creates a client instance:
- private MobileServiceCollectionView<TodoItem> items;
- private IMobileServiceTable<TodoItem> todoTable =
- App.MobileService.GetTable<TodoItem>();
+ self.client = [MSClient clientWithApplicationURLString:@”APPURL” withApplicationKey:@"APPKEY"];
- This code creates a mobile services-aware binding collection (**items**) and a proxy class for the SQL Database table **TodoItem** (**todoTable**).
+9. Replace the values of **APPURL** and **APPKEY** in this code with the URL and application key from the mobile service that you acquired in step 6.
-7. In the **InsertTodoItem** method, remove the line of code that sets the **TodoItem**.**Id** property, add the **async** modifier to the method, and uncomment the following line of code:
+10. Locate the following commented line of code:
- await todoTable.InsertAsync(todoItem);
+ // Create an MSTable instance to allow us to work with the TodoItem table.
- This code inserts a new item into the table.
+ After this comment, add the following line of code that creates a table instance:
-8. In the **RefreshTodoItems** method, uncomment the following line of code:
+ self.table = [_client getTable:@"TodoItem"];
- items = todoTable.ToCollectionView();
+11. Locate the following commented line of code:
- This sets the binding to the collection of items in the todoTable, which contains all TodoItem objects returned from the mobile service.
+ // Create a predicate that finds items where complete is false comment in the refreshDataOnSuccess method.
-9. In the **UpdateCheckedTodoItem** method, add the **async** modifier to the method, and uncomment the following line of code:
+ After this comment, add the following line of code that creates a query to find all tasks that have not yet been completed:
- await todoTable.UpdateAsync(item);
+ NSPredicate * predicate = [NSPredicate predicateWithFormat:@"complete == NO"];
- This sends an item update to the mobile service.
+12. Locate the following commented line of code:
-Now that the app has been updated to use Mobile Services for backend storage, it's time to test the app against Mobile Services.
+ // Query the TodoItem table and update the items property with the results from the service.
-## <a name="test-app"></a>Test the app
+ Replace that comment and the subsequent **completion** block invocation with the following code:
-1. In Visual Studio, press the F5 key to run the app.
+ // Query the TodoItem table and update the items property with the results from the service
+ [self.table readWhere:predicate completion:^(NSArray *results, NSInteger totalCount, NSError *error) {
+ items = [results mutableCopy];
+
+ completion();
+ }];
-2. As before, type text in **Insert a TodoItem**, and then click **Save**.
+13. Locate the **completeItem** method, and replace the body of the method with the following code:
- This sends a new item as an insert to the mobile service.
+ // Update the item in the TodoItem table and remove from the items array on completion
+ [self.table update:mutable completion:^(NSDictionary *item, NSError *error) {
+
+ // TODO
+ // Get a fresh index in case the list has changed
+ NSUInteger index = [items indexOfObjectIdenticalTo:mutable];
+
+ [mutableItems removeObjectAtIndex:index];
+
+ // Let the caller know that we have finished
+ completion(index);
+ }];
-3. In the [Management Portal], click **Mobile Services**, and then click your mobile service.
+ This code removes TodoItems after they are marked as completed.
-4. Click the **Data** tab, then click **Browse**.
+Now that the app has been updated to use Mobile Services for backend storage, it's time to test the app against Mobile Services.
- ![][9]
-
- Notice that the **TodoItem** table now contains data, with id values generated by Mobile Services, and that columns have been automatically added to the table to match the TodoItem class in the app.
+## <a name="test-app"></a><h2><span class="short-header">Test the app</span>Test the app against your new mobile service</h2>
-5. In the app, check one of the items in the list, then go back to the Browse tab in the portal and click **Refresh**.
+1. In Xcode, select an emulator to deploy to (either iPhone or iPad), press the **Run** button (or the Command+R key) to rebuild the project and start the app.
- Notice that the complete value has changed from **false** to **true**.
+ This executes your Windows Azure Mobile Services client, built with the iOS SDK, that queries items from your mobile service.
-6. In the MainPage.xaml.cs project file, replace the existing **RefreshTodoItems** method with the following code that filters out completed items:
+2. As before, type text in the textbox, and then click the **+** button..
- private void RefreshTodoItems()
- {
- // This query filters out completed TodoItems.
- items = todoTable
- .Where(todoItem => todoItem.Complete == false)
- .ToCollectionView();
+ This sends a new item as an insert to the mobile service.
- ListItems.ItemsSource = items;
- }
+3. In the [Management Portal], click **Mobile Services**, and then click your mobile service.
-7. In the app, check another one of the items in the list and then click the **Refresh** button.
+4. Click the **Data** tab, then click **Browse**.
- Notice that the checked item now disappears from the list. Each refresh results in a round-trip to the mobile service, which now returns filtered data.
+ ![][9]
+
+ Notice that the **TodoItem** table now contains data, with id values generated by Mobile Services, and that columns have been automatically added to the table to match the TodoItem class in the app.
-This concludes the **Get started with data** tutorial.
+This concludes the **Get started with data** tutorial for iOS.
## <a name="next-steps"> </a>Next steps
@@ -226,14 +242,11 @@ This tutorial demonstrated the basics of enabling an iOS app to work with data i
Once you have completed the data series, -->
-Next, try one of these other iOS tutorials:
-
-* [Get started with authentication]
- <br/>Learn how to authenticate users of your app with Windows Account.
-
-* [Get started with push notifications]
- <br/>Learn how to send a very basic push notification to your app.
+Next, try the iOS tutorial [Get started with authentication] to learn how to authenticate users of your app.
+<!--* [Get started with push notifications]
+ <br/>Learn how to send a very basic push notification to your app with Mobile Services.
+-->
<!-- Anchors. -->
[Get the Windows Store app]: #download-app
@@ -244,7 +257,7 @@ Next, try one of these other iOS tutorials:
[Next Steps]:#next-steps
<!-- Images. -->
-[0]: ../Media/mobile-quickstart-startup.png
+[0]: ../Media/mobile-quickstart-startup-ios.png
[1]: ../../Shared/Media/plus-new.png
[2]: ../Media/mobile-create.png
[3]: ../Media/mobile-create-page1.png
@@ -269,4 +282,4 @@ Next, try one of these other iOS tutorials:
[Management Portal]: https://manage.windowsazure.com/
[Install Xcode]: https://go.microsoft.com/fwLink/p/?LinkID=266532
[Mobile Services iOS SDK]: https://go.microsoft.com/fwLink/p/?LinkID=266533
-[Developer Code Samples site]: http://go.microsoft.com/fwlink/p/?LinkId=268622
+[GitHub]: http://go.microsoft.com/fwlink/p/?LinkId=268622
View
17 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-data-js.md
@@ -3,6 +3,11 @@
<div class="umbMacroHolder" title="This is rendered content from macro" onresizestart="return false;" umbpageid="14798" ismacro="true" umb_chunkname="MobileArticleLeft" umb_chunkpath="devcenter/Menu" umb_macroalias="AzureChunkDisplayer" umb_hide="0" umb_modaltrigger="" umb_chunkurl="" umb_modalpopup="0"><!-- startUmbMacro --><span><strong>Azure Chunk Displayer</strong><br />No macro content available for WYSIWYG editing</span><!-- endUmbMacro --></div>
<div class="dev-center-os-selector">
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-js/" title="Windows Store version" class="current">Windows Store app</a>
+ <a href="/en-us/develop/mobile/tutorials/get-started-with-data-ios/" title="iOS version">iOS app</a>
+ <span>Tutorial</span>
+</div>
+<div class="dev-center-os-selector">
<a href="/en-us/develop/mobile/tutorials/get-started-with-data-dotnet/" title=".NET client version">C# and XAML</a>
<a href="/en-us/develop/mobile/tutorials/get-started-with-data-js/" title="JavaScript client version" class="current">JavaScript and HTML</a>
<span>Tutorial</span>
@@ -26,7 +31,7 @@ This tutorial walks you through these basic steps:
This tutorial requires the [Mobile Services SDK].
-## <a name="download-app"></a>Download the project
+## <a name="download-app"></a><h2><span class="short-header">Download the project</span>Download the GetStartedWithData project</h2>
This tutorial is built on the [GetStartedWithData app][Developer Code Samples site], which is a Windows Store app. The UI for this app is identical to the app generated by the Mobile Services quickstart, except that added items are stored locally in memory.
@@ -46,7 +51,7 @@ This tutorial is built on the [GetStartedWithData app][Developer Code Samples si
Notice that the saved text is displayed in the second column under **Query and update data**.
-## <a name="create-service"></a>Create mobile service
+## <a name="create-service"></a><h2><span class="short-header">Create mobile service</span>Create a new mobile service in the Management Portal</h2>
Next, you will create a new mobile service to replace the in-memory list for data storage. Follow these steps to create a new mobile service.
@@ -83,7 +88,7 @@ Next, you will create a new mobile service to replace the in-memory list for dat
You have now created a new mobile service that can be used by your mobile apps. Next, you will add a new table in which to store app data. This table will be used by the app in place of the in-memory collection.
-## <a name="add-table"></a>Add a new table
+## <a name="add-table"></a><h2><span class="short-header">Add a new table</span>Add a new table to the mobile service</h2>
To be able to store app data in the new mobile service, you must first create a new table in the associated SQL Database instance.
@@ -118,7 +123,7 @@ To be able to store app data in the new mobile service, you must first create a
You are now ready to use the new mobile service as data storage for the app.
-## <a name="update-app"></a>Update the app
+## <a name="update-app"></a><h2><span class="short-header">Update the app</span>Update the app to use the mobile service for data access</h2>
Now that your mobile service is ready, you can update the app to store items in Mobile Services instead of the local collection.
@@ -187,7 +192,7 @@ Now that your mobile service is ready, you can update the app to store items in
Now that the app has been updated to use Mobile Services for backend storage, it's time to test the app against Mobile Services.
-## <a name="test-app"></a>Test the app
+## <a name="test-app"></a><h2><span class="short-header">Test the app</span>Test the app against your new mobile service</h2>
1. In Visual Studio, press the F5 key to run the app.
@@ -238,7 +243,7 @@ This tutorial demonstrated the basics of enabling a Windows Store app to work wi
Once you have completed the data series, try one of these other tutorials:
* [Get started with authentication]
- <br/>Learn how to authenticate users of your app with Windows Account.
+ <br/>Learn how to authenticate users of your app.
* [Get started with push notifications]
<br/>Learn how to send a very basic push notification to your app.
View
5 DevCenter/Mobile/Tutorials/mobile-services-get-started-with-users-ios.md
@@ -8,7 +8,9 @@
<span>Tutorial</span>
</div>
-# Get started with authentication in Mobile Services
+# Get started with authentication in Mobile Services for iOS
+
+_The iOS client library for Mobile Services is currently under development on [GitHub]. We welcome feedback and contributions on this library._
This topic shows you how to authenticate users in Windows Azure Mobile Services from your app. In this tutorial, you add authentication to the quickstart project using an identity provider that is supported by Mobile Services. After being successfully authenticated and authorized by Mobile Services, the user ID value is displayed.
@@ -154,6 +156,7 @@ In the next tutorial, [Authorize users with scripts], you will take the user ID
[16]: ../Media/mobile-add-reference-live-dotnet.png
<!-- URLs. -->
+[GitHub]: http://go.microsoft.com/fwlink/p/?LinkId=268784
[Submit an app page]: http://go.microsoft.com/fwlink/p/?LinkID=266582
[My Applications]: http://go.microsoft.com/fwlink/p/?LinkId=262039
[Live SDK for Windows]: http://go.microsoft.com/fwlink/p/?LinkId=262253
View
3 DevCenter/Mobile/Tutorials/mobile-services-get-started.md
@@ -7,7 +7,8 @@
<span>Tutorial</span>
</div>
-# <a name="getting-started"> </a>Get started with Mobile Services
+# <a name="getting-started"> </a>Get started with Mobile Services for Windows Store
+
This tutorial shows you how to add a cloud-based backend service to a Windows Store app using Windows Azure Mobile Services. In this tutorial, you will create both a new mobile service and a simple _To do list_ app that stores app data in the new mobile service.
A screenshot from the completed app is below:

0 comments on commit 45f0784

Please sign in to comment.