Office as a platform: how the project Notegram for OneNote is developing

Here is a continuation of the success story of the Notegram project from the first person — Dmitry Konev, a project developer who created an interesting project that extends the capabilities of the Office OneNote application. In the continuation of its history, Dmitry talks about the development of the project and the use of new techniques when developing for Office 365. All articles in the column “Office as Platform” you can always find at the link #officeplatform - Vladimir Yunev.

I recently released a second update for my project, Notegram. Notegram is a web application for Microsoft OneNote that allows you to quickly share templates, without any additions.


The most important detail in this update is the new calendar template, which now allows you to select the year and month. I also improved the design a bit, and at the time of writing this article I added two more new templates:


In addition, I also made a lot of internal changes, about which I want to tell in this article.

Templates

Notegram was born on the hackathon, the first version was written in the hours of the night not yet discovered by science, and at that time I didn’t understand Node.js at all, so before creating any new functions, I had to make changes to my code.
')
The original version of Notegram was written based on an open example of using OneNote API , without using any templates, and together with Express I used the Jade engine, which seemed to me rather inconvenient. I wanted my templates to be in HTML, so the Mozilla Nunjucks engine was chosen.

To go, you first had to add the express-nunjucks npm package with the engine to the list of dependencies in the package.json file and execute the npm install command.

The following code has been added to my app's app.js file:

var express = require('express'); var nunjucks = require('express-nunjucks'); //  app.set('views', path.join(__dirname, 'views')); //    'views' app.set('view engine', 'html'); //    Express nunjucks.setup({ autoescape: true, watch: true }, app); // Nunjucks 

Also, the following code was added to the routes / index.js file:

 var router = require('express').Router(); var templates = require('../lib/notegram-templates'); router.get('/', function (req, res) { var authUrl = liveConnect.getAuthUrl(); res.render('templates', {templates: templates}); }); 

Then a template was created using the previous code snippet, based on an array in the lib / notegram-templates .js file, creating HTML for each element:

 {% extends "base.html" %} {% for item in templates %} <div class="item"><img src="img/{{item.id}}.png"/> <h1>{{item.name}}</h1> <p>{{item.description}}</p> <div class="controls"> <button type="submit" name="submit" value="{{item.id}}">Save</button> </div> </div> {% endfor %} 

This template is very similar to plain HTML from the previous article , but thanks to Nunjucks, new elements are created automatically.

「Unlimited Calendar Works」

The biggest innovation in this update is the new calendar template: if before I had to manually update this template, now the template not only always shows the current month, but also has the ability to select any other year.

The template code is based on the Date object in JavaScript, through which I could get information about the month I needed. There are some oddities - for example, months are counted from zero, which seemed to me very strange, but one feature of this object turned out to be quite useful: if you create, for example, an object with a negative month:

new date (2016, -1);

You can get information for the previous month:

Tue Dec 01 2015 00:00:00 GMT-0800 (PST)

I started working on the interactive template before making changes to the Notegram. The trial version was written on my tablet in JSfiddle - since Notegram is based on Node.js, I could just use this code with almost no changes.

You can see one of the working versions here: https://jsfiddle.net/ksrdtL8e/

The first day of the week was an interesting question: most of my users live in the US, and prefer to start the week from Sunday, so I added an option for that.

Design

The main thing in this update was the internal Notegram code, but it was not done without updates for the appearance.


Notegram has already used a 'flat' design, but I still made small changes. The basis was taken from the news app from Windows 10 - I enlarged the pictures in each card of the template, and slightly changed the colors. Also, I added a panel with a brief description of my project for new users.

Using the service https://realfavicongenerator.net/ , I added beautiful icons for all platforms. Particularly pleased with the Chrome browser on Android, where Notegram behaves like a full-fledged application:

Learn more about creating pages with OneNote API.

Also, I would like to tell you more about the OneNote API.

To create pages, the OneNote API uses a limited portion of HTML, a list of which can be found here .

The only <meta> tag supported by the OneNote API is the date the note was created. You can either specify the full date in ISO 8601 format:

 <meta name="created" content="2016-01-25T06:30:00-08:00"/> 

Or just specify the time zone:

 <meta name="created" content="-08:00" /> 

Basically, I use tables for my templates - they behave the same as in HTML.

The <img> tag behaves in much the same way as in HTML, but the OneNote API has one interesting function — by specifying the data-render-src attribute instead of src, you can save a page screenshot in OneNote:

 <img data-render-src="http://www.onenote.com" width="500"/> 

Also, for any element you can specify different marks using the data-tag attribute:

 <span data-tag="to-do">Explore OneNote API</span> 

A complete list of marks can be found here .

Unfortunately, at the moment there is no support for handwriting and mathematical formulas in the API - but I hope that these functions will be added soon.

Conclusion

I am very pleased that many people liked my project, and I’m going to continue to develop further - if you have any suggestions, leave them in the comments, or email me on Twitter .

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 ++.