Цели:

  • Особенности дизайна и архитектуры во внешнем и внутреннем интерфейсе
  • Общайтесь и сотрудничайте в технической среде
  • Интеграция JavaScript и API
  • Проблемы отладки в проектах малого и среднего размера
  • Создание и итерация MVP проекта

Проблема:

NBHDesign — это бутик-фирма графического дизайна, базирующаяся в Мельбурне, штат Виктория, без действующего веб-сайта. Клиент запросил простой веб-сайт, на котором показано, почему потенциальные клиенты должны использовать NBHDesign для своих нужд в дизайне. Это должно быть в форме портфолио, демонстрирующего предыдущую работу, включая ленту в социальных сетях, список доступных / потенциальных услуг и способ прямой связи с NBHDesign. Клиент запросил веб-сайт, который работает и загружается быстро.

Решение:

Одностраничное приложение (один HTML-файл без перенаправлений) должно быть создано и оформлено так, чтобы сократить время загрузки при навигации по веб-сайту. Прямая трансляция постов в социальных сетях будет отображаться на веб-сайте под портфолио предыдущих работ. Канал социальных сетей будет получать доступ к API Instagram и отображать изображения Instagram клиентов на странице. Приложение будет содержать базовую контактную страницу с адресом электронной почты для связи с NBHDesign. Также на странице будет представлен обширный список доступных услуг.

Для этого проекта JavaScript я воспользовался этой возможностью, чтобы создать один из моих побочных проектов. NBHDesign нужен веб-сайт, который будет ссылаться на их ленту в Instagram и отображать эти изображения на странице, мне нужно было создать приложение, которое использовало бы API и JavaScript, HTML и CSS. Два зайца, один камень.

Я начал с довольно простого дизайна и стандартного формата сайта. В инструкциях конкретно упоминается «одна страница» и никаких перенаправлений. Обычно и простой веб-сайт HTML будет иметь несколько файлов HTML и ссылок, которые ведут на следующую страницу, которая будет содержаться в файле HTML. Поэтому, чтобы избежать перенаправлений и множества HTML-файлов, мне пришлось бы полагаться на свои навыки работы с DOM в JavaScript.

На самом деле это было относительно простое решение. Весь HTML-код для разных «страниц» записывается в файл index.html с назначенными соответствующими атрибутами. Это делает манипуляции с DOM довольно простыми. Код для каждой кнопки навигации переключает класс каждой выбранной страницы со скрытого на видимый, а все невыбранные кнопки снова становятся скрытыми. С CSS это был просто случай display: hidden; и «страница» исчезает. О стилях позаботились в index.css, и в этом нет ничего необычного. Самым сложным было заставить список сервисов красиво отображаться на странице. Мне все еще нужно проработать дисплей мобильного устройства, над которым я буду работать вне этого проекта.

Чтобы отобразить ленту instagram, требуется немного работы и несколько шагов по работе с сайтом facebook для разработчиков. Тем не менее, на этом веб-сайте есть несколько довольно простых инструкций, и если вы внимательно их прочитаете, это на самом деле очень просто. Одна проблема, с которой я столкнулся, заключалась в том, что стандартные токены доступа API Facebook выдаются только на один час. Это требует дополнительного шага, но на самом деле токены могут быть продлены до 60 дней, если срок их действия еще не истек. Как только этот токен получен, это просто стандартный запрос на выборку для отображения изображений из API на странице. Что касается токенов, я потратил огромное количество времени, пытаясь найти способ безопасного хранения токена доступа в базе данных (частной) на размещенном сервере (hostinger, частный), но это победило меня. Это похоже на уровень знаний, которого у меня в настоящее время нет, поэтому я решил создать фальшивую учетную запись Instagram и использовать ее для работы через Facebook, чтобы разработчики могли получить токен доступа. Как только я получу лучшее практическое знание баз данных и языков, необходимых для передачи информации, хранящейся там, во внешний интерфейс для использования в таких вызовах, как выборка, я закончу страницу портфолио и контактную форму. Хотя я думаю, что веб-страница выглядит лучше без контактной формы…

Контактные формы…. Я долго работал над контактной формой, но в конце концов отказался от нее. Это требует некоторых манипуляций с сервером, которые в настоящее время выходят за рамки моего набора навыков и отнимают слишком много времени. Итак, простой mailto: выполняет работу до тех пор, пока я не смогу работать с контактной формой, которую я пока прокомментировал.

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