Офис как Платформа: как развивается проект Notegram для OneNote Дата публикации: 10.02.2016 Недавно я выпустил второе обновление для моего проекта, 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 Автор статьи: Дмитрий Конев Данный материал написан участником сообщества. В статье представлено мнение автора, которое может не совпадать с мнением корпорации Microsoft. Microsoft не несет ответственности за проблемы в работе аппаратного или программного обеспечения, которые могли возникнуть после использования материалов данной статьи.