company_banner

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

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


    Хакатон 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

    Авторам


    Друзья, если вам интересно поддержать колонку своим собственным материалом, то прошу написать мне на vyunev@microsoft.com для того чтобы обсудить все детали. Мы разыскиваем авторов, которые могут интересно рассказать про разработку под Office и другие темы.

    Об авторе


    Дмитрий Конев
    Студент обучается в De Anza College в Калифорнии

    Я из Москвы. Не так давно переехал в Кремниевую долину, постигать мир разработчиков и технологий. Долго был пользователем сервисов Microsoft, но только не давно нашел себя в роле разработчика. В последнее время меня интересует веб-разработка, до этого я в основном работал с C++.
    Какой из Office API вам наиболее интересен?

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    • +16
    • 6,6k
    • 9
    Microsoft 465,58
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Поделиться публикацией
    Похожие публикации
    Комментарии 9
    • +1
      Этот парень меня вдохновляет
      • +1
        Пришел-увидел-победил

        Но по тексту статьи так и не понял, что делает приложение. Это просто мобильный клиент для создания заметок, похожий на Evernote? Ну не знаю, можно ли это назвать «историей» успеха, помоему у парня всё только-только начинается, и списывать со счетов его рано)))
        • 0
          История успеха на хакатоне? ;)

          • 0
            Точно, подловили :) ведь написано
            Перед вами история успАха проекта Notegram от первого лица

            Упс)
            • 0
              И правда упс :V

              Скоро поправят, не с моего аккаунта статью выложили просто. :)
        • 0
          В feature list — прикрутить API Evernote и/или dropboxa в качестве backend-ов ;)
          • 0
            Ну если Evernote понимает HTML, то можно, а в Dropbox вообще неинтересно как-то, сами шаблоны в HTML все.
          • 0
            Если интересно, вот английская версия статьи: medium.com/@Ezhik/office-as-a-platform-creating-notegram-for-onenote-9a169960792b

            Так же могу ответить на вопросы про Notegram.
            • 0
              А можно рулить разрешениями на просмотр страниц, или частей документа по Azure AD? Что бы менеджеры например видели не полную Записную книжку сайта?
              Далее, как прикрутить Шарепоинтдизайнер к Офис 365 для бизнеса?

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое