Kaip sukurti programėlę neparašius nė eilutės kodo?
Programavimo pasaulį apvertę „No Code“ įrankiai yra paslaptis, kuri leidžia programėles ir svetaines kurti žmonėms, niekada nesimokiusiems jokios programavimo kalbos.
Vietoje kodo rašymo, naudojantis šiais įrankiais skaitmeninius produktus kursite grafiniu būdu, pasirinkdami iš sąrašo elementų, kuriuos norite įdėti į savo kūrinį.
Toliau per minėtosios šunų programėlės pavyzdį pereisiu per pagrindinius žingsnius, kurie būtini kuriant produktą nuo nulio. Šiais žingsniais kiekvienąkart naudojamės ir mes patys, programuodami mūsų klientų užsakymus.
Pirmas žingsnis – dizainas
Užduotį sukurti „native“ (sukurtą specifiškai šiai operacinei sistemai) iOS programėlę priėmėme su džiaugsmu.
Problema
Akivaizdu, jog kuriant programėlę ar svetainę reikėtų pradėti nuo supratimo, ką ji turi daryti, kokia jos paskirtis, bei kokią problemą ji sprendžia.
Atsakius į problemos klausimą (šiuo atveju – produktas leidžia vienišų šunų savininkams susirasti kompanijos savo augintiniams), galima pereiti prie anglų kalba vadinamų user stories.
Vartotojo pasakojimas (User stories)
User stories – tai neformaliu formatu aprašytos programinės įrangos savybės iš jos naudotojo perspektyvos. Patogiausia joms naudoti tokį formatą:
Kaip <naudotojas/administratorius/neužsiregistravęs naudotojas>, turėčiau galėti <atlikti kažkokią užduotį>, kad <pasiekčiau rezultatą>.
Mūsų šunų programėlei aktualus pavyzdys galėtų skambėti taip:
Kaip naudotojas, turėčiau galėti patikrinti, kokie šunys šiuo metu yra konkrečiame šunų parke, kad surasčiau tos pačios veislės draugų savo augintiniui.
Su klientais aptarėme visas savybes, kurias turėtų turėti ši programėlė ir aprašėme jas aukščiau minėtu formatu. Taip žinojome tiksliai, ką ir kodėl turi daryti mūsų kuriamas produktas.
Vartotojo keliai (User flows)
Kitas žingsnis – sugalvoti kaip naudotojai „keliaus“ per jūsų programėlę, kokiu būdu ir keliu jie pasieks savo tikslus.
Idealiu atveju, jų kelias turėtų būti intuityvus ir iškart suprantamas, taip pat dažniausiai naudojamos ar svarbiausios funkcijos turėtų būti pasiekiamos greičiausiai, per mažiausią kiekį žingsnių.
User flows išreiškiami schema, kuri parodo iš kur ateina naudotojas, kokius pasirinkimus jis turi kuriame taške ir kokį veiksmą atlieka. Štai realus, kitam projektui mūsų naudotas pavyzdys:
Viršuje matome vieno iš user flow kelių pradžią, viduryje – kelius, kuriais naudotojas gali eiti, o apačioje – tikslą, kurį nuėjęs kelią naudotojas pasieks.
Prototipas (Wireframe)
Paskutinis žingsnis dizaino procese yra anglų kalba vadinamas wireframe. Tai schema, galinti parodyti ankstyvą arba galutinę programėlės arba internetinės svetainės išvaizdą.
Nusipiešti kaip atrodys jūsų galutinis produktas prieš pradedant programuoti labai svarbu:
- Dizainus grafinėje programoje keisti daug paprasčiau negu galutinį produktą. Wireframe galite parodyti draugams, kolegoms, pažįstamiems, bei išgirsti jų nuomones, dar net nepradėjus kurti pačios programėlės.
- Programuojant turėsite tikslų etaloną, kaip viskas turi atrodyti, nenuklysite nuo tikslo.
- Grafinius elementus iš tokių programėlių kaip Figma galite persikelti tiesiai į naudojamus programavimo įrankius – nereiks jų perpiešti darkart.
Šunų socialinio tinklo programėlės vaizdai, kuriuos matote tarp šio straipsnio pastraipų, taip pat gali būti laikomi detalizuota, vėlyva wireframe versija.
Antras žingsnis – vizualus programavimas
Pasitvirtinę programėlės dizainą su klientu, pramankštinome riešus ir sėdome prie savo mėgstamiausio programėlių kūrimo įrankio – Bubble.io.
Tai vienas sudėtingesnių „No Code“ nišos įrankių, kurį perkąsti reikės kiek daugiau laiko, tačiau jį išmokus, pavyks sukurti daug įvairesnių ir sudėtingesnių produktų, palyginus su paprastesniais konkurentais.
„No Code“ įrankiai nėra visagaliai, šių įrankių kūrėjai negali numatyti visų scenarijų, kam juos naudosite. Tokiais atvejais savo kūrinius galima papildyti ir kodu – mūsų agentūroje produktus kartais papildome keliomis JavaScript eilutėmis, kad pritaikytume juos savo reikmėms.
Bubble.io galite išbandyti nemokamai, o pradėti siūlau nuo ekstensyvios mokymų kolekcijos. Bubble akademijoje surasite ir video mokymus, ir detalias instrukcijas kaip atkurti tokias žymias programėles kaip „Twitter“, „Spotify“ ar „Slack“.
Ten taip pat galite užsiregistruoti asmeninėms konsultacijoms su ekspertais.
Drag–and–drop principu sudėjome šunų programėlės vizualinius elementus, kuriuos sukūrėme praeitame žingsnyje: mygtukus, teksto laukus, žemėlapį ir t.t.
Šiuos sujungėme su mūsų sukurta duombaze ir anglų kalba vadinamais „workflows“, t.y. suprogramuotomis įvykių sekomis, veikiančiomis „jeigu šis, tada tas“ principu. Pavyzdys: jeigu paspaudžiame mygtuką, kuris priima kitą šunį į draugus, pastarajam nusiunčiamas pranešimas apie kvietimą draugauti.
Su „No Code“ įrankiais visa tai galima padaryti neparašius nė eilutės kodo.
Trečias žingsnis – testavimas
Taigi, idėja susikristalizavo. Dizainas išbaigtas. Programėlė sulipdyta, bei lyg ir veikia. Prieš duodant ją čiupinėti svetimiems, reikia pačiam ar su kolegomis ją išsitestuoti.
Kaip vyksta programėlės testavimas? Iš esmės visą procesą galite padalinti į dvi šakas.
Funkcionalumo testavimas
Pirmiausia išbandykime ar mūsų programėlė daro tai, kam buvo sukurta. Šiam žingsniui grįžkime prie user flows: įsijauskime į naudotojo rolę ir sekime kiekviena veiksmų seka, kurią aprašėme.
Ar tikrai nuo pradžios iki tikslo einame tuo pačiu keliu, kurį aprašėme? Ar realiai spaudžiant mygtukus ir bandant programėlę veiksmų seka atrodo logiška? Ar išpildome visus user stories, realiai su programėle galime atlikti visus veiksmus, kuriuos užsibrėžėme proceso pradžioje?
Jeigu kažkokios funkcijos negalime atlikti ar iš pradžių sugalvotas procesas neatrodo logiškas – nesijaudinkite, testuojame būtent tam, kad nušlifuotume savo kūrinį ir pasauliui parodytume geriausią jo versiją.
Padarome išvadas, pakeičiame tobulintinas vietas ir testuojame vėl, kol esame patenkinti rezultatu.
Vizualinis testavimas
Atlikdami funkcionalumo testavimą, užmeskite akį ir į tai, kaip atrodo jūsų programėlė, akies krašteliu palyginkite jos išvaizdą su nusipieštais wireframes. Ar visi elementai telpa į įrenginio ekraną? Ar elementų dydžiai ir proporcijos tokie, kokius suplanavote?
Jei programėlė sukurta ir naudojimui kompiuteriu, ir mobiliuoju įrenginiu (o gal planšete?) – patikrinkite visas jos versijas, įsitikinkite, jog jos atrodo tinkamai.
Nors pirmoje programėlės versijoje absoliutus išvaizdos nušlifavimas nėra labai svarbus, smagu, jei viskas atrodo tinkamai ir už akių nekliūna akivaizdžios klaidos.
Ketvirtas žingsnis – šampanas
Jūsų programėlė baigta, sveikinu! Nebijokite parodyti ją pasauliui – kuo daugiau žmonių ją pamatys, tuo daugiau skirtingų nuomonių išgirsite. Dažnai nešališki bandytojai jums pasiūlys tokių funkcijų ir esamų problemų sprendimo būdų, apie kuriuos net nebuvote pagalvoję.
Aišku, geriausia programėlę rodyti potencialiems jos naudotojams: geriausia, kad socialinį tinklą šunims bandytų esami ar buvę šunų savininkai, naminių gyvūnų nemėgstantiems žmonėms programėlę rodyti nėra reikalo.
Jeigu savo aplinkoje žmonių, kurie galėtų būti potencialūs programėlės naudotojai, neturite, rekomenduoju „Product Hunt“. Tai socialinis tinklas, skirtas naujų produktų leidimui. Jame paleiskite savo produktą ir jį pamatys tūkstančiai žmonių, kurie domisi naujovėmis ir jums suteiks naudingų įžvalgų. Sėkmės!
Kad ir kaip būtų gaila, kol kas mūsų šunų programėlė Lietuvos gyventojams neprieinama, kadangi pastaroji kol kas veikia tik Niujorko mieste. Išbandyti programėlę patiems pavyks tik pasikeitus savo Apple ID regioną į JAV, adresą į esantį šioje šalyje ir naudojantis VPN (tikrąją įrenginio buvimo vietą nuslepiančiaja programėle).
Šiuo metu startuolis ieško finansavimo ir yra paleidęs programėlės ankstyvają versiją, jos progresą galima sekti čia: https://www.mond.company/.
Kiek išsamesnį gidą anglų kalba kaip sukurti programėlę su „No Code“ galite rasti čia: „Building an App with No Code“.
Kasparas Simonas Kučinskas yra Augimo ir projektų vadovas „No Code“ programavimo agentūroje „Idea Link“ ir Vyriausiasis projektų vadovas „No Code“ naujienų, apžvalgų ir edukacijos svetainėje CodeorNoCode.com.
