Crie um aplicativo Shopify Full-Stack com NodeJS, React e MongoDB

Dê vida ao seu sonho de aplicativo Shopify com NodeJS, MongoDB e muita mágica em JavaScript e CSS

Quando comecei a desenvolver um aplicativo Shopify em junho de 2020, comecei a procurar online por um ótimo exemplo de um aplicativo voltado para o comprador que pudesse ser integrado a um site alimentado pelo Shopify. Depois de ler a documentação do Shopify, descobri que a melhor solução era um aplicativo Proxy. No entanto, não consegui encontrar um repositório Shopify bem implementado que demonstrasse isso. Neste curso, ensinaremos como criar um aplicativo Shopify Full-Stack usando NodeJS, MongoDB e muito JavaScript. Ao longo do caminho, forneceremos código funcional para ajudá-lo a começar a construir seu aplicativo Shopify dos sonhos. Este curso é baseado em dois grandes repositórios do Github: Repo #1: Construa um aplicativo Shopify com Node e React - este é o Demo Repo criado pela equipe de documentação do Shopify. A boa notícia é que o Shopify já criou um tutorial em várias partes em seu repositório NextJS, GraphQL, Apollo, que aborda vários tópicos como Introdução, Configurando seu aplicativo, Incorporando seu aplicativo ao Shopify, Construindo sua interface de usuário com Polaris, Aprendendo a API de administração do GraphQL, Buscando dados com Apollo, Cobrando uma taxa usando a API de faturamento e Ouvindo eventos da loja com webhooks. Repo #2: O Live Social King Repo - O Social King Repo, que é o foco principal deste curso, é construído em cima do Demo NextJS Repo do Shopify mencionado anteriormente. O Social King é um repositório grande e modular com mais de 1.400 commits. Ele inclui recursos como Tradução Multilíngue, Editor de CSS personalizado dentro do aplicativo de administração do Shopify e integração da API de faturamento para testes gratuitos e taxas mensais recorrentes. Quando você instala o Social King em um site de cliente ou loja de desenvolvimento, você notará uma diferença significativa na experiência do usuário em comparação com outros concorrentes. Uma das principais diferenças são os recursos de localização do Social King, que permitem que seu aplicativo suporte o idioma nativo dos compradores do seu comerciante. Isso pode ter um impacto significativo em se os comerciantes continuam a usar seu aplicativo após o teste gratuito ou o desinstalam. Além disso, usar o Social King como um código de boilerplate pode fornecer mais oportunidades para palavras-chave estrangeiras de baixo custo no sistema de lances de palavras-chave da Shopify App Store. Outro recurso crucial do Social King é seu Editor de CSS incorporado para administradores de loja. Esse recurso é essencial, pois impulsiona as avaliações na App Store e permite ajustes rápidos e fáceis de CSS/estilo quando os clientes solicitam. O aplicativo de demonstração do Shopify não inclui esse recurso. O Social King está ativo e atendendo clientes há quase um ano e recebeu feedback positivo e solicitações de novos recursos e ajustes de CSS. Quando seu aplicativo dos sonhos for lançado, os clientes podem solicitar ajustes de CSS/estilo e, com o Social King, você pode editar facilmente o CSS salvo no banco de dados para aquela loja específica. Esse recurso é modular e oferece uma vitória rápida e excelente serviço aos comerciantes. O código do Social King foi testado em batalha e provou ser bem-sucedido. Neste curso, também discutiremos a diferença entre usar um Framework/Biblioteca de Aplicativos de Página Única como ReactJS, VueJS e Angular versus enviar as visualizações de volta como Strings Liquid. Explicaremos por que escolhemos a última abordagem, que permite que cada loja Shopify mantenha seu tema e estilo exclusivos. Embora o aplicativo de demonstração do Shopify seja um bom começo, o aplicativo de demonstração do Social King preenche as lacunas deixadas pela documentação e pelo aplicativo de demonstração do Shopify. Ele inclui recursos básicos necessários para construir um aplicativo voltado para o comprador de várias páginas de sucesso, como uploads de imagens nos aplicativos do comprador e do administrador, suporte multilíngue e muito mais. Renderizar visualizações Liquid do lado do servidor com o NodeJS oferece várias vantagens, incluindo a manutenção do cabeçalho e rodapé de cada loja e permitindo que outros aplicativos Shopify complementem a funcionalidade do seu aplicativo voltado para o comprador. Se você preferir usar o React, pode encontrar um aplicativo Shopify alimentado por React no meu Github. O Social King é de código aberto porque acredito em retribuir. Beneficiei-me de conteúdo gratuito e de baixo custo online e quero contribuir para a cultura da internet de compartilhar recursos valiosos. Muitos comerciantes foram severamente afetados pela COVID e agora estão procurando ir online e aprender como ter sucesso no espaço de comércio eletrônico. O Shopify oferece uma maneira fácil e acessível para os comerciantes estabelecerem uma presença online. Como desenvolvedor, existem inúmeras oportunidades no espaço de comércio eletrônico e, ao adicionar valor tanto para desenvolvedores quanto para comerciantes, podemos construir novos relacionamentos e contribuir para o sucesso do ecossistema. O Social King oferece recursos como Guest Blogging, permitindo que os compradores criem conteúdo sobre seus produtos, moderação de conteúdo gerado pelo usuário, integração com temas existentes e aplicativos Shopify, e muito mais. Se você tem uma ideia de aplicativo Shopify e deseja economizar tempo, este curso fornecerá o conhecimento e as habilidades necessárias. Boa sorte e que a força esteja com você!

O que você vai aprender

- Desenvolvimento de aplicativos Shopify - Aplicativo Proxy Shopify (aplicativo voltado para o comprador que fica em um subcaminho do site alimentado pelo Shopify) - NodeJS e JavaScript Vanilla - Integração com temas Shopify usando HTML e CSS - Trabalhando em um aplicativo de produção ao vivo - Como usar o Ngrok - Armazenando dados com MongoDB - Upload de imagens via aplicativo Proxy - Upload de imagens via aplicativo de administração da loja - Compradores podem criar conteúdo via aplicativo Proxy - Administradores da loja podem aprovar conteúdo via aplicativo de administração da loja - Aplicativo de administração do Shopify incorporado com Shopify Polaris - Aplicativo Proxy usando a sintaxe Liquid do Shopify - Integração de e-mail com Active Campaign e Sendgrid - Tradução multilíngue para expansão internacional - Editor de CSS personalizado dentro do aplicativo de administração do Shopify - CSS personalizado *(por loja) injetado via aplicativo Proxy - Integração da API de faturamento - teste gratuito por x dias + taxa mensal recorrente