Категории: Web разработка

Personal Maps: создаём сервис AngularJS. Часть 4.

Владимир | | Ajax, AngularJS, JavaScript, Web разработка.

personal_maps_logo_4

Это четвёртая статья цикла о разработке web приложения под названием Personal Maps.

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

Сейчас мы переходим к практической реализации. И начнём с разработки сервиса AngularJS, который называется Places и работает с REST API серверной части приложения, т.е. выполняет операции чтения, создания, удаления и редактирования объектов, которые пользователь размещает на карте.

Начинать разработку с сервиса удобнее всего, т.к. он не зависит от других компонентов приложения (не вызывает их методы). Но остальные компоненты используют его, потому что им необходимо работать с объектами.
Читать дальше

Personal Maps: главная страница и структура клиентской части приложения. Часть 3.

Владимир | | Ajax, AngularJS, HTML, JavaScript, PHP, Web разработка, Yii.

В этой части мы начнём разрабатывать клиентскую часть приложения.

Фактически это будет одностраничное приложение, которое получает и передаёт данные с помощью REST сервисов. Основное преимущество такого подхода заключается в том, что при работе пользователя не происходит перезагрузки страницы. Если сервер окажется недоступен, пользователь увидит сообщение об ошибке и сможет продолжить работу, когда связь восстановится.

Кроме того, наше приложение показывает объекты на карте Google, и если его разрабатывать в «классическом» стиле, то переход от одного объекта к другому будет вызывать перезагрузку карты. А это, не смотря на кэширование компонентов карты браузером, негативно скажется на скорости работы интерфейса.

Читать дальше

Personal Maps: Устанавливаем и настраиваем Yii, проектируем структуру базы данных. Часть 2.

Владимир | | AngularJS, MySQL, PHP, Web разработка, Yii.

personal_maps_logo_2

Это вторая часть из серии статей о создании web приложения с использованием фреймворков Yii и AngularJS. В ней мы рассмотрим:

  • установку и предварительную настройку Yii;
  • подключение расширения Yiistrap;
  • структуру базы данных;
  • создание миграций.

Примечание. Вы можете получить исходный код на GitHub, а также поэкспериментировать с демо-версией.

Source

Demo
Читать дальше

Personal Maps: используем Yii и AngularJS для разработки web приложения. Часть 1.

Владимир | | AngularJS, JavaScript, MySQL, PHP, Web разработка.

personal_maps_logo_1

Эта статья первая из цикла о создании небольшого web приложения под названием Personal Maps. Приложение создавалось исключительно в демонстрационных целях, но, в тоже время, оно в полном объёме выполняет свои задачи. С его помощью я хочу показать пример использования нескольких инструментов «в связке», а именно: PHP фреймворка Yii, JavaScript фреймворка AngularJS, базы данных MySQL и Google Maps API.

Первоначально я планировал ограничиваться несколькими более-менее независимыми постами, но затем понял, что такой подход не позволит нормально описать взаимодействие клиентской и серверной части приложения. Более-менее подробное описание по моей приблизительной оценке будет состоять ориентировочно из 10 частей, которые я рассчитываю опубликовать в этом и следующем месяце.

Но уже сейчас код приложения доступен на Github'е. Возможно в него будут вноситься небольшие дополнения и исправления, но ничего кардинального.
Читать дальше

Проблемы с обновлением статических файлов при использовании web сервера на VirtualBox

Владимир | | Web разработка, Разное.

virtualbox sendfile

На сегодняшний день при разработке на PHP совсем не обязательно использовать такую же операционную систему, как и на продакшн сервере.

Т.е. вполне можно работать с версией PHP для Windows, а на рабочем сервере использовать Linux. При этом в большинстве случаев проблем не возникает. Но, тем не менее, перед деплоем желательно протестировать код в условиях максимально приближенных к продакшн среде. И самое простое решение в данной ситуации – использовать VirtualBox.

В большинстве случаев поступают следующим образом:

  1. Создают виртуальную машину.
  2. Устанавливают на неё web сервер, базу данных и всё остальное ПО.
  3. Создают общую папку, в которой находится код приложения. Это позволяет работать с кодом из основной операционной системы, что значительно удобнее.

В результате получаем виртуальную машину, в которой версии программ и конфигурационные файлы полностью совпадают с продакшн сервером. Но разница всё же существует. Гостевая операционная система работает с железом не напрямую, а через VirtualBox, и это создаёт проблему.
Читать дальше

Google maps & AngularJS: позиционирование карты

Владимир | | Ajax, AngularJS, HTML, JavaScript, Web разработка.

google maps angularjs

Последнее время мне довольно часто приходится работать с различными фреймворками, предназначенными для разработки JavaScript приложений. В основном с Backbone.js и AngularJS. И впечатления в целом очень приятные. Они действительно позволяют ускорить разработку и упростить поддержку кода.

Естественно, всё имеет свою цену. В данном случае это «порог вхождения» и время на изучение особенностей фреймворков. Кроме того, сейчас ведётся много споров на тему того какой фреймворк лучше. Участвовать в них у меня желания нет, хотя читать такие обсуждения иногда бывает интересно 🙂 К сожалению (или к счастью), победителей в этих спорах нет и, скорее всего, не будет. В большинстве случаев, чем больше работы за вас выполняет фреймворк, тем медленнее он работает. Но, с другой стороны, при этом уменьшается время разработки.

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

В этой статье мы рассмотрим пример использования AngularJS.
Читать дальше

Google maps & jQuery: позиционирование карты

Владимир | | Ajax, HTML, JavaScript, Web разработка.

google maps positioning

Приветствую всех!

В этой статье речь пойдет о создании небольшого приложения, работающего с картами google.

Идея следующая. У вас в базе данных есть какая-то информация об объектах, которые нужно показать на карте (например, информация о городах). Нужно:

      1) вывести список этих объектов;
      2) при клике на любом из объектов переместить карту так чтобы выбранный объект оказался в её центре;
      3) показать на карте развернутую информацию о выбранном объекте.

Вообще-то существует некоторое количество готовых решений. В основном плагинов для различных CMS. Но часто подключение таких плагинов к существующей системе занимает больше времени, чем написание собственного решения. Кроме того, своё решение проще дорабатывать и поддерживать.
Читать дальше

TinyMCE + PHP.JS: выборочная фильтрация тегов

Владимир | | JavaScript, Web разработка.

tinymce tags filtering

На сегодняшний день TinyMCE является одним из самых популярных WYSIWYG редакторов. И в тоже время, с точки зрения настройки, одним из самых сложных.

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

В этой статье речь пойдёт о настройке фильтрации текста, который пользователь вставляет в редактор.
Читать дальше

Composer + Yii + Imagine: небольшое приложение для загрузки картинок

Владимир | | PHP, Web разработка, Yii.

yii composer

Совсем недавно фреймворк Yii включили в репозиторий packagist.org. Новость очень хорошая, т.к. теперь можно использовать один менеджер зависимостей Composer для обновления и фреймворка, и дополнительных библиотек.

В этой статье мы рассмотрим пример создания несложного приложения на основе Yii, которое позволит загружать картинки и автоматически создавать их миниатюры. Задача тривиальная, но мне хотелось показать подключение дополнительных библиотек с помощью Composer, а в packagist как раз входит Imagine (очень удобная библиотека для работы с изображениями).
Читать дальше

Facebook: как посчитать количество лайков

Владимир | | JavaScript, Web разработка.

facebook like share

Некоторое время назад, если не ошибаюсь, в феврале 2012 года, разработчики Facebook решили заменить кнопку Share button на Like button. В документации появилась информация о том, что «Share button» не рекомендуется для использования (depricated). И 7 ноября 2012 года переход был завершен. Естественно, разработчики опубликовали подробную инструкцию по переходу на новый виджет.

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

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