Предупреждаю сразу — эта статья не про SPA и PWA приложения. И даже не про PhoneGap или TitaniumApp. Это обзор небольшого такого сервиса, который помогает в несколько кликов сделать нативное приложение под платформы.
Есть такой сайт appmaker.xyz, который предлагает из сайтов сделать мобильные приложения для iOS и Android. Для сайтов на WordPress и WooCommerce это делается за деньги. Сколько — не знаю, потому что там нужно подавать заявку на демо-версию, созваниваться с менеджерами и что-то обсуждать.
Поэтому что там как работает за деньги и выглядит по итогу — не могу сказать. Однако, есть две вещи, которые можно попробовать забесплатно, чем мы и займёмся.
Мобильное приложение
Первое, чем нас встречает сайт — это предлагает 3 варианта создания приложений: WooCommerce, WordPress и Web App. Про первые два я уже говорил, что платно и нужно общаться с менеджерами по записи, поэтому мы сразу переходим к третьему, к веб-приложению.
Хотя на карточке указано, что можно сделать для iOS и Android, но по факту у нас есть возможность сделать приложение только для гуглофонов. Регистрируемся и начинаем создавать.
Сокеты в программировании. Пишем свой сервер и клиент.
Рабочее пространство ну прямо совсем простое и очевидное, поэтому я не буду описывать очевидные моменты. Единственный момент: пункт «Splash Icon» на самом деле является Splash Screen’ом, т.е. экраном, отображаемом при загрузке приложения.
Над примером решил не заморачиваться и сделать свой блог как приложение.
На следующей странице — вкладке «Style» — нам дано выбрать только показывать или не показывать панель инструментов он же тулбар. И если мы его показываем, то нам дано выбрать цвет фона и цвет текста.
Забегая вперед хочу сказать, что этот тулбар будет просто строчкой с названием приложения и никаких инструментов (меню или строка поиска, например) там нет. Возможно, в платной версии будет доступно больше.
Об этом я не знал и поначалу оставил как есть, только поменял цвет. И когда обнаружилось, что тулбар — это просто строка с заголовком, то я вернулся на сайт и скорректировал отображение (т.е. выключил), после чего перекомпилировал. Поэтому у приложения номер версии — 2.
На главной странице есть скриншот, где вкладка Style имеет большее количество настроек, да и самих вкладок чуть больше, чем в бесплатной версии.
Последняя вкладка для нас (в рамках данного обзора) будет малоинтересной по причине того, что два параметра — добавление рекламного блока и push-извещений — включаются за дополнительную оплату, по $5 за опцию. Кроме того, нужно ещё настраивать Firebase, что тоже уходит за рамки обзора. И я этого не делал, поэтому писать про это не буду.
Чем веб-приложения отличаются от веб-сайтов | Иван Петриченко
Последний этап — компиляция программы. Процесс занимает где-то 3-5 минут, после чего мы можем скачать готовое приложение. Или загрузить прямо в Google Play, правда для этого понадобится аккаунт разработчика — он платный и стоит $25 (на момент написания статьи).
Итоговый вариант вы можете посмотреть самостоятельно, скачав устаночный файл web-islands.apk (2,8 мб). Я проверил на своём Xaomi — работает нормально.
Приложение для ПК
Пишем одностраничный клиент на javascript
Данная статья является вольным переводом. Оригинал тут.
Введение
Думаю, ни для кого не секрет, что клиентские приложения в современных веб-сервисах становится все сложнее и количество JS кода в них растет. До недавнего времени архитектура клиентской части, как правило, разрабатывалась с нуля и была специфична для каждого проекта. Не удивительно что приходилось снова и снова сталкиваться с типичными задачами.
К MVC-фреймворкам на серверной стороне все уже привыкли, но JS код на клиенте часто бывает плохо структурирован.
Предлагаю ознакомиться с решением на базе backbone.js, underscore.js и jQuery, которое поможет решить эту проблему.
Постановка задачи
- Должен быть удобный способ описать модели нашей предметной области.
- Любые изменения в модели должны немедленно отражаться в пользовательском интерфейсе, если модель в нем представлена каким-либо образом.
- Понятная и легко-поддерживаемая структуризация кода в стиле MVC.
Попробуем решить эти задачи на примере простого приложения «Каталог фильмов».
Инструменты
Взгляд на backbone.js
Задача данного фреймворка не в том чтобы дать вам кучу виджетов, и даже не в том, чтобы обеспечить уровень представления (view). Его задача дать вам несколько ключевых объектов, которые помогут структурировать код.
Нам понадобятся объекты Model, Collection, View и Controller.
Модель
Для получения полнофункциональной модели достаточно написать всего одну строчку кода:
var Movie = Backbone.Model.extend(<>);
Теперь мы можем получить экземпляры объекта, задавать и получать произвольные атрибуты:
matrix = new Movie(); matrix.set(< title: «The Matrix», format: «dvd’ >); matrix.get(‘title’);
Также можно передавать атрибуты напрямую в конструктор при создании объекта:
matrix = new Movie(< title: «The Matrix», format: «dvd’ >);
Выполнить какие-то проверки или иные действия при создании объекта, можно расширив модель функцией
initialize(). При создании объекта она будет вызвана с параметром, который вы передали в конструктор.
var Movie = Backbone.Model.extend( < initialize: function (spec) < if (!spec || !spec.title || !spec.format) < throw «InvalidConstructArgs»; >> >);
Также можно определить метод validate(), он будет вызываться каждый раз, когда вы задаете атрибуты и используется для валидации атрибутов. В случае если этот метод что-либо возвращает, атрибут не устанавливается:
var Movie = Backbone.Model.extend( < validate: function (attrs) < if (attrs.title) < if (!_.isString(attrs.title) || attrs.title.length === 0 ) < return «Название должно быть непустой строкой»; >> > >);
Для более полного ознакомления с возможностями backbone предлагаю ознакомиться с документацией.
Коллекции
Коллекция в backbone представляет из себя упорядоченный список моделей некоторого типа. В отличие от обычного массива, коллекции обеспечивают гораздо больше функционала, такого как, например, установка правил сортировки с помощью метода comparator().
После того как определен тип модели в коллекции, добавление туда объекта выглядит чрезвычайно просто:
var MovieList = Backbone.Collection.extend(< model: Movie >); var library = new MovieList(); library.add(< title: «The Big Lebowski», format: «VHS» >);
Представления
В общих чертах, представления backbone определяют правила отображения изменений модели в браузере.
Здесь начинаются манипуляции с DOM и в игру вступает jQuery. Для изначальной загрузки моделей в DOM нам потребуется шаблонизатор, мы воспользуемся связкой ICanHaz.js + mustache.js
Вот пример представления для нашего приложения:
var MovieView = Backbone.View.extend(< render: function() < var context = _.extend(this.model.toJSON(), ); this.el = ich.movie(context); return this; > >);
Соберем все вместе
До сих пор мы говорили о разных частях приложения, теперь посмотрим как объединить их в одно целое.
Контроллер
В контроллере мы свяжем все части приложения, а также определим пути для манипуляций с объектами и связанные с ними методы.
var MovieAppController = Backbone.Controller.extend(< initialize: function(params) < this.model = new MovieAppModel(); this.view = new MovieAppView(< model: this.model >); params.append_at.append(this.view.render().el); >, routes: < «movie/add»: «add», «movie/remove/:number»: «remove», >, add: function() < app.model.movies.add(new Movie(< title: ‘The Martix’ + Math.floor(Math.random()*11), format: ‘dvd’ >)); // сбросим путь чтобы метод можно было вызвать еще раз this.saveLocation(); >, remove: function(cid) < app.model.movies.remove(app.model.movies.getByCid(cid)); this.saveLocation(); >>);
Здесь мы видим, что в контроллере сохраняется модель приложения, которая будет хранить все остальные модели и коллекции, а также представление приложения.
Модель приложения в нашем случае будет хранить коллекцию фильмов:
var MovieAppModel = Backbone.Model.extend( < initialize: function() < this.movies = new MovieList(); >>);
Представление приложения будет выглядеть так:
var MovieAppView = Backbone.View.extend(< initialize: function() < _.bindAll(this, «addMovie», «removeMovie»); this.model.movies.bind(‘add’, this.addMovie); this.model.movies.bind(‘remove’, this.removeMovie); >, render: function() < $(this.el).html(ich.app(this.model.toJSON())); this.movieList = this.$(‘#movieList’); return this; >, addMovie: function(movie) < var view = new MovieView(); this.movieList.append(view.render().el); >, removeMovie: function(movie) < this.$(‘#movie_’ + movie.cid).remove(); >>);
Ну и собственно индексный файл со всеми зависимостями и шаблонами:
Все приложение готово. Конечно, это только очень малая часть тех возможностей которые предоставляют данные библиотеки, но думаю, что данного примера достаточно, что почувствовать вкус к разработке, с помощью этих инструментов.
Источник: habr.com
Пишем клиент для любимого сайта на phoneGap
Бывает что есть сайт, но пользоваться им с мобильного телефона не очень удобно и было бы замечательно иметь отдельное приложение для него. Любители веб разработки легко смогут это сделать использую phoneGap. Под катом речь пойдет про сервис отслеживания почтовых отправлений, которым я часто пользуюсь и написанный для него демонстрационный клиент с базовым функционалом: авторизация, получение списка треков и описания к ним и возможность добавить новый трек. Я не связывался с разработчиком по этому поводу и очень надеюсь что он на меня не обидится за наглость, за копание в JavaScript коде и за то что в приложении не будет показана реклама. Так же прошу простить за костыльность и велосипедность кода, воспринимайте его как пример.
Статья подразумевает, что вы сами сможете разобраться как работает сайт, информация с которого будет отображаться в приложении.
Те кто читали прошлую статью об авторизации через некоторые сайты уже знаю что в phoneGap есть замечательная штука inAppBrowser, которая не только открывает сайт внутри приложения, но и позволяет внедрить в него свой JavaScript код и поменять стили, что пригодится для форм авторизации.
На её основе, по образу и подобию авторизации на хабре был написан вот такой код:
Для получения контента будем использовать небольшую AJAX библиотеку, способную делать POST и GET запросы, которая умеет вставлять cookie и отдающая полученный результат в callback функцию (основа взята из miniajax):
var ajax = < init: function()< return new XMLHttpRequest(); >, send: function(url,method,args,cookies,async,_callback) < var q=ajax.init(); q.open(method,url,async); q.onreadystatechange=function()< if(this.readyState==4 this.status==200) < _callback(this.responseText); >>; if (cookies) < q.setRequestHeader(‘Cookie’,cookies); >if(method==’POST’) < q.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’); q.send(args); >else < q.send(null); >> >
Для получения контента делаем GET запрос на страничку post-tracker.ru/my/ при этом, если в ответе в одном из блоков мы встретим строку Войдите или Зарегистрируйтесь , то нас явно разлогинили и придется пройти процедуру еще раз:
get_content: function (async) < // делам запрос на страницу с трек кодами var cookies=»PHPSESSID=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_PHPSESSID»)+»; userid=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_userid»)+»; securehash=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_securehash»); // формируем cookie plugin_www_post_tracker_ru.dataReady=false; ajax.send(«http://post-tracker.ru/my/»,’GET’,null,cookies,async,this._parse_content); // делаем ajax запрос и посылаем его содержимое для распарсивания >, _parse_content: function (data) < var wrapper=document.createElement(‘div’); // заворачиваем html код внутрь объекта, чтобы удобнее с ним работать wrapper.innerHTML=data; plugin_www_post_tracker_ru._get_inside_data(wrapper,’trackcode,date,status,comment’); // и отправляем его на получение данных о треккоде, даты последнего изменения, статусе и описании посылки >, _get_inside_data: function (wrapper,types) < var tmp=wrapper.getElementsByClassName(‘login’)[0].innerHTML; // на всякий случай получаем содежимое div блока login if (tmp==’Войдите или Зарегистрируйтесь’) < // если там такое, то придется авторизироватья plugin_www_post_tracker_ru.auth(true); >else < // а иначе продолжаем plugin_www_post_tracker_ru.default_folder=wrapper.getElementsByTagName(‘input’)[0].value; // получи ID стандартной папки с кодами, чтобы в дальнейшем можно было добавлять туда новые коды отправлений var types=types.split(«,»); for (var typeid in types) < // разбираем html-ку по блокам с заданными типами var tmp=wrapper.getElementsByClassName(types[typeid]); var (var i in tmp) < if (tmp[i].innerHTML) < if (!plugin_www_post_tracker_ru.postdata[id]) plugin_www_post_tracker_ru.postdata[id]=new Array(); plugin_www_post_tracker_ru.postdata[id][(types[typeid])]=tmp[i].innerHTML.replace(/(rn|n|r)/gm,»»).replace(/]+>/gmi,»»).replace(/^s+|s+$/gm,»»); // убираем все ненужности в виде переносов строки, html кода для оформления и лишние пробелы id++; > > > plugin_www_post_tracker_ru.dataReady=true; show_list(); // даем команду на отображение полученных данных > >, get_list: function () < // это будет запрошено функцией show_list() для «красоты» оформления var tmp=new Array(); for (var i in plugin_www_post_tracker_ru.postdata) < tmp[i] +plugin_www_post_tracker_ru.postdata[i][‘trackcode’]+»»+plugin_www_post_tracker_ru.postdata[i][‘comment’]+»
«+plugin_www_post_tracker_ru.postdata[i][‘date’]+» «+plugin_www_post_tracker_ru.postdata[i][‘status’]; > return tmp; >
show_list() в данном коде добавит блоки с подготовленной html-кой внутри div-а со скроллером (кстати рекомендую Overthrow и крайне не рекомендую iscroll-4 по причине ужасной скорости работы).
Настала пора добавить возможность отправки новых кодов для отслеживания, но сперва добавим действие на кнопку MENU вашего Android смартфона. Делается это с помощью события menubutton. К которому мы привяжем появления блока с кнопкой «Добавить трек код», которая, при нажатии, начнет процесс.
put_trackCode: function() < // то что будет выполнятя после нажатия на кнопку «Добавить трек код» var trackCode = prompt(«Введите трек код»); // запросим у пользователя сам треккод if (trackCode) < this._put_trackCode_getPath(trackCode); // запросим у сайта направление для этого кода (например из Китая в Россию), внимание тут снова не используем асинхронный запрос if (plugin_www_post_tracker_ru.default_path) < // если получили направление, добавим описание var comment = prompt(«комментарий»); if (comment) < this._put_trackCode(trackCode,comment); // и отправим эти данные на сайт >> else < alert(«Не правильный трек код»); >> else < menuButtonHide(); // если пользователь не захотел вводить, то не забудем скрыть блок с менюшкой >>, _put_trackCode_getPath: function (trackCode) < // запрашиваем направление var cookies=»PHPSESSID=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_PHPSESSID»)+»; userid=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_userid»)+»; securehash=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_securehash»); var data=»act=getPathForm+encodeURIComponent(trackCode); ajax.send(«http://post-tracker.ru/ajax/userTrackcodes.php»,’POST’,data,cookies,false,this._put_trackCode_getPath_result); >, _put_trackCode_getPath_result: function (data)< var wrapper=document.createElement(‘div’); // заворачиваем ответ, представляющий собой html wrapper.innerHTML=data; var tmp=wrapper.getElementsByTagName(‘input’); // смотрим есть ли в ответе input if (tmp.length>0) < plugin_www_post_tracker_ru.default_path=tmp[0].value; // если есть, то значение в нем нам очень пригодится >else < plugin_www_post_tracker_ru.default_path=false; >>, _put_trackCode: function (trackCode,comment)< // отправляем треко код и комментарий к нему, снова не асинхронно var cookies=»PHPSESSID=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_PHPSESSID»)+»; userid=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_userid»)+»; securehash=»+window.localStorage.getItem(«plugin_www_post_tracker_ru_securehash»); var data=»act=addTrackcodeAction+plugin_www_post_tracker_ru.default_folder+»+encodeURIComponent(trackCode)+»+plugin_www_post_tracker_ru.default_path+»+encodeURIComponent(comment); ajax.send(«http://post-tracker.ru/ajax/userTrackcodes.php»,’POST’,data,cookies,false,this._put_trackCode_result); >, _put_trackCode_result: function(data) < // данные отправились menuButtonHide(); // скрываем меню plugin_www_post_tracker_ru.get_content(true); // и снова запрашиваем содержимое страницы с кодами посылок >
Что бы еще можно было бы добавить к приложение, чтобы потренироваться с phoneGap? В первую очередь не помешает локализация, чтобы в коде не хранился текст и для разных стран не выводился только русский язык. Так же не помешает отрабатывать некоторые состояния, например пропажу интернет соединения или нажатие на кнопку «назад».
В плане самого сервиса отслеживания, стоило бы добавит рекламу, на которую содержится ресурс, а так же увеличить функционал, добавив создание папок, автоматическую проверку с оповещениями и свистелкопезвуковыми эффектами.
Исходный код проекта и собранное приложение для тестов и экспериментов заинтересованных лиц. А так же гитхаб для менее унылых форков github.com/SovGVD/PhoneGap-post-tracker.ru
Источник: habr.com