Passei a última semana criando um aplicativo para o Shopify Marketplace. Era diferente de tudo que já fiz antes na web. Saber algumas das coisas que irei compartilhar, antes de começar a construir, pode evitar um pouco de dor de cabeça.
Aqui está o resumo da minha experiência, mais detalhes abaixo.
Principais insights
- Eles esperam que você faça um aplicativo de uma página (SPA)
- O sistema de design polaris oficialmente suporta apenas o react
- A integração com a interface da loja é difícil se você não estiver criando um tema
- Integrar a funcionalidade por meio de webhooks é mais tedioso do que precisa ser
- Os pagamentos são simples de implementar, depois que você entender como
- A API está mudando constantemente de forma significativa
- A API é surpreendentemente não confiável
- A confiabilidade do back-end não é grande
- O desenvolvimento local de aplicativos integrados é difícil
- Modificar o checkout não é possível
Eles esperam que você faça um aplicativo de uma página
Depois de começar a estudar a documentação e os exemplos, você notará rapidamente que todos os exemplos usam NodeJS e React. Não é grande coisa, certo? É isso que está na moda hoje em dia, então faz sentido construir os documentos para corresponder a isso.
O que não era tão óbvio para mim é que a forma como a API, as permissões e os requisitos do aplicativo são configurados torna muito difícil usar qualquer coisa que não seja um aplicativo de página única (SPA).
Se você pensar bem, faz sentido por quê. Você vai integrar seu código em sua plataforma proprietária, então eles precisam que a integração seja o mais direta possível. Portanto, um SPA é um ótimo candidato.
Meu problema não era tanto que esse requisito existisse, mas que ele não fosse muito óbvio desde o início. Escolhi usar tecnologias com as quais estou familiarizado (mais focado no backend). Isso voltou para me assombrar.
O sistema de design polaris suporta apenas reagir
O Shopify oferece uma estrutura de design para você trabalhar, em um esforço para fazer com que todos os aplicativos do Shopify no mercado tenham a mesma aparência. Ou pelo menos muito parecido. Essa estrutura é chamada de Polaris . Isso é incrível!
Como sou mais um cara de back-end, adorei a ideia de ter uma estrutura de design para escolher e escolher componentes. Em certo sentido, é muito semelhante ao uso de bootstrap – ou assim pensei.
Acontece que os únicos componentes que eles oferecem são para reação. Não há nenhum arquivo CSS que você possa baixar, nenhuma referência HTML, nenhum outro guia de implementação fora do Reagir. Você pode baixar os arquivos de design com os componentes, mas, como desenvolvedor, isso é um obstáculo ainda maior do que os componentes react.
Para meu aplicativo, decidi usar recursos da comunidade que suportam minha tecnologia escolhida (VueJS). Mas rapidamente descobriu que os recursos da comunidade estavam desatualizados e incompletos. Esse fato provavelmente também está relacionado a um ponto posterior neste artigo (a API deles está mudando constantemente).
A integração com o frontend é difícil se você não estiver criando um tema
Criar um aplicativo para uma loja de comércio eletrônico provavelmente se enquadrará em uma das duas categorias: Ou você está criando um aplicativo para exportar dados (para um ERP, PoS personalizado, CRM, PIM etc.) ou para modificar a experiência do cliente na própria loja . Criar um aplicativo na primeira categoria é bastante simples, você provavelmente nem precisa fazer um aplicativo “embutido”. Tudo o que você precisa é de um servidor em algum lugar que se comunique com a API do Shopify.
Por outro lado, fazer um aplicativo para modificar a experiência do cliente na loja está em outro nível. Mais uma vez, o principal problema parece ser o fato de que o shopify é uma plataforma proprietária.
Eles oferecem excelentes ferramentas para modificar sua loja na forma de Editor de temas, Editor de modelos e temas que podem ser adquiridos. A integração com essas soluções é muito difícil.
No início, decidi que não quero exigir que o usuário instale um tema personalizado que habilite novos recursos (porque eles teriam que mudar de seu tema existente) e não quero exigir que eles editem nenhum modelo arquivos. O motivo é que não espero que o usuário seja capaz de fazer nada além de inserir uma única tag (como para o Google Analytics) e que pode ser uma como um elemento HTML personalizado no designer de tema.
Então foi assim que eu fui: instalar meu aplicativo requer apenas que você adicione um único elemento HTML à sua página. Fácil para o usuário, mas mais difícil de implementar. Eu precisava construir um widget que pudesse se conectar a uma página existente com uma única tag de script. Não acabou sendo impossível, mas definitivamente não é algo que eu fiz antes.
Integrar a funcionalidade por meio de webhooks é mais tedioso do que precisa ser
Webhooks são uma tecnologia amplamente utilizada e geralmente aceita como uma boa solução. Isso também se aplica ao Shopify: depois de configurados, eles funcionam exatamente como o esperado.
O que me surpreendeu foi a maneira como eles precisam ser configurados. Cada webhook que você deseja ouvir deve ser configurado por meio da API REST para cada loja que possui seu aplicativo instalado. Isso significa que você precisa ter algum tipo de rotina de instalação e atualização para gerenciar os webhooks para cada cliente.
Eu prefiro muito mais a maneira como o Stripe resolveu isso: você configura seu webhook uma vez no back-end e seleciona os eventos que deseja na IU. É uma coisa única e não preciso escrever nenhum código.
Uma grande surpresa também foi o fato de existirem webhooks obrigatórios . Eles estão relacionados ao GDPR e lidam com coisas como fornecer e excluir dados do usuário. Novamente, acho que isso é uma coisa boa, mas veio como uma surpresa e mais tempo gasto em coisas não relacionadas ao cliente.
Os pagamentos são simples de implementar, depois que você entender como
Uma das razões pelas quais eu quis experimentar o Shopify foi a esperança de que eles tornassem muitas das coisas “chatas” fáceis. Se você já pensou em começar um produto, deve saber que há um monte de coisas a considerar: pagamentos, reembolsos, uma Política de Privacidade, Termos de Serviço, contas, senhas esquecidas, cancelamentos, etc.
Isso realmente se aplicava a quase tudo. A única coisa que achei estranho, foi o fato de você precisar implementar um fluxo de trabalho de pagamento em seu aplicativo. No momento, simplesmente redireciono para a página de pagamento logo após a instalação do aplicativo. Em seguida, preciso verificar se o pagamento foi concluído e decidir se desejo permitir ao usuário o aplicativo. Por que o Shopify não consegue lidar com esse fluxo do lado deles? Claro, mais controle provavelmente é ótimo para alguns aplicativos, mas por que exigir que cada aplicativo implemente seu próprio fluxo de pagamento, em vez de ter pelo menos uma maneira integrada de fazer as coisas?
Sua API está mudando constantemente de forma significativa
Uma nova versão da API Shopify é lançada a cada 3 meses . Em geral, é ótimo como eles têm um ciclo de melhoria constante e programado. Mas olhando para o changelog deles, você tem uma visão diferente sobre o ritmo de mudança. Mais recentemente, eles anunciaram grandes mudanças para aplicativos incorporados .
O que estou tentando enfatizar é que o Shopify é um ecossistema em constante mudança. Isso é ótimo para clientes e desenvolvedores existentes, mas também torna muitas informações e recursos da comunidade desatualizados em uma taxa extrema. Se você é novo na plataforma, pode descobrir que recursos perfeitamente funcionais e documentados foram descontinuados apenas algumas semanas depois de começar a trabalhar com eles.
A API é surpreendentemente não confiável
Como você pode imaginar, eu estava atualizando muito meu aplicativo durante o desenvolvimento. A cada atualização, o aplicativo faz uma solicitação a um recurso. Para minha surpresa, a cada 10 atualizações ou mais, eu recebia um erro 404. Para o recurso codificado permanentemente, nada menos! É frustrante trabalhar com uma API que já não parece confiável ao testar localmente.
Não sei se foi apenas uma estranha coincidência. Cada plataforma tem alguns soluços de vez em quando, mas isso não deixou uma boa impressão.
A confiabilidade do back-end não é grande
Durante o desenvolvimento, tive alguns problemas que me obrigaram a fazer uma pausa. Não porque eu estava frustrado, mas porque o Portal Shopify parou de funcionar.
Um problema era que, depois de mesclar minha conta de teste com uma conta de parceiro, todas as páginas simplesmente apresentavam erros e eu não conseguia mais visualizar nenhuma página autenticada. Tive que excluir todos os cookies de todos os domínios do shopify para fazer as coisas funcionarem novamente.
Outro problema foi durante o teste do meu aplicativo. Eu estava instalando o aplicativo na minha loja de desenvolvimento várias vezes (para testar o procedimento de instalação) e de repente o Portal do parceiro parou de funcionar completamente. Fiz uma pausa de cerca de uma hora e as coisas voltaram ao normal, mas deixei uma má impressão.
O desenvolvimento local de aplicativos integrados é difícil
Conforme mencionado acima, seu aplicativo será integrado ao back-end do Shopify. Eles conseguem isso por meio de um iframe. No desenvolvimento, você tem duas opções de trabalho em seu aplicativo:
Ou você trabalha no Shopify Admin, que é mais lento e requer uma conexão HTTPS pública (geralmente resolvida via ngrok, conforme os documentos). Ou, se não quiser pagar por outro serviço, você pode desenvolver o aplicativo em sua máquina local como provavelmente está acostumado.
A última maneira de fazer as coisas tem a desvantagem de que você pode encontrar algumas pegadinhas ao testar seu aplicativo de verdade. A técnica iframe requer que você faça algumas coisas como framebusting para pagamento ou fluxos oauth. Ambas as coisas que você provavelmente nunca notará ao desenvolver localmente.
Modificar o checkout não é possível
A última coisa que me surpreendeu é que a parte SaaS do shopify tem zero (0) maneiras de modificar o checkout. A única maneira de alterar as coisas na página de checkout é por meio do Shopify Plus . Uma vez que esse plano é direcionado para empresas e nem mesmo tem um preço listado em sua página de destino, eu não o chamaria de público-alvo para seu aplicativo Shopify Marketplace típico. Suspeito que a maioria dos clientes Plus terá seus próprios desenvolvedores do Shopify internamente ou por meio de uma agência.
Resumo
Ao contrário do que este artigo pode sugerir, tenho muitas boas impressões sobre a plataforma Shopify. A maior desvantagem que vejo é o foco em tecnologias muito específicas (como React) que simplesmente não são atraentes para mim e, devido à incrível velocidade de mudança, os recursos da comunidade em outras tecnologias ficam rapidamente desatualizados.