// app/routes/app.products.tsx
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "../shopify.server";
import { Page, Layout, Card, Text } from "@shopify/polaris";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin } = await authenticate.admin(request);
// Preluăm primele 5 produse folosind GraphQL client-ul pre-configurat
const response = await admin.graphql(`
#graphql
query getProducts {
products(first: 5) {
edges {
node {
id
title
}
}
}
}
`);
const { data } = await response.json();
return json({ products: data?.products?.edges || [] });
};
export default function ProductsPage() {
const { products } = useLoaderData<typeof loader>();
return (
<Page title="Produse Importate">
<Layout>
<Layout.Section>
<Card>
<Text as="h2" variant="headingMd">Lista de produse</Text>
{products.length === 0 ? (
<Text as="p">Nu am găsit produse în magazin.</Text>
) : (
<ul>
{products.map(({ node }: any) => (
<li key={node.id}>{node.title}</li>
))}
</ul>
)}
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Am publicat recent a treia aplicație în Shopify App Store, un micro-SaaS pentru gestiunea stocurilor. Am mers pe stack-ul lor recomandat: Remix și Polaris. Dacă vrei să intri pe piața asta, setup-ul inițial e ridicol de simplu, dar drumul până la aprobarea finală îți poate mânca săptămâni bune din viață.
Înainte să scrii prima linie de cod, trebuie să înțelegi în ce te bagi. Shopify te împinge puternic spre Remix prin CLI-ul lor. Îți oferă totul la cheie, dar asta vine cu un cost ascuns.
Setup-ul cu Remix: De ce e bun și unde se rupe filmul
CLI-ul de la Shopify îți generează un template gata de rulat în 5 minute. Scaffolding-ul îți configurează automat conexiunea cu API-ul, OAuth-ul și baza de date prin Prisma. Sună de vis, nu?
Am folosit acest setup la o aplicație cu 1.400 de utilizatori activi și am dat rapid de limitări. Trade-off-ul principal este că ești blocat în arhitectura lor. Loader-ele din Remix sunt excelente pentru a aduce date din Shopify Admin API direct pe server, evitând CORS-ul și expunerea cheilor API. Totuși, când ai nevoie de background jobs sau de sincronizări masive de date, Remix devine neîncăpător.
Am pățit ca un singur import mai mare de produse să blocheze complet procesul Node. Pentru chestii grele, ai nevoie de un worker separat (cum ar fi BullMQ sau un serviciu serverless). Nu încerca să rulezi sync-uri de 10.000 de produse direct în loader-ele sau acțiunile din Remix, pentru că vei primi timeout-uri pe bandă rulantă de la Cloudflare.
Polaris: Design-ul care te salvează de respingeri
Polaris este sistemul de design al celor de la Shopify. Partea bună? Dacă îl folosești corect, aplicația ta va arăta ca și cum ar fi fost scrisă direct de echipa lor internă. Partea proastă? Este extrem de rigid. Dacă vrei să creezi o experiență vizuală unică, te vei lupta cu CSS-ul din Polaris până îți pierzi mințile.
Sfatul meu: nu încerca să fii original. Shopify respinge aplicațiile care nu respectă ghidul lor de UX. Folosește componentele standard (Page, Layout, Card, DataTable) exact așa cum vin din cutie. Testerii de la review au un checklist foarte strict. Dacă un buton de salvare nu e în colțul din dreapta sus al paginii sau dacă modulul de setări nu arată ca cel nativ, aplicația îți va fi respinsă fără discuții.
Coșmarul numit "Shopify App Review"
Am fost respins de trei ori la ultima aplicație înainte să fie aprobată în App Store. De fiecare dată, feedback-ul a venit sub forma unui video scurt în care un tester din India dădea click pe ceva ce eu nu testasem pe un magazin de dezvoltare proaspăt creat.
Iată cele trei greșeli care m-au costat două săptămâni de amânări:
- Lipsa webhook-urilor obligatorii de GDPR: Trebuie să ai configurate cele trei endpoint-uri de ștergere a datelor clienților (customer data request, customer data erasure, shop erasure). Chiar dacă aplicația ta nu stochează date personale, Shopify le cere obligatoriu la nivel de cod și în configurarea din App Partner Dashboard.
- Erori de onboarding pe magazine noi: Aplicația mea crăpa dacă user-ul nu avea niciun produs adăugat în magazin. Asigură-te că tratezi cazurile de tip "empty state" cu componentele Polaris dedicate.
- Gestionarea sesiunii la reinstalare: Dacă un user îți șterge aplicația și o reinstalează după 5 minute, token-ul vechi din baza de date trebuie suprascris corect. Altfel, va rămâne blocat într-o buclă infinită de redirect-uri.
Remix și Polaris reprezintă cel mai rapid drum spre Shopify App Store, dar numai dacă joci după regulile lor stricte. Nu încerca să reinventezi roata pe partea de UI și testează onboarding-ul pe un magazin complet gol înainte să trimiți aplicația la review.
Voi ce experiențe ați avut cu review-ul de la Shopify în ultima vreme? Tot atât de pedanți au rămas?