Учебный проект pivo-moscow
Добрый день, коллеги! Сегодня начинаю учебный (в том смысле, что сам учусь) проект на next.js и приглашаю заинтересованных присоединяться - https://github.com/linklib/pivo-moscow Суть проекта: сделать сайт на базе API pivkarta.ru. В результате должно получиться: сайт-каталог с пивными заведениями Москвы с ассортиментом, данными о пиве. Все это добро должно фильтроваться и до кучи отображаться на карте.
Как будет процес обучения выглядеть?
Олег, приветствую! Пока видится так: - здесь обсуждаем текущую задачу по проекту, которую решаем; - ищем оптимальное решение; - внедряем в проект; - смотрим, что вышло и переходим к следующей задаче. Есть идеи как усилить процес - пиши)
Дима, успехов в начинаниях! :) В свою очередь добавлю, что этот проект для обучения современным технологиям очень годится, потому что так же используется GraphQL API https://pivkarta.ru/api/ и здесь уместно все то же самое, что я и записывал в одном из первых видео https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs Так что тоже всем советую поиграться. Задачи по объему совсем небольшие, а знания будут получены очень полезные.
Николай, спасибо большое!
Не за что! :)
Дима, ты вылил в гитхаб проект с локала как есть, и потерялась всякая связь с исходным проектом https://github.com/prisma-cms/nextjs Сделай следующее: 1. Удали этот проект (в настройках в самом низу страницы есть). 2. Перейди на https://github.com/prisma-cms/nextjs и сделай с него клон (fork). 3. Переименуй свой форк (так же в настройках есть). 4. Вылий с локала в него (коммиты должны залететь без проблем).
Есть, сделал! Ссыль та же.
Вот. Теперь можно посмотреть что было добавлено, чтобы заготовка заработала с новым API-сервером и появилась страница списка пива https://github.com/linklib/pivo-moscow/commit/e2787bf1b338e1342f4ac22a7279f3131456b7cd И можно в целом сравнить два репозитория https://github.com/prisma-cms/nextjs/compare/master...linklib:master А можно посмотреть что нового в текущий момент есть в заготовке по отношению к твоему проекту https://github.com/linklib/pivo-moscow/compare/master...prisma-cms:master
И все-таки накосячил где-то... Закомитить локальную версию не получилось и я склонировал новый репозиторий, закинул туда из архива pages/ и src/ и потом уже комит сделал. Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается GraphQL на незнакомые type Beer, Place и так далее. Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?
Дима, тема интересная) Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке. Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач.
Олег, должно на днях устаканиться) И похоже именно в проекты тема переедет!
Доброго времени суток Дмитрий! С удовольствием в ближайшее время присоединюсь к вам, в работе по созданию проекта!
<< Закомитить локальную версию не получилось Вот тут надо было сразу задавать вопросы что не так. Вероятнее всего, у тебя при пуше ошибка возникла вот такая: Это все потому что в исходный бранч уже прилетели новые коммиты, и твоя локальная версия просто отстает от нее. Фиксится просто: надо скачать обновления на локал и все. git pull origin master А после опять выливаем. git push origin master И все ОК. Вылил сюда: https://github.com/Pivkarta/nextjs Можешь от него по той же схеме ответвиться. Или в этой сделать себе собственную ветку и сливать потом в мастер. Так будет даже правильней.
<< Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается GraphQL на незнакомые type Beer, Place и так далее. Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать? Если показывает, что надо, значит так и есть. GraphQL не знакомые типы - это, я так понимаю, в VSCode? Расширение? Практически всем GraphQL-расширениям надо указывать путь к схеме. Иначе откуда они узнают о типах? Смотри доку своего расширения и укажи путь до схемы src/modules/gql/generated/schema.json Или пока забей, пока я не выберу какое-то боле менее популярное расширение и не напишу доку. А в целом по поводу схемы и базы: выполнить надо 3 шага: 1. Убедиться, что есть файл .env и в нем прописан корректный адрес API-шлюза В твоем случае это API_ENDPOINT=https://pivkarta.ru/api/ 2. Выполни генерацию типов yarn generate:types Должно быть так: NODE_PATH=. ts-node -P tsconfig.server.json src/modules/gql/cli/generateTypes/run ✔ Parse configuration ✔ Generate outputs ✔ Parse configuration ✔ Generate outputs ✔ Parse configuration ✔ Generate outputs (Если проект пустой и еще нет в проекте пользовательских graphql-запросов, то будет только 4 строчки) 3. Проверь TS-типы yarn types Тут просто не должно быть ошибок, результат типа такого: Если все эти шаги ОК, значит все ОК.
<< Дима, тема интересная) Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно. В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке. Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач. Олег, ты прям как в воду смотришь :) Только вчера Диме говорил, что буду дописывать функционал обсуждений в задачах :) Постараюсь сегодня сделать.
Николай, приветствую! Спасибо!! Сергей: рад!!
Не за что!
Николай, форкнул и... где-то пропускаю важное 1. git clone https://github.com/linklib/pivo-moscow.git 2. yarn install 3. Поставил в конфиг https://pivkarta.ru/api/ 4. yarn generate:types Отдал yarn types: yarn run v1.10.1 $ tsc --pretty --noEmit Done in 4.79s. 5. yarn build 6.yarn start В терхминале без ошибок, а в консоли хрома - куча VM308 _app-a0194a063b3b1d8078bb.js:1 WebSocket connection to 'ws://localhost:3000/api/' failed: Error during WebSocket handshake: Unexpected response code: 308 Что это может быть?
Да все ОК у тебя. Просто websocket не умеет в ws://, умеет только в wss:// Это по соображениям безопасности. Не обращай внимания. Позже рассмотрим этот момент, сейчас он для нас не критичен. На боевом сайте, если работает на https://, автоматом включается wss:// и все ОК.
Тогда какая-то друшгая проблема. Вношу изменения в код: Например <div>Main Page 111111</div> в MainPage/index.tsx - изменения появляются только после yarn build yarn start
Алёша :) Логично. Потому что ты запускаешь боевую версию, которую, в свою очередь, надо сначала билдить. А чтобы работало налету (hat reload), надо запускать yarn dev. И я тебе это тоже не раз говорил. А ты не записал.
Ъ.... Поздравляю Шарик, ты - балбес...
Задача 1. Вывести на страничке пива: название пива, описание, регион, производителя и логотип. Так же нужно сформировать URL ЧПУ и ссылку на источник. На текущий момент в контенте выводится id, url формируется по id. pages/beers/[id].tsx
Дима, задачи в комментах пока не создавай. Я готовлю под это функционал.
Принято.
Николай, привет! В каком виде выкладывать полезную информацию, как думаешь? Например, как сделать простую страничку About (в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow). А вот с получением данных для страницы пива пока разобраться не получается)
Дима, привет! Сегодня точно выкачу топики с привязкой к задачам, вот туда и сможешь вылить. Логично в проектах ставить задачи типа "Сделать страничку О нас" и в нем написать топик и указать коммит. << в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow Один пуш не должен прилетать и туда и туда. Я вижу коммит в linklib/pivo-moscow, но не вижу в Pivkarta/nextjs, как, в принципе, и должно быть.
Все понял, спасибо!