Shopify Hydrogen i Oxygen – vrhunski pristup razvoju e-trgovina

Što je Shopify Hydrogen?

Hydrogen je framework baziran na Reactu, čija je glavna namjena izrada prilagođenih Shopify trgovina. 

Proizvodu kanadske tvrtke Shopify Inc. glavna svrha je pružiti vam izrađene ključne funkcionalnosti za rad e-trgovine, kako bi se mogli nesmetano koncentrirati na izradu prilagođenih sučelja e-trgovina.

Shopify Hydrogen radi u paru sa Shopify Oxygenom, hosting (poslužiteljskim) rješenjem za izradu Hydrogen aplikacija.

Što je Shopify Oxygen?

Shopify Oxygen je platforma sa koje možemo posluživati naše Hydrogen aplikacije. Ako koristimo headless CMS pristup na Shopifyu, moramo negdje smjestiti naše aplikacije. Tu Shopify Oxygen dolazi do izražaja. I integrira se savršeno sa Hydrogenom. Napomenuo bih da je trenutno Oxygen dostupan jedino na Shopify Plus planu.

Vrijedi napomenuti da iako je Oxygen logičan prvi izbor, nije jedini, i možete poslužiti svoje Hydrogen aplikacije na raznim platformama, poput npr. Netlifya.

Dakle, možete koristiti Hydrogen i na ostalim Shopify planovima, ali morate sami riješiti pitanje hostinga.

Što znači “baziran na Reactu”?

Shopify Hydrogen framework napravljen je koristeći React (“ReactJS”) library, biblioteku otvorenog koda razvijenu od strane Facebooka (ili “Mete”, ako vam je draže) za razvoj visoko responzivnih korisničkih sučelja. Iako React zapravo nije framework nego programska biblioteka, zauzeo je prvo mjesto na ljestvici najkorištenijih Javascript frameworka u 2022. godini, prešavši jQuery.

To također znači da će mnogi developeri koji nemaju prijašnjeg iskustva rada sa Shopifyem imati lakšu polazišnu točku u svijet razvoja headless Shopify trgovina.

Što je headless Shopify?

Headless Shopify, i Headless CMS općenito je relativno novi pristup razvoju web stranica i aplikacija pri čijoj izradi odvajamo back-end od prezentacijskog sloja. Znači da bismo mogli, npr., izraditi našu stranicu koristeći Gatsby, i koristiti Shopifyev motor za obavljanje dijela vezanog za e-trgovinu.

Ta kombinacija je moćnija nego razvoj isključivo na Shopify platformi i daje dizajnerima i developerima slobodu i kreativne mogućnosti koje prelaze ograničenja same platforme (iako njih na Shopify nema mnogo, jer je sam po sebi vrlo fleksibilian).

A što je sa Liquidom?

Shopify Liquid ćemo i dalje koristiti pri izradi standardnih Shopify trgovina ako nemamo potrebu za headless developmentom. Ali, ako nastane potreba za podići projekt na stepenicu više i izaći iz okvira standardnih mogućnosti Shopify okruženja, imati ćemo opciju koristiti Hydrogen.

Kako krenuti sa Shopify Hydrogenom? 

Opcija 1: Isprobajte Hydrogen na Shopifyevom StackBlitz-u

Ponekad nemamo vremena i resursa posvetiti se novoj tehnologiji ili novom programskom jeziku, a voljeli bi ga isprobati da vidimo o čemu se radi. Ako želimo zasukati rukave i odmah se primiti posla, bez trošenja vremena na proučavanje i postavljanje razvojnog okružja, možemo to učiniti na Shopifyevom StackBlitz računu.

Ako se ipak namjeravamo ozbiljnije posvetiti Hydrogenu, morati ćemo postaviti lokalno razvojno okružje.

Opcija 2: Postavljanje Hydrogen razvojnog okružja koristeći Sales channel na Shopify Plusu

Jedan od načina kako postaviti razvojno okružje za Shopify Hydrogen je dodati ga kao sales channel u Shopify administrativnom sučelju.

Trebati ćete pristup Shopify Plus planu kako bi dodali Hydrogen aplikaciju kao sales channel.

Zaputite se u administrativno sučelje, te pratite poveznicu na Apps ili Sales Channel i upišite “Hydrogen”. Možete ga naći i na ovom linku u Shopify app trgovini. Instalirajte Hydrogen klikom na gumb “Add”.

Možda ćete dobiti upozorenje: “Shopify needs additional Github permissions”. Kliknite “update permissions” gumb i logirajte se u GitHub.

Kada prihvatite, dobiti ćete mogućnost da kreirate novo, ili se povežete na postojeće spremište (repository). Kada to učinite, dobiti ćete poruku: “Hydrogen storefront successfully created”.

Odlično. Sada samo moramo pratiti upute kako bismo postavili Hydrogen lokalno:

Clone your new repository locally and start the development server:
git clone https://github.com/igorNnw/hydrogen.git 
&& cd hydrogen 
&& yarn 
&& yarn dev

Je li Shopify Hydrogen spreman za produkciju?

Ako gurnete kod na defaultnu granu, deployat ćete na produkciju. Za pregled nam je potrebna druga grana. Možete kontrolirati te postavke unutar Hydrogen kanala.

Opcija 3) Postavljanje razvojnog okružja bez pristupa Shopify Plusu i sales channelu

Postavljanje razvojnog okružja za Hydrogen je jednostavno ako imate potrebne upute. Njih možete pronaći u Shopifyevoj službenoj dokumentaciji.

Preduvjet za to je da imate instalirane nove verzije node-a i yarn-a.

Ja ću u ovom primjeru koristiti npm, ali možete isto postići koristeći yarn, npx ili pnpm. Dakle, upalite svoj CLI (Terminal), i navigirajte u vašu radnu mapu koristeći cd naredbu:

cd <path to your folder>

Unesite slijedeći kod:

npm init @shopify/hydrogen -- --template hello-world

Dobiti ćete slijedeći upit:

Choose a language 
· JavaScript
· TypeScript

Kad izaberete tehnologiju, imenujte svoju Hydrogen aplikaciju (ili kliknite <enter> za default):

? Name your new Hydrogen storefront 
> hydrogen-app
  ──────────────────────────────

Navigirajte do svoje radne mape:

cd <your-app-name>

Te pokrenite program:

npm run dev

Sada u svoj pretraživač upišite adresu http://localhost:3000/.

Bok Hydrogen

I to je to – naša “Hello World” Hydrogen aplikacija radi.

Ako naiđete na greške pri postavljanju Shopify Hydrogen razvojnog okružja, najvjerojatnije morate nadograditi svoju verziju node-a.

Ako želimo napraviti promjene na našoj testnoj aplikaciji, locirati ćemo index.server.jsx.

Sjetite se da je ovo React – JSX, tako da sav sadržaj mora biti u jednom elementu.

Izrada prilagođene trgovine koristeći Hydrogen na Headless Shopifyu

Ako želimo otići korak dalje, možemo izraditi kompletno prilagođenu trgovinu sa Hydrogenom koristeći Shopifyevu administraciju i naš vlastiti prezentacijski dio – dizajn, posebno.

Za početak moramo:

1. Otvoriti Shopify trgovinu
2. Dodati par proizvoda

Ja imam partnerski račun na Shopifyu, ali za slučaj da neki od vas nemaju, krenuti ću iz početka i otvoriti račun na Shopifyu s besplatnim probnim periodom.

Ako već jeste Shopify partner, onda znate kako ide ovaj dio.

Otvorite Shopify trgovinu

Kliknite na www.shopify.com i započnite besplatni probni period:

I sad samo pratite instalaciju.

Odlično. Sada kada smo otvorili trgovinu, moramo dodati par proizvode. Možete ih dodati ručno klikom na: Products -> Add Product

Ili možete instalirati aplikaciju za generiranje podataka/proizvoda.

Kada smo to riješili, slijedi najbolji dio. Navigirajte na Hydrogenove web stranice i kopirajte slijedeću liniju koda:

npm init @shopify/hydrogen

Sada otvorite Terminal, ili možete koristiti onaj koji je ugrađen u editor koda, ako ga vaš kod editor ima (Visual Studio Code ima, npr.) i kreirajte novu radnu mapu (mkdir folder-name ako koristite Terminal) i onda uđite u taj folder koristeći cd naredbu:

cd folder-name

Te dodajte kod koji ste kopirali s Hydrogenove stranice:

npm init @shopify/hydrogen

Morati ćete potvrditi par detalja i unijeti neke osnovne podatke već objašnjene ranije u tekstu:

Need to install the following packages:
  @shopify/create-hydrogen@3.21.0
Ok to proceed? (y) 

✔ Choose a template · Demo Store
✔ Choose a language · JavaScript
? Name your new Hydrogen storefront 
> Hydrogen Store
  ──────────────────────────────

I na kraju instalacije, morali biste dobiti nešto ovakvo:

✔ Downloaded template from https://github.com/Shopify/hydrogen#dist
✔ App initialized
  ✔ Template files parsed
  ✔ Package.json updated
✔ Installing dependencies with npm
✔ Completed clean up
✔ Git repository initialized

✨ hydrogen-store is ready to build!
? Run npm run dev to start your local development server and start building.

? Docs: Quick start guide (​https://shopify.dev/custom-storefronts/hydrogen​)

? Note: your project will display inventory from the Hydrogen Demo Store. To connect this project to your Shopify store’s inventory instead, update hydrogen-store/hydrogen.config.js with your store ID and Storefront API key.

igorbujas@Igors-MacBook-Pro hydrogen-store % 

Ako pročitate što nam poručuje Hydrogen, vidjeti ćete da nam govori da: Run npm run dev to start your local development server and start building.

Pa učinimo to. Unesite npm run dev u Terminal. Pripazite da ste u folderu vašeg projekta.

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

I time smo postavili lokalno okružje za rad na http://localhost:3000/

Povezivanje sa Shopify trgovinom

Sada možemo otvoriti mapu gdje smo instalirali Hydrogen i potražiti hydrogen.config.js file.

Kada otvorimo tu datoteku, potražiti ćemo “storefront token” i “storeDomain”:

    storeDomain:
      // @ts-ignore
      Oxygen?.env?.PUBLIC_STORE_DOMAIN || 'hydrogen-preview.myshopify.com',
    storefrontToken:
      // @ts-ignore
      Oxygen?.env?.PUBLIC_STOREFRONT_API_TOKEN ||
      '3b580e70970c4528da70c98e097c2fa0',

Sada ćemo otići natrag u Shopify Admin, i izabrati “Settings”, pa “Apps and Sales Channels”:

Omogućiti ćemo “Allow custom app development” opciju:

Izrada aplikacije

Kliknti ćemo “Create app” gumb i imenovati našu aplikaciju, te potražiti “API credentials” i izabrati “Configure storefront API scopes”.

Potvrditi ćemo sve izbore, pa kliknuti na prvi “tab”, “Overview” i instalirati našu aplikaciju.

Dobiti ćemo “Storefront API access token“, koji ćemo koirati i zalijepiti u naš editor koda u hydrogen-config.js datoteku, umjesto “PUBLIC_STOREFRONT_API_TOKEN“.

I zadnje što moramo učiniti je zamijeniti ime domene u hydrogen-config.js datoteci. Umjesto hydrogen-preview.myshopify.com, upisati ćemo ime naše trgovine (yourstorename.myshopify.com).

Ako sada odete u pretraživač te upišete adresu http://localhost:3000/, vidjeti ćete da tema prikazuje naše proizvode.

U drugom dijelu ovog tutoriala nastaviti ćemo s kompletnom prilagodbom Shopify trgovine.

Korisni resursi:

• Hydrogen app on Shopify app store
• Hydrogen on Github
• Shopify devs: Introducing Hydrogen & Oxygen
• Getting started with Hydrogen