Записки программиста в бесконечном городе

VK приложение: миссия выполнима!

Для популяризации бесконечного города и расширения экспансии в популярнейшей соц.сети рунета, мне была поставлена задача сделать VK приложение. В первом варианте было решено сделать удобную читалку комикса, чтобы можно было за ним следить не выходя из ВКонтакте. Навигация на сайте студии понятна не всем, поэтому в VK приложении нужно было решить две задачи:

• Дать доступ до страниц комикса пользователям соц.сети
• Сделать удобную навигацию

VK приложение: делаем IFrame.

Базовой была взята JS библиотека Knockout, с её помощью буквально за час были набросаны шаблоны и создана ViewModel. В целом пройдя первые несколько шагов интерактивного обучения, подобную страницу сможет сделать любой. Единственное интересное место, на котором хотелось бы остановиться — это визуализация ожидания загрузки картинки-страницы.

Структура приложения.

Есть JSON массив с описанием страниц комикса, каждый элемент содержит информацию о названии и URL картинки. Есть observable переменная которая хранит данные о просматриваемой странице. Есть управляющие элементы которые меняют просматриваемую страницу. В шаблоне отображения есть такой код:

1
2
3

<div class="tte-strip" >
    <img class="tte-strip-img" data-bind="attr: {src: currentImagePath}"/>
</div>

Где currentImagePath — это computed переменная содержащая ссылку на картинку текущей страницы. Если сразу помещать в неё URL нужной страницы, то, особенно на медленном интернете, пользователь будет сперва видеть предыдущее изображение, но при этом заголовок страницы обновиться. А уже когда браузер загрузит картинку, то произойдет обновление её в VK приложении. Чтобы избежать такого эффекта, стоит до загрузки основной картинки показывать заглушку. В коде это будет выглядеть так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// Создаем ViewModel
function myViewModel() {
  // Делаем замыкание
  var self = this;
  ... 
  // Переменная, которая хранит url показываемой картинки
  // по умолчанию показывается gif - эмулятор загрузки :)
  self.currentImagePath = ko.observable("progress_bar.gif");
  // Отслеживаем изменение просматриваемой картинки
  self.currentImage = ko.computed(function(){
      // Индекс текущей страницы
      var cInd = self.selectedInfo();
      // Индекс текущей главы
      var chap = self.currentChapter();
      // Ставим заглушку
      self.currentImagePath("progress_bar.gif");
      // Инициируем загрузку
      self.loadImage(chap.pages[cInd.page].path);
  });
  // Функция загрузчик
  self.loadImage = function(src) {
      // Вешаем обработчик на событие загрузки картинки
      $('<img />').load(function() {
          // при загрузке обновляем нашу observable переменную
          self.currentImagePath(src);
      // Задаем src требуемой картинки
      }).attr('src',src);
  }
  ...
}
// Инициируем 
ko.applyBindings(new myViewModel());

Добавление VK приложение в соц.сеть.

Когда основной функционал написан, то дело остается за малым: Чтобы не грузить клиентам много JS, нужно его сжать, я для этого использовал closure compiler. Готовое файло заливаем на свой хостинг, а вконтактике подаем заявку на IFrame VK приложение. Платим 10 голосов за модерацию и ждем.

Результаты:

В итоге нашу читалку не добавили в каталог из-за скудности функционала (но она доступна по прямой ссылке). Функционал мы будем расширять, так что ждите обновлений

Поделиться!