Office as a Platform: Creating Notegram for OneNote

This is the translated version of an article I wrote for Microsoft Russia, the original version of which can be found here.

Notegram is a companion webapp I made for Microsoft OneNote at the LA Hacks hackathon.

LA Hacks took place from on the weekend of April 3rd in the Pauley Pavilion stadium at UCLA. With so many participants and partners, it was quite a sight, especially for somebody who has never attended a hackathon before.

I happened to not get interested in any other projects, and so I was left without a team. After going through the most important part of every hackathon — collecting the swag — at around 3 am I found myself at the Microsoft booth, to my surprise, still populated with living engineers. After speaking with them (and arming myself with Microsoft Azure vouchers), I got an idea to make something with Microsoft APIs

The Project

Microsoft has this note-taking application, OneNote, which is quite useful, especially for a student, since you can save not just text and images to it, but also export PDFs, use math formulas, record sound, and if you have a tablet, use handwriting.

I was missing templates in OneNote. There are extensions for the Windows Desktop version of OneNote, but since I mostly used OneNote on my tablet, I didn’t want to be locked to a single platform. That’s now the idea for Notegram was born.

I haven’t done backend development at all before this, so I went about things in a backwards order.

Design

I started with the logo. The letter “N” in the OneNote logo was replaced with a share icon.

After this, I made a mockup for the app itself. As a basis I used OneNote for Windows 8.1.

The user interface was made from scratch, without using widgets like Bootstrap.

<div class=”item”>
  <img src=”img/month.png”>
  <h1>Monthly Calendar</h1>
  <p>An essential for those who keep track of everything.</p>
  <button>Save</button>
</div>

Every element was kept simple, so almost nothing had to be changed to adapt the site for mobile — I just had to add this code:

<meta name=”viewport” content=”width=device-width, initial-scale=1">

Working with the API

Since I got a lot of Azure vouchers, I decide to host the project there. It turned out to be very easy to create a Node.js app — I could just push a Git repository. Microsoft even has a sample Node.js app that uses the OneNote API to save pages — exactly what I wanted to do.

OneNoteDev/OneNoteAPISampleNodejs

First, I had to get a Client ID from the Live app management portal, and put it in the config.js file. The app would only work from the URL you specified in the portal, so it’s recommended that you put that name in your hosts file for testing locally.

The sample that Microsoft provided already had the important code for authorizing the user and sending pages, to use it, I had to do a few things:

On the page a signed in user would see, I put the buttons for saving templates:

<button type=”submit” name=”submit” value=”month” disabled=”disabled”>Save</button>

The file routes/index.js already had a switch-statement for handling requests, so I had to add my templates to it:

case ‘month’:
  createExamples.createPageMonth(accessToken, createResultCallback);
break;

Next, in lib/create-examples.js, the actual request is created:

this.createPageMonth = function (accessToken, callback)
{
  var htmlPayload = fs.readFileSync(path.normalize(__dirname + ‘/../templates/month.html’), ‘utf-8’);
  createPage(accessToken, htmlPayload, callback, false);
};

Function createPage takes the note text and the user’s access token, then creates the API call:

function createPage(accessToken, payload, callback, multipart) 
{
  var options = {
    url: https://www.onenote.com/api/v1.0/pages,
    headers: {‘Authorization’: ‘Bearer ‘ + accessToken}
  };
  options.headers[‘Content-Type’] = ‘text/html’;
  options.body = payload;
  var r = request.post(options, callback);
}

So, without having a lot of knowledge of REST APIs and Node.js, I already had an almost complete application. One last thing remained…

Templates

OneNote API supports a limited subset of HTML for creating pages: https://dev.onenote.com/docs#/introduction/meta-tag-details

I decided to follow a slightly different path: since OneNote API can also retrieve pages, I could just make my templates in OneNote.

I initially had 8 templates. 4 for time management: calendar, week and day planners, and a GTD-style todo list.

And 4 for showing off what Notegram could do: two LA Hacks-specific templates, a trip planner, and a diary template.

After the hackathon, I was asked to add an accounting template, so I now have 9 templates in total.

After creating the templates, I used Apigee to retrieve the HTML. After authorizing with OneNote API, I sent a page request in the https://www.onenote.com/api/v1.0/pages/[pageId]/content format.

Conclusion

THANK YOU @MICROSOFT @SURFACE @LAHACKS!!! I may not look like it, but i am extremely happy - I just…

After a sleepless night of work, I made a working app, that earned the first prize from Microsoft. It was an amazing experience, and I am very grateful to Microsoft employees that assisted the participants with their projects, and am very happy that they were interested in my project.

I haven’t been able to work on the project until now, but I have a lot of ideas for Notegram, like

• User templates
• Russian localization
• Windows 10 app

Notegram is available right now at http://notegram.me