Office as Platform: how was a Notegram project for OneNote created?

This is the first-person Notegram project success story - Dmitry Konev, a project developer who created an interesting project that extends the capabilities of the Office OneNote application. All articles in the column “Office as Platform” you can always find at the link #officeplatform - Vladimir Yunev.

Hackathon LA Hacks was held from April 3 to 5, at the Pauley Pavilion Stadium at the University of Los Angeles. With a huge bunch of participants and partners, it was an amazing sight, especially for a person who has never been to the hackathon.





It so happened that I was not very interested in the projects of other participants, and I was left without a team. Having passed the most important part of any hackathon - having collected all the good from companies - somewhere around 3 o'clock in the morning I ended up at the Microsoft stand, to my surprise, with still living engineers. After talking with them (and armed with vouchers for Microsoft Azure), I got the idea to do something with the Microsoft API.

Project

Microsoft has its own repository of notes - OneNote. A very convenient application, especially for a student, because there you can save not only text and pictures, but also export PDF files, mathematical formulas and record sound, and if you have a tablet like Microsoft Surface, then use handwriting input.



In OneNote, I lacked templates. There are add-ons for the desktop version of OneNote, but given the fact that I most often used OneNote on a tablet, I wanted to get rid of platform binding. So the idea for Notegram appeared.

')

Before that, I wasn’t doing back-end development at all, so I went in reverse order.

Design

I started with the logo. The letter N on the OneNote logo has been replaced with the share icon.



Then the layout of the application itself was made. The design was based on the OneNote application for Windows 8.1.





The interface was created 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> 

Each element was made quite simple, so that almost nothing had to change for the mobile version - just needed to add this code here:

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

Work with API

Since I was given many vouchers for Microsoft Azure, it was decided to place the project there. It turned out to be very simple to create an application based on Node.js - you can simply use the Git repository. Microsoft even has an example of the OneNote API application on Node.js, which can save pages to OneNote - just what I wanted to use.



github.com/OneNoteDev/OneNoteAPISampleNodejs



To begin with, it was necessary to get the Client ID from the Live app management portal and register it in the config.js file. The application will work only from the URL that is registered in the portal, so it is recommended to register the application domain in the hosts file for testing.



The example provided by Microsoft already contained the most important code for authorizing the user and sending examples - namely, there is a function that sends the text of the note; several things needed to be done to use it:



On the page of the logged in user there were buttons for templates:

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

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

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

Then, the query itself was created in the file lib / create-examples.js:

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

The text of the file and the user's access token were passed to the sendPage function. The function creates a request for the API:

 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 special knowledge in work with REST API and Node.js, I already had almost ready application. The last remained ...

Templates

OneNote API has limited HTML support for creating pages: https://dev.onenote.com/docs#/introduction/meta-tag-details



I went a little different way: You can also get pages in the OneNote API, so I could just create all the templates in OneNote.



Initially, I had 8 templates. 4 for organizing time: calendar, weekly, diary, task list in the style of GTD.



4 to demonstrate the possibilities of Notegram: two templates for LA Hacks, a trip planner, a template for keeping a diary.



After the hackathon I was asked to add a new template for accounting, so at the moment I already have 9 templates.





After creating the templates, I used the Apigee service to get the HTML code. After authorization in OneNote API, a request was sent to the page like https://www.onenote.com/api/v1.0/pages/[pageId_/content .

Conclusion

After a sleepless night of work on the project, I got a working application that won first place from Microsoft. It was an amazing experience, and I am very grateful to the Microsoft employees who helped participants with their projects and am very pleased that they were interested in my project.



In connection with my studies, I did not have enough time to work on the project, but I have many ideas for Notegram:

• Custom templates
• Russian localization
• Application for Windows 10

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

To authors

Friends, if you are interested in supporting the column with your own material, please write to me at vyunev@microsoft.com to discuss all the details. We are looking for authors who can be interesting to tell about the development under Office and other topics.

about the author

Dmitry Konev

Student studying at De Anza College in California



I am from Moscow. Not so long ago, he moved to Silicon Valley, to comprehend the world of developers and technologies. I was a user of Microsoft services for a long time, but only recently I found myself in the role of a developer. Recently, I'm interested in web development, before that I mainly worked with C ++.