Посмотрите мое завершенное приложение на Heroku!
Я почти закончил учебную программу Flatiron School! Одним из моих последних проектов было использование моего существующего приложения Rails и добавление Javascript и AJAX для асинхронного рендеринга страниц. Я пришел в этот проект, чувствуя себя полностью потерянным; Я чувствовал себя неподготовленным. Задача КАЖЕТСЯ сложной на первый взгляд, и в некотором смысле так и есть. AJAX делает очень сложные вещи за кулисами, и я не чувствовал, что разобрался во всех тонкостях, прежде чем приступить к этому проекту. Вначале я в значительной степени полагался на помощь других, но к концу я отлаживал и писал код, как будто это была моя работа (которой она и будет)! Начало всегда самое сложное.
Первое, с чего я решил начать, оказалось и самым сложным; отправка моей кнопки сердца через AJAX. Я использовал значок Font Awesome в качестве кнопки, которая использует классы CSS для отображения своих изображений. У одного было пустое сердце, у другого было черное сердце. Мне нужно было выяснить, как отправить запрос на публикацию, чтобы создать сердце, изменить класс CSS этого сердца, а затем изменить действие над этим сердцем на действие удаления, чтобы, если пользователь щелкнул еще раз, он отправил запрос на удаление. Вероятно, самую сложную ошибку найти и исправить было из-за слушателей. Каким-то образом моя программа прикрепляла несколько прослушивателей событий к кнопкам сердца. Когда я нажимал на один для отправки, я получал ошибку 422, и сердце создавалось после обновления страницы, но изменение в классе сердца не загружалось асинхронно. Моя программа отправляла форму и выполняла создание объекта, но затем пыталась отправить форму СНОВА; который вызвал ошибку из-за проверки, которую я настроил (пользователь может иметь только одно сердце в рецепте, чтобы гарантировать правильное удаление объектов). Чтобы исправить это, в моей функции attachListeners я добавил ‘.unbind(“click”)’ перед установкой собственного события клика, чтобы, если по какой-то причине было добавлено несколько, первое было бы несвязанным, и сработало бы только второе.
Следующим требованием, над исправлением которого я работал, была настройка трех индексных страниц для рендеринга через AJAX. На одной странице были все рецепты, на другой — все рецепты, добавленные в настоящее время в планы питания или «популярные рецепты», а на третьей — все рецепты, которые понравились текущему пользователю. В целом это оказалось гораздо более простой задачей; нужно было просто добавить один и тот же класс к каждой ссылке и заставить их отправить запрос getJSON на сервер. В этом разделе у меня были некоторые проблемы с созданием HTML-версий моих форм rails; особенно с формой сердечка. Мне пришлось создать две разные формы (одну для удаления, другую для публикации) и переключаться между ними в зависимости от того, любит ли текущий пользователь каждый отдельный рецепт. Здесь мне пришлось передать идентификатор текущего пользователя (созданный методом ruby) через тег данных body в HTML, чтобы я мог показывать только те рецепты, которые понравились текущему пользователю, а не все рецепты, которые понравились любому пользователю. Этот текущий идентификатор пользователя пригодился в остальной части моего проекта; Я использовал его несколько раз и ожидаю, что это будет трюк, который я продолжу использовать в других проектах.
Аналогичным требованием была необходимость создания функциональности разбиения на страницы AJAX для списка элементов. Я использовал его на своих страницах с показом рецептов, начиная с любой страницы, вы можете прокручивать рецепты и смотреть на каждый из них. Это была самая простая часть этого проекта; не требовалось создавать HTML-формы или отправлять какие-либо формы! Фу. Все, что мне нужно было сделать, это обновить кнопки на каждой странице, чтобы перейти к следующему или предыдущему рецепту на основе идентификатора рецепта. Чего я не понимал, так это того, что у меня были опечатки в моем файле разбиения на страницы. Из-за одной опечатки нумерация страниц вообще не срабатывала, а когда ее исправили, кнопки-сердечки сломались. Мне пришлось исправить HTML-форму (эти чертовы HTML-формы), но, к счастью, это удалось быстро.
Последним требованием этого проекта было создание отношения «имеет много», отображаемого с помощью AJAX. Я решил добавить комментарии и отобразить список комментариев или новый комментарий с помощью AJAX. Мне пришлось делать этот раздел с нуля, так как у меня еще не было функции комментирования, поэтому я оставил эту часть напоследок. Как только я создал модель комментариев и получил функциональность, работающую только с Rails, я добавил javascript. Я создал объект модели комментария и построил элемент li для каждого комментария. Затем я настроил страницу для отображения всех комментариев, если нажать «Показать комментарии», ИЛИ если пользователь отправляет комментарий. JS сначала создает новый комментарий при отправке, а затем вызывает showComments() для отображения списка. Комментарии отображаются со временем создания, но я не уверен, что мне нравится формат, который я выбрал для использования с объектом javascript Date(), и я могу вернуться позже, чтобы переформатировать его с помощью moment.js.
Я чувствую, что из этого проекта я узнал больше, чем из предыдущих проектов, что, кажется, является закономерностью. В наши дни Javascript является неотъемлемой частью программирования, и я уходил с уроков с чувством, что я был катастрофическим неудачником разработчика. Теперь я чувствую, что понял. Я знаю, что мне еще предстоит многому научиться, когда дело доходит до AJAX и JS, и я действительно хочу больше практиковаться с Fetch.
В целом, урок усвоен; когда я чувствую себя побежденным, мне просто нужно больше кодировать. Так я выздоравливаю.
