Вам понадобится

Для разработки вам понадобиться следующее ПО:

Пробная версия Windows 10

Устройства с Windows созданы, чтобы превзойти ваши ожидания и воплотить желаемое в реальность.

Office 2016

Используйте платформу для доступа к миллиарду новых пользователей для вашего решения.

Visual Studio

Visual Studio — это интегрированная среда разработки с широкими возможностями для создания потрясающих приложений для Windows, Android и iOS, а также современных веб-приложений и облачных служб.

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

Дата публикации: 19.11.2015

Хакатон LA Hacks проходил с 3 по 5 апреля, в стадионе Pauley Pavilion Университета Лос-Анжелеса. С огромной кучей участников и партнеров, это было удивительное зрелище, особенно для человека не разу не бывшего на хакатоне. 

Посмотреть на гифку с места проведения можно тут:  gfycat.com/UnhappyWholeHoverfly

Так получилось, что меня не очень заинтересовали проекты других участников, и я остался без команды. Пройдя самую важную часть любого хакатона – собрав все добро от компаний – где-то часа в 3 ночи я оказался у стенда Microsoft, на мое удивление, с еще живыми инженерами. Поговорив с ними (и вооружившись ваучерами для Microsoft Azure), мне пришла мысль сделать что-то с API от Microsoft. 

Проект

У Microsoft есть свое собственное хранилище заметок – OneNote. Очень удобное приложение, особенно для студента, ведь туда можно сохранять не только текст и картинки, но и экспортировать файлы PDF, математические формулы и записывать звук, а если у вас есть планшет типа Microsoft Surface, то еще и использовать рукописный ввод.

В OneNote мне не хватало шаблонов. Существуют дополнения для десктопной версии OneNote, но с учетом того, что я чаще всего использовал OneNote на планшете, мне хотелось избавится от привязки к платформе. Так и появилась идея для Notegram.

До этого я совсем не занимался back-end разработкой, так что пошел в обратном порядке. 

Дизайн

Я начал с логотипа. Буква N на логотипе OneNote была заменена на иконку “поделиться”.
Затем был сделан макет самого приложения. За основу был взят дизайн приложения OneNote для Windows 8.1.

Интерфейс создавался с нуля, без использования виджетов типа 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>

 

Каждый элемент был сделан достаточно просто, так что почти ничего не пришлось менять для мобильной версии – только нужно было добавить вот этот код:

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



 

Работа с API

Поскольку мне дали много ваучеров для Microsoft Azure, было решено разместить проект именно там. Очень просто оказалось создать приложение на основе Node.js – можно просто использовать репозиторий Git. У Microsoft есть даже пример приложения OneNote API на Node.js, который может сохранять страницы в OneNote – как раз то, что я и хотел использовать.

github.com/OneNoteDev/OneNoteAPISampleNodejs

Для начала, нужно было получить Client ID с портала  Live app management и прописать его в файл config.js. Приложение будет работать только с того URL, который прописан в портале, так что рекомендуется прописать домен приложения в файле hosts для тестирования.

В предоставленном Microsoft примере уже содержался самый главный код для авторизации пользователя и отправки примеров – а именно имеется функция, которая отправляет текст заметки, для его использования нужно было сделать несколько вещей:

На странице вошедшего пользователя были размещены кнопки для шаблонов:

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

 

В файле routes/index.js уже был switch-statement обрабатывающий запросы, так что мне нужно было добавить в него мои шаблоны:

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

 

Затем, в файле 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);
};

 

В функцию сreatePage передавался текст заметки из файла и access token пользователя. Функция создает запрос для 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);
}

 

 


Так, не имея особых познаний в работе с REST API и Node.js, у меня уже было почти готовое приложение. Оставалось последнее…

Шаблоны

OneNote API имеет поддержку ограниченной части HTML для создания страниц:  https://dev.onenote.com/docs#/introduction/meta-tag-details.

Я пошел немного другим путем: в OneNote API можно так же получить страницы, так что я мог просто создать все шаблоны в OneNote.

Изначально у меня было 8 шаблонов. 4 для организации времени: календарь, еженедельник, ежедневник, список задач в стиле GTD.

4 для демонстрации возможностей Notegram: два шаблона для LA Hacks, планировщик поездок, шаблон для ведения дневника.

Уже после хакатона меня попросили добавить новый шаблон для бухгалтерии, так что на данный момент у меня уже 9 шаблонов.

После создания шаблонов, я использовал сервис  Apigee для того, чтобы получить код HTML. После авторизации в OneNote API, отправлялся запрос на страницу вида  https://www.onenote.com/api/v1.0/pages/[pageId]/content.

 

Заключение

После бессонной ночи работы над проектом, у меня получилось рабочее приложение, получившее первое место от Microsoft. Это был удивительный опыт, и я очень благодарен сотрудникам Microsoft, которые помогали участникам с их проектами и очень рад, что их заинтересовал мой проект. 

В связи с учебой, у меня было недостаточно времени для работы над проектом, но у меня есть много идей для Notegram:

  • Пользовательские шаблоны
  • Русская локализация
  • Приложение для Windows 10

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

Автор статьи: Дмитрий Конев

Данный материал написан участником сообщества. В статье представлено мнение автора, которое может не совпадать с мнением корпорации Microsoft. Microsoft не несет ответственности за проблемы в работе аппаратного или программного обеспечения, которые могли возникнуть после использования материалов данной статьи.