Exploring the Microsoft Graph

Advertisements

While researching ideas and how-tos for the Hack Productivity hackathon, I have continuously asked the question, how can I unlock the productivity power of Office 365? For example, how would it be possible to implement my productivity processes into Office 365 which is such a large system with so many elements? There is only one answer, the Microsoft Graph. I have already gone over the opportunities for development with Office 365 in this post. Now let’s get started exploring the Microsoft Graph. However, we should review how it was before the creation of the MS Graph.

The Past Was Not So Great

Before the creation of the Microsoft Graph, every service had a separate endpoint to interact with the data. Office 365 is a vast platform, and there was an endpoint for SharePoint, Exchange, OneDrive, OneNote, etc. Essentially, a developer would need to build a wrapper for each API that connected each service. It was a headache. To compound the nonsense personal and business accounts authenticated against different endpoints. Clearly, a unified Graph endpoint was necessary. This leads me to the present.

The Present is Far Greater (and Improving)

Nowadays, we have a single API to call for each service including, authentication for personal and business accounts. As with any API, the Graph is versioned and allows for testing against the beta version. Let’s look at the service, as of 10/16/2017, what services are available in production and beta.

Services by Version

The documentation provides all the details you need. But here is a list for reference. Note that the beta services list is additive and includes everything in the production list.

Production Services

  • Users
  • Groups
  • Azure Active Directory
  • Excel
  • OneDrive
  • OneNote
  • Outlook (calendar and email)
  • People
  • Personal contacts
  • Planner
  • SharePoint
  • Webhooks

Beta Services

  • Intune
  • Teams
  • Organizational contacts
  • Outlook tasks
  • People and social
  • Project Rome
  • Reports

Where Do CAN We Go From Here

As the graph keeps improving, possibilities become more realizable. I have been working with the Graph since it was announced and have been waiting on SharePoint Lists. For example, I do everything in Office 365, including blogging. However, I wanted to create a blogging application that exposed specific blog posts from the legacy SharePoint lists blog. Trying to do this before the Microsoft Graph was possible but too much unnecessary work. Although, doing this now would be pointless because Delve is the new SharePoint blogging platform. That is just one example. It is clear the potential that the Microsoft Graph enables.

Exploring the Microsoft Graph

Microsoft has done a great job providing documentation and samples for exploring the Microsoft Graph. Check out the Graph Explorer to get a hands-on feel. It’s like using Fiddler, but with the all the calls preconfigured. Another great resource is the growing list of samples on GitHub. Already an ASP.NET developer? Check out the ASP.NET Samples.

Conclusion

This concludes exploring the Microsoft Graph. Albeit, the exploration is very high-level, but it is enough to get an understanding of what services the Graph provides. This was intended to be a high-level introduction the Microsoft Graph and expect to dive deeper into solving actual problems using the Graph and ASP.NET Core in future posts. Happy coding!

Advertisements

Creating a Facebook Page Newsletter Signup Form

Advertisements

Recently, I started subscribing my blog visitors to a newsletter. Also, signup below and thank you. Anyway, I started using MailChimp which is a good service and offers a Facebook Page app for free. Alas, I went ahead and integrated MailChimp into my Facebook Page. However, I found that there was limited customization to the form. For example, I couldn’t reorder or disable the fields. This left the form appearing very odd like asking for a date of birth. Don’t get me wrong, in some cases, that can be necessary but not mine. I wanted just a simple form with First Name, Last Name and Email. As a result, I scoured the interwebs and came across this post which was exactly what I was looking for creating a newsletter signup for a Facebook page. Unfortunately, and as with many blog tutorials, they only take you so far and the rest you need to figure out on your own. That is like all of life overall, really. Anyhow, after reading through the post I found a few items I needed.

  1. I wanted to store my code publicly in GitHub and I don’t want to store my super-secret MailChimp API keys in code. This is just bad practice and never do it.
  2. After a form completes successfully, it should clear the fields. That’s just good user experience and always do it.
  3. I wanted to host this on Microsoft Azure because they have a free websites tier which includes SSL for the azurewebsite.net domain. Which is perfect for a simple Facebook App.

All right that about sums it up, let’s start creating a newsletter signup for a Facebook page using MailChimp, PHP and jQuery.

What ls Needed

  1. A Facebook Page
  2. A MailChimp Account
  3. A Microsoft Azure Account

Don’t have these? I recommend going to Facebook, MailChimp and Azure to create an account. I will not bore anyone with those details.

Software I am Using

  • Visual Studio Code
  • FileZilla
  • Firefox Developer Edition

Overview of Steps

  1. Gather MailChimp API Key and List Id
  2. Create Azure Website
    1. Add Api Key and List Id to Azure Website Application Settings
  3. Create Facebook App
    1. Add Facebook App to Facebook Page
  4. Clone this GitHub Repository
  5. Create validator.js File
  6. Customize index.php File
  7. Customize subscribe.php File
  8. Add web.config File
  9. Deploy to Azure
  10. Test on Facebook Page

Gather MailChimp API Key and List Id

Getting an Api Key

Navigate to your account

mailchimp account link

Select API Keys under Extras

mailchimp api keys link

Select create key

mailchimp creat api key button

Copy the provided API Key and store it somewhere safe.

Getting your List Id

Navigate to your lists

mailchimp account lists link

Select your list

mailchimp list link

Choose List Name and Defaults from the settings drop down

mailchimp lists name and defaults link

In the top right column is your List ID section

mailchimp list id

Grab that and store it in a safe place, preferably, the same place as the API Key

Create an Azure Web App in the free tier

Select the large plus sign at the top left

azure new resource link

Search Web App

azure resource search ui

Enter the required information.

Two things:

  1. Turn on app insights it is an amazing resource for debugging, views and availability.
  2. Make sure to create an App Service Plan in the free tier.

azure create app service form

Add Api Key and List Id to Website Settings

Select resource groups from the top left of the navigation bar

azure resource group navigation button

Select your new resource group

azure resource group link

Select Application Settings

azure web app application settings link

Scroll down to the App settings section and enter the following

azure app settings form

Delete the Additional Default Documents

Keep the index.php but remove the rest.

azure web app default document list

Save your changes

azure app settings save button

Create Facebook App

This is straight forward. Head over to developers.facebook.com, setup your account and select add a new app.

facebook add a new app drop down

Add your display name and email.

facebook create a new app id form

Here it will land on the select product page, don’t bother with this. Just go to Settings.

facebook app settingsd navigation button

Select + Add Platform and choose Page Tab

facebook add platform ui

On the App and Page Tab section enter your app domain, Secure Page Tab URL and Page Tab Name

facebook page tab and app id settings

Save Your Changes.

Adding the App to your Page

Simply, sign in, edit the below URL with the app id and secure page tab URL, navigate to it via web browser and select the desired page.

http://www.facebook.com/dialog/pagetab?app_id=FB_APP_ID&next=FBAPP_SECURE_URL

Clone GitHub Repository

Navigate to your repos folder

command prompt to navigate to development folder

command prompt to clone git repo

Create the validator.js File

Below is the validator.js file. Just move the original code into this file and reference in the index.php file.

validator.js file snapshot

There is really no change compared to the original post. Furthermore, there was a comment on the post to clear the form upon successful submission. The writer said to just use the submit handler with some added code to the post function. However, this would clear the form each time and the end user would need to re-enter their information. Not a good user experience. I moved the functionality to the subscribe.php document on a failed submission as noted below.

Customize index.php

At this point, anyone can go and download my GitHub repo, deploy it to Azure and have an app up and running but I want to discuss the changes I made to index.php. Below is the code:

index.php file snapshot

First, I moved the jQuery script into an external file source appropriately named validator.js. Having JS in your HTML is untidy. Second, I moved the references to JavaScript files below the content in the body. This gives a perceived faster page load time.

Customize the subscribe.php File

I improved the subscribe file with 2 changes.

Code for the first section.

subscribe.php file snapshot 1

The added section removes the Api Key and List Id hard coded variables. In addition, I search the folder for a debug.ini file to read debug settings if developing locally which I provide a detailed walkthrough here on a Windows machine. If the file is missing, I then do a switch case on the key/value pairs of server variables which includes the application settings we manually set in the Add Api Key and List Id to Website Settings section. This enables scalability and simple change configuration management.

Code for the second section.

subscribe.php file snapshot 2

In the second change, I echo out a script to clear out the form on success. If the MailChimp Api fails, I only output a dummy message. Before, it was reading out a verbose message which I do not want end users reading or even thinking about.

Add Custom Web.config File

The final file that I added is optional and only needed for hosting on Azure or IIS. The infamous web.config file. Below is the code.

web.config file snapshot

I created rules to force SSL redirect and rewrite all requests to index.php. This is because Facebook forces all apps to use SSL and Azure web apps provides a free SSL with the azurewebsites.net domain. In addition, I don’t want people hijacking requests using different default documents which is why I removed them in the Create Azure Web App step. I personally don’t think forcing SSL is a terrible thing. Every website should do it.

Deploy to Azure

In the web app on Azure, navigate to your web app

azure web app link

Select get publish profile and save it in a safe place

azure web app get resource publish profile button

The publish settings file is just xml with a different file extension. In the publish settings file, search for FTP and grab the Host, Username and Password and enter them in your favorite FTP client.

filezilla ftp client site manager

Copy your files over to the wwwroot folder in Azure and voila! App deployed.

Conclusion

Navigate to the Facebook page and there it is.

newsletter signup form on facebook page

Now, go forth and style the form as desired. In fact, I plan to add the MailChimp icon so that end users are more comfortable providing their first name, last name and email.

For the record, I am aware that I could’ve just deployed the original post’s GitHub repo with my super-secret keys in the code and it would work just fine. But I am a stickler for best practice and simplicity. Knowingly, it seems simpler to just put the repo out there but if I take extra care to deploy and configure the app properly, in the long-run, it is simpler. Trust me. Lastly, my GitHub repository is here. Please feel free to reach out if you have any questions. Happy dev’ing.