import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Page, Layout, Card, Text } from "@shopify/polaris";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin, session } = await authenticate.admin(request);
const response = await admin.graphql(`
query getShop {
shop {
name
currencyCode
}
}
`);
const responseJson = await response.json();
return json({
shopName: responseJson.data.shop.name,
currency: responseJson.data.shop.currencyCode,
shopDomain: session.shop
});
};
export default function Dashboard() {
const { shopName, currency, shopDomain } = useLoaderData<typeof loader>();
return (
<Page title="Panou de Control">
<Layout>
<Layout.Section>
<Card>
<Text as="h2" variant="headingMd">
Magazin activ: {shopName} ({shopDomain})
</Text>
<Text as="p" variant="bodyMd">
Monedă setată: {currency}
</Text>
</Card>
</Layout.Section>
</Layout>
</Page>
);
}Dacă vrei să scrii o aplicație embedded pentru Shopify App Store în 2024, Remix + Polaris este stack-ul oficial recomandat. Am trecut recent prin tot procesul ăsta pentru o aplicație de gestiune de stocuri instalată pe 8k magazine și am adunat câteva învățăminte dure. Dacă nu ești atent la câteva detalii specifice, riști să pierzi săptămâni bune cu respingeri la review-ul oficial.
De ce Remix + Polaris (și unde devine frustrant)
Arhitectura nouă cu @shopify/shopify-app-remix este o binecuvântare față de vechiul boilerplate cu Express și React custom. Boilerplate-ul gestionează automat rotația de token-uri OAuth, sesiunile offline/online și comunicarea prin iFrame cu App Bridge. Practic, te scuteste de vreo 30 de ore de configurat middleware-uri de autentificare.
Polaris îți oferă din start look-ul nativ din Shopify Admin. Comercianții au mult mai multă încredere într-o aplicație care arată exact ca panoul lor de control, fără culori stridente sau fonturi exotice.
Trade-off-ul? Flexibilitatea vizuală este scăzută. Când clientul îți cere un layout mai atipic sau o componentă de tabel mai trăsnită, Polaris devine rapid un chin. Sistemul lor de design e destul de rigid, iar suprascrierea claselor de CSS în interiorul componentelor e o luptă continuă cu !important sau selectors dubioși.
Capcana din Session Storage
Cea mai mare greșeală pe care o văd la devii juniori când pornesc template-ul de Remix este că lasă PrismaSessionStorage pe SQLite în mediul de producție. SQLite pe disc local e excelent în npm run dev pe laptopul tău.
În clipa în care faci deploy pe Render, Fly.io sau Docker (unde containerul e ephemere), la fiecare restart se șterge fișierul SQLite. Rezultatul? Am pățit să deloghez subit 200 de comercianți simultan pentru că s-a repornit instanța. Folosește din prima zi PostgreSQL sau Redis pentru adapterul de sesiuni (@shopify/shopify-app-session-storage-postgresql).
Cum să nu fii respins la Review-ul Shopify
Echipa de review de la Shopify este extrem de tipicară. Am fost respins de 3 ori din cauze aparent minore, dar care au sens din perspectiva UX-ului lor. Iată lista scurtă de bifat înainte să dai Submit:
- Fără
alert()sauconfirm()native. Dacă ai un buton de ștergere, folosește unModaldin Polaris. Un singurwindow.confirm()găsit de revizor în cod înseamnă reject instant. - Loading state obligatoriu. Orice acțiune care durează mai mult de 300ms (un request în loader/action) trebuie să afișeze un spinner pe buton (
loading={isLoading}) sau bara de progres din App Bridge (PageLoading). Dacă pagina dă impresia că „a înghețat”, te pică. - Gestionarea corectă a erorilor GraphQL. Nu lăsa un
CatchBoundarygeneric de Remix să arunce un 500 roșu pe tot ecranul. Dacă un API Shopify returnează eroare de rate-limit (429) sau lipsă de permisiuni, afișează unBannerde eroare Polaris în interiorul paginii. - Responsive pe mobil. Da, comercianții își verifică aplicațiile din app-ul de mobil Shopify. Polaris e responsive nativ, dar dacă pui tabele late fără scroll orizontal configurat corect, revizorul îți va trimite un screenshot pe iPhone cu UI-ul spart.
În concluzie, Remix + Polaris economisește masiv din timpul de configurare inițial, dar te obligă să te supui complet ecosistemului Shopify. Dacă te abăți de la ghidul lor de UI, plătești la review. Voi ce stack folosiți pentru app-urile de Shopify, ați rămas pe variante custom sau ați făcut tranziția spre Remix?