import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
// authenticate.admin verifică automat token-ul, face redirect la OAuth dacă e nevoie
// și expune clientul de GraphQL gata configurat
const { admin, session } = await authenticate.admin(request);
try {
const response = await admin.graphql(`
query getShopDetails {
shop {
name
myshopifyDomain
}
}
`);
const { data } = await response.json();
return json({ shop: data.shop });
} catch (error) {
// Nu lăsa eroarea să crape aplicația în iframe; review-ul te va respinge instant
return json({ error: "Nu am putut încărca datele magazinului" }, { status: 500 });
}
};Am pus recent pe picioare o aplicație publică de Shopify folosind template-ul lor oficial cu Remix și Polaris pentru un client din zona de e-commerce local. După ce am trecut prin tot procesul de development și, mai ales, prin furcile caudine ale review-ului Shopify, am vrut să las aici câteva concluzii la cald. Spoiler: nu e totul roz, dar e probabil cea mai stabilă cale în momentul de față pentru ecosistemul lor.
Setup-ul: De la zero la localhost în 10 minute
Shopify promovează masiv Remix de când l-au cumpărat, iar template-ul oficial (npm init @shopify/app@latest) chiar își face treaba bine. Îți configurează automat Docker-ul, baza de date locală (SQLite implicit) și tunelul Cloudflare ca să poți testa aplicația direct în adminul Shopify de development.
Polaris, sistemul lor de design bazat pe React, vine pre-instalat și gata de drum. Din punct de vedere tehnic, integrarea dintre Remix loaders/actions și componentele Polaris e extrem de curată. Folosești useLoaderData ca să tragi datele din API-ul GraphQL Shopify și le arunci direct în <IndexTable> sau <Card> de la Polaris. Sincer, am economisit cam 30% din timpul de UI development doar pentru că nu a trebuit să scriu CSS custom pentru layout-urile complexe de admin.
Trade-off-ul Polaris: Rapid, dar incredibil de rigid
Aici apare prima problemă serioasă de care te lovești rapid. Polaris e gândit exclusiv pentru adminul Shopify. Dacă clientul tău vrea un branding personalizat, culori nebune sau un flow de UX mai atipic, ai încurcat-o.
Merge excelent pentru tabele, formulare de configurare și dashboard-uri standard. Devine însă un coșmar dacă încerci să modifici comportamentul componentelor de bază (cum ar fi modalurile sau selectoarele de resurse). Sfatul meu de senior pățit: nu încerca să te lupți cu design system-ul lor. Dacă Shopify vrea ca butonul de salvare să fie în bara de sus din App Bridge, lasă-l acolo. Altfel, o să scrii hack-uri de CSS care se vor sparge la următorul update major de Polaris.
Review-ul Shopify: Unde se dă milităria jos din pod
Dacă faci o aplicație privată (custom app pentru un singur magazin), scapi de review-ul lor manual. Dar dacă vrei să o publici în App Store ca să o poată instala oricine, pregătește-te pentru un proces destul de frustrant. La ultimul proiect, un app de discounturi dinamice cu peste 3.000 de useri potențiali în target, echipa de review ne-a respins aplicația de trei ori înainte de a ne da undă verde.
Iată cele mai comune motive de respingere pe care le-am experimentat:
- Erori de autentificare la re-instalare: Dacă userul șterge aplicația și o instalează din nou, sesiunea veche din baza de date trebuie curățată corect. Remix are uneori un comportament ciudat cu cookie-urile de sesiune în iframe-uri pe Safari.
- Lipsa stărilor de încărcare (Loading States): Shopify cere ca orice acțiune care durează mai mult de o secundă să aibă un spinner sau un skeleton screen din Polaris. Inspectorii lor testează pe conexiuni 3G simulate extrem de lente.
- App Bridge neinițializat pe pagini secundare: Dacă ai o pagină simplă de "Ajutor" care nu încarcă corect scriptul de App Bridge, aplicația va fi respinsă instant pentru că blochează navigarea nativă din admin.
În concluzie, Remix + Polaris e combinația câștigătoare dacă vrei să treci rapid de review-ul tehnic și să ai o aplicație care arată "nativ". Dar te obligă să joci strict după regulile lor de UX.
Voi ce experiențe ați avut cu review-ul din Shopify App Store? V-au respins și pe voi pentru detalii absurde de UI?