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'е. Возможно в него будут вноситься небольшие дополнения и исправления, но ничего кардинального.

Source

Также вы можете поэкспериментировать с демо версией.

Demo

Постановка задачи

Основная задача приложения – дать пользователю возможность создавать собственные списки объектов и размещать их на карте. Т.е. фактически мы создаём записную книжку, в которой каждая запись будет «привязана» к карте.

Выглядеть главная страница будет следующим образом.

personal_maps_main

В левой части окна всегда отображается карта с маркерами созданных объектов. В правой – либо список объектов, либо форма добавления нового объекта.

personal_maps_create

Для создания объекта пользователю нужно ввести его название, описание и указать положение на карте.

Клик по объекту в списке центрирует карту и показывает описание объекта.

personal_maps_view

Справа от названия объекта находятся кнопки «Изменить» и «Удалить».

Кроме того, т.к. мы создаём полнофункциональное приложение, кроме страницы с объектами нам нужно реализовать авторизацию, аутентификацию и управление пользователями (создание, удаление, редактирование прав и т.п.).

Таким образом, структура приложения будет смешанной. Одна часть «классическая» использует обычные html формы, вторая представляет собой RIA (Rich Internet Application), написанное с использованием фреймворка AngularJS.

Структура приложения, фреймворки и библиотеки

На клиенской стороне (в браузере) будут использоваться: фреймворк AngularJS и API Google Maps. Для оформления – Twitter Bootstrap.

На сервере – Yii фреймворк и MySQL.

Выбор этих фреймворков в большой степени продиктован моими собственными предпочтениями. Тем не менее, есть несколько моментов, на которые я хотел бы обратить ваше внимание.

На сервере вместо Yii можно использовать любой из популярных PHP фреймоврков, т.к. большинство из них обладает очень похожими возможностями. Естественно, можно обойтись и без фреймворка вообще, но при этом вам придётся написать значительно больше кода.

Основные возможности Yii, которые используются в данном приложении:

  • создание многостраничных приложений (MVC модель и генератор кода);
  • ActiveRecord для работы с базой;
  • управление правами пользователей (RBAC);
  • возможность создания REST сервисов.

Все эти возможности не обязательно должны поддерживаться вашим фреймворком «из коробки». Достаточно чтобы была возможность подключения нужных библиотек. Тем не менее, очень удобно, если всё необходимое входит в состав фреймворка.

С клиентской частью ситуация сложнее.

За последние несколько лет появились очень интересные JavaScript библиотеки и фреймворки для создания RIA. Причём разница между ними (разброс в возможностях и подходе к написанию приложений) гораздо заметнее, чем между PHP фреймворками.

Я более-менее активно работал с Backbone.JS и AngularJS. Для данной задачи походит любой из них.

При этом Backbone.JS значительно проще, состоит всего из нескольких компонентов, и все вопросы, связанные с взаимодействием этих компонентов между собой, оставляет решать разработчику. На практике это означает, что кроме документации к Backbone.JS очень желательно прочитать какую-нибудь книгу по проектированию сложных JS приложений (например, Developing Backbone.js Applications).

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

В тоже время, как только вы столкнётесь с необходимостью реализовать более-менее нестандартные вещи (например, подключение карты 😉 ), то придётся разобраться в принципах работы этого фреймворка.

Тем не менее, общее количество кода будет меньше чем при использовании Backbone.JS. И если вы занимаетесь разработкой средних или больших приложений, то время, потраченное на изучение AngularJS, безусловно, окупится.

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

Содержание

  • Евгений

    Очень жду продолжения! Как раз сейчас разбираюсь в связке Yii и AngularJS для нового проекта.

  • Олег Максименко

    попытался авторизоваться на демо сайте, вылезла ошибка

    PHP warning

    file_put_contents(/home/vova/sites/www/personal-maps.simplecoding.org/public_html/protected/runtime/state.bin): failed to open stream: Permission denied

    • miroslav_chandler

      chmod 777 protected/runtime

      • Олег Максименко

        это не ко мне)

        • miroslav_chandler

          это к вам. чмод на сервере за вас разработчик не поставит 🙂

        • Олег Максименко

          да я про демо сайт, который разработчик показал http://personal-maps.simplecoding.org/

        • miroslav_chandler

          аа, извиняюсь.
          думал это у вас при установке)

      • Большое спасибо!
        Как всегда, что-то упустил.

      • Байрам Алиев

        Может все таки безопаснее 775? И для всего приложения chown -R www-data:www-data

        • Да, правильно. Только проблема возникнет при условии, что злоумышленник может загрузить исполняемый файл в папку runtime, а такая возможность сама по себе означает наличие уязвимости в приложении. Для Yii достаточно чтобы папки assets, runtime и uploads (если используется) были доступны для записи.

  • На клиенской стороне (в браузере) будут использоваться: фреймворк AngularJS и API Google Maps. Для оформления – Twitter Bootstrap.
    На сервере – Yii фреймворк и MySQL.

    На клиенте же используется всё тот же Yii, ожидал увидеть Yii в виде API сервера, а клиент — нативный html + angular. Почему не так?

    • Красивее было бы написать весь клиент на angular

      Возможно технически красивее. Но есть несколько соображений из-за которых мне не нравится такой подход.

      В большинстве случаев кроме приложения вам нужно создать какое-то количество контентных страниц (например, с документацией, правилами сервиса, ценами и т.п.) и интерфейс для управления этими страницами. Если это сделать с использованием JS фреймворка, то размер страницы для пользователя увеличится. Т.к. даже при использовании AMD сам фреймворк + некоторое количество JS кода посетителю всё-равно придётся отправить. Кроме того, возникнет проблема с индексацией этих страниц поисковиками, точнее для поисковиков в любом случае придется сформировать эти страницы без JS.

      Поэтому я и оставил страницы входа и контактов обычными.

      $model->attributes

      Замечание принимается.

      CHttpException

      Вообще я ориентировался на пример из оф. документации и _sendResponse() оставил практически без изменений. Основное преимущество в том, что часть сообщений формируется внутри метода на основании кода ошибки, т.е. не нужно устанавливать параметр $text.

      • Ясно.

        ИМХО:
        Тут просто идея **сервиса** создание «персональных карт», которые потом уже можно где-то использовать (как раз таки в индексируемом app). А так как это backend, то думаю тут об индексации вообще можно не думать. Да и вообще думаю, что Angular не нужен для frontend'a с большим количеством routers и статики, он же для «одностраничника» больше.

        Вики статью эту читал, но пошёл своей дорогой — методом проб и ошибок 😉 И думаю знаете, что в CHttpException $text можно и не передавать. Сам код ошибки уже подразумевает, что это за ошибка. $text — можно использовать просто для конкретики, а можно и не использовать.

        Все равно вам спасибо за то, что поделись наработками. Продолжайте.

        • $text — можно использовать просто для конкретики, а можно и не использовать

          Согласен. Смысл есть если, например, для 404-ой нужно вместо «Not found» показать пользователю что-то вроде «Place not found».

          Вам тоже спасибо. Я посты пишу не только для того чтобы чем-то блог наполнить 🙂 Хочется с кем-то обсудить тему.

  • MOTORIST

    хотелось бы увидеть node.js + Angular.JS

    • А почему именно такое сочетание? Из-за JavaScript?