Офіс як Платформа: як розвивається проект Notegram для OneNote

Перед вами продовження історії успіху проекту Notegram від першої особи — Дмитра Конєва — розробника проекту, який створив цікавий проект, що розширює можливості програми Office OneNote. У продовження своєї історії Дмитро розповідає про розвиток проекту і застосування нових технологій при розробці для Office 365. Всі статті колонки «Офіс як Платформа» ви завжди можете знайти за посиланням #officeplatform — Володимир Юнев.
Нещодавно я випустила друге оновлення для мого проекту, Notegram. Notegram – це веб-додаток для Microsoft OneNote, що дозволяє швидко ділитися шаблонами, без будь-яких доповнень.


Найголовніша деталь у цьому оновленні – новий шаблон календаря, тепер дозволяє вибрати рік і місяць. Так само я трохи поліпшив дизайн, і під час написання цієї статті додав ще два нових шаблону:


Крім цього, я так само вніс багато внутрішніх змін, про які я хочу розповісти в цій статті.

Шаблонизация
Notegram зародився на хакатоне, перша версія була написана ще не відкриті наукою години ночі, і я на той момент абсолютно не розбирався в Node.js щодо цього, до створення яких-небудь нових функцій, мені потрібно було внести зміни в моєму коді.

Оригінальна версія Notegram була написана на основі відкритого приклад використання OneNote API, без використання будь-яких шаблонів, і разом з Express використовувала движок Jade, який мені здався досить незручним. Мені хотілося, щоб мої шаблони були в HTML, так що був обраний движок Nunjucks від Mozilla.

Для переходу потрібно було спочатку додати npm пакет express-nunjucks з движком в список залежностей у файлі package.json і виконати команду npm install.

Наступний код був доданий до файлу app.js мого додатка:

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

Так само, у файлі routes/index.js був доданий код:

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});
});

Потім був створений шаблон, з допомогою попереднього фрагмента коду, на основі масиву у файлі lib/notegram-templates.js, створює HTML для кожного елемента:

{% 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 %}

Цей шаблон дуже схожий на звичайний HTML минулого статті, але завдяки Nunjucks, нові елементи створюються автоматично.

«Unlimited Calendar Works»

Найбільшим нововведенням цього оновлення є новий шаблон календаря: якщо раніше мені потрібно було вручну оновлювати цей шаблон, то тепер шаблон не тільки завжди показує поточний місяць, але і має можливість вибрати будь-який інший рік.

Код шаблону заснований на об'єкті Date в JavaScript, за допомогою якого я міг отримувати інформацію про потрібному мені місяця. Є деякі дивні речі – наприклад, місяця починається з нуля, що мені здалося дуже дивним, але досить корисною виявилася одна особливість цього об'єкта: якщо, наприклад, створити об'єкт з негативним місяцем:

new Date( 2016, -1 );

То можна отримати інформацію для попереднього місяця:

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

Я почав роботу над інтерактивним шаблоном ще до внесення змін у Notegram. Пробна версія була написана на моєму планшеті в JSfiddle – так як Notegram заснований на Node.js я міг просто використовувати цей код майже без змін.

Одну з робочих версій ви можете подивитися тут: https://jsfiddle.net/ksrdtL8e/

Цікавим питанням став перший день тижня: більша частина моїх користувачів проживає в США, і воліє починати тиждень з неділі, так я додав опцію для цього.

Дизайн

Головним у цьому оновленні був внутрішній код Notegram, але не обійшлося і без оновлень для зовнішнього вигляду.


Notegram вже використав 'плоский' дизайн, але я все одно вніс невеликі зміни. За основу було взято додаток новин з Windows 10 – я збільшив картинки на кожній картці шаблону, і трохи змінив кольору. Так само, я додав панель з коротким описом мого проекту для нових користувачів.

З допомогою сервісу https://realfavicongenerator.net/, я додав красиві іконки для всіх платформ. Особливо порадував браузер Chrome на Android, де Notegram веде себе як повноцінне додаток:


Детальніше про створення сторінок з OneNote API
Так само, мені б хотілося б докладніше розповісти про API OneNote.

Для створення сторінок, API OneNote використовує обмежену частину HTML, список яких можна знайти на тут.

Єдиним тегом <meta>, підтримуваним OneNote API є дата створення нотатки. Можна або вказати повну дату в форматі ISO 8601:

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

Або просто вказати часовий пояс:

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

В основному, я використовую таблиці для моїх шаблонів – вони ведуть себе так само, як і в HTML.

Тег <img> веде себе майже так само як і в HTML, але в OneNote API є одна цікава функція – вказавши замість атрибут src data-render-src, можна зберегти в OneNote скріншот сторінки:

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

Так само, для будь-якого елемента можна вказати різні позначки за допомогою атрибута data-tag:

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

Повний список позначок можна знайти на тут.

На жаль, в даний момент в API немає підтримки рукописного введення і математичних формул – але я сподіваюся, що незабаром ці функції додадуть.

Висновок

Я дуже радий, що мій проект сподобався, і збираюся далі продовжувати розробку – якщо у вас є які-небудь пропозиції, залишайте їх у коментарях або пишіть мені в Twitter.

Notegram доступний прямо зараз за адресою http://notegram.me

Авторам
Друзі, якщо вам цікаво підтримати колонку своїм власним матеріалом, то прошу написати мені на vyunev@microsoft.com для того, щоб обговорити всі деталі. Ми шукаємо авторів, які можуть цікаво розповісти про розробку під Office та інші теми.

Про автора
Дмитро Конєв
Студент навчається в De Anza College в Каліфорнії

Я з Москви. Не так давно переїхав у Кремнієву долину, осягати світ розробників і технологій. Довго був користувачем сервісів Microsoft, але тільки не давно знайшов себе в ролі розробника. Останнім часом мене цікавить веб-розробка, до цього я в основному працював з C++.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.