Transcription
Сегодня я покажу вам, как мы можем построить веб-сайт электронной коммерции на React с бэкендом на GraphQL, или, вернее, основу для веб-сайта электронной коммерции, потому что при создании веб-сайта электронной коммерции нужно реализовать много вещей, но главное сообщение этого видео — показать, насколько это легко в наши дни. Я хочу, чтобы это видео было очень коротким, и в конце его, после, я полагаю, 15, может быть, 20 минут, у нас будет что-то работающее.
Итак, мы будем использовать React.js на фронтенде и GraphQL на бэкенде. И трюк здесь в том, что на бэкенде, наш GraphQL API, мы не будем создавать его с нуля, пытаясь выяснить все детали, необходимые для создания решения для электронной коммерции. Вместо этого мы будем использовать этот проект под названием Sailor, который является открытым GraphQL API для создания производственных решений для электронной коммерции. И когда я впервые обнаружил этот проект, я был, честно говоря, поражен тем, как легко на его основе что-то построить. У них есть GraphQL API, созданный для контекста электронной коммерции, и вы можете создавать различные пользовательские интерфейсы или другие вещи на его основе, когда вы создаете свой магазин, свою платформу электронной коммерции. И самое замечательное в этом то, что, как я уже сказал в начале, они все продумали.
Итак, у них есть все эти понятия, которые вам потребуются для создания платформы электронной коммерции, и вы можете просто использовать их вместо того, чтобы пытаться сделать это самостоятельно. Таким образом, у вас есть бэкенд, вы можете просто взять этот проект, он написан на Python в Django, и вы можете развернуть его, и тогда у вас будет ваш API, а затем вы можете создать веб-сайт, например, на React, как в этом видео, или, знаете ли, мобильное приложение на Flutter, например, или React Native, чтобы предоставить эту витрину электронной коммерции. Да, давайте посмотрим на это на практике.
Итак, когда вы зайдете на demo.sailor.io, у вас будет пример магазина, знаете, это демонстрационный магазин, и я думаю, он написан на Next.js, поэтому мы также будем использовать Next.js в этом руководстве. Вы можете просматривать различные продукты, вы можете добавлять их в свою корзину, вы можете оформить заказ, и это пример интеграции, и все это работает на GraphQL. Так что у них есть это, и они также предоставляют вам этот демонстрационный GraphQL-конечный пункт, так что вы можете просто использовать его.
Итак, скажем, если я хочу получить некоторые продукты, я могу выполнить этот запрос, и скажем, я хочу только первые 10, и я получаю некоторые продукты. Так что это все, что нам нужно, по сути, чтобы построить витрину, интеграцию, веб-сайт на React поверх этого API. Итак, в этом первом видео я хочу показать вам, как мы можем просто отобразить продукты, а затем, если вы заинтересованы, мы можем с каждым видео добавлять больше функций электронной коммерции, таких как корзина, оформление заказа и все другие подобные вещи.
Итак, давайте начнем просто. Давайте сначала попробуем отобразить продукты в качестве основы для этого решения для электронной коммерции. Итак, я буду использовать для этого Next.js. Итак, давайте просто скопируем эту строку и назовем ее sailor-ecommerce-nextjs и откроем ее в VS Code, и я запущу сервер. Итак, у нас есть этот стартовый экран Next.js, и мы можем начать его настраивать.
Первое, что вам понадобится, это интегрироваться с этим GraphQL-конечным пунктом, который доступен здесь. Итак, мы будем использовать Apollo Client. Я думаю, вы уже знаете, что я не поклонник Apollo, но это самая простая библиотека здесь. Возможно, в будущем я ее изменю, но хорошая сторона Apollo в том, что у них много интеграций, и мы будем использовать некоторые из них, так что с Apollo проще. Итак, давайте добавим Apollo Client, и теперь мы будем использовать приложение, и мы просто обернем все нашим Apollo Provider.
Итак, нам нужен Apollo Provider и наше приложение, которое нужно обернуть внутри Apollo Provider из Apollo Client, и здесь нам нужен клиент. Мы еще не создали его, давайте импортируем Apollo Client сюда и скажем, что это новый Apollo Client. Итак, теперь у нас есть URI, который является этим URL-адресом, который я показал вам в начале, а затем нам нужно также указать кеш, который будет кешем в памяти или чем-то в этом роде. Так что это должно работать. Чтобы сделать это красиво, давайте используем Tailwind CSS.
Итак, я просто освежу свою память, как установить Tailwind с Next.js, но мне нужно использовать yarn, а затем нам нужно запустить это. [Аплодисменты] Итак, теперь давайте просто импортируем Tailwind CSS, Tailwind CSS. Давайте удалим это и запустим наше приложение, чтобы увидеть, работает ли оно. Не удается разрешить GraphQL. Хорошо, давайте установим его. Хорошо, похоже, это работает. Давайте просто проверим. Я думаю, нам нужно указать опцию порта для Tailwind, так что jit работает как ожидается, как будто это должно быть. Я думаю, это все для Tailwind, и теперь мы могли бы попробовать выполнить запрос, GraphQL-запрос, но для этого мы будем использовать эту функцию генерации кода.
Итак, есть этот проект под названием GraphQL Code Generator, и он получает схему, GraphQL-схему и преобразует ее в типы TypeScript. Итак, наша схема — это конечный пункт, который предоставляет схему. Так что, если вы зайдете сюда справа и нажмете на схему, вы увидите все типы, GraphQL-типы, к которым вы можете получить доступ, и их очень много, потому что Sailor занимается созданием решения для электронной коммерции. Так что, знаете ли, есть много вещей, которые можно использовать, и мы хотим иметь эти типы внутри нашего приложения TypeScript.
Итак, мы будем использовать этот GraphQL Code Generator для преобразования этого конечного пункта в файл, файл TypeScript с типами. Итак, прежде всего, давайте установим этот CLI для генерации кода, но прежде чем мы это сделаем, это все еще Next.js, использующий JavaScript. Так что, чтобы использовать TypeScript, нам нужно просто создать tsconfig.json, и теперь, если мы запустим его, мы увидим, что мы не хотим использовать TypeScript, нам нужно добавить некоторые зависимости, и теперь он обнаруживает TypeScript. Next.js достаточно умен, чтобы предварительно настроить это с правильными настройками.
Итак, теперь у нас есть файл TypeScript, и мы можем, например, переименовать здесь, чтобы использовать tsx, запустить его снова, он должен работать как раньше. Да, он работает. Итак, теперь у нас есть приложение TypeScript, и мы можем добавить эту генерацию кода, чтобы она могла преобразовать этот конечный пункт, этот удаленный конечный пункт в файл, который содержит все типы в виде типов TypeScript. Итак, нам нужен CLI для генерации кода GraphQL, а затем несколько плагинов: TypeScript, TypeScript Operations, и поскольку мы используем Apollo, TypeScript, React Apollo, и это должны быть зависимости для разработки.
Хорошо, как только у нас это будет, нам нужно создать файл codegen.yaml. Итак, давайте создадим файл codegen.yaml, и я просто вставлю сюда некоторое содержимое, и давайте быстро пройдемся по нему. Итак, схема находится по этому URL-адресу, это тот же URL-адрес, который у нас есть здесь, в этом playground, тот, который мы можем использовать для выполнения запросов, а затем мы говорим, что наши запросы GraphQL будут расположены в каталоге компонентов, вместе с нашими компонентами React.
И затем мы хотим сгенерировать типы в этом файле и каталоге, сгенерированном с использованием установленных нами плагинов, а затем мы также хотим иметь эту схему в формате JSON, сгенерированную в этом файле в корневом каталоге. Итак, теперь давайте создадим компоненты и, возможно, создадим компонент ProductList. Это будет функция ProductList, и мы вернем эти продукты пока что. И внутри нашего index, давайте, возможно, удалим все это и импортируем, давайте импортируем это. Импортируем ProductList из ProductList. Если я запущу, у нас будет это простое сообщение "Products displayed".
Итак, давайте попробуем отобразить этот список продуктов. Итак, что нам нужно сделать, это нам нужен запрос. Итак, скажем, Latest Products, и это будет GraphQL-запрос, и это просто строка, но поскольку я использую этот комментарий, он будет распознан как GraphQL, так что у нас будет подсветка синтаксиса внутри. Давайте вернемся к playground и скопируем это вот так. Мне интересно, может быть, мы возьмем описание, а также изображение или, скорее, URL миниатюры. Итак, мы получим, знаете ли, URL для каждого продукта. Давайте скопируем это и вставим сюда как наш запрос.
Итак, теперь нам просто нужно сгенерировать эту схему, эти типы из этой схемы. Итак, давайте перейдем к package.json и добавим этот новый скрипт generate, который будет запускать GraphQL Code Gen, тот, который мы установили, указывая на codegen.yaml, который мы создали, и посмотрим, что произойдет. Итак, теперь, если я запущу generate, он сгенерировал эти типы, как вы можете видеть, этот файл довольно большой, но в конце, в конце его, у нас должен быть этот определенный нами запрос, но он как безымянный запрос, что не очень хорошо.
Итак, если я просто назову его и назову его Latest Products вот так, и давайте перегенерируем. Хорошо, теперь, если я вернусь, да, мы здесь, и, как вы можете видеть, теперь у нас есть имя, и у нас есть хук useLatestProductsQuery, что означает, что здесь, в нашем компоненте, мы можем сказать data, loading, error, useLatestProductsQuery, так просто. И тогда мы можем сказать, если loading, мы вернем сообщение loading, если error, пока что мы просто скажем error, может быть, может быть, давайте дадим сообщение, и если у нас есть data, мы вернем его. Мы скажем Latest Products, и это будет data.products.edges или пустой. И здесь давайте удалим это и скажем, давайте сделаем список, le m. На самом деле нам нужен Latest Products.map(product), вот так, и пока давайте просто скажем product, ну, это product.title, а теперь это name, вот так.
Но проблема в том, что у нас здесь node. Так что мы можем сделать, это мы можем сказать node.title, извините, name, и мы можем отобразить имя вот так, а затем нам нужно закрыть это. Да, это должно быть хорошо. Давайте посмотрим, обновим, и вуаля, у нас есть список имен продуктов, которые извлекаются из этого удаленного конечного пункта.
Итак, давайте попробуем, может быть, отобразить, скажем, это может быть h2, и давайте отобразим изображение. Так что это будет source, и, я полагаю, thumbnailURL, и thumbnail здесь. И у нас есть список продуктов. Это довольно круто, да? И это было очень легко интегрировать.
Итак, давайте теперь добавим немного CSS-классов. Итак, давайте сделаем grid, grid-cols, может быть, четыре, gap четыре. Хорошо, и позвольте мне просто вставить блок, чтобы это было приятнее. И нам нужна категория, но мы ее не получаем. Так что давайте скажем description, да, это работает. У нас есть основа для решения электронной коммерции.
Итак, давайте просто немного улучшим его быстро визуально, я имею в виду, используя Tailwind CSS. Итак, мы могли бы вернуться к pages/index.js и здесь мы могли бы сказать min-h-screen и, возможно, bg-gray-100, и в этом случае здесь мы могли бы сказать white. Да, что еще? Может быть, мы могли бы сказать main, и давайте скажем max-w-7xl, и я думаю, нам нужно сделать auto. Я еще не эксперт по Tailwind, но выглядит хорошо.
Заголовок был бы неплох. Итак, давайте сделаем div, который мог бы быть белым с тенью, и внутри мы сделаем, будет ли это работать? Это как бы работает. Мне интересно, если я сделаю class, className, что-то вроде этого, будет ли это работать? Да, лучше. Flex и justify-center. Теперь я не уверен, space-x-8. Нет, может быть, здесь я не хочу тратить слишком много времени на создание Tailwind в этом видео. Я не знаю, как центрировать это здесь. Мы увидим это позже, но, как видите, у нас есть своего рода маленький магазин без корзины, без поиска или чего-либо подобного, но у нас есть API, которое может предоставить нам это.
Итак, я остановлюсь здесь. Если вы заинтересованы, если вы хотели бы, чтобы я создал настоящее решение для электронной коммерции, используя Sailor и React, и, возможно, Next.js, дайте мне знать в комментариях. Да, это было очень просто, очень легко, и спасибо за просмотр. Увидимся в следующем.