Una delle domande che riceviamo spesso quando parliamo con gli sviluppatori o i responsabili dell'ingegneria di ciò che facciamo è: cos'è esattamente un'applicazione Shopify e quali strumenti e tecnologie sono necessari per costruirne una? Un'altra domanda frequente è: è un problema se non ho esperienza nella costruzione di applicazioni Shopify?

Rispondiamo a queste domande approfondendo i vari aspetti tecnologici dello sviluppo di applicazioni Shopify.

Se state cercando uno sviluppo Shopify personalizzato, potete rivolgervi ai nostri esperti Shopify o cercare specialisti Shopify su piattaforme freelance.

Come un'applicazione Shopify si confronta con un'applicazione web

Il nostro punto di vista su questo argomento è che un'applicazione Shopify funziona più o meno come un'applicazione web standard, ma è fortemente connessa alla piattaforma Shopify tramite un'API. Questo ha diverse implicazioni:

• Per costruire un'applicazione Shopify, è possibile utilizzare le stesse tecnologie delle applicazioni web. Non siete vincolati a una tecnologia specifica (anche se l'utilizzo di una tecnologia specifica può rendervi la vita più facile - ci torneremo più avanti).
• Di solito, è necessario costruire sia il backend che il frontend.
• Siete responsabili dell'hosting e del funzionamento dell'applicazione.
• Una volta che l'applicazione è stata approvata da Shopify, anche il processo di rilascio è completamente sotto il vostro controllo.

‍

Dal punto di vista dei commercianti, si può dire che Shopify è un servizio Software-as-a-Service (SaaS), così come le applicazioni Shopify. Ciò significa che un commerciante non deve interagire con alcun tipo di codice per installare la vostra applicazione.

Componenti dell'applicazione Shopify

Identifichiamo tre componenti logici che un'applicazione Shopify tipicamente possiede:

• Amministrazione del commerciante
• Elaborazione di webhook
• Applicazione rivolta al cliente (interfaccia utente del negozio)

Di questi tre, l'ultimo non è necessariamente necessario. Dipende dalla funzionalità che si vuole fornire agli esercenti. Ad esempio, la nostra applicazione Candy Rack è composta da tutti e tre i componenti, mentre Loyal è composta solo dalle prime due parti.

Amministrazione del commerciante

L'amministrazione del commerciante è una dashboard in cui il commerciante imposta e configura l'applicazione. Shopify consiglia di servire l'amministrazione del commerciante all'interno dell'interfaccia di Shopify (la cosiddetta applicazione incorporata). Ciò significa che l'applicazione viene incorporata nell'amministrazione di Shopify tramite iframe.

Le applicazioni incorporate presentano diverse limitazioni:

• A causa del funzionamento dell'autenticazione, si è più o meno limitati all'architettura di un'applicazione a pagina singola (anche se sono possibili soluzioni parziali con l'aiuto di Turbolinks o Inertia.js).
• Potrebbe essere efficiente utilizzare React per scrivere il frontend, dato che esistono librerie fornite da Shopify: La libreria Polaris UI assicura che l'UX sia coerente con il resto dell'amministrazione di Shopify e App Bridge agisce come un ponte frontend che fornisce i dati contestuali di Shopify alla vostra applicazione in esecuzione nell'iframe.

L'amministrazione del commerciante è anche il primo punto di contatto tra la vostra applicazione e un commerciante, ed è il luogo in cui viene gestito il processo di installazione. L'installazione significa fondamentalmente ottenere i permessi per accedere ai dati del negozio del commerciante tramite OAuth.

È anche la parte dell'applicazione in cui si gestisce la fatturazione nel caso in cui l'applicazione non sia gratuita.

Elaborazione di webhook

I webhook sono il modo in cui Shopify informa la vostra applicazione su vari eventi che si verificano nei negozi in cui è installato: ad esempio, la creazione di un nuovo ordine o l'aggiornamento di un prodotto. Siete voi a decidere quali eventi sottoscrivere.

La logica aziendale che deve essere eseguita in base all'evento ricevuto dovrebbe essere gestita da lavoratori in background. Altrimenti, si rischia di sovraccaricare l'applicazione. Si può anche pensare di delegare la ricezione degli eventi all'esterno dell'applicazione.

‍

Applicazione rivolta al cliente (interfaccia utente del negozio)

Nel caso in cui l'applicazione estenda la vetrina di Shopify (il che significa che offre nuove funzionalità ai clienti del negozio), è necessario "inserirla" nella vetrina. Per farlo, è necessario comunicare a Shopify, tramite un'API, di iniettare la risorsa JavaScript nel negozio frontale. I metodi più diffusi sono due: Script Tag e App Embed Block. Esiste anche la possibilità di estendere il tema del negozio direttamente con alcuni componenti visivi utilizzando i blocchi di app (chiamati anche sezioni di app).

Lo sviluppo dell'applicazione rivolta al cliente potrebbe essere la parte più impegnativa dell'intero processo. Di solito, si estende o addirittura si sovrascrive il comportamento predefinito del front store. In questo caso, è necessario assicurarsi che funzioni su diversi temi di Shopify, con varie impostazioni del negozio e in modo da non rompere nulla in una situazione imprevista. Inoltre, è sempre possibile che altre applicazioni di terze parti interferiscano con la vostra applicazione.

L'interfaccia utente del negozio frontale è anche il punto in cui è necessario prestare attenzione alle prestazioni e alle dimensioni dell'applicazione.

L'evoluzione dello sviluppo di applicazioni Shopify

Sebbene vi abbia detto in precedenza che la creazione di un'applicazione Shopify è fondamentalmente lo sviluppo di un'applicazione web, questa affermazione è in realtà vera solo in parte. Nel 2021, Shopify ha introdotto il concetto di estensioni di cassa. Prima di allora, non era possibile estendere le funzionalità del checkout con un'applicazione Shopify. Sotto questo aspetto, l'esperienza dello sviluppatore è diversa rispetto a quella di un'app web, poiché avviene in un ambiente molto limitato (ad esempio, è possibile utilizzare solo una serie specifica di componenti React pre-preparati) e i processi di creazione e rilascio sono gestiti da Shopify.

È possibile che in futuro Shopify si orienti verso questo approccio in altre aree per avere un maggiore controllo sulle applicazioni di terze parti. Di conseguenza, lo sviluppo di applicazioni Shopify si allontanerà ulteriormente dallo sviluppo di applicazioni web.

Lo stack tecnologico di Digismoothie

Vediamo quali sono le tecnologie che utilizziamo in Digismoothie per realizzare le app Shopify.

‍

Per saperne di più sulle tecnologie che utilizziamo, consultate la nostra knowledge base.

Conclusione

Spero che abbiate appreso cosa significa costruire un'applicazione Shopify da un punto di vista tecnico e quali tecnologie possono essere utilizzate.

Infine, torniamo alla domanda posta all'inizio. È un problema per un ingegnere con un background nello sviluppo web entrare in un team che lavora su applicazioni Shopify? Direi proprio di no. Se un ingegnere ha una buona conoscenza dei concetti e delle tecnologie utilizzate nello sviluppo di applicazioni web moderne, può entrare in gioco molto rapidamente. La conoscenza degli ecosistemi e delle API di Shopify arriverà passo dopo passo.