Uz Claude sam napravio internet prodavnicu, od dizajna do lansiranja

Ovog puta sam pravio prodavnicu za Tellu Hima, brend tamjana. Logo, ambalaža i animacije proizvoda, prodavnica, plaćanje i lansiranje: sve sam uradio uz AI. Ispod je video, a ako vam je draže da čitate, tekst sledi.

Play video

Najzanimljiviji deo nije da prodavnica proradi. Zanimljivo je sve ono između šablona koji radi i sajta koji zaista deluje kao vaš brend.

Šta vam treba pre nego što krenete

Prvo ime brenda i domen. Ja domene obično registrujem kod Hostingera. Zatim alati:

• GitHub za kod
• Higgsfield za vizuelne materijale brenda
• Claude kao glavni asistent za programiranje
• Railway za hosting gotovog sajta
• PayPal Business nalog za naplatu

Zašto ne Stripe? Stripe je sasvim dobar, ali nije dostupan svuda, pa sam hteo da pokažem kako da nastavite sa PayPalom ako Stripe za vas nije opcija. Šta god da koristite, pre nego što išta izgradite oko toga, proverite da li vaš nalog podržava naplatu koja vam treba.

Brend: od dima do slova S

Krenuo sam od priče i osećaja koji brend treba da nosi, a onda sam pustio AI da generiše referentne slike i koncepte, da bih našao pravac pre nego što se uopšte latim logoa.

Logo je nastao iz dima koji se diže iz zapaljenog štapića. Taj oblik sam pojednostavljivao sve dok nije postao slovo S. Odatle sam razradio sve ostalo: glavne boje i kako se slažu, šare za svaku kolekciju, ambalažu i mokape. Na kraju su došli 3D modeli i animacije kutija, po stvarnim dimenzijama ambalaže i sa materijalima što bližim pravim, kako bi mogli da se koriste na sajtu.

Sve u ovoj fazi generisao je AI. Moj posao je bio da zadam pravac, izaberem ono što valja i stalno tražim izmene.

Ali gomila generisanih slika sama od sebe ne čini brend. I dalje morate da se pitate:

• Da li ovi materijali deluju kao da pripadaju istoj celini?
• Da li se ambalaža, boje i sajt uklapaju?
• Da li mokap koji izgleda sjajno i dalje funkcioniše u stvarnoj veličini i u stvarnom materijalu?

Za te odluke i dalje treba dizajnersko iskustvo. AI mi omogućava da neku ideju vidim mnogo brže. Moj deo posla je da odlučim koje ideje vredi razvijati dalje.

Zašto sam prodavnicu napravio pre dizajna stranica

Inače prvo dizajniram stranice, pa tek onda programiram. Ovog puta sam obrnuo redosled, jer sam krenuo od gotovog Payload okvira za internet prodavnice.

Ako prvo dizajnirate stranice, ili ih čak i napravite, pa onda pokušate da ispod njih podmetnete postojeći okvir za prodavnicu, završićete u natezanju. Ili ćete krivo saviti strukturu okvira da biste spasili dizajn, ili ćete menjati dizajn da bi se uklopio u okvir.

Zato sam prvo pustio AI da na Payloadu podigne prodavnicu koja radi i da osnovni tok proradi. Dizajn je onda mogao da se oblikuje oko stvarne strukture prodavnice, uz mnogo manje prepravki kasnije.

Postavka je jednostavna:

1. Napravite folder projekta na računaru i novi repozitorijum na GitHubu.
2. Otvorite Claude u tom folderu i pošaljite mu zahteve, a na kraju dodajte adresu repozitorijuma.
3. Budite jasni: gradi na Payload okviru za prodavnice, ovakva je prodavnica, ovo su stranice, ovako treba da rade porudžbine i admin panel.

Onda ga pustite da radi. Prva verzija se pravi neko vreme.

Jedna probna porudžbina, od početka do kraja

Kad je prva verzija bila gotova, pogledao sam prodavnicu i ulogovao se u admin panel da proverim da li se stranice i osnovne kontrole učitavaju.

Ali nije poenta da se stranice učitaju. Pravo pitanje je da li porudžbina može da prođe do kraja. Ubacio sam PayPal sandbox ključeve u fajl sa podešavanjima okruženja, restartovao lokalni server, izabrao proizvod, poručio i platio probnim nalogom kupca. Plaćanje je prošlo, a ista porudžbina se pojavila u admin panelu.

To dokazuje da osnovni tok radi (porudžbina, probno plaćanje, porudžbina u bekendu), ali samo u test okruženju. Pre nego što počnete da primate pravi novac, treba vam produkciona konfiguracija i još jedna provera plaćanja i statusa porudžbina.

Da sajt liči na brend

Prodavnica je radila, ali je izgledala kao šablon. Da bih to promenio, uz Claudeove alate za dizajn sastavio sam smernice za dizajn sajta.

Dao sam mu opis projekta zajedno sa logoom, bojama, fotografijama proizvoda, ambalažom i ostalim materijalima brenda. Što je opis konkretniji, to bolje koristi materijale: koje slike treba da budu u prvom planu, kako se predstavljaju proizvodi, šta ostaje isto od stranice do stranice. Dobio sam dokument sa referencama za stranice i smernicama.

To sam predao Claude Codeu, usmerio ga na lokalni projekat sa potrebnim fajlovima, otvorio novi čet u istom direktorijumu, nalepio predaju i dodao svoje beleške o tome šta sledeće treba promeniti.

Logo, materijali proizvoda i vizuelni stil sada su bili na stranicama, a sajt više nije ni nalik šablonu od kog je krenuo.

Od lepog izloga do prodavnice koja može da radi

Ostala su dva posla: doterivanje stranica i dodavanje svega što treba da bi prodavnica stvarno radila. Ovaj drugi spisak se lako potceni:

• Zemlje za dostavu. Okvir je imao opšti spisak zemalja. Sveo sam ga na zemlje u koje stvarno možemo da šaljemo, da niko ne poruči nešto što ne možemo da isporučimo.
• Imejl. Prva verzija uopšte nije imala servis za imejl, pa nije bilo ni obaveštenja o porudžbini ni imejla za reset lozinke. Za to sam povezao Resend.
• Prijava preko Google naloga, da logovanje bude lakše.
• SEO i Google Analytics, plus izbor kolačića, da posetioci mogu da upravljaju svojim podešavanjima.
• Ono što niko ne vidi: zaštita od botova i zaključan pristup admin panelu.

Ništa od ovoga nije uzbudljivo, ali da biste od lokalnog demoa stigli do prodavnice na mreži, morate o svemu tome da razmislite.

Što se dizajna tiče, prošao sam sajt stranicu po stranicu. Smernice su zadale pravac, ali na pravim stranicama su tekst, slike i raspored i dalje tražili doterivanje, pa sam proveravao i tražio od AI-ja izmene dok nije bilo onako kako sam hteo za lansiranje.

Početna stranica je postala jedan prikaz preko celog ekrana sa prerađenom uvodnom animacijom; sekcije koje su bile ispod sam izbacio. Najviše pažnje dobila je stranica O nama: još slika generisanih u duhu brenda i prerađen tekst i raspored, tako da se priča, proizvodi i slike lepo povezuju.

Uz pomoć AI-ja sam testirao i ceo tok kupovine. Potvrda porudžbine stigla je u pravo sanduče, a odgovarajuća porudžbina je bila u admin panelu. Stranice, porudžbine i imejl konačno su bili povezani.

Postavljanje na Railway

Railway ima uputstvo za postavljanje napisano baš za Claude. Otvorio sam ga, pokrenuo novi čet, dao Claudeu adresu i zamolio ga da po uputstvu postavi ovaj projekat.

Kad zastane i nešto vas pita, pročitajte šta se zapravo bira: koji projekat, koja konfiguracija, šta morate sami da upišete. Preporuka AI-ja je dobra polazna tačka, ali i dalje mora da odgovara vašem projektu.

Kad je sajt postavljen, dobijate adresu na mreži. Tamo ponovo prođite glavne stranice i tok poručivanja; to što radi lokalno ne znači da radi i konfiguracija na serveru. Pre nego što počnete da primate pravi novac, proverite da je PayPal u produkcionom režimu i proverite plaćanje, porudžbinu u bekendu i imejl obaveštenje.

Poslednji korak: povežite domen koji ste registrovali na početku i podesite DNS onako kako Railway kaže. Kad domen i HTTPS prorade, otvorite sajt na svom domenu i proverite ga još jednom.

Šta bih vam preporučio da ponesete

Redosled koji je meni prijao:

1. Odredite pravac brenda.
2. Neka prodavnica i plaćanje prorade.
3. Doterajte dizajn i dodajte funkcije.
4. Postavite sajt, pa sve proverite ponovo.

AI može da odradi veliki deo posla u svakoj fazi. Ali posle svake pogledajte stvarni rezultat. Da li dizajn čini celinu? Da li porudžbine prolaze? Da li imejlovi stižu? Da li sajt na mreži radi?

O kom delu biste želeli da čujete više: dizajnu brenda, izradi prodavnice ili PayPalu i postavljanju? Napišite mi u komentarima na YouTubeu, a ispod se pretplatite da vam stigne sledeći tekst.