Impresivna web stranica s ChatGPT-jem.
Jedan video, 29 lekcija. S ChatGPT-jem koji koristiš svaki dan i besplatnim skillom The Mariscal od nule radimo web trgovinu tenisica i objavljujemo je. Ne pišeš ni retka koda.
- Besplatno
- 29 lekcija
- 1 h 48 min
- Govori se španjolski, s hrvatskim titlovima
Pogledaj tečaj · Impresivan web s ChatGPT-jem koji koristiš svaki dan
Impresivan web s ChatGPT-jem koji koristiš svaki dan
Dobro došao u ovaj video. Naučit ćemo kako napraviti impresivnu web stranicu s ChatGPT-jem. Da, s onim ChatGPT-jem koji koristiš svaki dan. A kako ćemo to napraviti? Uz skill koji smo pripremili u The Mariscalu, da ti ne moraš raditi ništa. Baš ništa. Ideja je da na početku instaliramo ovaj skill i on nas vodi korak po korak. Pa krenimo. Dobro, ovo je gotov projekt koji ćemo na kraju napraviti. U ovom slučaju to je stranica s tenisicama, a sve počinje tako da
ChatGPT-ju ispričamo ideju. Ali stani, stani, stani. Znam, ti si od onih koji otvore ChatGPT i napišu mu: «Želim impresivnu web stranicu». E pa,
nažalost, ne ide to tako. Zato ću ti sad pokazati koji su koraci koje ćemo proći u ovom videu. Dakle, prvi korak bit će napraviti projekt i objasniti ChatGPT-ju što želimo napraviti. I iz toga će on napraviti plan. Sljedeći korak bit će napraviti strukturu stranice. Za to ćemo tražiti reference. Tu dizajn nema nikakve veze. Sljedeći korak su wireframes. Wireframes su kao naša stranica, ali bez ikakvog dizajna. Kad to imamo, tražit ćemo reference za dizajn. I s tim, plus wireframe, ChatGPT će nam dati
nekoliko opcija da izaberemo. Kad izaberemo dizajn, sljedeći korak bit će napraviti naš brend. I za to ćemo tražiti reference, pa ćemo imati nekoliko opcija za izbor. Kad to imamo, sljedeći korak je napraviti prototip samo početne stranice, gdje ćemo vidjeti kakav dizajn nam ChatGPT predlaže s našim brendom. Kad to bude dobro, napravit ćemo prototip cijele stranice. A kad imamo prototip cijele stranice, napravit ćemo projekt koji ćemo objaviti: dobro napravljenu stranicu, sa svim
zahtjevima koje mi programeri koristimo. Kad imamo stranicu, objavit ćemo je. A kad je objavimo, kao bonus track, poboljšat ćemo neke stvari u dizajnu, dodati animacije, dodati magiju. I s tim ćemo imati svoju web stranicu. I shvatit ćeš kako je uređivati, kako mijenjati tekstove, kako mijenjati dizajn, i sve to bez ijedne linije
koda. Sad kad znamo što ćemo raditi, bacimo se na posao! Prije nego počnemo, ovaj video sponzoriramo mi, The Mariscal! The Mariscal Project je softverska tvrtka koju smo osnovali mi, ekipa programera s više od 10 godina iskustva. Cilj nam je demokratizirati kvalitetan softver. Mi smo Robin Hoodi informatike. Ideja je da male tvrtke i poduzetnici mogu imati softver međunarodne kvalitete, kakav koriste velike tvrtke. Možemo poboljšati tvoju stranicu, napraviti reviziju, dodati sigurnost ili
je jednostavno napraviti od nule. Ili napraviti softver baš za tvoju tvrtku. A ako si psihologinja, zubar, tattoo majstor ili brijač, imamo i softver koji je u biti WhatsApp s prilagođenim vodičem za tvoj posao, koji klijentima može davati termine preko Google Calendara, upisati sastanak i javiti se tebi. Dakle, znaš: ako imaš neku ideju za web, aplikaciju, bilo što, računaj na nas. Uđi na themariscal.com i
tamo nam ispričaj svoju ideju. E sad, nastavljamo s videom. Dobro, prvo što ćemo napraviti je otići na GitHub. Potražit ćemo ga na Googleu, ali možeš i direktno na github.com. I napravit ćemo račun. Ovo je važno jer ćemo ovdje spremati sav naš kod, kod koji AI bude generirao, i imat ćemo spremljen svaki korak.
Osim toga, poslužit će nam da objavimo stranicu kad bude gotova. Kad imamo GitHub račun, skinut ćemo aplikaciju. U ovom slučaju za Mac, ali radi i na Windowsima. Skinut ćemo je i pokrenuti s radne površine. Ova aplikacija će nam omogućiti da upravljamo GitHubom i, u isto vrijeme, da AI dobije pristup GitHubu. Kad se skine, dobro, otvorim je. Instalirat ću je. Ja je u ovom slučaju već imam instaliranu, zato mi se pojavljuje ovo. Ali ako nemaš, samo je
mirno instaliraš. Cilj je, kao što sam ti rekao, prijaviti se u račun i upravljati odande. Kad to
imamo, idemo na Obsidian. Skinut ćemo ovu aplikaciju. Ima je i za Windowse. I ovo će nam omogućiti da čitamo dokumentaciju koju ćemo pisati. A kasnije, vidjet ćeš, i da upravljamo tekstom stranice. Kad je skinem, i Obsidian ću instalirati. I nju već imam instaliranu, zato mi se pojavljuje ovo. Ali ti ćeš je mirno instalirati. I s tim... Ne moramo je koristiti sad, ali moramo je imati instaliranu. Sad ću otvoriti GitHub račun u svojoj aplikaciji. Za to otvorim aplikaciju i
odobrim. Vidi kako je lako. Ali to je ključan korak. Kad sam je otvorio, već mogu ući. Ovo uvijek ostavim kako jest. To je za podešavanje, recimo, kako će se stvari slati. Po defaultu uzme podatke koje si već unio, a to je ono što
nam treba. Sad otvaramo GitHub aplikaciju i idemo ovdje gore: File, New repository. Ovdje ćemo spremati stvari, odnosno projekt koji ćemo napraviti. Dat ću mu ime, u ovom slučaju New Website, i napravit ću ga u ovoj mapi Documents/GitHub, po defaultu. Napravim repozitorij i objavim ga. Ali pazi da uvijek piše «Keep this code private». Kad objavim repozitorij, ovo mi traži dopuštenje, jer je GitHub aplikacija nova pa još nema određena sigurnosna dopuštenja. Ali dodavat ćemo ih usput. Kad
to imam, mogu otvoriti ChatGPT. Uvijek provjeri da je najnovija verzija. To je prilično važno, kažem ti. I ovdje u projektima dodat ću projekt. Ali prije toga ti želim pokazati da mora biti na Work da mi dopusti otvarati projekte. I ovdje otvorim mapu koju sam upravo napravio, New Website. Prazna je, ali tako i treba biti. I dam joj ime da ChatGPT zna: New Website. Stisnem «Trust
folder». I sad napokon možemo početi. Napisat ću mu: «Instaliraj ovaj skill». Samo to. A model: vidi, ovdje imam Sol, ali preporučujem ti da koristiš Astra. Ja ću ga ovdje koristiti na High, koji daje bolji rezultat. Ali možeš ga koristiti i na Medium. Kad dođemo do dizajniranja, tad ti preporučujem da ga stavimo na High, jer su rezultati bolji. Instaliram ga i sad će razmišljati. I kad to pregleda, instalirat će ga. A kad bude
instaliran, moći ćemo ga pokrenuti. U ovom slučaju pokrenut ćemo ga tako da napišemo kosu crtu i «themariscal». Tako se zove skill: themariscal-create-amazing-website. Samo ga pokrenem i skill već zna sve što treba napraviti. Postavit će projekt. Tebi će to trajati malo duže. Ja sam, da video ne bude predug, izrezao dijelove gdje ChatGPT razmišlja i razmišlja. Ali ovo je rezultat koji ćeš dobiti: instalirat će sve ove dodatne skillove. Dakle, od The Mariscala treba nam samo jedan skill, ali on donosi i skillove drugih
ljudi koje će pokrenuti kad bude potrebno. Prvi korak skilla je, dakle, provjeriti imaš li potrebne skillove. A ako nemaš, treba sve instalirati, kao u ovom slučaju. Završi instalaciju i već možemo raditi. Sad traži da objasnimo kakav web želimo napraviti. Ja ću u ovom slučaju napraviti web za prodaju tenisica, za ovaj primjer. To je webshop za prodaju tenisica.
Dakle, s tom informacijom skill će napraviti cijeli plan i Obsidian, mapu, da možemo raditi korak po korak i da se koraci spremaju. To je važno. Budući da ovdje koristimo Obsidian, sve će spremati tamo. Dakle, sad mi govori da ne može objaviti na GitHub. Treba mu odobrenje. To će ti se dogoditi na početku, ali kad mu jednom daš odobrenje, više ti se neće događati. To je zato da
ChatGPT može slati kod na GitHub, a to će nam poslužiti da pratimo sve što radimo. Ovdje mu dajem dopuštenje zauvijek. Mac traži da otvorim Accessibility, i jedino što moram napraviti je uključiti ga, kao povlačenjem, ovako kako se vidi ovdje, i upisati podatke administratora računala.
Dobro. I ovdje upišem podatke administratora. Kad to imam, moram napraviti isto i za snimke zaslona. To je zato što će ChatGPT raditi screenshotove da analizira što radimo. To će biti jako važno za dizajn za mobitele i takve stvari. Dakle, kad sam mu dao dopuštenja, trebao bi moći slati na GitHub. I kaže da je dokumentacija već poslana na GitHub.
Ali kao što vidiš, potrošio sam plan. Svejedno, nema problema. Ja ću se odjaviti i ući s drugim računom, a to nam neće nimalo naštetiti, jer sve spremamo u jedinstvenu memoriju napravljenu
s Obsidianom. Što je Obsidian? Obsidian je kao bilježnica, mjesto za spremanje bilješki. Razlika i snaga Obsidiana je u tome što su te bilješke povezane. Dakle, Obsidian povezuje bilješke međusobno i stvara nešto kao mentalnu mapu. Čemu to služi?
Da ChatGPT dokumentira sve što radimo i sve to povezuje. A kad mu poslije nešto zatreba, naći će to jako brzo. To ChatGPT-ju daje neograničenu memoriju. Onaj problem da se ničega ne sjeća, Obsidian rješava. Ali bez brige, nećeš ništa od toga dirati. Samo ćemo to napraviti, a ChatGPT će se pobrinuti za sve.
Sve spremamo u jedinstvenu memoriju napravljenu s Obsidianom, i iako je ne vidiš, ta mapa postoji. Da vidiš, odeš u mapu New Website i tamo imaš Obsidian. Ovdje imamo sve što je ChatGPT napravio i sve što će još napraviti prema planu koji slijedimo. Ovdje to možeš vidjeti. I to je mapa, sve povezano. Budući da
je ovo novi ChatGPT račun, ponovno ću uvesti projekt. I to će nam omogućiti da nastavimo raditi. Vidi kako ovdje uvozim projekt i ne moram mu ništa reći, ni objašnjavati bilo što. Samo kad mu kažem «Continuemos», skill zna na kojem je koraku.
Ovaj skill je zamišljen da prolazi više koraka. Ukupno ih je mislim 18 ili 19. Svaki korak usput šalje na GitHub, a usto pamti na kojem je koraku. Ovdje piše: «Projekt je uspješno napravljen». To je korak 1. Dakle, jedino što ću tražiti je da nastavimo. Ovdje ChatGPT-ju kažem «Continuemos» i već zna što treba
napraviti. Nastavio je s mogućnostima skilla. A sad ćemo napraviti strukturu stranice. Prvo trebamo složiti strukturu svake stranice koju ćemo imati i kakva će biti unutarnja struktura. Za to ćemo koristiti snimke zaslona s nekog drugog weba. Ali može i ako to nacrtaš olovkom i slikaš. Ili, na primjer, možeš napraviti kolaž u Photoshopu ili nekoj drugoj aplikaciji, gdje s jedne stranice uzmeš header koji ti se sviđa, pa onda staviš karusel, na primjer, ili što god. I taj kolaž dat ćemo ChatGPT-ju, jer će on iz njega izvući strukturu. Dizajn
sad uopće nije bitan. Napravit ćemo nešto kao kostur stranice koju želimo napraviti, da je poslije možemo dizajnirati. Ako već imaš neku referencu ili nešto, možeš je staviti ovdje. Ja ću se osloniti na nešto što već postoji, u ovom slučaju Puminu stranicu. Kliknem ovdje, desni klik, Inspect. Odem na konzolu i stisnem Command plus Shift plus P. I tu mi se pojavi ovo, gdje ću odabrati da napravi screenshot cijele stranice. I kad to imam, dam sliku
ChatGPT-ju i napišem da je to home. On će napraviti .md datoteku, Markdown, u koju će staviti sve informacije o strukturi. Dakle, nemojmo misliti da ovdje kopiramo dizajn ili nešto. Samo strukturu. To će nam omogućiti da napravimo wireframes, što će biti jako vrijedno za sljedeći dio, dizajn. Kad se to učita, učitat ću i druge stranice, na primjer što se događa na product detail, odnosno na stranici proizvoda. Ovdje imam ovaj način koji koristi Puma, a za ovo što ja radim čini mi se
prilično korisnim. Dakle Command Shift P, ili Control Shift P ako si na Windowsima, i potražiš ovo što piše «Capture full size screenshot». Napravit će mi sliku i spremiti je u Downloads, i ako je pogledam, to je cijela stranica, cijela ta stranica. Tako ne moram raditi više screenshotova. Samo ovaj, i s tim ga dam ChatGPT-ju. I ovdje mu moram reći da je to stranica proizvoda, product detail. Dobro, ovdje mu samo treba reći kojoj stranici pripada i spremit će je u Obsidian koji smo napravili, a ja ga mogu i dalje pregledavati ako želim. Tu mi kaže
da će spremiti referencu. I sad je sprema. I kaže... slika, dobro, malo ti opiše što vidi. I onda možeš napraviti još. Ako ne, samo mu napišeš «Gotovo». Ovdje u Obsidianu vidim strukturu i vidim da ovdje imam home. To mi je napravio od slike koju sam mu dao.
Nema nikakvih informacija o dizajnu, samo o strukturi stranice. I s tim mogu napraviti još stranica, dakle koliko god želim ili one za koje već znam da će ih moj web imati. Naravno, kasnije možemo napraviti još, ali što bolje informacije damo sad, to će bolji biti posao koji ćemo moći napraviti. Dakle, ako ih već imamo, dodajmo ih. Možeš i nacrtati olovkom na papiru, slikati i uploadati. I to će raditi. Ili, ako već imaš dizajn, recimo u Photoshopu, Figmi, bilo čemu, možeš ga uploadati da iskoristi strukturu koju već imaš. Ili ako već imaš stranicu i
želiš je redizajnirati, samo ovo napraviš sa strukturom svoje stranice. Budući da mi krećemo od nule, napravit ćemo ovako. I ovdje ću staviti ovu sliku, to je slika checkouta. Povučem je u ChatGPT i kažem mu da je to slika checkouta.
Gotovo. S tim bi već trebao znati koja je to slika da je spremi u Obsidian. I onda mi kaže da ju je spremio i pita želim li stvoriti još. Želim li vjerovati? Vjerovati želim uvijek, ali dobro. Sad... Dobro, neka stvara. Želim vjerovati da će sve ispasti predivno. Dobro, za to sad ja, na primjer, ispunjavam ovaj obrazac lažnim podacima, samo da me pusti na sljedeći ekran, a to je odabir načina plaćanja.
Dakle, ovdje ćemo staviti... Dobro. Sad... mi dopušta da odem na stranicu s načinima plaćanja. I ovdje mogu napraviti još jedan screenshot. Opet, napravim ono s konzolom, kao s Cmd+Shift+P. To mi otvori ovaj izbornik gdje mogu potražiti «Capture full size screenshot». Već je imam u mapi
Downloads. Ovdje je imam cijelu. I sad ću otići u ChatGPT, dati mu je i reći da je to Payment Method. Ovdje, čim sam mu rekao, počne razmišljati i spremit će i nju u Obsidian. Sve sprema tamo.
U ovom dijelu skilla on analizira informacije koje mu damo, slaže .md dokument, ali bez obzira na dizajn. Kao što sam ti rekao, sve ovo nam treba da napravimo wireframes. I vidimo da i dalje razmišlja. Pokazuje, bla, bla. Analizira i stvara je. Gotova je. I «Želiš li napraviti još?». Ako želim, potražim još jednu, a ako ne, samo napišem «Gotovo». Ja ću dodati još jednu, stranicu s kategorijama, to ima svaki webshop. Ovdje vidim da na ovoj stranici, u ovom dijelu koji pregledavam... Tražim dio s
kategorijama. Ova mi odgovara; ovdje je to za djecu, i odgovara mi. Budući da vidim da stranica ima beskonačni scroll, neće mi pomoći ono snimanje cijelog zaslona. Zato ću napraviti običan screenshot, stiskom na Command Shift 4 na Macu, što mi omogući da označim dio zaslona. Dakle ovdje, tak!, uzmem taj dio. I to dam ChatGPT-ju, screenshot, onakav kakav mi ga spremi. Ali budući da obuhvaća jako malo, pokušat ću uzeti još jedan dio
zaslona. Ali budući da je donji dio i sve to isto, ostavit ću ovako. Ali trebaš znati da možeš napraviti više screenshotova da složiš jedan ekran. Dakle ovdje mu kažem da je ovo ekran Category. Kao što smo već vidjeli, počne razmišljati. Dobro, spremit će sve to. Kategorija prikazuje filter, blablabla. Dakle, analizira sliku. I ovdje kaže da ju je spremio. Zapamti da tebi može trajati malo duže nego što se vidi u ovom videu, jer je ovo montirano da bude malo tečnije. Ovdje sam završio i pišem mu «Gotovo». I sad će, kad je
već sve napravio, napraviti sitemap. Dakle, napravit će datoteku u Obsidianu, gdje to sprema, da zna koje su sve stranice koje smo učitali i da ih poveže međusobno, što će nam omogućiti
da poslije napravimo prototipove. I kaže: «Korak 2 uspješno izvršen». I sad moramo napisati «Continuemos», da nastavimo s korakom 3. I tu će isto razmišljati. I kaže da je faza 2 gotova. Već imamo, blablabla, na početku. Nastavljamo s dijelom 3. Dakle, mapa je već spremna. To je bio sitemap o kojem sam ti pričao. U fazi 3 napravit ćemo, recimo, sitemap kao gotov, spreman za dizajn stranice. Ovdje traži da ga odobrim. I to ćemo raditi puno puta, to potvrđivanje. Jer ako trebaš
nešto ispraviti ili slično, sad je pravi trenutak. U ovom slučaju zadovoljni smo, pa mu kažemo «Continuemos». I korak 3 je završen.
Idemo na korak 4. Uvijek pogledaj da ovdje piše «Nastavljamo sa zadatkom». To je zato što gleda što je već napravljeno. Skill zapisuje svaki korak. Već ima cijeli plan i zapisuje svaki korak, da zna gdje je. Sad ćemo početi raditi wireframes. Što su wireframes?
Wireframes se koriste u dizajnu i slaganju stranica i aplikacija da pokažu strukturu svake stranice ili svakog ekrana. Dakle, ima li header, ima li karusel, ima li popis slika, kako je posloženo, kako će to izgledati na mobitelu. Na primjer, mogu vidjeti na webu tri stupca, na tabletu dva, a na mobitelu jedan. Takve stvari se vide u wireframeu. To je ključno i to je ono po čemu se razlikuje hoće li nešto ispasti dobro ili loše. Zato mi u The Mariscalu imamo knjigu «Kako se osmišljava aplikacija», koja košta samo 10 eura, u kojoj
objašnjavamo sve to, kako od ideje doći do strukture, nacrtati wireframes i sve to, pripremajući sve za rad s AI-jem. U biti, wireframe je kostur bez dizajna, kako izgleda struktura stranice. Ovdje, da napravi slike i sve to, a to su, recimo, HTML datoteke i ostalo, koristit ćemo skriptu, Python skriptu, i to je ono što mi ovdje traži da prihvatim. Mirno ću prihvatiti. I ovdje će me pitati smije li koristiti Chrome, a ja ću odabrati da ga uvijek smije koristiti, jer ćemo ga stalno koristiti u ovom videu. A ja
sam stavio da sve odobri. Dakle, tu dolje možeš staviti da te pita, ali ja stavim da me pita samo važne stvari. Ovdje vidimo da već radi, recimo, HTML datoteku. To znači da je to datoteka za web, ali bez ikakve logike. Sad se samo fokusiramo na dizajn. I evo, ovdje vidimo stranice koje smo napravili, i s tim će mi napraviti wireframes svake stranice da ih mogu pregledavati. Ovo je ključan korak, jer puno ljudi odmah počne dizajnirati s AI-jem pa poslije ne
znaju zašto im stranica ne ispadne dobro. U biti je zbog ovoga, jer ti prije nego primijeniš dizajn moraš imati kostur. Kad smo radili web stranice s kodom i svime, prije nego je izašla umjetna inteligencija, wireframes su bili ključni da, prije nego prijeđeš na proces dizajna, već dobro znaš koje ćeš strukture trebati. Dakle, to je način koji smo ovdje vratili u The Mariscalu da možemo graditi stvarno kvalitetne web stranice, i da poslije, neovisno o strukturi, možemo izabrati više vrsta
dizajna. Evo što ovdje radi ChatGPT: slikao je, recimo, stranicu, jer kod izrade wireframeova, kostura, pokušava napraviti i da se prilagodi mobitelima i tabletima, iPadu i bilo kojem drugom tabletu. Pa usput slika da vidi prilagođava li se.
Pogledajmo, ovdje već imamo dio sa strukturom. I tako to izgleda. Kao što vidiš, crno-bijelo je, bez ikakvog dizajna, ali to je baš ono što nam sad treba. Dakle, sad je ideja napraviti wireframes svih stranica koje smo mu nabrojali u prethodnom koraku, ali usput će ih i povezivati linkovima.
Dakle, to će biti važno za prototip. Ovdje vidimo da imamo payment method, ne, checkout, mislim da je ovo, i onu drugu, payment method. I tako će napraviti sa svima. Za to usput analizira i radi još screenshotova, dok za ChatGPT nije dobro: košarica i promjena. Poslao je, bla bla bla. I ovdje kaže da su wireframes spremni i da ih mogu otvoriti u pregledniku. Prva stranica bila bi kao popis svih stranica koje imamo, a ovdje vidimo kako izgledaju wireframes.
Na ovo sam mislio kad sam govorio o strukturi. Vidiš, tu imamo popis koji se pomiče vodoravno. Dobro, i ovo, ti kvadrati s križem, to je način da se označi da tu ide slika. Vidimo da u kategoriji imamo filtere i imamo slike. Vidimo da i na stranici proizvoda imamo način za odabir proizvoda i sve ono što smo vidjeli da ima ona druga stranica. U biti checkout i sve. Ovdje nas zanima samo raditi na strukturi, ne na sadržaju. Ako želiš mijenjati sadržaj i sve to, dobro, možeš i sad, ali bolje je to napraviti poslije, kad bude
složen projekt, da to možeš napraviti na lak način, mijenjajući tekst. Evo, vidi, ovo mi je ispalo odrezano jer je screenshot bio odrezan, onaj koji sam mu dao za category, sjećaš se? Dakle ovo mogu ispraviti sad. Napišem mu: «U category je sve odrezano, to je na screenshotu koji sam ti dao», objasnim mu, «bilo odrezano, ali sad trebam da staviš slike kako treba». I još ću tražiti da doda footer, koji smo imali i na drugim stranicama. Dobro, ovdje napišem: «Napravi kao
na ostalima i dodaj footer». Mogu mu reći da doda kao na ostalima jer nam korištenje Obsidiana omogućuje da ChatGPT pogleda tu memoriju i zna što smo napravili. Dakle, ChatGPT ovdje neće ništa nagađati: mi ćemo mu uvijek reći što ćemo raditi. Dakle: «Da, dovršit ću kartice», blablabla. Dobro, radi. Pričekamo malo da izvrši naredbe i čekamo, dakle, da napravi tu promjenu. I ovdje vidimo da to pokrećem u pregledniku da vidim bolje, i mogu to mirno vidjeti: već ima footer i više nije
odrezano. Dakle, kad ovo bude gotovo, možemo prijeći na sljedeći korak. Dobro, ovi rezovi koji se ovdje pojavljuju onako naglo su zato što mu nekad dugo treba da napravi neke promjene. Pa sam izrezao video da to bolje objasnim i da ne bude tako dosadno za gledanje. Ali ovdje kaže da je faza wireframeova gotova. Dakle, ono što radi: sljedeća faza wireframeova, i testiranje. Zato kaže da je faza pet gotova. A zanimljivo je da su wireframes napravljeni za računalo, za mobitel i za iPad. Dakle, kad to završi,
možemo prijeći na fazu gdje dodajemo malo dizajna. Ovdje mogu napraviti zadnju brzu provjeru da vidim je li sve u redu. Kod mene je sve u redu, pa mu napišem: «Gotovo, idemo dalje», odnosno... napišem mu: «Gotovo, savršeno, idemo s ostalim».
Dobro, ovdje kaže da je verzija odobrena. Uvijek, nakon ovako važnog koraka, kao u ovom slučaju wireframes, čekat će odobrenje ili će promijeniti stvari koje mu
kažemo. U ovom slučaju kažem mu da nastavimo. I ovdje je sljedeći korak dizajn. Ako sam već napravio druge dizajne, recimo da sam ovo već radio, koristio ovaj skill za neki drugi web i želim iskoristiti dizajne koje sam tamo prikupio, ne moram sve počinjati od nule: mogu ih uvesti u mape. Ali budući da ovdje krećem od nule, napisao sam da analiziramo. Ući ću ovdje na Dribbble. To je web gdje se vide prilično dobri dizajni koji će nam poslužiti kao inspiracija. Nećemo ih kopirati, samo ćemo naučiti ChatGPT što je dizajn za koji mi smatramo
da je dobar. Tražit ću, ovisno o tome što radim, recimo. Ovdje tražim trgovine i pojavi mi se ova koja mi se sviđa. Ne moraju me sve oduševiti, recimo, samo da vidim neki potencijal. To će nam biti baza za dizajniranje našeg. Ovdje kopiram i ovu, a ja ću kopirati barem tri ili četiri, recimo. I ovu ću kopirati. Ono što radim je da skidam sliku u Downloads da je poslije dam ChatGPT-ju. Dakle, ovdje skinem, i ovo je prva. Sad ću mu dati sliku, povučem je
i kažem mu pod kojim imenom želim da spremi taj dizajn. Dakle, kako želim da spremi dizajn u Obsidian. Ovdje ćemo napisati «Dark». I ovdje će biti suprotno od onog što je radio za wireframes. Dakle, sad će gledati dizajn, a ne strukturu. Zato nije bitno kakvu strukturu imaju ovi dizajni: gledat će boje koje koriste, tipografiju, sve to, ali ne i strukturu. Dakle, nije bitno ima li struktura veze s onim što ti radiš. Možeš mirno koristiti bilo koju drugu stranicu koja nema nikakve veze. I ovaj dizajn mi se svidio, pa ću ga
dati i reći mu da će se ovaj dizajn zvati «Verde». Ne kompliciram puno s imenima jer je ovo samo jedna od mnogih faza koje ćemo proći i, kao što sam rekao, dizajn ćemo poslije mijenjati, recimo. Ovo će nam poslužiti da vidimo više verzija onoga što radimo, što želimo napraviti. I sad me pita želim li nastaviti dodavati ili stajemo. Kad god stajemo, recimo «Gotovo». Dakle, sad ću staviti sljedeći dizajn koji sam izvukao, a to je ovaj ljubičasti, povući ću ga, staviti u ChatGPT kao i dosad
što radimo: «Violeta». I ovdje će u Obsidianu, poslije ćemo vidjeti, napraviti .md datoteku za svaki od ovih dizajna. I to je ono što mu možemo dati ako smo ga već napravili, jer smo, na primjer, radili drugi web s ovim skillom: iskoristit će te dizajne da ne moramo sve ovo raditi svaki put i ponavljati. Dakle, to radimo. Već mi ga je spremio, a ja ću potražiti još jedan da ti dobro pokažem kako funkcioniraju ti prototipovi. Ni tu ne želim previše komplicirati, ali pokušat ću naći nešto drukčije od onog što
sam već imao. Dakle, ovo traženje je prilično važno jer će postaviti temelje na kojima će se graditi dizajn stranice. Zato je dobro da posvetimo vrijeme traženju stvari koje nam stvarno koriste, a ne da ubacimo bilo što. Dakle, nemoj stavljati bilo što, jer iskreno, četiri dizajna su sasvim dovoljna. Naravno, možeš staviti više, ali onda će morati raditi više predložaka, više stvari, i to će samo produljiti proces, a i više će te koštati. Zato mi se čini da su četiri dovoljna. Četiri koja si izabrao s glavom,
recimo, znajući da je to slično onome što želiš napraviti. Dobro, malo mi je teško izabrati jer su sve jako slične onima koje već imam. Želim naći nešto malo drukčije. Dakle, posvetim tome malo vremena, ali i da ne kompliciram previše. Dobro, pokušat ću brzo izabrati jednu koja izgleda drukčije od onog što sam već imao.
I čini mi se da je ova prilično zanimljiva. Idemo... spremimo je, i potražim je isto u Downloads, i stavim je u ChatGPT, i kažem mu da će se ova zvati «Pink». I s tim je već mogu spremiti.
Sad će razmisliti i napraviti sve kao maloprije. I kad to bude gotovo, mogu zaključiti ovaj proces. Imam četiri, to mi je više nego dovoljno. I pita me želim li nastaviti dodavati, ali ja ću mu reći da ne, da smo dobro. Pa napišem: «Gotovo, i continuemos», ili u ovom slučaju: «Idemo na sljedeće». I onda, kad nastavimo,
zatvorit će reference, odnosno zapisat će da su to sve reference koje smo mu dali. I s te četiri reference potvrdit će ih, recimo, gledajući da... ovaj, dolazi kriterij datoteka koje stvara. I tu mi isto traži odobrenje, i
kaže mi da nastavljamo s brendom. U ovom slučaju pita imam li nešto. Ako imaš, daj mu, a ako nemaš, kao ovdje gdje nemamo ništa, napravit ćemo istraživanje brenda. To istraživanje je u biti isto što smo radili za dizajn, ali samo za brend. Za to uđem ovdje na Google i tražim brendove cipela, jer to mi želimo prodavati. A ti ćeš upisati ono što ti radiš. Možeš tražiti na puno načina, tu nema nikakve znanosti.
Samo logotipe za koje mislimo da bi nam mogli poslužiti, samo kao inspiracija, jer ćemo ih i poslije mijenjati. Ali kad nemaš ništa, ovako početi je dobar način. Ovdje, dobro, tražimo neki brend koji nas uvjeri. Da, promijenit ću pretragu i upisati sad «dizajn brendova trgovina».
Dobro, ovo što sam našao ću otvoriti i napravit ću screenshot. Neću davati sve, dakle trebamo dati samo jedan, onaj koji mi se svidio, ovaj u sredini. Pa napravim screenshot s Command Shift 4. Na Windowsima, dobro, napravit ćeš ga kako si navikao. I ovdje napišem čiji je brend, zar ne? Dakle, kako želim da ga spremi. Dakle, dobro, analizira ga, taj brend, i s tim će spremiti .md datoteku da možemo napraviti naše. Ovdje mi kaže, dobro: «Ističe se crveni potez kistom», blablabla. Analizira ga i već ga
sprema. «Želiš li dodati još brendova?» Mi ćemo dodati još par, isto tri ili četiri, ne puno više od toga. Stavit ćemo i Levi's. Napišemo mu da je to Levi's i pošaljemo. Dobro: «Dodat ću Levi's», dobro, blablabla. Radi .md datoteku, a sad ću ući i na Dribbble da potražim drukčiju inspiraciju.
Uglavnom su to mjesta koja ja najviše koristim, recimo: Googleova tražilica i ovo. Možeš koristiti i Pinterest ako želiš. I ova mi se svidjela, napravit ćemo screenshot i dati mu ga. Bez brige, ne kradem ništa. Samo gradimo ChatGPT-jev kriterij da dobro zna u kojem smjeru želimo ići, recimo, a to može biti jako različito od slučaja do slučaja. Zato radimo ovo s referencama, a to su samo to, reference. I kad imam ove tri,
reći ću mu da, dobro, nastavimo, idemo dalje, jer meni su tri iskreno dovoljne: «Gotovo, idemo dalje». I dobro: «Napravit ću...», blablabla. Isto što radimo i dosad. I ovdje me pita kako se zove moj brend. Ja ću staviti brend za ovaj primjer, a to je shoezzz, spoj shoes i zzz.
To će biti moj brend. Ti ćeš ovdje naravno staviti svoj. I s tom informacijom već ćeš vidjeti kako treba složiti stvari. Sad će, uzimajući ime koje sam mu dao plus referencu koju sam mu dao, ChatGPT napraviti ovo kao mockupe, recimo, da mogu izabrati jedan.
Ovdje mi pokazuje kako će izgledati primjer korištenja. Treći, treći mi se najviše sviđa, recimo, u ovom slučaju. I reći ću mu da koristimo ovaj Mega Absorb.
Naravno, napravit će ti po jedan za svaku referencu koju si mu dao. Pa ako si mu dao 6, imat ćeš 6 i tako ćeš moći birati. Sad i ti moraš izabrati jedan. Bez brige, i to možemo poslije promijeniti. Ovo samo daje referencu da imamo nešto što možemo mijenjati.
Dakle, da ne krećemo od nule, recimo. Problem je kad želiš odmah krenuti s gotovim dizajnom, da ti odmah ispadne dobro, a ovo je više koraka, recimo. To je otprilike ideja ovog skilla, ali i tako se stvarno radi na profesionalnoj razini. I sad... kaže nam da je odobreno. Pa tu moram kliknuti «Authorize», i onda počne stvarati slike koje nam trebaju za cijelu stranicu. Vidi ovu koju mi je ovdje napravio: prilično je dobra.
Kao što kažem, poslije je možete mijenjati, ali za početak je dobra. Ovdje mi napravi, kao što vidiš, i crno-bijelu verziju, jer i te verzije trebaju za razne dijelove stranice. Dakle, kad god napravi nešto u boji, pokušat će napraviti nešto što se može koristiti i tako: brend kao riječ i brend kao slika.
Kao što vidimo ovdje, ovo će nam poslužiti za ikone weba. Uvijek je važno imati ovakav logo, za kad ga spreme u favorite i slično. I ovdje mi pokazuje kako izgleda u tamnom i svijetlom načinu, kakva će biti implementacija. Usto provjerava da dobro izgleda na mobitelu. Ovo će biti kao profil brenda, što će biti prilično korisno za daljnje korištenje. Možda poslije napraviš profil brenda, dokument isključivo za to, i ovaj dokument će ti poslužiti kao baza. Zato pazi da bude dobro prilagođen. I sad će
počistiti, optimizirat će ono što smo već napravili, što smo već testirali. Ako na primjer ovdje imam još neku primjedbu, recimo «želim da potez kistom bude plav, a ne crven», sad mu je pravi trenutak to reći. Dakle, prije nego mu kažeš da je savršeno, kao što sam ja ovdje napravio, daješ mu te primjedbe da ponovno napravi brend dok te ne uvjeri. Kad te uvjeri, kažeš mu da nastavimo. I sad to dobro provjerava. Možda se čini da je to puno provjera i svega, ali vidjet ćeš, kad vidiš konačni rezultat shvatit ćeš zašto to
radi. U ovom slučaju to radi da uvijek provjeri da se stvari
dobro vide posvuda. I kad imam brend, možemo prijeći na najuzbudljiviji dio, a to su dizajni. Upravo, da bi mogao napraviti dobar dizajn, trebao je imati brend, zato ga traži sad. I ja mu ovdje kažem da nastavimo sa svim koracima.
Kaže mi koji će skill koristiti, i dizajne koje sam mu dao: Dark, Verde, Violeta i Pink. Koristit će skill huashu-design i prototype za izradu prototipova. Sad ćemo moći birati između više verzija, ali nemojmo sad biti previše izbirljivi, jer ćemo to moći poslije mijenjati, recimo, kad već imamo bazu. Ovdje me pita što želim sa slikama. Budući da koristimo ChatGPT, a ChatGPT može generirati slike, tražit ću da koristimo ogledne
fotografije, recimo. Dakle, da generira fotke koje će nam poslužiti kao primjer. Tako mogu vidjeti nešto sličnije konačnom rezultatu. Zato napišem da koristi ogledne fotografije. I kad to imam, sljedeći korak je da napravi prijedlog. Dakle, ovdje nisam... nisam stigao kliknuti i nastavio je automatski. Ali, kao što vidiš, mogu kliknuti i ponovno dati odgovor da ChatGPT ne izmišlja nego se oslanja samo na ono što tražim. I sad će nastaviti razmišljati: «Koristit ću fotku koja», bla bla
bla bla. A fotke... već su spremljene i pregledane. I ovdje generira.
E sad da, s datotekama stilova, koje prije nije koristio. I ovdje vidimo kako... ovo će stvarno potrajati, recimo, ovdje izgleda prilično brzo. Napravit će datoteku za svaki dizajn, ali samo za home, da možemo birati, recimo. A poslije možemo nastaviti. I napravit će mi i stranicu gdje se svi mogu vidjeti i pregledati, kao kazalo. Ovdje već vidimo prvi dizajn.
Dakle, bio je napravljen prema ovom dizajnu Dark. I ovdje ChatGPT skida slike, jer usput provjerava. Vidi, tu je kako bi izgledalo na mobitelu vodoravno. I isprobat će sve rezolucije da dobijemo verziju svakog, ali da ta verzija bude dobro strukturirana, recimo. Sve to jer smo tako napravili i u wireframeu, i tu vidimo koliko je važno napraviti wireframes. Ovdje već vidimo kako bi prvi dizajn izgledao na mobitelu. Već gledamo drugi dizajn. Vidi, iako je struktura ista,
mijenjaju se boje, mijenja se tipografija. To je ideja. Zatim, ovo je dizajn koji smo nazvali Violeta, i gledamo ga u svim rezolucijama, jer ga ovdje isprobava, skida slike. A ovo je već dio zadnjeg dizajna koji smo stavili, Pink. Mijenja se cijela tipografija, mijenja se boja gumba, mijenja se sve to, a to su informacije koje izvlači iz dizajna koje mu dajemo. To je magija skilla, recimo, da svaki proces, svaki trenutak izrade stranice
stvara dokumente koje poslije možemo mijenjati po svom ukusu, ali u tim dokumentima su konkretne informacije za taj korak. I to je otprilike ideja koju želimo prenijeti ovim projektom: nije da ćeš napisati prompt «Napravi mi najbolju stranicu na svijetu» i gotovo. Vidi kako smo tražili reference, kako smo to slagali. Vidi ovdje ovaj pop-up, modal, kako ga zovemo mi programeri. I modal dizajnira. I sad je korak u kojem smo izrada različitih vrsta dizajna
da ih vidimo već s wireframeom. Dakle, umjesto da gledamo neki generički dizajn, gledamo kako se taj dizajn primjenjuje na strukturu koju smo napravili wireframeom. Dakle, kad sve to vidimo, možemo izabrati svjesno. A kad izaberemo, napravit ćemo prototip sa svim ostalim stranicama koje smo zapisali u prvom dijelu, recimo. To je prednost ovakvog rada: da na početku možeš dobro izabrati stranice da poslije imaš prototip prilično
vjeran onome što će stvarno biti konačni proizvod, recimo, i sličan onome što će biti konačni proizvod. Jer sad radimo vizualni dio, to nema nikakve veze s animacijama, sa svim onim stvarima koje dolaze poslije, u završnim koracima, kad stvarno napravimo projekt koji ćemo staviti na web. Da ti dam ideju, ako ne znaš ništa o programiranju, nema veze, ali što se tiče dizajna i slaganja weba, imamo datoteke koje se zovu .html, a to su datoteke koje ovdje vidimo na ekranu. Te datoteke su datoteke
u kojima se strukturira stranica, na primjer, koji će biti header, u ovom slučaju hero, ovo što imamo na početku, dakle prvi dio koji vidimo na početku. Ovdje ima dva stupca, koju tipografiju koristi, gumb, gdje ide gumb, takve stvari.
A animacije i takvo kretanje i ostalo, to ne bismo mogli reći... to se u ovom slučaju radi drukčije, s drugim bibliotekama i knjižnicama za animaciju. Ali dobro, zasad vidimo, imamo četiri varijante, četiri dizajna. I ovdje ih imamo kao...
Čak je i kazalo ispalo dobro, kako ga je skill napravio, lijepo je dizajnirano. Ali idemo ocijeniti dizajn. Ovaj prvi mi je super, čini mi se jako solidno napravljen. Ovdje koristimo skillove, osim našeg, koji provjeravaju dizajne, slažu ih što ispravnije. Ali vidi kako se wireframe, koji je bio crno-bijeli, pretvorio u ovo. U ovom slučaju meni se kao najprikladniji za ovo čini ovaj, Violeta. Ali pokazujem ti sva četiri. Ovako je ispao Pink. I tipografije su važne, iako ih poslije možemo mijenjati. Dakle,
kad imam dizajn koji mi se sviđa, moram to reći ChatGPT-ju. Pa ću mu napisati: «Violeta mi se sviđa». S Violetom. I sad će ChatGPT zapisati odluku i početi raditi sljedeće stranice weba, i sad stvarno napraviti prototip. Koja je razlika između prototipa i konačnog rezultata? U biti, konačni rezultat ćemo napraviti s Reactom, a to je biblioteka za izradu web stranica koju je napravio Facebook, i to je standard u programiranju, recimo, u
izradi weba. To je najpotpuniji standard. Dobro, ne znam bih li rekao naj potpuniji, ali da, najkorišteniji. A s potpunim mislim da se i softver radi s njim. A mjesto gdje ćemo deployati web stranicu je Vercel, koji je isto prilagođen za izradu s Reactom. Vidimo da će prototip, u ovom slučaju, biti u HTML-u da mi možemo, prije nego napravimo konačni projekt, sve podesiti. Vidimo da ovaj Mariscalov skill u ChatGPT-ju već radi malo ljepše dizajnerske stvari, kako sad stavlja fotku, kako koristi
tipografiju. Ovo ćemo svejedno još mijenjati, jer kad budemo imali prototip, tad dolazi još malo magije. Ovdje i dalje spremamo screenshotove, a ChatGPT i dalje kao provjerava dizajn za sve platforme, responsive dizajn, a i to je važno vidjeti u wireframeovima. Zašto?
Zato što, na primjer, ovdje u heroju imamo dva stupca, zar ne? To je standardna struktura u dizajnu stranica. U heroju se to zove F-format, jer vidiš kako korisnik čita: prvo header, pa onda, recimo, toolbar gdje je brend, pa naslov, odnosno glavni naslov, ispod opis i gumb za akciju, zove se call to action, a to je, recimo, gumb koji mora pokrenuti glavnu akciju. Ali naravno, vidimo da se na mobitelu ta dva stupca pretvore u jedan i gore
ostaje desni stupac. Ostaje gore; moglo bi biti i obrnuto, ali uvijek se preporučuje staviti tekst dolje. Vidimo i kako sad izgleda ovaj modal, koji je dobio dizajn ove stranice. To je dobra strana rada na ovaj način, jer su to čvrsti koraci. Nisu to stvari kod kojih mu moramo stalno govoriti «ah, ali nisam to htio tako», «ah, ali napravio si ovako». Jer kad napravi prijedlog, a mi jedan izaberemo, ono što radimo s ovim skillom je da stvaramo datoteku dizajna. Što to znači? Da
ima sve informacije o dizajnu, iz kojih će ChatGPT znati koje su karakteristike dizajna stranice. Pa će sve stranice graditi koristeći tu datoteku dizajna. Ovdje već dorađuju zadnji dio. U svakom slučaju, mi ćemo moći ispravljati stvari, a on stvara sve prikaze koji nam trebaju. I prototip... Smisao izrade prototipa prije konačnog projekta je upravo to da možemo promijeniti stvari koje
nam se ne sviđaju ili nam nisu baš drage u dizajnu i strukturi, jer poslije, kad počnemo dodavati animacije i dinamičnije ponašanje, ideja je da to već bude utvrđeno, recimo. Dakle, da ne mijenjamo stvari stalno, nego da iskoristimo svaki korak za izmjene onoga što se tiče tog koraka, i tako možemo nastaviti. Ipak, ideja je napraviti dizajn i stranicu koja je funkcionalna od početka, koja je baza, i koju poslije možemo dalje mijenjati. Vidjet ćeš kako ovdje, kad je
izabran prijedlog koji smo htjeli, već počinje raditi prototip, ali samo za home. Mi mu ovdje moramo reći da se slažemo, i s tim... ili da, odobravamo, isto je. I s tim će nastaviti. Ovdje kaže da će testirati verziju 1, a kaže verzija 1 jer u ovom koraku, baš kad smo izabrali dizajn, svaka izmjena koju napravimo stvorit će novu verziju. To je zato da poslije možemo reći: «Dobro, biram...»,
da imamo način za povratak. S tim je faza 11 gotova, i
sad mora nastaviti s prijedlogom za ostale, ostale stranice. Kažemo mu da nastavimo: «Da, može», napisao sam. I onda počne bilježiti opis i nastavit će s cijelim prototipom, kao što smo rekli. I tu postaje zanimljivo, jer sad već gradi stranicu, a vidi da skoro ništa nismo morali raditi, samo mu dati ideju i nastaviti s tim.
Dobro, ovdje sam morao zatvoriti ChatGPT, promijeniti korisnika, kao i dosad. Možeš i ti tako, a možeš i čekati. Ja sam za video to napravio ovako, ali zanimljivo je, vidio si da mnogi imaju osjećaj da se ChatGPT ničega ne sjeća, ili da sutradan sve zaboravi.
S Obsidianom ovdje nemamo taj rizik. Dakle, možeš ostaviti projekt tjedan dana, vratiti se i reći «continuemos», i sjetit će se svega. I ovdje i dalje stvara razne stranice i dalje provjerava responsive dizajne. Dobro, ...
sve rezolucije, da poštuje pravila dizajna. Ovdje vidimo kako radi dio s kategorijama, kako je stavio filtere, skida slike. Sve to radi automatski, ali ponekad malo zapne i treba to ručno spremiti. Ali drugi put ChatGPT sam stisne...
Ovdje, na primjer, mijenja ime, i ovdje vidimo kako se već počinje vidjeti stranica proizvoda. Mi ovdje ne radimo apsolutno ništa. On već zna koju stranicu mora napraviti i kako. Vidi da ima strukturu stranice koju smo pregledali na početku. Da je struktura bila drukčija, dizajn bi bio isti, ali struktura bi se promijenila. Kako je to zanimljivo, prvo raditi strukturu pa onda dizajn, pa onda napraviti prototip, i tek kad je prototip gotov krenemo s kozmetikom, mogli bismo reći, animacijama, ili čak ponovno napraviti i
redizajnirati hero, kao što ćemo i napraviti kasnije. Ovdje već imamo i checkout. Vidi kako mi zadrži, sa stranice koju smo pregledali, da su poštanski broj i grad u dva stupca, isto i ime. To je ono važno kod strukture. Kao što kažem, struktura je mogla biti i crtež olovkom na papiru, koji slikaš, jer naravno, važna je ta struktura stranice prije nego primijeniš dizajn. I tu puno ljudi griješi jer misli da ti sve odmah mora ispasti
gotovo, da odmah mora biti dobro dizajnirano, da odmah mora biti... Ali u biti ChatGPT ne zna što je za tebe mjerilo dobrog dizajna. Zna, zahvaljujući skillu koji smo mu dali i koracima, koja mjerila mora imati dobar dizajn, ali ne zna što ti tražiš. Dakle, umjesto da stvaramo i stvaramo i stvaramo, pa nam se ne sviđa, pa tražimo da se sve promijeni, vidi kako je na ovaj uredan i postupan način svaki korak koji napravimo čvrst korak i korak za nastavak, recimo.
Zato to radimo s ovom vizijom: prvo ideja, pa struktura, pa wireframes, pa istraživanje dizajna, istraživanje brenda. Vidi da je boja koju koristi brend ista ona koju koristi gumb, dakle, kad se to ujednači, stranica već ima koherentnost i već se osjeća kao web stranica koja je dobro napravljena. Nisu to izolirane stvari: postoji pravilnik, postoji priručnik dizajna, koju tipografiju, odnosno font, mora imati naslov,
kakav mora biti opis i podnaslov. Sve to se sprema u tu datoteku dizajna, koja se naravno može mijenjati, i vidjet ćeš da ćemo to i napraviti, ali sad smo više na općoj razini, recimo, na tome da prvo imamo nešto što ćemo poslije mijenjati.
Ovo je način rada koji ti uvijek preporučujem, ili ću ti preporučivati, ili koji uvijek preporučujem ljudima koji koriste AI: složiti plan na početku. S tim istim AI-jem složiš plan, ali mu kažeš koji će biti koraci. Naravno, zahvaljujući tome što ovaj skill koji smo napravili već ima...
Smisao ovog skilla je uštedjeti ti sve te korake, ali ako radiš nešto drugo, možeš ovo uzeti kao primjer da znaš kako trebaš raditi. Prototip je gotov. Ovo je home. Dobro, home je ispao identičan onome što smo već odobrili. Zanimljivo dolazi ovdje, gdje vidimo kategorije, imamo filtere, kako će izgledati slike. Zatim imamo stranicu proizvoda, a zatim imamo checkout, kakav će biti checkout. Ima stvari... Sve što se tiče sadržaja nemoj...
izmjene u dizajnu, sad je dobar trenutak da mu kažeš, prije nego ga odobriš. Ali ako se radi o tome da je stranica jako statična, da još nema animacija, i slično, sad nije trenutak da se to radi. Poštujmo svaki trenutak. Još nismo prešli na React projekt, prešli smo na proces prototipa, i sad, kad mu damo OK, počet ćemo raditi konačnu verziju prototipa i krenuti s projektom. Ali vidi kako smo od ideje i namjere «želim napraviti stranicu s tenisicama» već
stigli do ovog trenutka gdje to stvarno izgleda prilično prihvatljivo, prilično dobro, a sad ćemo dodati malo magije. Vidi ovdje kako nam ChatGPT kaže da ovo odobrimo i da je sad trenutak da mijenjamo stvari. Mi smo ovdje prilično zadovoljni ovim, pa ćemo nastaviti.
I ovdje će zabilježiti da je prototip gotov, i traži nam URL GitHub repozitorija, jer će ovdje napraviti konačni projekt. Za to idemo u GitHub aplikaciju, novi repozitorij, u istoj GitHub mapi. Ja ga obično nazovem prema tehnologiji koju ćemo koristiti, a u ovom slučaju tehnologija se zove Next.js, crtica, i ovdje upišemo ime stranice. Rekao sam ti da ćemo koristiti React, a pišemo Next.js jer je to framework koji radi s Reactom, ali nam omogućuje da radimo puno čvršće
i sofisticiranije web stranice, recimo. Ovo je već framework; React je samo biblioteka. I mi mu, budući da već imamo tu mapu, damo mapu. Ne treba GitHub URL; to samo ako želiš, možda radiš s nečim drugim. Ali ono što moraš napraviti je napraviti repozitorij i dati mu praznu mapu, i u toj praznoj mapi će u ovom koraku početi slagati ono što nam treba da je stavimo na web, uz nekoliko napomena, nekoliko dobrih praksi koje ćemo koristiti, a koje preporučuje naš skill. Napravit će i
Obsidian unutra, a predivno je to što ćemo iz tog istog Obsidiana moći mijenjati tekst i stvari na stranici. To radi samo ovaj naš skill, a napravili smo ga s namjerom da korisnici ne moraju otvarati kod i ne moraju znati ništa o korištenju koda za web i slično, nego da samo s uređivačem teksta mogu sve mijenjati.
Dobro, ostao sam bez... pa kaže da sad ima slobodnog prostora, i nastavljamo. Često ... dobro, ja sam ovdje snimao video dok sam radio stvari; zato mi se i punilo. Ali dobro, uvijek moramo imati malo prostora da možemo raditi ovakve stvari, jer i privremene datoteke ChatGPT-ja i ostalo troše prostor. Ovdje vidimo da je projekt napravljen i izgleda potpuno isto kao prototip, ali sad su to React stranice, više nisu HTML, i to je ono što
će nam dati bazu da počnemo dodavati animacije, mijenjati stvari, i raditi komponente. Jer, na primjer, u HTML-u, ako imamo isti toolbar ili traku, isti, u HTML-u će je svaki put morati iscrtati. A u Reactu, budući da koristi komponente, tu komponentu ponovno koristi na raznim stranicama, i to nam omogućuje da nešto uredimo jednom i promijeni se posvuda, da projekt ima puno zdraviju arhitekturu.
Ovdje i dalje provjeravamo da se aplikacija kompajlira kako treba i da dobro izgleda na svim uređajima i rezolucijama, jer to je jedna od stvari koje možda, na primjer, radiš stranicu bez ove metodologije, ili web, dobro, možda ako ChatGPT-ju, ili umjetnoj inteligenciji koju koristiš, ne naglasiš da mora biti responsive, neće to napraviti. Ali postoje pravila za to, a u ovaj skill koji koristimo ugradili smo neka
pravila i neke druge skillove koji nam u tome pomažu. Dakle, ovdje pokreće, već u jednom... u biti, pokreće web aplikaciju kao da je na webu, ali je na našem računalu. U biti je to to. Ovdje već dolazimo do kraja izrade prototipa... ma ne prototipa: s prototipom napraviti verziju projekta, konačnu verziju. Dakle, napravi i URL putanju. Napravi
i stranicu 404, a to je kad se nešto ne nađe nigdje drugdje, odnosno nijedna druga stranica na webu. Stranica za grešku, recimo. I u biti, s našom stranicom, čvrsta baza za ispravke i dodavanje novih proizvoda, da možemo odmah raditi. To je i razlog zašto smo napravili drugi projekt, jer jedno je izrada prototipa, koja završava kad su gotove osnovne stranice, recimo, a drugo je
kad imamo projekt napravljen u drugoj tehnologiji, recimo. Ako dolazi HTML... sve je napravljeno u Reactu, ali s frameworkom Next.js, i zato smo to odvojili, da poslije radimo puno čišće i da imamo Obsidian i unutar projekta, ali da odgovara rezultatu koji je nastao za projekt u Next.js-u, a ne da sadrži sve prethodne informacije. A ako bismo htjeli pogledati prethodne informacije, i to možemo. Chatovi u ChatGPT-ju bit će povezani među projektima. Vidi da ovdje radimo,
i dalje smo u projektu koji smo napravili na početku, ali već mijenja onu drugu mapu. I to je zahvaljujući tome što su Obsidiani povezani međusobno i svaki zna da onaj drugi postoji. Kad budemo imali mobilne prikaze, kad svi prikazi budu provjereni, moći ćemo početi dodavati animacije i malo magije da stranica ne bude tako statična. I to je prilično važno za profesionalnu stranicu: da ima život, a ne da bude nešto superstatično. A to da ima život ovisi i o konceptu
stranice koju radimo. Ne stavljati animacije i stvari tek tako, nego da imaju veze s onim što se slaže. Ovdje, stranica proizvoda. Provjeravamo sve stranice. Vidi da ja u ovom trenutku ne radim ništa. Sve radi ChatGPT sam, on mijenja stranice, stvara ih, provjerava ih. Zato i ponekad troši toliko tokena, zbog svih koraka koje radi da se uvjeri da je sve dobro.
Ali to je potrebno, jer ako ne provjeravamo, ako ne provjerimo da sve radi dobro u svim rezolucijama, to nam se poslije može jako obiti o glavu kad budemo imali rezultat prilično blizu kraja. Jer u toj izradi, budući da sad gradi od nule, ChatGPT-ju je puno lakše to primijetiti i napraviti dobro iz prve.
Ali naravno, sve to treba tražiti od njega i koristiti skillove koji su napravljeni za to. Dobro, i kad završi provjeru svih stranica, mi ćemo moći provjeriti je li dizajn dobar. Ja mu kažem da nastavimo jer mi je izgledalo prilično dobro, u skladu s onim kakav je bio prototip. U biti,
sad je to prebacivanje prototipa u Next.js projekt, i zato nam traži to odobrenje. A kad je sve provjereno, sad stvarno dolazi dodavanje malo magije. U ovom dijelu procesa, kad kažem magija mislim na animacije i takve stvari. Vidi da kaže da će koristiti skill huashu-design, koji služi za dizajniranje; to je malo kao replika onoga što bi bio Claude Design.
Impeccable i GPT Taste služe za provjeru dizajna, da daju informacije o tome što ChatGPT smatra dobro napravljenim. I zatim imamo skill UI UX Pro Max i Apple Design, koji ChatGPT-ju govore koje karakteristike mora imati nešto dobro dizajnirano.
Ali iako taj skill već imaš instaliran, jer smo to napravili na početku, vidi da ti nisi morao ništa raditi, ni ja, ni govoriti ChatGPT-ju, jer to Mariscalov skill radi sam, recimo. I to štedi puno glavobolja, jer...
I vidiš da ti možda drugi ljudi preporučuju: koristi ovaj, koristi ovaj, koristi onaj. Na kraju vidiš toliko skillova i toliko stvari da čak zaboraviš gdje ih treba koristiti. U biti, ono što smo htjeli uštedjeti, to vrijeme, je da ne moraš misliti o tim stvarima, recimo.
U biti, kad napravimo plan i kad ga možemo automatizirati skillovima, štedimo si to da se u svakom koraku moramo sjetiti što treba napraviti. A kad već otprilike nađe konačni rezultat... Ono što ćemo sad napraviti, kad mi je govorio o dodavanju magije i svemu tome, napravit ćemo samo na homeu na početku, da možemo ispraviti stvari prije nego to napravimo na cijeloj stranici.
Umjesto toga, radimo to na jednom mjestu; kad vidimo da dobro radi, prenesemo. I dobro, tu mi kaže da je nova početna stranica već implementirana, da zadržava sadržaj, putanju, bla, bla, i već implementiramo hero, koji će se možda još mijenjati, jer je hero najvažniji dio naslovnice, odnosno naše stranice dobrodošlice. To mora najviše privući pažnju.
Vidi kako je sad redizajniran da naslov bude gore, slika desno. I dalje je tu, ali lijevo ima drugih informacija. Sad smo stavili naslov gore, i to, vidi, ja mu nisam ništa tražio, ali već s...
mijenja. Zadržimo ideju onoga što želimo napraviti, i prema tome procjenjujmo. Vidi kako ovdje ChatGPT klika i navigira. Tu se vidi pokazivač, koji izgleda kao silueta, kao sjena i bijela silueta.
I sad već dotjeruje. Važno je početi s kosturom, strukturom, pa dati oblik, dodati dizajn, napraviti brend, a onda dotjerivati, dotjerivati, dotjerivati, dok ne dobiješ...
jako profesionalnu stranicu, ali još je možemo poboljšati, i to ćemo sad napraviti. I pop-up ćemo promijeniti, i to. Ima još posla, i nastavit ćemo dotjerivati, ali sve to unutar istog skilla koji koristimo. Vidi da nisam napisao nijedan prompt, nisam napisao ništa. Najviše sam napisao na početku, a ni to nije bilo puno, kad sam mu rekao da želim napraviti webshop za prodaju tenisica, i to je bilo dovoljno da ChatGPT napravi Obsidian i složi korake. A onda, s referencom, dobro, već
smo mu dali ideju strukture koju po nama treba koristiti na stranici, i prema tome skill radi sve. Mi jedino moramo odobravati i tražiti neke izmjene, ako treba. Prilagodbe se slažu, i kompajlira.
Što je kompajliranje? Kompajliranje je kad se stranica može izvesti u verziju, onu koju ćemo staviti online. Napravi se mapa koja se zove build. U toj mapi je već izvezena stranica. Često u kodu ima grešaka koje, dok ga pokrećemo lokalno, nismo u stanju vidjeti, a s druge strane ni frameworku nisu baš bitne, jer možemo nastaviti raditi iako postoje te greške. Ali se pojave. Zato ChatGPT usput pazi da se kompajlira bez
grešaka. To je velika stvar koju smo napravili u ovom skillu, jer to što korak po korak provjeravamo da se kompajlira daje nam sigurnost da je taj korak stvarno, kao, dobro izvršen i završen.
Dakle kaže: sad se kompajlira bez grešaka, vidi se na mobitelu, tabletu i računalu. A sad ćemo, ako se već kompajlira, dobro, vidjeti možemo li je već deployati prije zadnjih izmjena.
I sad, budući da se uspjela kompajlirati, dobro, sad će u ovom dijelu skill s ChatGPT-jem provjeriti sve dizajne svih dijelova i svih stranica. Među ostalim, dobro, home, kako izgleda na mobitelu.
Ali dosta je s homeom. Kretanje koje ćemo dodati na početku, kao što sam rekao jučer, je suzdržano, a poslije ćemo dodati još kretanja, ali korak po korak, zar ne? To je važno znati, da idemo malo po malo.
Konačni rezultat mora ispasti nevjerojatno, ali do toga se dolazi. Ne idemo od nule do sto, nego su ovo koraci. I dakle, dobro, ovdje će ChatGPT procjenjivati ostale stranice ili istu stranicu, u ovom slučaju home, ali u raznim dijelovima, da se uvjeri da dobro izgleda i da se sve vidi ispravno u svim rezolucijama. Ovdje, na primjer, već ga gledamo u rezoluciji više kao za tablet. I dobro, to...
stranica. Vidi kakav nam je ispao modal. Modal je već sam po sebi prilično dobar. I modalu možemo dodati animacije. Ovdje nam je ispao dio s kategorijama. I dobro, ovdje nam već kaže da je naslovnica spremna za pregled. Naslovnica bi bila home.
I možemo je pregledati u... Evo, vidi kako već ima niz animacija kad prijeđem mišem. Ali još možemo napraviti bolje stvari, pa ovdje napišem da je savršena i da nastavimo, jer u sljedećem koraku počinjemo...
...magiju
slaganja korak po korak. I ovdje me pita želim li novi stil primijeniti na cijelu stranicu. Da, kažem mu. I to će sad ujednačiti sve nove stvari i redizajn koji smo napravili na homeu. Ovo je odobreno, pa...
Dobro, završetak naslovnice je objavljen i 56 datoteka se poklapa s odobrenom verzijom, i ovdje će početi sve primjenjivati. Kad govori o datotekama, misli i na komponente od kojih slažemo stranicu. Zato izgleda da ih je previše, ali zapravo se to slaže kao Lego kockice koje se stavljaju na sve ostale stranice. I sad smo došli do toga da je prilagodba primijenjena, katalog, bla, bla, bla, bla, sve što već znamo.
A sad će provjeriti zadnju stvar, i onda ćemo je moći staviti online da je počnemo testirati na mjestu gdje će biti hostana. I hosting će biti potpuno besplatan, tamo bih mogao hostati hrpu projekata. A možeš dodati i druge stvari, kao statistike ili slično, ali to ćemo dobro pogledati poslije.
Ovdje smo završili ostale stranice, i s tim je zatvorena faza 16. Već smo jako blizu kraja, pa sad samo preostaje provjeriti kako je stranica ispala. I za to traži da odobrimo. Odobrim, nastavljam.
I ovdje gledamo kako je ispala stranica s kategorijama. Dakle, dobro, s ovim već možemo početi objavljivati stranicu. Svejedno ćemo dodati još stvari, ali dobro je, kad završimo prvi dio (sam skill će te voditi), isprobati objavu. Jer što više stvari dodamo, to je poslije teže vratiti neke stvari unatrag.
Pa je dobro ovako: dobro, završili smo ovaj dio, isprobajmo. Završili smo ovo, isprobajmo. Tako mi programeri testiramo da svaki korak ide dobro, zar ne? A to je otprilike ne čekati da imamo konačni rezultat da napravimo te testove, nego testirati kad god možemo, u biti.
A deploy će se napraviti automatski, za to smo imali GitHub. Ovaj skill nam radi i deploy na GitHub. Ali morat ćemo to odobriti, vidjet ćemo sad.
Dobra stvar kod skilla je da nam daje i deploy. A i to je važno, jer malo ljudi zna što napraviti kad već imaju stranicu napravljenu sa svojim omiljenim AI-jem.
Ne znaju kako je dovesti do toga da radi za cijeli svijet. I za to se brine ovaj skill. Kao što ćeš vidjeti, ovaj skill je prilično moćan, jer nam od početka instalira potrebne skillove, pita te ideju, složi plan, složi vault.
I to je od ideje do deploya, u biti, kao što kaže naslov. I ovdje, kad završi zadnju provjeru prije stavljanja online... Poslije, kad budeš radio izmjene, ne treba toliko provjeravati, ali važno je imati čvrstu bazu.
Zato sad radimo toliko provjera. I vidi ovdje na GitHubu, kad uđemo sa svojim računom, vidi da gore piše ime grane, a poslije je pisalo «Compare». To je zadnji korak, recimo.
Ali i za to se ovdje brine naš skill. Ovo je čudo. Jer vidi, uvijek kad se radi pull request, kako se to zove na GitHubu, a to je zahtjev da se spoji s glavnom granom, gdje će biti naš kod, koji će biti na internetu, na stranici koja radi, treba dodati opise i sve to. Ali vidi da to već radi automatski.
Dakle, u biti ne treba znati ni GitHub ni išta da bi se ovo koristilo. Skill se brine za sve. I vidi, sad stvarno moramo ući na GitHub. Evo, pokazujem ti kako ulazimo na naš GitHub.
I tamo uđeš u repozitorije. Uđi u onaj na kojem piše Next.js. Odeš na pull requests. I tamo je već otvoren pull request koji je napravio ChatGPT. I ovdje kliknut ćeš «Merge» i «Confirm merge», odnosno napraviti merge, što znači spojiti ga s granom main.
A sad idemo na Vercel. Ovdje ga upisujem u Google, tako ćeš ga naći. I na Vercelu ćemo napraviti račun, ako ga nemaš. Taj račun ćemo povezati s našim GitHubom.
Ja se ovdje pokušavam prijaviti. Nisam imao račun. Pa ću odabrati da ga napravim s Googleom. Kad imamo račun, pita me ime tima i radim li. Stavi da radiš na osobnom projektu da dobiješ plan Hobby, koji je besplatan. Upisat ću ime tima: Mariscal.
I kliknut ću «Continue». I ovdje ću odabrati GitHub pod «Import Git Repository». I ovdje će me povezati s GitHubom na kojem smo radili. I ovdje moram instalirati ovaj Vercel plugin.
I odabrat ću sve repozitorije, jer je račun nov. I moram potvrditi kodom, koji ću upisati. Kad upišem kod, na Vercelu će mi se pojaviti projekti, a onaj koji ću uvesti je ovaj: Next.js.
I već prepoznaje da je Next.js. Već prepoznaje sve. I kliknut ću «Deploy». I s tim ćemo imati web da ga cijeli svijet može vidjeti.
Ali svejedno ćemo napraviti neke izmjene da vidiš što se događa, kako ćeš raditi izmjene kad je već na webu. Ovo može malo potrajati. Neće ni trajati baš dugo, jer je projekt nov i mali.
Ali kad ti projekt počne rasti, deployi će trajati sve duže. I gotovo je. I ovdje ćemo kliknuti «Continue to the Project».
I ovdje imam adresu na kojoj je deployano, a to je ova Vercelova, ovdje. Kao što vidimo, osvježim je. I stranica je dostupna cijelom svijetu. Vidi kako smo krenuli od ideje i sad smo ovdje s projektom na webu, da ga svatko može pogledati. Javno je.
Vidi. Sjeti se kakav je bio wireframe. I vidi kako je ovdje točno takav. Vidiš? Za to je služio wireframe. Dobro, vjerovao si mi, zar ne? Dakle, wireframe je najbolji način da uvijek počneš. Vidimo da ovdje imam stranicu proizvoda.
Vidi kako mi je lijepo ispala. Vidi kako mi se pojavljuje modal. I vidi kakav je na kraju ispao checkout. Boje i sve to. Vidi da postoji ravnoteža na cijeloj stranici, jer koristi istu datoteku dizajna.
Ono što sam ti već objašnjavao, recimo. Ali sad to možeš vidjeti u akciji. Ima stvari koje još ne rade, kao ovi filteri. Ali to je zato što smo napravili samo dizajn. Sjećaš se? A sad ćemo početi tražiti neke izmjene.
Ali sad ću mu reći da sam već napravio merge u main i deployao. S tim će provjeriti deploy. I važno mu je to reći da provjeri je li sve u redu.
I da nastavi, napišem mu. Dobro, provjerit ću, bla, bla, bla, bla, dok ne završi provjeru. Ovdje će me pitati koji nam je URL dao Vercel, konačnu verziju.
Pa odem i kopiram ovaj koji imam ovdje, koji je pod domenama, recimo. Poslije mogu staviti vlastitu domenu. Ali ovo je ona koju nam daje privremeno da možemo sve procijeniti prije toga. I s tom informacijom može dobro provjeriti i analizirati.
Vidi kako usput gleda i GitHub u pozadini. To je ono dobro, da upravlja svime, recimo. Ali oprezno i s puno pravila koja smo mu dodali. PR je već u mainu. Već zna sve.
Ovdje otvara aplikaciju da provjeri kako je stavljena online. Sad je provjerava. I kad završi pregled, idemo na sljedeći korak.
Sljedeći korak bit će izmjene. Vidi, gledaj: sad ću ući u Obsidian. I u Obsidianu ću otvoriti... Vidi kako su ispale sve bilješke koje smo napravili. Vidi kako se složilo. Sve je povezano.
To je ono dobro kod Obsidiana. Sad ću otvoriti. Ovdje, «Open Vault». I kliknem «Open». I otvorit ću onaj od Next.js-a. Ne onaj prvog projekta, nego drugog.
I vidi, ovdje imamo Content i Data. U Data će biti sve što webu treba. A u Content je ono što mi možemo mijenjati odavde. Vidi. Ovo nam radi skill, tako predivno.
Reci mi da to nije najljepša stvar koju si vidio u životu. Na primjer, ovdje imamo naslov: «Find your next pair». Za izmjenu ću napisati «Bokić i jedan Happy Meal», da isprobamo i da dobro provjeriš da sve radi.
Spremim, i ovdje mu kažem... Ovo mu stvarno treba reći: pokreni projekt lokalno i pokreni skriptu za tekstove iz Obsidiana.
Iz Obsidiana na web. I ovdje prebacuje tekstove iz Obsidiana u format koji će web razumjeti. Ali zato i postoji: udobnost da poslije uređuješ iz teksta. Dakle, ne moraš znati ništa o tome kako web radi, gdje tražiti datoteke. Čak i za nove proizvode: samo treba napraviti novu datoteku proizvoda sa strukturom koju već imamo. I gotovo.
I ovdje... Dobro, vidi kako... Evo ti, ha? Nisi vjerovao? Vidi kako smo to promijenili u Obsidianu i promijenilo se tamo.
I ovdje, ono što sam ti govorio: imamo primjer datoteke i ako promijenimo ovu ili napravimo drugu, napravit će se novi proizvodi. Dakle, odavde možeš uređivati sadržaj svoje web stranice bez diranja koda.
Ovdje mu kažem da deploya izmjene na novu granu i napravi merge request. U biti, to je GitHubov jezik. Grana je točna kopija koda kakav je trenutno, ali s izmjenama. Pa što se događa?
Umjesto da izmjene šaljemo na glavnu granu, a to je main, napravimo granu. Pošaljemo nove izmjene, u ovom slučaju tekstove. A poslije to moramo odobriti na GitHubu. To radimo ručno da imamo malo kontrole, ako zatreba.
Ali u biti, budući da skill već sve provjerava, možemo sigurno napraviti merge. Dobro, a sad dolazi način...
Pokazat ću ti način, i dolazi trenutak za dodavanje magije. Ponovno otvorim projekt ovog novog weba na kojem smo radili cijeli video. I napišem, u Next.js projektu... I napišem: u Next.js projektu instaliraj paket Framer Motion i, koristeći skill GPT Taste... Dobro, i otvorit ću alat, napuni home animacijama, i želim da se elementi pojavljuju tek
kad korisnik scrolla. Ovo ti pokazujem ovako jer ćeš tako tražiti sve izmjene koje ti trebaju na tvojoj stranici. Vidi da skilla više nema, skill je završio svoj posao, više nismo unutar skilla, ali svo to znanje i dalje je u mapi. Dakle, tražim da se stvari pojavljuju kad se scrolla, i želim da se, kad korisnik prijeđe mišem preko elementa, i on animira. I ovdje vidi kako kaže: dobro, provjerit ću sve ono što smo uvijek gledali. I koristit ćemo to da odavde
počnemo tražiti izmjene koje želimo. I kad završi sve to, dobro, objašnjava, pokazuje ti kako sve primjenjuje. Vidi da nismo morali instalirati ništa od GPT Tastea i ostalog, jer se instaliralo na početku, a i Framer Motion je već bio instaliran, ali ja mu za svaki slučaj kažem, jer bolje spriječiti nego liječiti. I vidi kako sad, kad osvježimo, vidi kako sad stvari oživljavaju, ha? Prijeđem mišem i već imam druge animacije, vidi tu. Dakle, postaje sve
zanimljivije, a tako možeš napraviti s bilo čim. Ali sad ću ti pokazati kako, na primjer, napravim screenshot ovdje i tražim da promijenimo boju heroja. To da vidiš kako ja sad počinjem mijenjati. Skill je završio svoj posao; ovo što sad radim je finiji proces i više ono što treba baš mom projektu. Kažem mu da mi se ovako ne sviđa, pozadina je preobična, želim gradijent tamnije boje, i da trenutna boja bude ta tamna boja, i da koristi skill. Da koristim skill, stisnem kosu crtu, napišem
Huashu Design i UI UX Pro Max, i koristit ćemo Appleov skill, koji radi prilično dobar pregled, da ga ChatGPT poslije uzme u obzir. Radim to ovako, pokazujući ti, da vidiš kako trebaš raditi izmjene poslije, kad si već deployao i kad je na Vercelu. Posao skilla je završen; ovo je bonus track, recimo, gdje ti pokazujem kako dodati izmjene koje trebaš na bilo kojem dijelu stranice. Kažem mu da želim da bude puno dinamičnije, upečatljivije, i ovdje mu kažem da želim da toolbar bude sticky. To
znači da ostane zalijepljen gore i bude proziran sa zamućenjem, da je prevelik, ali da je veličina dobra dok je na prvom dijelu, dakle dok korisnik nije scrollao, ali kad scrolla, želim da bude mali. Dobro, upravo je počeo primati ovu uputu, i tu počinje i magija uređivanja i kako ćemo mijenjati stvari u projektu. Vidi da već imamo deployan projekt, sve, svatko ga može vidjeti. I onda, kad završi izmjene, osvježimo i evo ga! Kako je to lijepo
ispalo, ha? I vidi toolbar kako ostaje zalijepljen i zamućuje se, ali kad se vrati gore, izgleda dobro. Vidi to: takvi detalji čine razliku. I sad sam te naučio kako to trebaš tražiti, zar ne? Vidi, sad na bilo kojem dijelu stranice koji želiš mijenjati, napraviš screenshot i kažeš mu da koristi ove skillove koje smo koristili, i napravit će to tamo. Ali dobro, vidi razliku između toga kako je prototip počeo i kako je
završio. I kažem: super, sad deployajmo sve da bude na Vercelu. I s tim mu ti to kažeš i počnu deployi, dok web ne bude dostupan na Vercelu. Vercel je mjesto gdje ga hostamo. I dobro, ti deployi nas na kraju vode i na GitHub, jer tamo, vidi, sjeti se da tamo deployamo stvari. Ali vidi da ovdje na Vercelu možeš gledati i previewe. To je dobro kod toga što smo ga povezali, da prije nego napraviš merge... Kad napravim merge, automatski će biti javno za sve. Vidi, sad
ulazim na Vercel, i vidi, sad ću ovdje otići na Deployments, i piše «Building», i tu imam razne koje sam napravio. Vidi kako se pojavljuje mali logo koji smo napravili, tamo pokraj, u faviconu. To je zato što je, kad smo radili brend, napravio i datoteke da, kad je spremiš u favorite, sve lijepo izgleda. I ovdje odem, i vidi da već imam izmjene s animacijama, s efektima, sa svime. Dakle, moj posao
ovdje je gotov. Vidi, sad s ovim možeš napraviti bilo koju stranicu, bilo koju stranicu, bilo koju stranicu koju želiš. Počneš sa strukturom, pustiš da te vodi skill, počneš tako da mu daš reference, pa napravimo wireframes, pa napravimo dizajn brenda, pa biramo između više dizajna, izaberemo jedan, i tako dok ne dođemo do ovog rezultata, a, dobro, home je jedini na kojem sam napravio izmjene s animacijama, ali ti ih možeš napraviti posvuda, recimo. Ovo je u biti bilo da ti pokažem
kako skill radi i da ti dam alate da možeš dotjerati stvari koje vidiš i mijenjati ih, da dobiješ upečatljiv dizajn kao ovaj koji smo ovdje postigli. Naravno da ga možemo još puno poboljšati, dodati druge stvari, ali za potrebe ovog tečaja ovaj rezultat je prilično prihvatljiv i mi smo prilično zadovoljni. I dobro, s tim završavamo ovaj tečaj. Nadam se da ti se svidio. Vidimo se sljedeći put. Bok!