Como usar NextJS, TypeScript, Tailwind e OneEntry CMS para construir uma loja de comércio eletrônico 🛒👨‍💻

Introdução Este é um artigo de parceria patrocinado pela . OneEntry CMS Construir um aplicativo de comércio eletrônico costuma ser uma tarefa desafiadora. Com tantas alternativas disponíveis, não é fácil escolher uma pilha de tecnologia que atenda aos requisitos do projeto, às necessidades de escalabilidade e à sustentabilidade a longo prazo. Outro ponto crucial é que os projetos de comércio eletrônico lidam com muitos dados e operações CRUD. Criar um sistema back-end sólido, escalável e seguro pode levar muito tempo, mesmo para os desenvolvedores mais experientes. Escolhi uma pilha de tecnologia baseada em NextJS, TypeScript, Tailwind CSS e OneEntry CMS. Nós mesmos construiremos um projeto prático de comércio eletrônico para ver como ele funciona em conjunto e como pode ser usado para simplificar o gerenciamento de conteúdo. O código deste projeto estará disponível no . repositório GitHub A escolha da pilha de tecnologia uma estrutura React para construção de aplicativos web rápidos e eficientes, que vem com recursos como renderização de cliente e servidor, busca de dados, manipuladores de rota, middleware, otimizações integradas e muito mais. NextJS é adiciona digitação estática ao JavaScript, o que torna mais fácil detectar e corrigir erros em projetos escalonáveis como comércio eletrônico. Ele também aumenta a produtividade por meio de recursos como preenchimento automático e assistência à refatoração. TypeScript acelera a parte de estilo dos aplicativos da web, permitindo que os desenvolvedores estilizem os elementos dentro da marcação sem a necessidade de alternar entre arquivos CSS externos e criar os nomes de classe para cada um. Tailwind CSS é um sistema de gerenciamento de conteúdo headless com uma interface fácil de usar, back-end facilmente escalonável, API rápida e documentação clara para aumentar sua produtividade na criação de conteúdo de site e experiência de gerenciamento. OneEntry CMS Conteúdo e Design A página de destino exibirá o título do título, listará os recursos da loja e incluirá a imagem principal. A primeira seção da loja será dedicada ao Vestuário. A segunda seção da loja incluirá o Gear. Cada um dos itens terá uma página de visualização individual com detalhes. Os itens que já estão no carrinho terão a opção de removê-los. O carrinho listará todos os itens selecionados e calculará o total. Criar projeto OneEntry Primeiro, o usuário precisará se inscrever em uma nova conta. Para fazer isso, navegue até a página inicial do OneEntry e através de sua conta de e-mail. cadastre-se Depois disso, e você será direcionado para o painel do OneEntry. faça login Comece criando um novo projeto. Você receberá o código gratuito para usar o plano de estudos por um mês. Você terá a oportunidade de ativá-lo durante o processo de criação do projeto. A criação do projeto levará alguns minutos. Quando estiver pronto, o status do projeto mudará para “Em funcionamento” e o indicador de status ficará verde. Criando as páginas Após a criação do projeto, você receberá um e-mail com dados de login para acessar seu portal CMS para criar e armazenar os dados do aplicativo. Após o login, você poderá criar sua primeira página. Navegue até Gerenciamento de Conteúdo, clique em Criar uma nova página e preencha todos os dados necessários - tipos de páginas, título da página, ULR da página e nome do item de menu. Todos os dados são salvos automaticamente ao entrar. Crie 4 páginas diferentes para Casa, Roupas, Equipamentos e Carrinho. Depois de criadas, as páginas deverão ficar como na imagem abaixo. Criar atributos A seguir, precisamos criar a estrutura de dados que iremos armazenar. No OneEntry CMS, isso é conseguido criando os atributos para os dados. Navegue até Configurações e escolha Atributos no menu horizontal. Crie um conjunto de atributos para a página inicial fornecendo o nome, o marcador e o tipo: Depois de criado, ficará como na imagem abaixo: Da mesma forma, vamos criar dois conjuntos de atributos separados para roupas e equipamentos. Depois de criado, o resultado deve ser semelhante ao da imagem abaixo. Agora, vamos definir atributos específicos para cada conjunto. Com base no conteúdo que incluímos anteriormente no wireframe da seção Home, queremos exibir o título, a descrição e a imagem. Clique no item de engrenagem para Home e crie os seguintes nomes de atributos, marcadores e tipos de atributos conforme mostrado na lista abaixo. Agora volte e clique no ícone de engrenagem para Roupas. Os atributos desta página serão um pouco diferentes, pois queremos exibir o título, subtítulo, descrição, imagem e preço do produto. Esta é a aparência da estrutura de atributos: A seguir, faça o mesmo para a página Gear, que usará a mesma estrutura: Adicionar conteúdo Nesta fase do projeto já definimos a estrutura do conteúdo e estamos prontos para começar a criar o próprio conteúdo. Navegue até a seção Gerenciamento de conteúdo onde você criou anteriormente todas as páginas do site: Clique no botão de edição para Home. Depois disso, clique na aba Atributos no menu Horizontal: Selecione Home para o conjunto de atributos. Isso carregará todos os atributos que criamos anteriormente em Configurações da página inicial. Agora preencha alguns dados de amostra que deseja exibir na página inicial. Agora, vamos adicionar algum conteúdo para nossas páginas de Roupas e Equipamentos. Como selecionamos o tipo de página como Catálogo, selecione Catálogo no menu esquerdo e ambas as páginas deverão estar visíveis lá: Agora, clique no ícone Adicionar para Roupas e adicione alguns itens. Primeiro, adicione o cabeçalho do produto que deseja adicionar. Agora mude para a guia Atributos, selecione Roupas para o Conjunto de atributos e preencha os dados necessários. Volte ao menu Catálogo e mais alguns itens para roupas e equipamentos. Para nosso aplicativo de demonstração, adicionei 4 itens conforme mostrado na captura de tela abaixo: Crie um token de acesso à API Todos os dados criados no OneEntry CMS estão protegidos, portanto teremos que criar um token privado para podermos acessá-los. Para fazer isso, navegue até Configurações e selecione Tokens de aplicativo. Insira o nome do aplicativo e a data de expiração e clique em Criar. Isso irá gerar uma chave de API exclusiva. Clique no ícone de visualização na lista de ações e você poderá ver a chave. Copie-o para a área de transferência, pois precisaremos dele na próxima seção do tutorial. Configurando o projeto NextJS Nesta seção do tutorial, começaremos a trabalhar com o código e configuraremos o projeto NextJS para funcionar com OneEntry CMS. Abra o terminal e execute o comando . npx create-next-app@latest A CLI iniciará o assistente de configuração. Insira o nome do seu projeto e selecione todos os valores padrão conforme mostrado abaixo: Aguarde um minuto para que a configuração seja concluída e você receberá uma notificação quando o aplicativo NextJS for criado. Depois disso, altere o diretório para a pasta recém-criada usando o comando e execute para iniciar o servidor do desenvolvedor. cd winter-sports npm run dev Para acessá-lo, clique no link fornecido no terminal ou abra seu navegador e navegue até manualmente. http://localhost:3000 Você deverá ver a página inicial do servidor do desenvolvedor NextJS: Agora, vamos criar um valor ambiental que precisaremos para nosso aplicativo. Volte para o seu editor de código e crie um arquivo na raiz do seu projeto. .env Cole a chave de API que você copiou anteriormente na área de transferência da seguinte maneira: API_KEY=your-api-code-from-oneentry Isso nos permitirá acessar a chave via assim que fizermos as chamadas de API para buscar os dados do OneEntry CMS. process.env.API_KEY Também precisamos configurar o NextJS, para que possamos incluir a mídia de um domínio externo. Precisaremos disso para acessar imagens do OneEntry CMS. Abra o arquivo na raiz do projeto e edite-o da seguinte forma: next.config.js const nextConfig = { images: { remotePatterns: [ { hostname: "ecommerce.oneentry.cloud", }, ], }, }; module.exports = nextConfig; Por fim, precisaremos redefinir o estilo padrão do Tailwind para o aplicativo, pois escreveremos todos os estilos do zero. Abra o arquivo no diretório localizado na pasta e altere o conteúdo do arquivo para o seguinte: globals.css app src @tailwind base; @tailwind components; @tailwind utilities; Criar tipos Como trabalharemos com TypeScript, precisaremos definir quais tipos de dados usaremos em nossa aplicação. Poderíamos fazer isso dentro das páginas e componentes, mas para manter o código mais limpo e evitar repetições, crie uma nova pasta dentro do diretório . Crie um arquivo dentro da pasta recém-criada e inclua o código: interfaces app data.tsx export interface Product { id: string; category: string; title: string; subtitle: string; description: string; image: string; price: number; } export interface ProductAPI { id: string; attributeValues: { en_US: { producttitle: { value: { htmlValue: string }[]; }; productsubtitle: { value: { htmlValue: string }[]; }; productdescription: { value: { htmlValue: string }[]; }; productimage: { value: { downloadLink: string }[]; }; productprice: { value: number; }; }; }; } export interface Page { pageUrl: string; title: string; description: string; image: string; localizeInfos: { en_US: { title: string; }; }; } export interface PageAPI { attributeValues: { en_US: { herotitle: { value: { htmlValue: string }[]; }; herodescription: { value: { htmlValue: string }[]; }; heroimage: { value: { downloadLink: string }[]; }; }; }; } export interface URLProps { params: { category: string; productId: string; }; } export interface TextProps { className: string; text: string; } Os dados de produtos e páginas terão tipos para sua estrutura de dados de renderização de front-end e a resposta da API por meio do método de busca. Além disso, definimos os tipos de dados para os dados dos parâmetros de URL e o renderizador de texto para os dados recebidos dos campos de entrada de texto no CMS. Criar funções de busca de API Agora, vamos criar algumas funções que usaremos para nos comunicarmos com o OneEntry CMS para buscar os dados das páginas e produtos. Novamente, poderíamos fazer isso em cada arquivo, mas para manter o código mais limpo, vamos criar uma nova pasta dentro do diretório com um arquivo dentro dela: services app fetchData.tsx export async function getPages() { const response = await fetch( "https://ecommerce.oneentry.cloud/api/content/pages", { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } export async function getProducts(category: string) { const response = await fetch( `https://ecommerce.oneentry.cloud/api/content/products/page/url/${category}?limit=4&offset=0&langCode=en_US&sortOrder=DESC&sortKey=id`, { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } export async function getProduct(id: string) { const response = await fetch( `https://ecommerce.oneentry.cloud/api/content/products/${id}`, { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } A função irá buscar os dados sobre todas as páginas que criamos no OneEntry CMS. getPages A função buscará os dados de uma coleção específica de produtos com base no parâmetro . Passaremos o parâmetro quando importarmos a função para a página de produtos. getProducts category A função irá buscar os dados com base no do produto que abrimos. Passaremos o parâmetro quando importarmos a função para a página de visualização de qualquer produto específico. getProduct id Observe que usamos para acessar a chave API que definimos no arquivo anteriormente para autenticar o acesso ao OneEntry CMS. process.env.API_KEY .env Criar funções auxiliares Além disso, enquanto ainda estamos na pasta , vamos criar outro novo arquivo dentro dela chamado que incluirá pequenas funções utilitárias: services helpers.tsx export function calculateTotal(items: { price: number }[]) { return items.reduce((total, item) => total + Number(item.price), 0); } export function boughtStatus(items: { id: string }[], id: string) { return items.some((item) => item.id === id); } export function cartIndex(items: { id: string }[], id: string) { return items.findIndex((item) => item.id === id); } A função irá somar os preços dos produtos adicionados ao carrinho e retornar o valor total. calculateTotal O detectará se os itens individuais na rota de visualização já foram adicionados ao carrinho. boughtStatus O detectará a posição do item na matriz dos produtos que foram adicionados ao carrinho. cartIndex Criando Componentes Navegue de volta para o diretório e crie uma nova pasta de dentro dele. app components Abra a pasta recém-criada e inclua sete arquivos separados nela: , , , , , , . Header.tsx Footer.tsx Text.tsx Card.tsx Preview.tsx Order.tsx AddToCart.tsx Componente de cabeçalho Abra o arquivo e inclua o seguinte código: Header.tsx import Link from "next/link"; import { Page } from "../interfaces/data"; export default function Header({ pages }: { pages: Page[] }) { return ( 🏂 Alpine Sports {pages.map((page, index: number) => ( {page.localizeInfos.en_US.title} ))} ); } Para o cabeçalho, exibimos o nome da empresa e percorremos os links de navegação que obteremos da API assim que o componente for importado para as páginas. Criamos um layout de duas colunas e posicionamos ambos os elementos em lados opostos da tela horizontalmente para obter a aparência típica de navegação. Componente de rodapé Abra o arquivo e inclua o seguinte código: Footer.tsx export default function Footer() { return ( Alpine Sports, Inc. All rights reserved, {new Date().getFullYear()}

); } No rodapé, incluímos o exemplo do nome da empresa e os direitos do conteúdo do ano em curso. Centralizamos o conteúdo e adicionamos algum preenchimento. Componente de texto Abra o arquivo e inclua o seguinte código: Text.tsx import { TextProps } from "../interfaces/data"; export default function Text({ className, text }: TextProps) { return ( ); } O componente Texto renderizará os dados de texto que recebemos do OneEntry CMS e os exibirá corretamente em nosso aplicativo sem tags HTML. Componente de cartão Abra o arquivo e inclua o seguinte código: Card.tsx import Link from "next/link"; import Text from "../components/Text"; import { Product } from "../interfaces/data"; export default function Card({ product }: { product: Product }) { return ( ${product.price}

); } No componente cartão, exibimos imagem, título, subtítulo e preço de cada produto. Mapearemos todos os itens assim que forem importados para as páginas. A imagem será exibida na parte superior do cartão, seguida do título e da descrição, e o preço no canto inferior direito do componente. Componente de visualização Abra o arquivo e inclua o seguinte código: Preview.tsx "use-client"; import Image from "next/image"; import Text from "./Text"; import { Product } from "../interfaces/data"; export default function Preview({ children, productItem, }: { children: React.ReactNode; productItem: Product; }) { return ( {children} ); } O componente de visualização será usado para exibir mais informações sobre cada produto assim que o usuário clicar nele. Exibiremos a imagem do produto, título, preço e descrição. O layout será dividido em 2 colunas, sendo a imagem exibida na coluna da esquerda e o restante do conteúdo na direita. Componente de pedido Abra o arquivo e inclua o seguinte código: Order.tsx "use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import Text from "./Text"; import { calculateTotal } from "../services/helpers"; import { Product } from "../interfaces/data"; export default function Order() { const [cartItems, setCartItems] = useState ([]); useEffect(() => { const storedCartItems = localStorage.getItem("cartItems"); const cartItems = storedCartItems ? JSON.parse(storedCartItems) : []; setCartItems(cartItems); }, []); return ( {cartItems.map((item, index) => ( Price: ${item.price}

))} Total Amount: ${calculateTotal(cartItems)} Proceed to checkout ); } O componente de pedido listará todos os itens que o usuário adicionou ao carrinho. Para cada item serão exibidos imagem, título, subtítulo e preço. Depois que o componente for renderizado, o aplicativo acessará todos os itens atualmente no carrinho, os definirá para a variável de estado e os renderizará na tela por meio do método . cardItems map A quantidade total de itens renderizados será calculada por meio da função , que importamos do arquivo . calculateTotal helpers.tsx Componente AddToCart Abra o arquivo e inclua o seguinte código: AddToCart.tsx "use client"; import React, { useState, useEffect } from "react"; import { boughtStatus, cartIndex } from "../services/helpers"; import { Product } from "../interfaces/data"; export default function AddToCart({ category, id, title, subtitle, image, price, }: Product) { const storedCartItems = JSON.parse(localStorage.getItem("cartItems") || "[]"); const isPurchased = boughtStatus(storedCartItems, id); const indexInCart = cartIndex(storedCartItems, id); const [btnState, setBtnState] = useState(false); useEffect(() => { isPurchased && setBtnState(true); }, []); const handleButtonClick = () => { const updatedCartItems = [...storedCartItems]; if (!btnState && !isPurchased) { updatedCartItems.push({ category, id, title, subtitle, image, price }); } else if (isPurchased) { updatedCartItems.splice(indexInCart, 1); } localStorage.setItem("cartItems", JSON.stringify(updatedCartItems)); setBtnState(!btnState); }; return ( {!btnState ? "Add to Cart" : "Remove from Cart"} ); } O componente addToCart será exibido na página de visualização do produto individual e permitirá ao usuário adicionar o produto ao carrinho de compras. Após a renderização, a função detectará se o produto já foi adicionado ao carrinho ou não. Se não for o botão renderizado, será exibido "Adicionar ao carrinho", caso contrário, será exibido "Remover do carrinho". isPurchased O recurso de clique da função adicionará ou removerá o produto da matriz de itens com base no estado acima. handleButtonClick Criar páginas Por fim, vamos importar os componentes que criamos na seção anterior do tutorial e criar a lógica da página para a aplicação. Pagina inicial Abra no diretório e edite seu conteúdo da seguinte maneira: page.tsx app import Image from "next/image"; import Header from "./components/Header"; import Text from "./components/Text"; import Footer from "./components/Footer"; import { getPages } from "./services/fetchData"; import { PageAPI } from "./interfaces/data"; export default async function Home() { const pages = await getPages(); const getValues = (el: PageAPI) => { const { herotitle, herodescription, heroimage } = el.attributeValues.en_US; return { title: herotitle.value[0].htmlValue, description: herodescription.value[0].htmlValue, image: heroimage.value[0].downloadLink, }; }; const pageContent = getValues(pages[0]); return ( ); } Na página inicial, primeiro chamaremos a função para obter os dados do cabeçalho. getPages Em seguida, usamos a função para buscar os dados da página Hero e, em seguida, transformá-los no objeto para facilitar o processamento. getValues pageContent Em seguida, renderizamos os componentes de cabeçalho e rodapé importados, bem como passamos os valores necessários para o título, descrição e imagem do herói. Página de produtos Crie uma nova pasta no diretório e dentro dela - um arquivo . [category] app page.tsx O uso de nomes de arquivos específicos é importante, pois é isso que o NextJS usa para lidar com rotas e acessar parâmetros de URL. Inclua o seguinte código no : page.tsx import Header from "../components/Header"; import Footer from "../components/Footer"; import Card from "../components/Card"; import { getPages, getProducts } from "../services/fetchData"; import { ProductAPI, URLProps } from "../interfaces/data"; export default async function Product({ params }: URLProps) { const { category } = params; const pages = await getPages(); const products = await getProducts(category); const getValues = (products: ProductAPI[]) => { return products.map((el) => { const { producttitle, productsubtitle, productdescription, productimage, productprice, } = el.attributeValues.en_US; return { id: el.id, category: category, title: producttitle.value[0].htmlValue, subtitle: productsubtitle.value[0].htmlValue, description: productdescription.value[0].htmlValue, image: productimage.value[0].downloadLink, price: productprice.value, }; }); }; const productItems = getValues(products.items); return ( Browse our {category} collection: {productItems.map((product) => { return ; })} ); } Para a página de produtos, primeiro obtemos o parâmetro do URL, que posteriormente passamos para a função , para descrever qual categoria de produtos precisamos buscar com base em qual página do site é visitada. category getProducts Uma vez recebidos os dados, criamos um array de objetos que consiste em todos os atributos necessários para a página para facilitar o processamento. productItems Em seguida, percorremos ele por meio do método e o renderizamos na tela, passando adereços para o componente Card que importamos da pasta do . map component Página de visualização Dentro da pasta , crie outra pasta chamada . [category] [productId] Abra a pasta recém-criada e crie um arquivo dentro dela com o código: page.tsx import Header from "../../components/Header"; import Preview from "../../components/Preview"; import AddToCart from "../../components/AddToCart"; import Footer from "../../components/Footer"; import { getPages, getProduct } from "../../services/fetchData"; import { ProductAPI, URLProps } from "../../interfaces/data"; export default async function Product({ params }: URLProps) { const { category, productId } = params; const pages = await getPages(); const product = await getProduct(productId); const getValues = (el: ProductAPI) => { const { producttitle, productsubtitle, productdescription, productimage, productprice, } = el.attributeValues.en_US; return { id: el.id, category: category, title: producttitle.value[0].htmlValue, subtitle: productsubtitle.value[0].htmlValue, description: productdescription.value[0].htmlValue, image: productimage.value[0].downloadLink, price: productprice.value, }; }; const productItem = getValues(product); return ( ); } Esta página permitirá que os usuários vejam mais detalhes de qualquer produto individual assim que clicarem em seus cartões na página de produtos. Primeiro obtemos o parâmetro do URL, que posteriormente passamos para a função , para especificar qual produto precisamos buscar com base em qual produto é visualizado na página de visualização. productId getProduct Assim que os dados forem recebidos, criamos um objeto que consiste em todos os atributos necessários para serem passados para o componente Preview como adereços. productItem Também obtemos o parâmetro , pois precisamos passá-lo para o componente Adicionar ao carrinho, para que possamos criar um link válido para o item na página do carrinho. category Página do carrinho Por fim, crie uma nova pasta no diretório . cart app Abra-o, crie um novo arquivo dentro dele com o seguinte código: page.tsx import Header from "../components/Header"; import Order from "../components/Order"; import Footer from "../components/Footer"; import { getPages } from "../services/fetchData"; export default async function Cart() { const pages = await getPages(); return ( Shopping cart summary: ); } Primeiro buscamos os dados necessários e depois os passamos para o cabeçalho como adereços. Em seguida renderizamos o componente Header com a navegação, o componente Order que listará todos os itens que o usuário adicionou ao carrinho e também o componente Footer com o nome da empresa e as informações de copyright. Teste Parabéns, você fez um projeto funcional! Primeiro, verifique se o servidor do desenvolvedor ainda está em execução. Caso contrário, execute o comando para iniciá-lo novamente e acesse para visualizá-lo. npm run dev localhost:3000 Seu projeto agora deve ficar assim: Como você pode ver, o conteúdo da seção Home foi obtido com sucesso do conjunto de atributos Home que especificamos nos campos de dados. Além disso, todos os itens do catálogo OneEntry CMS foram obtidos nas seções Roupas e Equipamentos com todas as informações devidamente renderizadas. Os usuários também podem visualizar cada produto separadamente em sua página dedicada, graças ao gerenciamento de rotas e parâmetros do produto NextJS. Além disso, todas as funções e eventos funcionam conforme o esperado, e o usuário pode adicionar e retirar os itens do carrinho de compras, sendo calculado o total. Conclusão Neste tutorial, criamos um projeto de comércio eletrônico que permite aos usuários criar, atualizar e excluir páginas do site e seu conteúdo, bem como gerenciar produtos facilmente com uma interface de catálogo fácil de usar, graças ao . OneEntry CMS O código está disponível no , então fique à vontade para cloná-lo e adicionar mais funcionalidades para atender às suas necessidades. Você pode adicionar mais seções de menu, estender componentes individuais ou até mesmo adicionar mais componentes para implementar novos recursos. GitHub Esperançosamente, isso será útil para você e você terá uma ideia de como usar o OneEntry CMS como uma solução de back-end, como combiná-lo com o front-end do seu aplicativo e como usar os melhores recursos de NextJS, Typescript e Tailwind . Certifique-se de receber os melhores recursos, ferramentas, dicas de produtividade e dicas de crescimento de carreira que descobri assinando ! meu boletim informativo Além disso, conecte-se comigo no , e ! Twitter LinkedIn GitHub Também publicado aqui