import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
// Această linie validează token-ul de sesiune în iframe și face handshake-ul cu Shopify
const { admin, session } = await authenticate.admin(request);
// Interogăm API-ul GraphQL al magazinului curent
const response = await admin.graphql(`
#graphql
query shopInfo {
shop {
name
myshopifyDomain
plan {
displayName
}
}
}
`);
const responseJson = await response.json();
return json({ shop: responseJson.data.shop });
};Salutare! Am tot văzut discuții pe forumuri despre cum e să dezvolți pentru Shopify în ultima vreme. Am lansat recent a treia aplicație în Shopify App Store, un proiect care acum rulează pe vreo 4.200 de magazine active. Am mers pe stack-ul lor recomandat oficial: Remix pe backend/frontend și Polaris pentru UI. Vreau să vă zic sincer cu ce se mănâncă, unde te lovești de zid și cum să treci de review-ul lor tehnic din prima, fără să pierzi două săptămâni în ping-pong cu testerii Shopify.
Setup-ul cu Remix: De ce e bun, unde scârțâie
Shopify a cumpărat Remix acum ceva timp, iar asta se vede în integrare. CLI-ul lor (npm init @shopify/app@latest) îți generează totul la cheie: Docker, Prisma, rutele de autentificare. E genial pentru că scapi de boilerplate-ul de OAuth care înainte îți lua cel puțin două zile de debugging și configurări de sesiuni.
Dar există un mare trade-off. Aplicațiile embedded (cele care rulează direct în interiorul adminului Shopify) folosesc iframe-uri. Asta înseamnă că te vei lovi constant de probleme cu cookie-urile de sesiune (third-party cookies), pe care browserele moderne, în special Safari, le blochează din oficiu. Shopify rezolvă asta prin App Bridge și Session Tokens, dar trebuie să fii extrem de atent cum configurezi headerele de securitate. Dacă uiți să pui Content-Security-Policy corect, aplicația ta pur și simplu nu se va încărca în admin, dând o eroare albă destul de criptică în consolă.
Polaris: UI rapid, dar ești într-o cușcă de aur
Polaris e biblioteca lor de componente React. Arată curat, e accesibilă din start și comercianții se simt "acasă" pentru că interfața ta arată fix ca restul adminului Shopify. Practic, ai gata făcute tabele, filtre, butoane și modale.
Partea proastă? Ești extrem de limitat. Dacă vrei să faci un layout mai custom sau un dashboard mai interactiv, te bați cu design system-ul lor. La un proiect precedent, am vrut să pun un grafic mai complex și a trebuit să scriu CSS custom peste clasele lor generate, ceea ce e un coșmar la mentenanță fiindcă Shopify poate schimba clasele alea la orice update minor de Polaris. Sfatul meu: mergi pe layout-urile lor standard. Cu cât te abați mai mult de la Polaris, cu atât cresc șansele să fii respins la review din motive de UX.
Coșmarul numit "Shopify App Review"
Aici se cerne grâul de neghină. La prima aplicație am fost respins de 4 ori. De ce? Din cauza unor detalii aparent stupide. De exemplu, dacă utilizatorul instalează aplicația și vede o pagină albă mai mult de 2 secunde fără un spinner (componenta Loading din Polaris), ești respins instant. Dacă nu ai un buton clar de suport sau documentație în interiorul app-ului, din nou, respins.
Testerii lor instalează aplicația pe un magazin de test și o butonează intens, inclusiv de pe mobil. Da, deși 95% dintre comercianți își administrează magazinul de pe desktop, aplicația ta embedded TREBUIE să fie perfect responsivă pe mobil. Altfel, nu intri în App Store.
Una peste alta, stack-ul Remix + Polaris este cel mai scurt drum către o aplicație aprobată, dar te obligă să joci după regulile lor stricte. Voi ce experiențe aveți cu ei? Ați rămas pe Node clasic cu React simplu sau ați făcut trecerea la Remix?