Используемые приложения на Node.js + Express + Angular.
- Данные беруться с сайта openweathermap.org
- Есть возможность добавлять города России
- Данные по выбранным городам сохраняются в куки
- Когда добавляется новый город - первый раз запрос делается на сайт Openweathermap, результат же кешируется в соответствующей куке на 5 минут. Если страница перегружается (или в течение этого времени посетитель возвращается обратно), погода берется из его куков. Делается это для сокращения запросов к серверу и сокращение ожидания.
- Данные по выбранным городам сохраняются тоже в отдельной куке. При возвращении обратно через некоторое время, Ангуляр смотрит куки, если они есть со списком городов(эта кука храниться 2 года), то он достает оттуда список городов которые посетитель когда-то выбрал и загружается соответствующие виджеты.
- Виджет погоды формируется через директиву
<city-weather>, одна и та же директива используется для всех виджетов. - При введении в поле input нового города - этот город помещается в массив, сразу же так как Ангуляр следит за этим массивом, как только появляется новый элемент, то через директиву ng-repeat, он созадет новый виджет с погодой этого города.
- Крайний правый виджет, показывает всегда текущую погоду, которую определяет по ip пользователя, он делает запрос на сайт http://ip-api.com/json/?fields=country,city, который по такому запросу выдает информацию в формате json из какого города и страны приходит запрос. И эти данные я испоьзую для получения погоды.
- Погодная информация с крайнего правого виджета также кешируется и используется та же директива.
- Оформление использовал Bootstrap и станадратную Resposnsive схему с Initialzr'a.
- По мелочи: форма не отсылается пока не валидна
###Сложности в процессе работы###
- Самое сложное что заполнилось было настроить удаление виджетов с экрана. Дело в том, что виджеты формируются из массива городов, который находится в родительском контролере. А директива ng-repeat создает свой scope и не дает возможности повлиять на родительский скоуп и соответственно на массив. При обращении к этому массиву - ты фактически обращаешься к локальной копии области видимости. Я очень долго пытался хоть как то до него добраться. Сначала через link функцию переменную scope.$parent, когда понял что это безнадежно, долго пытался как до добраться до этого массива поместив его в Сервис. Но тоже не смог реализовать это. Следующий способ, был при удалении города, просто его скрывать из виду ng-hide, ng-init. Но оба способа не помогали. Nn-show фактически делал виджет невидимым и при добавлении новых виджетов новые не вставали на его место, и образовывалась пустота. А ng-if еще из-за того что он клонирует элемент, он создает свой собственный скоуп и возможность удалить виджет становился все сложнее.
В конце концов я пришел к следующему решению:
- при удалении пользователем виджета (нажатии на крестик) в link функции я получаю название атрибута с названием города, удаляю по этому названию города соответствующий город из куки.
- а сам элемен уничтожаю через element.$destroy();
- таким образом я не обращаюсь напрямую к массиву родителя, а удаляю город из кука, из которого в свою очередь массив родителя при действиях пользователя берет информацию
###Соображения по ходу работы###
- Долго думал как реализовать локальное хранение через localStorage или куки. Склонился к кукам потому что у них можно точно задавать сроки истечения, из-за того что хранимая информация невелика, а также возможно из-за того что это самый старый и везде реализованный способ сохранения небольшой информации. (изучил статью Ресига http://ejohn.org/blog/dom-storage/, в которой говортиься о том, что в DOM Storage невозможно точно завать время истечения хранения информации )
- Сначала реализовал виджет который подгружается погоду и долго придумывал каким путем пойти, чтобы можно было добавлять на страницу бесчетное количество виджетов и в конце концов остановился на варианте directive + ng-repeat как самый ангулярный.
Первоначальная цель: создать одностраничное приложение для загрузки погоды на следующем стеке: Angular/ Node + Express
На сегодня 20/05/16 сделал следующий план работы:
- http://openweathermap.org/appid разобраться с api, в каком виде приходит информация по погоде, какие данные, как делается запрос, как менять город http://openweathermap.org/current - сделано
- Создать сайт болванку на Bootstrap + node.js + express который будет заполняться контентом
- Создать на html5 api geolocation опеределение гео позиционирования
- При загрузки страницы формируется сразу же запрос на сервер погоды для получения данных о погоде и данные в любом формате выгружаются на страницу в виде json
- поразмышлять как можно выводить эти данные в красивом виде? можно анимация? библиотека d3? Возможно разные html5 background video на заднем плане в зависимости от погоды
- Реализовать презентацию погоды пункту 5
- Разместить на хостинге heroku
- Добавить доп функционал: добавлять удалять города и сохранять локально данные(в базе/куках на сайте пользователя)
- Добавление дополнительно функционала.