Hey guys, welcome to #6 on SharePoint 2013 App. It’s about 3:30 am Let’s get hands on guys, I’m running out of RedBull… If you haven’t read the other posts on my SharePoint 2013 Apps series, read these first.
A provider-hosted app is a kind of cloud-hosted app which is executable in SharePoint. In contrast to auto-hosted apps are you as an app developer responsible for hosting the app, multitenancy support, availability and all the plumbing that you may know from hosting web services.
SPacebook, the example app
Let’s try to write a front to end example. We’d like to build the great new social platform SPacebook. SPacebook needs to run on Windows Azure because we’d like to do complex calculations in order to present the best matching adds for every single user of our great website. In order to work on the team, let’s fire up Team Foundation Services Preview and create a new Team Project.
Creating a TFSPreview team project
If you haven’t used Team Foundation Services Preview (TFSPreview), just have a look at https://tfspreview.com/ it’s self explaining, cloud hosted, and easy to use. Ok, when you’ve created your account and logged into TFSPreview. you can create a new team project by clicking the corresponding link in the web UI (metro UI, of course)
Figure 1: Create a new team project
Creating a new team project is easy, you just have to provide a proper name and description for your team project. In order to do the project well and use processes which are familiar for your developers, you can choose from three different process templates. In this example we don’t care about them, so let’s use the preselected scrum template and start project creation by clicking create project.
Figure 2: Creating the new team project
Using the team project in VS 2012
Next, we have to create the development project w/ our Visual Studio 2012. So startup VS2012 and on the hit connect to tfs button on the start page.
Figure 3: Connect to TFS
There are numerous articles describing how to add a connection to TFSPreview using VS2012, so I’ll explain the rest in a single picture. In the Connect to Team Foundation Server dialog click Servers. Within the Add/Remove Team Foundation Server dialog choose Add, provide the URL to your TFSPreview account, if you’ve no typos, the dialog should identify automatically the HTTPS binding and disable all controls as shown in figure 4. (If you’re already connected to your TFSPreview just select it from the list of available Team Foundation Server)
Figure 4: Connecting to TFSPreview
After authentication is done, you can select your team project from the given team project collection and open it. In TFS, a team project is more than just source control, it’s containing all the artifacts that are required for the entire ALM process.
Creating the Solution / the Projects
Let’s go on w/ creating the solution in order to get started w/ our app. Back on the start page click the create project link, select App for SharePoint 2013 from the list of templates (have a look at this article if you can’t find the templates).
Figure 5: Creating the SharePoint app project
When creating a new SharePoint app using VS2012, you’ll be asked to specify your app, by using the following modal dialog. Here you may tie to an local SharePoint 2013 which is properly configured for supporting apps, or you can tie to an Office 365 developer site. That’s what I usually do, because I don’t want to run SharePoint on my system, I’m developing apps and not any kind of fully trusted solution. (At least for now :D). The last property on the dialog is the most important one for now. By using the dropdown, you’re defining the type of your app. Currently VS2012 is using different project templates or is creating different items depending on your choice of hosting. It’s important that you’ve selected provider-hosted for now!
Figure 6: Setting SharePoint app properties and choose from hosting opportunities
When clicking Finish, Visual Studio is going to validate your settings and creating the required projects for your app. When you’ve checked the Add to source control checkbox on the Create New Project wizzard page, the VS2012 will ask you for the location of the team project and where to store the new source, here you should provide a good folder structure to be able to do branching alter in your development lifecycle.
Figure 7: Add project to source control
That’s it. We’re done. Almost. But the new developer tools are providing a lot of stuff which will safe time during the development process. When you fire up the solution explorer you’ll find two projects, SPacebook.SharePoint (this is our app) and SPacebook.SharePointWeb (which is our web project for building our great social platform)
Figure 8: Automatically created project within a provider-hosted SharePoint app
No matter if you’re familiar w/ OAuth2.0 or not, you should definitively have a look at the TokenHelper.cs file, it contains a bunch of code that is based onto of the Windows Identity Foundation and the SharePoint CSOM for .NET to handle the SAML token used for OAuth 2.0 AuthN and to handle the AuthZ token for communications back to SharePoint using the CSOM. Just hitting F5 at this point is awesome :D
After authenticating your app will be deployed to SharePoint OnPrem or OnDemand and the web project will be stared locally. The remote url within the SharePoint app will now point to your local development environment and VS2012 will start your browser and navigate to the given SharePoint 2013 url. Before you can start your app from SharePoint you have to trust it! (Figure9)
Figure 9: Trusting SPacebook!
When you’ve trusted SPacebook – what you definitively should do! :) Because everybody is using SPacebook – you can launch the app from the Site contents page.
Figure 10: Launch your app
Okay the predefined web application as a poor UI (as you can see in figure 11) but hey, it works! AWESOME!!
Figure 11: The provider-hosted app
Let’s have a look at the Default.aspx.cs, what’s happening there? After extracting the validating the app secret (ensures that only calls from our SharePoint apps are proceeded) and extracting the auth token for talking to SharePoint, an instance of the wrapped ClientContext is created and the title of the web is extracted and written to the HttpResponse of the current page.
Figure 12: The default implementation
With the given auth token you may utilize the CSOM to pullout data from the targeting SharePoint site, or - depending on the granted permissions you may write data back to SharePoint.
As you can see it’s really easy to create all the key artifacts that are required to build an provider-hosted app. When you think about deployment, development and organizing all the code for your app and your service, there is enough stuff that needs to be discussed within the upcoming posts.
Happy SharePoint’ing