Похоже, моя сестра в настоящее время является моей самой большой музой для побочных проектов. Именно благодаря ей я создал Neule.art, о котором вы можете прочитать в статье «Как я создал Neule.art».
Некоторое время назад она спросила меня, могу ли я создать приложение для гостевой книги для вечеринки, которую они проводили со своими друзьями. Идея была проста — должна быть возможность добавить фотографию, немного текста и имя (имена) отправителя (отправителей). Они пытались найти готовое приложение, но у каждого из них возникли проблемы.
Я также знаю по опыту, что подобные приложения могут быть… как бы это сказать… не очень хорошими с точки зрения удобства использования. Например, никто не хочет скачивать приложение на одну ночь, чтобы иметь возможность сделать одну-две фотографии. Никто не хочет создавать аккаунт на одну ночь (а потом забыть, что он у него есть).
Поэтому я хотел попробовать, смогу ли я создать достаточно простое веб-приложение, не требующее аккаунта. В этой статье я не буду делиться кодом этого приложения. Это было немного халтурно, поскольку приложение должно было работать только в течение одной ночи. Да и я немного торопился. Однако я поделюсь некоторыми уроками, полученными при создании этого приложения. Давайте сначала посмотрим, что из себя представляло приложение.
Приложение «Гостевая книга
Приложение для гостевой книги состояло из двух страниц: Вход, где было одно поле ввода для ввода пароля, и страница для записей в гостевой книге. Кроме того, имелся модальный экран для добавления новой записи. Это была форма с возможностью сделать фотографию (поле ввода типа файл с accept="image/*" для открытия камеры) и добавить имена и сообщение.
Что касается технического стека, я использовал NextJS с TypeScript, GraphQL и GraphCMS (в то время они сменили название сразу после завершения проекта на Hygraph) для CMS. Что касается фотографий, я хранил их в ведре AWS S3, а их URL — в CMS.
Я уже работал со всеми другими технологиями, но AWS была чем-то новым. Тем не менее, я был уверен, что поскольку хранение вещей в ведрах AWS S3 — это довольно распространенный сценарий использования, а React так популярен, должно существовать простое решение для загрузки файлов в ведра S3 из приложений React. Оказалось, что оно есть — но загрузить фотографии оказалось не так просто. Это подводит нас к первому усвоенному уроку.
Где-то всегда есть опечатка
Как уже упоминалось, это был мой первый опыт работы с AWS. Но я слышал истории (в основном о том, как кто-то забывал что-то выключить и получал астрономический счет, когда осознавал это на следующий день) — и я был готов к проблемам.
Я последовал нескольким руководствам по настройке ведра AWS S3, и, к моему удивлению, это оказалось просто. Проблемы начались, когда я попытался загрузить фотографию в ведро. Я попробовал несколько пакетов и столкнулся с проблемами CORS, которые не мог решить.
Я не понимал, почему, и уже был готов бросить разработку программного обеспечения, проведя пару дней, биясь головой о стену из-за этой проблемы. Но в конце концов я ее решил.
Причина? Опечатка в имени ведра в коде.
Следующий твит очень связан с этой ситуацией.
Eevis Panula@eevispanulaОказывается, в коде в имени bucket вместо ‘-‘ было ‘_’, и поскольку он не был найден, у него не было правильной CORS-конфигурации🤦🏻♀️.09:42 AM — 09 Jul 2022
Netlify, изображения NextJS и ориентация
Еще одна проблема, с которой я столкнулся (гораздо более незначительная, чем проблемы CORS), была связана с компонентом NextJS Image и Netlify. Я планировал использовать Netlify для хостинга, и я почти закончил. Я развернул приложение и отправил его на тестирование.
Оказалось, что Netlify по какой-то причине удалил данные EXIF из изображений. Некоторые фотографии были странно повернуты. Я нашел несколько обсуждений, где (если я правильно помню) команда подтвердила, что именно это может произойти. Во время написания этого сообщения в блоге я искал проблемы/посты на форуме/все, что я читал, но ничего не смог найти. Поэтому я не могу подтвердить это.
Я бы с удовольствием решил эту проблему каким-нибудь элегантным способом. Однако на тот момент у меня было не так много времени, чтобы закончить приложение. Поэтому я решил использовать Vercel для хостинга — образы NextJS хорошо с ним сочетаются, поскольку именно эта компания стоит за NextJS.
Простые вещи проходят долгий путь
Иногда нам нужно напоминать себе, что простые вещи делают долго. Когда мы создаем приложения и сайты, это не всегда должно быть что-то сверхсложное и с множеством функций.
Как я уже говорил, это приложение должно быть максимально простым. Оно стало ответом на мое (и других людей) недовольство доступными приложениями для гостевых книг, которые требовали либо установки приложения, либо учетной записи (или и того, и другого). И оно выполнило то, что должно было: Люди могли оставлять записи в гостевой книге для хозяев.
Я не говорю, что это приложение готово к распространению, но оно было бы хорошей отправной точкой, если бы у меня было время сделать его более настраиваемым. Или открыть исходный код, потому что сейчас кодовая база выглядит так, как будто я собрал ее за пару дней. Именно так я и поступил.
Я стараюсь напоминать своим подопечным и всем, кто обращается ко мне за советом, что при приеме на работу лучше иметь готовое простое приложение, чем большое, находящееся в процессе разработки. Простое приложение всегда можно улучшить и сделать следующие шаги, но я стараюсь подчеркнуть, что хорошо, когда MVP закончено.
Выход из технологического пузыря приносит пользу
Четвертая вещь, о которой я хочу рассказать, — если вы обычно проводите время с разработчиками (как я), попробуйте иногда показывать свои проекты кому-то вне этого пузыря. Это может действительно повысить вашу уверенность.
Когда я пришел на вечеринку и поговорил с одним из ведущих, это помогло мне вспомнить, что то, что я могу сделать, — это очень много. Если я показываю свои проекты кому-то, кто разбирается в кодинге, я много думаю о том, что могло бы быть лучше, и об улучшениях. Пример: я не хочу делиться кодом с вами, мой читатель.
Еще один человек, на которого я могу положиться, чтобы напомнить мне об этих моментах, — моя сестра. Мне нравится ее энтузиазм, когда я показываю ей что-то, что я написал. Так было с тех пор, как я начал учиться кодить, и я ценю ее за это 💖.
Подведение итогов
Было весело создавать проект для чьего-то использования. Несмотря на то, что пришлось решать некоторые проблемы, я горжусь собой. Я горжусь тем, что я создал это приложение, и оно было пригодно для использования. Я также горжусь тем, что решил эти проблемы.
Есть ли у вас приложения/сайты, над которыми вы работаете? Или вы что-то закончили в последнее время?
Ссылки
- Neule.art
- Запись в блоге «Как я создал Neule.art».
- Ссылка на твит