Skip to content

Latest commit

 

History

History
237 lines (224 loc) · 14.2 KB

Lab.md

File metadata and controls

237 lines (224 loc) · 14.2 KB

Setting up your Development Environment in Office 365

In this lab, you will create a cloud development environment and build a cloud-hosted app.

Exercise 1: Obtain Office 365 and Azure subscriptions

In this exercise you obtain trial subscriptions to Office 365 and Azure. If you already have these subscriptions, you can skip this exercise.

  1. Sign up for an Office 365 developer subscription.
  2. Navigate to the Office Dev Center
  3. Under the heading Sign up for an Office 365 Developer Site click Try It Free.
  4. Fill out the form to obtain your trial O365 subscription.
  5. When completed, you will have a developer site in the [subscription].sharepoint.com domain located at the root of your subscription (e.g. https://mysubscription.sharepoint.com)
  6. Enable Yammer for Social Expereince
  7. Log into [subscription].sharepoint.com
  8. Click Admin/SharePoint.
  9. Click Settings.
  10. Change the Enterprise Social Collaboration setting to Yammer.
  11. Sign up for an Azure trial subscription
  12. Navigate to the Azure Portal
  13. If prompted, log in using the credentials you created for your O365 subscription.
  14. After logging in, you should see a screen notifying you that you do not have a subscription
  15. Click Sign Up for Windows Azure.
  16. Fill out the form to obtain your free trial.

Exercise 2: Create a Provider-Hosted App

In this exercise you create a new provider-hosted app for your O365 subscription.

  1. Create the new solution in Visual Studio 2013:
  2. Launch Visual Studio 2013 as administrator.
  3. In Visual Studio select File/New/Project.
  4. In the New Project dialog: 1. Select Templates/Visual C#/Office/SharePoint/Apps. 2. Click App for SharePoint 2013. 3. Name the new project AzureCloudApp and click OK.
  5. In the New App for SharePoint wizard: 1. Enter the address of a SharePoint site to use for testing the app (NOTE: The targeted site must be based on a Developer Site template) 2. Select Provider-Hosted as the hosting model. 3. Click Next.
    4. Select ASP.NET MVC Web Application. 5. Click Next.
    6. Select the option labeled Use Windows Azure Access Control Service (for SharePoint cloud apps). 7. Click Finish.
    8. When prompted, log in using your O365 administrator credentials.
  6. Test your app
  7. Press F5 to begin debugging.
  8. When prompted, log in using your O365 administrator credentials.
  9. When prompted, click Trust it.
  10. Verify that the app home page shows and that it properly welcomes you by name.

Exercise 3: Access a Database using MVC5

In this exercise, you will add additional functionality to the app to read data from a SQL Azure database.

  1. Create a Web Site and SQL Azure database
  2. Log into the Azure Portal as an administrator.
  3. Click Web Sites.
  4. Click New.
  5. Click Custom Create.
  6. Enter a URL for the application. (NOTE: URLs must be globally unique, so you will have to choose one not used by another.)
  7. Select Create New Web Hosting Plan.
  8. Select an appropriate Region.
  9. Select Create a free 20MB SQL Database.
  10. Name the database connection string AzureCloudData.
  11. Click the Right Arrow.
  12. In the Specify Database Settings, name the new database AzureCloudData. 1. Select New SQL database server. 2. Name the administrator AzureCloudAdmin and enter a password. 3. Write down the credentials for later! 4. Pick an appropriate Region. 5. Click the checkmark.
  13. Upload test data to SQL Azure:
  14. In the Azure portal, click SQL database.
  15. Click AzureCloudData and copy down your database server information.
  16. Click Run Transact SQL Queries Against Your Database.
  17. If prompted to add a firewall rule, click Yes.
  18. If prompted, select to manage the AzureCloudData database.
  19. Log in to the database server using the credentials you created earlier.
  20. Paste the contents of the following script into the query window. 
    CREATE TABLE [dbo].[Customers](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [FirstName] [nvarchar](100) NOT NULL,
 [LastName] [nvarchar](100) NOT NULL,
 [Company] [nvarchar](100) NULL,
 [WorkPhone] [nvarchar](100) NULL,
 [HomePhone] [nvarchar](100) NULL,
 [EmailAddress] [nvarchar](100) NULL,
 CONSTRAINT [PK_Customers] PRIMARY KEY CLUSTERED ([ID] ASC))

GO

INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Gordon', 'Hee', 'Adventure Works Cycles', '1(340)555-7748', '1(340)555-3737', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Michael', 'Allen', 'Blue Yonder Airlines', '1(203)555-0466', '1(203)555-0071', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('James', 'Alvord', 'City Power and Light', '1(518)555-6571', '1(518)555-8576', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Jeff', 'Phillips', 'Coho Vineyard', '1(270)555-1720', '1(270)555-7810', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Stefen', 'Hessee', 'Contoso, Ltd', '1(407)555-4851', '1(407)555-5411', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Christian', 'Hess', 'Fabrikam, Inc', '1(844)555-0550', '1(844)555-3522', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Cassie', 'Hicks', 'Fourth Coffee', '1(204)555-6648', '1(204)555-2831', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Chris', 'Preston', 'Litware, Inc', '1(407)555-7308', '1(407)555-1700', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Diane', 'Prescott', 'Lucerne Publishing', '1(323)555-3404', '1(323)555-7814', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Michael', 'Hillsdale', 'Margie Travel', '1(802)555-5583', '1(802)555-0246', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Ran', 'Yossi', 'Northwind Traders', '1(250)555-4824', '1(250)555-3653', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Arlene', 'Huff', 'Proseware, Inc', '1(248)555-1267', '1(248)555-0302', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Julia', 'Isla', 'School of Fine Art', '1(270)555-5347', '1(270)555-3401', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Rodrigo', 'Ready', 'Southridge Video', '1(808)555-1110', '1(808)555-4310', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('Shu', 'Ito', 'Trey Research', '1(844)555-5428', '1(844)555-2117', 'someone@example.com') 
INSERT INTO Customers (FirstName, LastName, Company, WorkPhone, HomePhone, EmailAddress) Values('David', 'Jaffe', 'Wingtip Toys', '1(340)555-4478', '1(340)555-1010', 'someone@example.com') 

GO
  21. Click Run.
  22. Update the Entity Framework package in Visual Studio.
  23. Right click the AzureCloudAppWeb project and select Manage NuGet Packages.
  24. Type Entity Framework in the search box.
  25. Click the Install button for Entity Framework version 6.
  26. After the package is installed, click Close.
  27. Add an Entity Framework model.
  28. In the Solution Explorer, right-click the Models folder in the AzureCloudAppWeb project.
  29. Select Add/New Item from the context menu.
  30. In the New Item dialog: 1. Select Visual C#/Data/ASP.NET Entity Data Model. 2. Name the new model AzureCloudDataModel.edmx. 3. Click Add.
  31. In the Entity Data Model wizard: 1. Click EF Designer from Database. 2. Click Next.
    3. Click New Connection. 4. In the Connection Properties dialog:
    1. Enter the database server information you obtained earlier into the Server Name field.
    2. Select Use SQL Authentication.
    3. Enter the Administrator credentials for your database server.
    4. Select AzureCloudData as the database.
    5. Click Test Connection.
    6. Click OK. 5. Select Yes, include the sensitive data in the connection string. 6. Click Next. 7. Check Tables.
      8. Click Finish.
  32. Add a controller.
  33. Build the AzureCloudAppWeb project.
  34. Right-click the Controllers folder and select Add/Controller. 1. Select MVC5 Controller with views using Entity Framework. 2. Click Add.
    3. Select Customer as the Model Class. 4. Select AzureCloudDataEntities as the Data Context Class. 5. Click Add.
  35. Update the App Manifest
  36. In the AzureCloudApp project, double-click the AppManifest.xml file.
  37. Update the Start Page to be AzureCloudAppAWeb/Customers.
  38. Test your app
  39. Press F5 to begin debugging.
  40. When prompted, log in using your O365 administrator credentials.
  41. When prompted, click Trust it.
  42. Verify that the customer data appears in the app.

Exercise 4: Deploy the App to Production

In this exercise, you will deploy the database and app to the O365/Azure environment.

  1. Register the app in Office 365
  2. Log into the O365 developer site as an administrator
  3. From the developer site, navigate to /_layouts/15/appregnew.aspx.
  4. Click Generate next to Client ID.
  5. Click Generate next to Client Secret.
  6. Enter Azure Cloud App as the Title.
  7. Enter the App Domain for the Azure web site you created earlier (e.g., azurecloudapp.azurewebsites.net)
  8. Enter the Redirect URI as the reference for the Customers page (e.g. https://azurecloudapp.azurewebsites.net/Customers).
  9. Click Create. 1. Save the Client ID and Client Secret separately for later use.
  10. Update the provider-hosted app
  11. In the AzureCloudApp project open the AppManifest.xml file in a text editor.
  12. Update the Client ID and App Start page to reflect the values you created earlier.
  13. Open the web.config file for the AzureCloudAppWeb project.
  14. Update the Client ID and Client Secret to use the generated values.
  15. Publish the remote web
  16. Right click the AzureCloudAppWeb project and select Publish.
  17. Click Windows Azure Web Sites.
  18. When prompted, select to deploy the remote web to the existing Azure web site you created earlier.
  19. Publish the remote web.
  20. Update information in the Azure Portal
  21. Return to the Azure Management portal.
  22. Click Web Sites.
  23. Select your Azure Web Site.
  24. Click Configure.
  25. In the App Settings section, add a ClientId and ClientSecret setting.
  26. Set the values to the values you generated earlier.
  27. Click Save.
  28. Package the SharePoint App
  29. Right click the AzureCloudApp project and select Publish.
  30. Click Package the App.
  31. Enter the Start URL and Client ID for the app.
  32. Click Finish.
  33. Publish the App to the Corporate Catalog
  34. Return to the O365 tenant and select Admin/SharePoint.
  35. Click Apps/App Catalog.
    3.Select Create new app catalog site.
  36. Click OK.
  37. Fill out the required information for the new app catalog site and click OK.
  38. Once created, navigate to the new app catalog site.
  39. In the app catalog site, click Apps for SharePoint.
  40. Click New.
  41. Browse to the app package you created earlier.
  42. Add the app package to the Apps for SharePoint library.
  43. Add the app to a SharePoint site
  44. Navigate to a site in your O365 tenancy.
  45. Click Site Contents. (NOTE: If you are using the Developer site, it may have an older version of the app still installed from testing. You must remove the app from the site AND remove the entry from the �Apps in Testing� list or the new app will not install.)
  46. Click Add an App.
  47. Click From Your Organization.
  48. Click the app installer.
  49. When prompted, click Trust It.
  50. Test the App
  51. Use the tile to launch the app.
  52. Verify that data from the SQL Azure database appears in the app.

Congratulations! You have completed building a provider-hosted app using Office 365 and Azure.