Если у кого-то есть желание сделать свой фотосайт или познакомиться с ASP.NET MVC на примере, возможно, пригодится мой опыт создания такого сайта и исходники лягут в основу собственного проекта.
Чтобы было понятно о чем пойдет речь, ссылка на сайт — www.bongiozzo.ru.
А теперь, собственно, как это было сделано.
Что хотелось?
- Сделать портфолио в виде нескольких фотоальбомов и добавить контекст из соц сетей;
- Хотелось сделать что-то свое — я изначально не смотрел на готовые решения;
- В качестве хранилища фотографий сразу планировал использовать существующие сервисы фотохостинга с активным сообществом фотографов — у сервисов есть API, кроме того, фотографии публикуются для обратной связи, а получить ее можно, прежде всего, там;
- По той же причине, прикрутить к фотографиям кнопки Facebook и Twitter;
- Для просмотра фотографий планировалось обзавестись стильной галереей, которая будет хорошо выглядеть на планшетах;
- Ну и в завершении, хотелось все это выложить на оптимальный, с точки зрения соотношения стоимость/сервис, хостинг.
Задача поставлена, поехали…
Определяемся со средой разработки и framework
Первым делом свободно скачал и установил Visual Studio 2012 RC. Для разработки веб сайтов доступны Web Forms и MVC — мои симпатии всецело лежат на стороне MVC, т.к. этот паттерн использовал для создания сайтов на Perl, когда ещё Web Forms и в помине не было :).
По поводу версии MVC тоже особых раздумий не было — раз уж все новое (VS 2012 на Windows 8), то и разрабатывать буду на последней версии MVC 4.
Главное — контент
Pro аккаунт на Flickr у меня уже был, хотя это абсолютно необязательное условие. Автоматическая группировка и сортировка фотографий по альбомам на Flickr у меня уже тоже была настроена с помощью сервиса SmartSetr. Поэтому первым делом открыл Nuget Package Manager и, введя Flickr, получил в проекте поддержку Flickr API c помощью библиотеки Flickr.NET.
Возможно позднее рассмотрю перенос CMS на 500px, а может кто-то это сделает быстрее меня.
Идея использования Flickr как CMS была простой — фотоальбомы с ключевым словом Project в описании будут отображаться на моем сайте (во Flickr они называются Photoset). Фотографии в альбоме будут отсортированы по популярности, определяемой пользователями Flickr.
Вот какие несложные методы получились для модели формирования данных FlickrModel.
public List<FlickrProject> GetProjects(string language) { PhotosetCollection flickrPhotosets = flickr.PhotosetsGetList(Properties.Settings.Default.FlickrUserId); Regex reg_Project = new Regex(@"^Project\s+([^\|].*)\s+\|\s+(.*)"); Match m; List<FlickrProject> returnProjects = new List<FlickrProject>(); foreach (Photoset item in flickrPhotosets) { m = reg_Project.Match(item.Description); if (m.Success) { FlickrProject prj = new FlickrProject(); prj.Description = getDescription(item.Description, language); prj.PhotosetId = item.PhotosetId; prj.Photos = GetPhotosetPhotos(item.PhotosetId, language); prj.PrimaryPhoto = prj.Photos.ToList().Find( delegate(Photo ph) { return ph.PhotoId == item.PrimaryPhotoId; }); returnProjects.Add(prj); } } return returnProjects; } public PhotosetPhotoCollection GetPhotosetPhotos(string photosetId, string language) { PhotosetPhotoCollection photos = flickr.PhotosetsGetPhotos(photosetId, PhotoSearchExtras.Description ); foreach (Photo item in photos) { item.Title = getTitle(item.Title, language); item.Description = getDescription(item.Description, language); } return photos; }
Не сложнее выглядят модели для последних публикаций Twitter и оценок на фильмы с Kinopoisk.
Если вы обратили внимание — метод возвращает названия и описания фотографий на разных языках.
Называть фотографии для своих или на английском?
Был у меня такой вопрос некоторое время назад. Я решил, что буду дублировать названия на русском и английском, разделяя их вертикальной чертой |. Теперь такое именование стало возможным использовать на сайте лучшим образом — если посетитель по умолчанию использует Русский в настройках браузера — показывать ему родные названия, иначе английские. В отличие от сайтов фотохостинга на моем сайте это будет выглядеть естественно, без всяких разделительных палок.
В MVC есть механизм фильтров, которые применяются ко всем или отдельным запросам. Для этой задачи был реализован фильтр LocalizationAware, который будет отрабатывать на запросах к основным страницам сайта и выставлять нужную языковую культуру в зависимости от настроек браузера:
public class LocalizationAwareAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { var httpContext = filterContext.HttpContext; string language = "en"; HttpCookie langCookie = httpContext.Request.Cookies["lang"]; if (langCookie == null) { if (httpContext.Request.UserLanguages != null && httpContext.Request.UserLanguages[0].IndexOf("ru", StringComparison.OrdinalIgnoreCase) != -1) language = "ru"; httpContext.Response.AppendCookie(createCookie(language)); } else if (langCookie.Value == "ru") language = "ru"; Thread.CurrentThread.CurrentUICulture = CultureInfo.CreateSpecificCulture(language); } public static HttpCookie createCookie(string language) { HttpCookie cookie = new HttpCookie("lang", language); cookie.Expires = DateTime.Now.AddYears(1); return cookie; } }
Конечно же, есть возможность поменять язык, если выбор по умолчанию не устраивает:
public ActionResult setLanguage(string id) { id = id == "ru" ? "ru" : "en"; Response.AppendCookie(LocalizationAwareAttribute.createCookie(id)); return Redirect("/"); }
Помимо названий фотографий, все элементы страницы — заголовки и тексты теперь тоже автоматически переключаются на выбранный язык благодаря выставленной языковой культуре и наличие в проекте двух ресурсных файлов — Resources.resx и Resources.ru.resx. Что-то кодировать дополнительно для этого не потребовалось — этот функционал встроенный.
Быстродействие и кэширование
Плюсы сетевых сервисов очевидны, однако эти преимущества будут сведены на нет, если отклик будет небыстрым, особенно в пиковые нагрузки. Очевидно, ответы от Flickr, Twitter и других систем требуется кэшировать.
Сделать это просто — достаточно подключить соответствующий фильтр, указав перед методом атрибут OutputCache.
Для формирования страницы у меня используется несколько Actions — основной запрос (Index, например) и несколько ChildActions для рендера частей страницы, содержащих ответы от разных внешних систем. Для каждого типа контента можно использовать свою продолжительность хранения в кэше, в зависимости от динамики изменений.
[LocalizationAware] [OutputCache(Duration = 20 * 60, Location = System.Web.UI.OutputCacheLocation.Server, VaryByCustom = "lang")] public ActionResult Index() { return View(bag); } [ChildActionOnly] [OutputCache(Duration = 10*60*60)] public ActionResult GetProjects(string language) { HomeViewBag bag = new HomeViewBag(); FlickrContext flickr = new FlickrContext(); bag.FlickrProjects = flickr.GetProjects(language); return View(bag); } [ChildActionOnly] [OutputCache(Duration = 60 * 60)] public ActionResult GetLastPhotos(string language) { HomeViewBag bag = new HomeViewBag(); FlickrContext flickr = new FlickrContext(); bag.LastPhotos = flickr.GetLastPhotos(5, language, 1).ToList(); return View(bag); }
ASP.NET MVC сам разделяет закэшированные копии результатов в зависимости от значений входных параметров. Для ChildActions входные параметры в виде языка явно определены, однако для основных запросов потребуется разделять кэш в зависимости от языка сессии и этот параметр явно не присутствует в параметрах. Это реализуется с помощью атрибута VaryByCustom = «lang» и специального метода GetVaryByCustomString. Теперь в кэше не должно быть наложений.
public override string GetVaryByCustomString(HttpContext context, string arg) { if (arg.ToLower() == "lang") { string langParam = context.Request.QueryString["lang"]; HttpCookie langCookie = context.Request.Cookies["lang"]; if (langParam != null) return langParam == "ru" ? "ru" : "en"; else if (langCookie != null) return langCookie.Value == "ru" ? "ru" : "en"; return ""; } return base.GetVaryByCustomString(context, arg); }
Дизайн и фотогалерея
Т.к. задача изначально ставилась — сделать сайт самостоятельно, а сам я совсем не дизайнер, было сразу решено сделать вид сайта максимально простым и ограничиться выразительными способностями CSS3 и HTML5. Тем более, что на фотосайте основной акцент должен идти на фотографии и их подачу.
Поэтому я поискал доступные для использования галереи и остановился на стильном решении Galleria. Галерея написана на jQuery, имеет свой API, базовая редакция, достаточная для расширения — бесплатна и доступна для использования. То, что нужно.
Помимо незначительных корректировок в модуль инициализации галереи добавил свои элементы навигации и интеграцию с соц сетями:
this.append({ 'stage': ['closeBG', 'socialBG'] }); this.$('socialBG').html('<div id="div-fblike"></div><div id="div-twitter"></div>'); this.$('closeBG').bind("click", function (e) { window.location = "/"; });
Наполнение галереи фотографиями выглядит как заполнение массива в JSON формате данными, полученными из FlickrModel.
Формирование JSON в Controller:
private string getJSON(List<Photo> list, string p) { List<PhotoJSON> json = new List<PhotoJSON>(); foreach (Photo pht in list) json.Add(new PhotoJSON { thumb = pht.ThumbnailUrl, image = pht.LargeUrl, title = pht.Title, description = pht.Description, link = pht.WebUrl, url = Settings.Default.SiteURL + Url.Action("Gallery", new { controller = "Home", id = pht.PhotoId, photoset = p }) }); JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(json); }
JavaScript во Viewer:
var data = @Html.Raw(Model.PhotosJSON); Galleria.loadTheme('/galleria/themes/bongiozzo/galleria.bongiozzo.js'); Galleria.run('#galleria', { show: @Model.IndexOfCurrentPhoto, transition: 'slide', initialTransition: 'fade', dataSource: data });
Вешаем твиты и лайки
На событие переключения фотографии в галерее вешаем обновление кнопок Facebook и Twitter.
this.bind("image", function (e) { document.title = galleria.getData().title; $('#div-fblike').html('<fb:like href="' + data[galleria.getIndex()].url + '" layout="button_count" send="false" show_faces="false" colorscheme="dark" />'); $('#div-twitter').html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + data[galleria.getIndex()].url + '" data-text="' + galleria.getData().title + '">Tweet</a>'); try { FB.XFBML.parse(document.getElementById('div-fblike')); twttr.widgets.load(); } catch(ex) {} });
И не забываем заполнить OpenGraph теги для корректного отображения в Facebook и других OG совместимых системах.
<meta property="fb:app_id" content="@Model.fb_app_id"/> <meta property="og:title" content="@ViewBag.Title" /> <meta property="og:site_name" content="@Resources.Resources.Title" /> <meta property="og:type" content="website" /> <meta property="og:url" content="@Model.SiteUrl@Url.Action("Gallery", new { controller = "Home", id = Model.GalleryPhotos[Model.IndexOfCurrentPhoto].PhotoId, photoset = Model.PhotosetId})" /> <meta property="og:image" content="@Model.GalleryPhotos[Model.IndexOfCurrentPhoto].SquareThumbnailUrl" /> <meta property="og:description" content="@Html.Raw(Model.GalleryPhotos[Model.IndexOfCurrentPhoto].Description.Replace("\n","<br/>"))" />
Где хостить проект?
К моменту когда фотосайт можно было запускать, очень кстати стал доступен облачный хостинг Windows Azure с 10 бесплатными Shared сайтами. Есть отдельная стоимость за базу данных и траффик, однако, учитывая, что базы данных у меня нет и сами фотографии хранятся на Flickr, а, соответственно, нет и траффика — хостинг видится практически бесплатным. При этом, в случае c Azure, у меня нет вопросов касательно качества и доступности сервиса, что немаловажно. Управление сервисом понятное и простое — перед Azure я рассматривал хостинг от других провайдеров и это особенно бросилось в глаза на контрасте запутанного интерфейса, переписки и общения по телефону со службами поддержки.
Есть, к сожалению, одно НО — нельзя привязать свое доменное имя к этому Shared сайту. Для тех, кому собственное доменное имя пока не сильно нужно и устраивает URL типа bongiozzo.azurewebsites.net — это, действительно, оптимальный вариант.
Однако, есть надежда, что это временное ограничение для Shared сайтов. Поэтому пока я перевел сайт в режим Reserved, в котором такую привязку сделать можно. В любом случае пока работает 90 дневный Trial и у меня есть MSDN подписка с включенной предоплатой определенного количества сервисов Azure.
Выйдет следующая версия Azure Web Sites — буду смотреть, возможно переведу на минимальный хостинг Infobox.ru, Parking.ru и т.д., или XS экземпляр облачных служб, а пока работает, работает отлично и денег не стоит.
В качестве заключения
- Проект оказался несложным — в самый раз для знакомства или разминки. Ушло с десяток вечеров на знакомство с ASP.NET MVC 4, CSS3, jQuery и Azure;
- Исходники можно взять здесь — bongiozzo.codeplex.com;
- Буду рад вопросам, конструктивным пожеланиям и комментариям — @bongiozzo;
