Share via

CloudTopia: Connecting o365, Apps, Azure and Cortana – Part 1

  • Article

This is going to be a multi-part series to dissect and tear apart an application I tweeted about using the #yammerofjuly hashtag. This is an application I developed a couple of months ago as a means of illustrating some of the different complexities and options when building applications that span several cloud services. Through the course of this series I’ll start out by looking at the application overall, and then start breaking down some of the different components of it and how everything is tied together in the hopes that you can use it to integrate some of these same service connection points within your own applications.

NOTE: You can find ALL of the source code for everything in this series on GitHub at https://github.com/OfficeDev/CloudTopia-Code-Sample. 

Here's some quick links to the whole series:

  1. Intro
  2. Open Graph
  3. Web API
  4. Azure Integration
  5. Office 365 Integration
  6. Cortana, Speech and Windows Phone Integration

We’ll start by looking at the business requirements for the application. In our scenario we are working with a company that manages public events for their customers. They have the basic collaboration needs – for each event they create brochures, flyers, calendars, budgets, schedules, etc. In addition to that they want to be able to have a discussion forum around the event so they can talk through different aspects of the event with the team. They also want to have some way to get a feel for the buzz about the event that’s happening out in the public. They’re just looking for some way to get a feel for how their marketing of the event is working.

Given those requirements, I built the application I call CloudTopia. It uses several services and technologies that will be described in subsequent posts:

  • Office 365

  • Yammer Open Graph

  • SharePoint Cloud App Model in a provider hosted app

  • JavaScript and jQuery

  • Web API 2.1

  • Azure web sites

  • SQL Azure

  • SQL Scheduler service

  • Twitter

So as you can see, a lot of things working together here to make our solution. To start things off, I created a demo video of the application – you can watch it here: https://onedrive.live.com/redir?resid=96D1F7C6A8655C41!18616&authkey=!AC4csVj2oAU6B7M&ithint=video%2cmp4. After you’ve watched the video come back here and let’s talk a little bit about what you saw and how it was built.

 

Design and Architecture

Here’s a screenshot of the home page of the CloudTopia application with callouts for the different technologies and services being used:

 

 

Here’s a brief summary of each component:

  • Office 365 – the whole application starts out in an Office 365 site. I just created a new site in o365 tenant and made it the home page for the application.

  • Cloud App Model – the SharePoint 2013 Cloud App Model (CAM) was the starting point that I used to create this application. It ultimately relied upon several other services and technologies, but it was all delivered through CAM. One of the main features of the application – the UI you see in the o365 site – is just the standard iFrame that you get with a provider hosted application. From where it says “Upcoming Social Events” on down is all part of the app.

  • Azure Web Sites – one of the great things about CAM and provider hosted apps is that you can host them pretty much anywhere. In my case I decided to use one of the free Azure web sites that I get with my Azure subscription to be the “host” in my provider hosted application. It also underscores an important theme with this application: it’s called “CloudTopia” because it is 100% running in the cloud; there are NO on premises components to this application.

  • SharePoint List Data – all of the events and some related metadata is stored in a hidden list in the o365 Events site. The list is created by a remote event receiver when the application is installed. The event receiver creates the list, makes it hidden, and removes the list from the quick navigation links on the left side of a standard team site page. For more information on this process of creating a list this way in the host web of an application see my previous post here: https://blogs.technet.com/b/speschka/archive/2014/05/07/create-a-list-in-the-host-web-when-your-sharepoint-app-is-installed-and-remove-it-from-the-recent-stuff-list.aspx.

  • More o365 sites and Yammer Open Graph Items – each time a new event is added, a new o365 site is created for the event and a Yammer Open Graph item is created that is used or discussions on the event. More details follow below where I describe what all happens when you create a new site. In terms of working with Yammer Open Graph from .NET, I have already covered that in previous posts on my blog. You can go to the Open Graph specific post at https://blogs.technet.com/b/speschka/archive/2014/05/29/using-yammer-open-graph-in-net.aspx; it’s also part of the bigger Yammer toolkit for .NET that I’ve been building over time that started with this post: https://blogs.technet.com/b/speschka/archive/2013/10/05/using-the-yammer-api-in-a-net-client-application.aspx.

  • SQL Azure – the application uses SQL Azure to store certain data that is necessary to query twitter and add discussion items to Yammer Open Graph objects. In a later part in this series I’ll explain why I chose to use SQL Azure instead of SharePoint list data to store this information. As an added bonus, I used a free SQL Azure data instance that comes with an MSDN subscription. I’ll also cover that a little later.

  • Azure Scheduler – as you saw in the demo video, one of the things the application does is go find tweets that match the hashtags for our event and then add those tweets to the Open Graph discussion for the event. That work happens once a day and is triggered using a job in the Azure Scheduler service. Due to the low volume of these requests it falls within the number of free jobs that can be scheduled with Azure.

  • Web API 2.1 – a key component to the entire CloudTopia application is the use of Web API. It’s primary use case is that it does all of the hard work for all of the features of the application – creating o365 sites, creating Yammer Open Graph items, searching Twitter, etc. One of the big reasons why it’s so valuable for SharePoint Apps is that it allows me to control the UI entirely client side, but still use all the power of CSOM and any other .NET API. You saw a lot of activity in the demo video and all of that was done through JavaScript and jQuery calling the custom REST endpoint that was created for the CloudTopia application. In addition to that, it allowed me to create a REST endpoint just for the Azure Scheduler job. A job can call an HTTP or HTTPS endpoint to do something, but there needs to be a listener that can “do something” when invoked. Adding an endpoint in my REST controller provides the interface for just that kind of automated integration with other applications.

 

What Happens When You Create a New Event

There are quite a few things that get triggered when you go through the seemingly simple process of creating a new event. Let’s take a look at what happens.

  1. A new o365 site is created for the event.

  2. The out of the box Site Feed web part is removed from the new o365 site.

  3. A new Open Graph (OG) item is created in Yammer.

  4. The Url link for the OG item is set to be the Url of the new o365 site

  5. This also means you can go into Yammer and just search for your o365 site Url and you’ll find the Open Graph object. Pretty cool.

  6. A welcome post is added to the Open Graph discussion.

  7. A script editor web part is added to the new o365 site; it uses Yammer Embed to display the feed for the Open Graph item.

  8. A new item is added to the hidden SharePoint list in the host site where the App part is installed; that’s how it shows up in the event list in the host site.

  9. A new item is added to SQL Azure with the Open Graph ID along with the new Site Url and Twitter tags.

That’s a lot of stuff! That’s also good for the intro of this series. In Part 2 of this series I’ll talk about some of the work I did around Yammer Open Graph objects in CloudTopia.

CloudTopia Part 1.docx

Comments

  • Anonymous
    January 01, 2003
    The comment has been removed
  • Anonymous
    August 11, 2014
    In Part 1 of this series, I introduced you to the CloudTopia app. In Part 2 we’re going to look
  • Anonymous
    August 11, 2014
    In Part 2 of this series we looked at some of the details of working with Yammer Open Graph items in
  • Anonymous
    August 11, 2014
    In Part 3 of this series we looked at the plumbing required to add support for Web API 2.x to your SharePoint
  • Anonymous
    August 11, 2014
    In Part 4 of this series we looked at the integration with various Azure services in the CloudTopia app
  • Anonymous
    August 11, 2014
    In Part 5 of this series we looked at all of the different ways in which CloudTopia is integrated with
  • Anonymous
    August 15, 2014
    I was on summer vacation so I am going to skip weeks 31 and 32. Here are my nuggets of this week:
  • Anonymous
    December 16, 2014
    The comment has been removed
  • Anonymous
    December 16, 2014
    The comment has been removed
  • Anonymous
    January 10, 2015
    Preface

    Bienvenue dans le troisième et dernier chapitre de cet article dédié
  • Anonymous
    January 10, 2015
    Preface

    Welcome to the third and last chapter of this section dedicated to the integration of the