import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
const { admin, session } = await authenticate.admin(request);
// Query rapid pentru a verifica dacă magazinul e activ
const response = await admin.graphql(
`#graphql
query getShop {
shop {
name
primaryDomain {
url
}
}
}`
);
const responseJson = await response.json();
return json({
shop: responseJson.data.shop,
sessionId: session.id
});
};Salutare! Dacă vrei să urci o aplicație în Shopify App Store și te gândești să folosești template-ul lor oficial cu Remix și Polaris, am scris mai jos ce am pățit eu ca să nu te lovești de aceleași ziduri. Setup-ul e rapid la început, dar devine un calvar când intri în faza de review.
Setup-ul cu Remix (Visul frumos)
Shopify a cam forțat Remix în ultima vreme și, sincer, nu-mi pare rău deloc. Loader-ele și action-urile din Remix se potrivesc perfect cu logica de autentificare Shopify. Nu mai ai nevoie de un backend separat în Node/Express doar ca să salvezi niște token-uri de sesiune. Totul e într-un singur loc.
Dar am dat rapid de o problemă mare la dezvoltarea locală: tunnel-ul de Cloudflare inclus implicit în CLI-ul lor dă rateuri masive la reîncărcarea paginii. Ba se deconecta, ba uita sesiunea de admin. Am rezolvat asta trecând pe Ngrok plătit, o cheltuială de 15$ pe lună care mi-a salvat efectiv nervii și timpul de debug.
Polaris: Trade-off-ul sincer
Polaris (sistemul lor de design în React) te ajută să treci de review-ul de UX din prima încercare. Shopify vrea ca aplicațiile din magazinul lor să arate exact ca admin-ul nativ.
Dar iată trade-off-ul: dacă vrei să ieși din tipar sau să faci un design mai deosebit, Polaris devine o închisoare. Să suprascrii stilurile lor e ca și cum ai încerca să repari un ceas elvețian cu ciocanul. Componentele lor sunt extrem de rigide. Tailwind-ul se bate cap în cap cu CSS-ul lor custom, așa că dacă ai nevoie de un branding puternic pentru client, mai bine îți construiești propriile componente de la zero și folosești doar logica de API din template.
Coșmarul numit „Shopify App Review”
Aici se rupe filmul. Am avut aplicații respinse pentru detalii incredibil de mărunte. La ultimul proiect integrat pe un magazin cu 12k comenzi active, ne-a luat 3 încercări și 9 zile de ping-pong cu echipa lor de review ca să trecem de QA.
De ce ne-au respins? În primul rând, din cauza webhook-urilor obligatorii de GDPR (customers/redact, shop/redact). Acestea trebuie să returneze status 200 în mai puțin de 2 secunde. Dacă folosești serverless pe Vercel, primul cold start te poate duce la 2.5 secunde și testerul lor automat îți va respinge aplicația instant. Am rezolvat asta mutând endpoint-urile de webhook pe o instanță simplă de VPS care răspunde instant.
În al doilea rând, ne-au respins pentru că butonul de „Save” din Polaris nu era dezactivat atunci când formularul era neschimbat. E o regulă nescrisă în ghidul lor de UX, dar testerii umani o verifică manual de fiecare dată.
În concluzie, Remix + Polaris e combinația câștigătoare dacă vrei să fii în App Store rapid și să arăți nativ. Dar pregătește-te de reguli stricte și optimizări la milisecundă.
Voi ce ați folosit pentru ultimele integrări de Shopify? V-ați bătut și voi de regulile lor absurde la review?