Minu JustOn

Tere kõigile!

Minu esimene sissekanna siia blogisse. Ei hakka lubama, et ka viimane.

Kirjutan siin eelkõige oma praktikakogemusest firmas JustOn ning mitte olmest ja vabal ajal läbitud seiklustest. Viimastest on teised juba raporteerinud. Kui mõni lugeja veidral põhjusel veel Kristjani postitust bratwurstimuuseumi kohta pole lugenud, siis tee endale teene ja hakka kohe lugema. Loe mitu korda.

Kuna täna on minu praktikaperioodi eelviimane päev ja kuigi palju sisulist tööd enam ei toimu, siis võin sellise veidi tagasivaatava postituse kirjutada. Mida tegema pidin, mida teha kavatsesin ja mida tegelikult tegin. Ja mida minuga tehti.

Esiteks põgusalt ettevõttest. JustOn on 2010. aastal alguse saanud SalesForce platvormil töötav pilvepõhine B2B SaaS ettevõte, mis hõlbustab ja automatiseerib arvete koostamist ning haldamist. Nende kliendid on SalesForce'i kasutavad suuremad ja väiksemad erinäolised firmad üle kogu maailma. Neid firmasid ühendab see, et kõik nad soovivad arvetega tegelemisele võimalikult vähe aega kulutada ja selle asemel millegi sisulisemaga tegeleda.

JustOnis töötab kokku ca 20 inimest. Arendajaid nendest oli praktikaperioodi alguses neli, lõpus kolm. Üks otsustas vahepeal, et tahab midagi muud teha. Ehk siis pigem selline väike ettevõte. Selle vastu mul ei ole küll midagi - näeb protsesse ehk pisut lähemalt kui mõnes korporatsioonis oleks näinud. Niipalju kui olen aru saanud, siis enamik IT-ettevõtteid Jenas ongi pigem väiksed või keskmise suurusega. Aga neid on selle-eest palju ja tundub, et selle olukorraga ollakse rahul. Vähemalt JustOnis ei tekkinud tunnet, et tahetakse hullult kiiresti hambad ristis unicorniks saada. Pigem tundus olevat rõhk rahulikul aga stabiilsel kasvul.

Nagu juba mainitud, siis JustOni arendajad ise loovad tarkvara SalesForce platvormile ja see on selline võrdlemisi eraldiseisev süsteem, millel programmeerimiseks kasutatakse APEX keelt. APEX meenutab natuke Javat - strongly typed OOP keel. Mina seda siiski õppima ei asunud. Kuna JustOn põrgatab mõtteid veidi kaugemas tulevikus SalesForce'st sõltumatuks saada, siis kompavad nad selleks tasahilju maad - uurivad, mis on võimalik ja millise ajakuluga.
Mind rakendatigi just sellel eesmärgil. Minu praktikaülesanne oli luua prototüüp eraldiseisvast teenusest, mis looks HTML koodi põhjal PDF faili.

Firmas oli mõnda aega tagasi juba olnud üks teine praktikant, kes oli selle ülesandega tegelenud ja jõudnud järeldusele, et kõige mõistlikum vahend PDF-genereerimiseks on Puppeteer - Node'i teek, mille abil saab progremmaatiliselt kontrollida Google Chrome'i veebilehitsejat. Kõik lugejad on ilmselt Chrome'i kasutanud. Selles on võimalus printida veebilehti või neid ka PDF-na salvestada. Seda võimalust mina ära kasutama pidingi, JavaScripti abil.

Esialgne nõu oli kirjutada Node's selline REST API, millele saab saata HTML koodi ja mis vastab selle HTML'i põhjal koostatud PDF dokumendiga. See tähendas API serveri loomist ja vastava endpointi defineerimist. Kuna Puppeteer jookseb Node'i runtime's, siis tundus igati loogiline ka ülejäänud rakendus selles kirjutada. Kuigi mul Node'ga varasemalt kokkupuudet suures osas ei olnud, siis JavaScript, programmeerimiskeel, mida Node's kasutatakse, oli juba kohati koduseks muutumas. Tänu sellele sain suhteliselt kiiresti ka Node's maast lahti ja tiivad laiali.

Node's on mõnus kirjutatada asünkroonset JavaScripti

Selleks, et kiiresti vajaminev server üles seada, kasutasin Node'i veebiraamistikku Express. Et serveripoolse JavaScripti põhitõdedest aru saada kulus küll mõni päev, aga peale seda mõistsin, kui kergeks Express kogu protsessi teeb. Vaesed veebiarendajad, kes pidid kunagi ennemuistsel aal ilma kõigi nende moodsate tööriistadeta serveritarkvara kirjutama. Olen õnnelik, et olen elus aastal 2019. PDF-teenuse prototüübi v0.1 oli selline, mis töötas ainult minu arvutis ja suutis kohaliku HTML faili tagasi kohalikku failisüsteemi PDF'na salvestada. Kusagilt peab ju alustama.

Praktika kolmandal päeval andis mu juhendaja Alex mulle kiire miniloengu teemal HTTP päringud ja vastused. See ei olnud tegelikult kuigi mahukas ja aus olles rääkis ta väga vähe sellist, millest ma üldse kuulnud ei oleks olnud, aga ta suutis kogu vajaliku info väga hästi kokku siduda ja lihtsasti hoomatavaks muuta. Tundsin selgelt, kuidas hea juhendaja suudab õppimisprotsessi oluliselt kiirendada - tänapäeval on kogu mõeldav info ju internetis olemas, aga selleks, et seda infot efektiivselt hallata ja leida, võib üksinda kuluda kasutult palju aega.

API ja HTTP päringute testimiseks õppisin kasutama Postmani, mis ongi just sellisteks toiminguteks mõeldud.
Edasiminek API arenduses: kui saata sellele POST request, mille sisu on HTML kood, tagastab API PDF faili, mille sisu ühtib päringu HTML-ga. Lahe, mõtlesin ma. Olen suure töö ära teinud, mõtlesin ma. Tegelikult aga suur töö alles algas.

Kui saad aru, et stream ja buffer on sõnad, millel on tähendus.

Kuna esialgsed nõuded olid sellega seoses täidetud ja aega ei olnud liiga palju kulunud, siis anti mulle uued vihjed, kuhu suunas võiksin arendusega liikuda.

Esiteks asusin oma koodi testima. JavaScripti testimisteeke on mitmeid. Peale võimaluste uurimist otsustasin kasutada Jesti, sest selle veebileht nägi lahe välja.

Kirjutasin mõned funktsionaalsed ja integratsioonitestid, et veenduda mu koodi töötamises ja eesmärgipärasuses. Lisaks õppisin ka teste kirjutama. Koolis sai küll sedagi tehtud, aga vähe. Ja lisaks, eks need testid olid pigem formaalsused, sest tegu on siiski prototüübiga ja koodi, mis peaks ja saaks testida, seal kuigi palju ei olnud.

Testing is important but working application is importanter

Peale seda esitleti mulle järgmist nõuet. Kui siiani genereeris Puppeteer PDF'i harilikust HTML dokumendist, siis tegelikult võiks see toimuda natuke teisel põhimõttel. Nimelt võiks HTML tekkida mõne template engine'i abil. Ehk siis minu teenus saaks sisendiks mõne malli ja andmed, mida mallile lisada. Nende kahe põhjal koostataks HTML ja sealt edasi siis juba tuntud rada pidi PDF. Mallidega töötamise keeli on palju ja erinevaid, aga kõigil neil on suhteliselt sarnased võimalused ja tööpõhimõtted. Mina pidin nendest ühe, mida oma prototüübi juures kasutama, valima. Testisin põgusalt kahte erinevat templatating engine't: Handlebars ja Liquid. Handlebarsi poole kallutas mind selle populaarsus ja sellest tulenevalt hea dokumentasioon. Liquidit mainis mulle mu juhendaja. See on algselt Shopify platvormi jaoks loodud Rubyl põhinev keel, millega on mugav Shopify keskkonnas poode ja muud haldamist vajavat hallata. Sellest on siiski loodud ka Node'ga ühilduv JavaScripti versioon Liquid.js. Lähemal uurimisel ja nende kahe võrdlemisel selgus, et Liquid toetas teatud vajalikke filtreid kuupäevade kuvamiseks, mille Handlebarsis oleks pidanud ise kirjutama. Ratast pole mõtet leiutada ning seega asusin tööle selle kallal, et Liquid sobivad andmed õiges kohas õigel moel esitaks.

Töötamine Liquidi ja mallidega oli üle ootuste lihtne ja sain toimiva lahenduse valmis üsna kiiresti. Kindlasti oli seal palju erijuhte, millega ei arvestanud ja mis päriselt toimiva teenuse puhul võiksid tekitada probleeme ja pudelikaelu. Samas rõhutas minu juhendaja korduvalt, et tegu on prototüübiga ja liigselt detailidele keskenduda pole mõtet. Nõustusin sellega ja lähtusin, nagu ka muidu oma elus, 80/20 reeglist.

Järgmine nõue oli see, et PDF arve peal oleks kuvatud leheküljenumbrid vormis "Lehekülg 1 / 5". Ehk siis igalt lehelt peaks saama lugeda nii seda, mitmes hetkel käesolev leht on ja lisaks seda, mitu lehte on kogu arves kokku. Ja seda kõike erinäoliste stiilidega - erinevad fondid, kirjasuurused, võimalikud asukohad leheküljel jms. See kujunes üheks suurimaks (aga ka põnevamaks väljakutseks) kogu praktika jooksul. Väike ja näiliselt lihtne probleem, kuid, nagu lõpuks selgus, väga raske elegantselt lahendamiseks. Selleks, et hakata aru saama, kust leheküljenumbrid lehtedele saavad, pidin lugema päris suure koguse materjale CSS paged media ja print CSS teemadel. Kui CSS-i kasutatakse tavaliselt veebilehtede kujundamiseks, siis selles on eraldi reeglid juhtudeks, kui mingit dokumenti välja prinditakse. Mina selliste atribuutidega varem kokku ei olnud puutunud ja uut ning huvitavat oli rohkelt. Paraku selgus, et kui varem oli võimalik üsna lihtsasti kuvada CSS abil ka kogu dokumendi lehtede arvu, siis enam see võimalik ei ole. Seega selle probleemi parimaks lahenduseks jäi Puppeteeri sisseehitatud võimalus leheküljed enne PDF-ks teisendamist nummerdada. See aga tähendas seda, et leheküljenumbrid saavad olla ainult dokumendi päises või jaluses, mitte aga sisu keskel, nagu teatud arvete puhul võib soovitud olla. Kõik probleemid ei saagi alati täiuslikku lahendust ja sellises olukorras on tähtis osata minna lasta.

Edasi minnes visati mu rajale järgmine tõke. Pidin uurima, kas HTML-i, millest saab PDF, on võimalik lisada nö manustatud pilte ja fonte. See tähendaks vähem võrgutaotlusi ja seega ehk kiiremat andmetöötlust. Harilikult on piltide ja fontide lähtekood kusagil kaugemas serveris, mida HTML dokument siis vajadusel tülitab ja palub andmed endale saata, et neid lehe kuvamisel kasutada. See kõik võtab aega. Manustatud ressursside korral on andmed teatud alust kasutades HTML-i juba sisse kodeeritud ja neid ei pea kusagilt väljaspoolt otsima või küsima. Peale veidikest katsetamist tundus see lahendus päris hästi toimivat, kuigi HTML-failid/mallid muutusid üsna pikaks ja tegid arvuti üsna kuumaks.

Allolevas videos on näha üks fondifail base-64 kodeeringus osana ühest HTML failist.

Järgmisena integreerisin Puppeteeri ja Liquidi mallid, niimoodi, et kogu arvutamine tehtaks ära nö ühekorraga, ühes jadas. Selle käigus kirjutasin koodi ka natuke ümber, et vigade jälgmist lihtsamaks ja täpsemaks muuta. Alex andis sealjuures häid vihjeid, kuidas seda parimal viisil teha.

Kuna selleks hetkeks olid suuresti kõik funktsionaalsed nõuded täidetud, siis jätkasin koodi paiskamisega (deployment) serverisse, kus seda saaksid ka teised testida ja/või kasutada. Mulle soovitati kasutada selleks Heroku platvormi. Enne veel kui oma koodi "üles sain lükata", pidin selle kapseldama Dockeri konteinerisse. Selline on tänapäevane viis koodi internetis jagada - garanteeritud on sõltumatus keskonnast, kuhu kood on majutatud. Kuna ma ei olnud varem Dockerit kasutanud, siis pidin enne kasutamist üsna suures mahus ennast harima, aga peale ennast põhiideedest läbi närimist läks kõik üsna sujuvalt. Ja enne kui isegi aru sain, elas minu loodud PDF-teenus Heroku pilves, valmis vastu võtma päringuid mallide ja andmetega ja tagasi saatma PDF dokumente.

Sellised olukorrad peaks Docker välistama

Kuna mul oli veel pisut aega üle, siis palus Alex mul uurida võimalust genereeritavatele arvetele vajadusel QR kood lisada. See muutub Šveitsis järgmisest aastast kohustuslikuks, seega on mõistlik sellega arvestada. Arvel olev QR-kood peab endas sisaldama infot vajaliku makse kohta: saaja, kontonumber, kuupäev, metadata jms. Otsisin Node'i mooduleid, mis võimaldaksid QR-koodi loomist ja leidsin meeltpainutavalt loova nimega mooduli qrcode. Kui qrcode'i abil QR-kood loodud, tuli see lihtsalt mallis sobivasse kohta paigutada, kasutades jällegi manustatud pildiandmeid. Lihtne.

Sellega seoses jõuamegi nüüd käesolevasse hetke, mil kirjutan blogipostitust tehtust. Oli meeldiv. Nukid sellele, kes kogu ülalseisva tekstiseina läbi jõudis lugeda, kahekordsed nukid sellele, kes seda ühe jutiga tegi. Vabandust, kui kõik või osa tekstist segaseks jäi. Küsimuste ja kommentaaride jaoks on siin Bloggeris ka vist mingi koht, seda julgustan kasutama.

Kokkuvõtteks praktika kohta. Loomulikult õppisin palju tehnilisi oskusi ja uusi teadmisi, aga neid on võimalik ka omal käel omandada, lihtsalt aega kulub ilmselt rohkem, kui pole kelleltki targemalt küsida. Minu arvates hoopis tähtsam kogu protsessi juures oli võimalus näha ja teatud määral osaleda tarkvarafirma igapäevatöös, suhelda tarkade inimestega, küsida (tihti veidi sinisilmseid) küsimusi (tihti ebaoluliste) asjade kohta. Igal hommikul kell 9:30 kohtus kogu meeskond püstijalakoosolekul, kus kõik jagasid, mida nad eile saavutasid ja mida täna kavatsevad korda saata. Tänu sellele tekkis mul mingi hägune ettekujutus, kuidas ja mis põhjustel JustOni erinevad osakonnad omavahel infot vahetavad ja koos töötavad. Firma arendusmeeskond oli äärmiselt ühtehoidev ja kõik arendajad olid nutikad ning sõbralikud inimesed, kellelt oli palju õppida. Keerulisemaid probleeme lahendati alati koos ja üksteise tegemiste vastu tunti huvi. Usun, et see on ainus mõeldav viis head tööd teha ja tarkvara luua. Olen väga tänulik, et sattusin niivõrd lahedasse firmasse praktikale.

Aitäh veelkord ja hüvasti
Gabriel

blogipostitus

Esmalt sooviksin alustada sellest, et kui tahate lugeda millestki erakordsest, siis tasub üles leida mu eelmine postitus, kus tehakse juttu Bratwurstist ning käesolev jätta kus see ja teine. Vastasel juhul aga head lugemist.

Lisamärkusena tuleb ära mainida, et kuigi graafik on ütlemata tihe, siis see postitus sündis tänu sellele, et alati särav Katja võimaldas meile uued töölauad. Sellised uhked, mis nupuvajutusest oma kõrgust muudavad, mitte mingid tavalised neli-jalga-ja-plaat-liikumatud lauad. Igatahes nende paigaldamise ajaks tuli parasjagu käesolev töö ootele panna ja asendustegevus leida.

Järjekorralt neljas töönädal möödus juba saabuvate munapühade tähe all. Üksteise järgi läksid puhkusele Thomas, Daniel, Andreas ja ilmselt veel paljud teisedki. Varsti tekkis tunne, et oleme ainukesed rumalad, kes veel kontoris passivad.

ehe tõestus sellest, et munadepühad on Saksamaal väga oluline püha

Kätte jõudsid pikad pühad - neli päeva jutti nagu kohalikud meile rääkisid. Reedel otsustasime vahmiiliga Jena kõrval olevaid mägesid avastama minna. Eesmärgiks oli näha kogu Jenat ja loomulikult ka it-paradiisi kõrgelt ülevalt pilvepiirilt. Nagu selgus, siis on tegu väga salakavalate mägedega ning selleks, et avaneks vaade Jena paradiisile, tuli üksjagu vaeva näha. Kokku sai taldu kulutatud vast ehk mitmekümne versta jagu.

kiire paus teel tippu

vaade Jenale kaljunukilt

kes tähelepanelikult vaatab, leiab pildilt Diva-e

Mägedega on juba kord nii, et tuleb tagasi alla ka ronida

Järgmisel päeval läksime kaasa elama kohalikule tippklubile, staaridest kubisevale FC Carl Zeiss Jena esindusmeeskonnale. Ja nagu eeldada võis, ei jätnud vutimehed kaugeid külalisi Eestist ning ka ülejäänuid 5573 kaasaelajat külmaks, vaid pakkusid erilise spektaakli, mille käigus taoti külla sõitnud vastasmeeskonna värav ilma naljata otsast otsani palle täis.

kodumeeskond kolla-sinises mänguvormis

Õhtul otsustasime näha, milline näeb Jena linn välja olukorras, kui päike on juba loojunud. Nagu ikka, siis Stadtrodast Jenasse jõudmine on omaette üritus, mis on nende nädalatega juba üsnagi tavapäraseks kujunenud. Õhtu ise möödus peamiselt ühes keldris.

ajaviiteks kohalike kickeri ässade selgasid prügiseks tegemas

Pühapäev läks rahulikult, administreerivate tegevuste saatel, mida autor ei pea piisavalt olulisteks, et siinkohal lahti kirjutama hakata. 

Ja kätte jõudsigi esmaspäev. "Jälle tööle?!" mõtlevad kindlasti meie sajad ja tuhanded eestikeelsed lugejad. Aga ei! Munapühade esmaspäev on siin riigis samuti puhkepäev. Miks? Vot ei oskagi täpselt öelda, aga kui nii juba on, siis tuleb kohalikke kombeid kindlasti austada. Taaskord võtsime jalad selga ning suunaks Hermsdorfi ja andsime päkkadele valu. Teel käisime läbi mitmeid vanu veskihooneid ning niisama looduskauneid kohti.

Vanas veskis tegutseva Holzländeri õlletehase töötav vesiratas

Et see postitus liiga lahja ei saaks, siis lisaksin siia lõppu ühe ärarääkimata meeldiva pildi Bratwurstidest.

kümme ahjukuuma Bratwursti oma täies hiilguses

Carl ja Kristjan - neljas nädal Diva-e's

Kätte jõudnud järjekordne esmaspäev ning meie tiimiga liitus Daniel, kes oli samuti front-end arendaja. Daniel hakkas meie tööd üle vaatama ja andis tagasisidet. Meie töö oli korralik ja hea, kuid ta pidi struktuuris natuke muudatusi tegema, selleks kulus tal terve esmaspäev. Sel ajal meie proovisime jwt pluginat tööle saada ilma erroriteta. Õpetusi selle kohta polnud, mis tegi olukorra eriti raskeks. Arustasime ja proovisime erinevaid variante, kuid kahjuks üksi neist ei töödanud. Teisipäeval toimus koos meie juhendaja ja kahe teise arendajaga põhjalik koosolek, kus rääkisime projekti struktuurist ning vaatasime üle senised tulemused. Juhendaja näitas back-end poolt, mida ta oli arendanud ning seletas, kuidas miski toimib, tema lahendus oli tehtud angulariga, sest tema ei olnud Vue'd õppinud. Kuid see ei ole suur probleem, sest angular ja vue on väga sarnased.

Projekti koosolek

Kolmapäeval asusime uuesti jwt'ga tegelema, otsisime, kas kasutaja andmeid saab kuvada ka keycloaki sisseehitatud võimalustega. Keycloaki ametlikus dokumentatsioonis seda kirjas ei olnud, kuid leitsime vastuse Stack Overflow'ist, kus oli väga hästi see teema ära seletatud. Proovisime seda ka oma projektiga ning saime asja tööle. Kui kasutaja oli sisse loginud, kuvati tema nimi ja email. Testisime seda ka uue registreeritud kasutaja peal ja see tõepoolest toimis. Neljapäeval lisasime kõik viimased muudatused gitlabi ning ühendasime kaks branchi. Danieli vue projekt oli SPA (single page application), kuid meie oma MPA (multi page application) seega seal tekkisid väikesed erinevused ning kõik ei töötanud nii nagu peab. Hakkasime otsima lahendust, kuidas asi tööle saada SPA konfiguratsioonis, kuid siis oligi järksu neljapäev läbi ja algasid pühad. See, mis toimus pühadel, saab lugeda Kristjani järgmisest postitusest.

Merliti- Ülesanne on valmis

Pärast kahte nädalat VueJS õppimist olen jõudnud soovitud tulemuseni.

Vue JS õppimisel pidin endale selgeks tegema ka kuidas kasutada NPM (Node Package Manager) ja CLI (Command Line Client e. käsurea liidest).

Nagu eelmises postituses mainitud siis Vue on JavaScripti raamistik

„Vue.js (ka Vue) on arvutiteaduses vaba JavaScripti raamistik, millega luuakse kasutajaliideseid.[1] Integreerimine projektidesse, mis kasutavad teisi JavaScripti teeke, on lihtsustatud Vuega, sest see on disainitud olema järk-järgult kasutuselevõetav. Vue toimib ka veebirakenduse raamistikuna, võimaldades luua arenenud üheleheküljelisi rakendusi.“(Vikipeedia)

Kõige keerulisem oli selgeks saada kuidas Vue-d lihtsalt ja loogiliselt oma olemas oleva projektiga siduda, nii et kõik komponendid töötaksid. Teoorias peaks see lihtne olema, aga kuna enamus õpetusi olid pigem uue Vue projekti loomisest ja selle kaudu veebirakenduse või lehe arendamisest, siis oli see minule suur katsumus ja hea õppekoht.

Kuna Vue kasutab komponentide süsteemi ja iga komponent on omaette fail, siis pidin tõsiselt mõtlema, kuidas oma kausta struktuur luua ja kuidas mingid komponendid omavahel suhtlevad ja mis failid omavahel ühenduvad.

Minu ülesanne oli kuvada andmebaasis olev info (mis paikneb serveris) veebilehele, siis nende omavaheline sidumine oli kõige keerulisem ja aeganõudvam protsess, et sobiv lahendus leida.

Kui aga back-end ja front-end omavahel ühendatud, ja  PHP sai aru, mis infot ma talle üritan saata, tuli ainult vastavad MySQL käsud mõelda.

Adminipaneeli idee seisnes selles, et lehe administraator saaks minu eelnevalt loodud tracking-tooli’ga andmebaasi salvestatud andmeid kuvada tabelikujul ja vajadusel ka sorteerida.

Näiteks, kui administraator tahab vaadata, kus lehel on kõige kauem üks kasutaja olnud või soovib ta, et andmed oleks järjestatud kõige varajasema sissekande järgi.

Selleks tuli veebilehele luua iga käsukohta nupp, mis saadaks info serverile (JavaScript), ning server teaks milline MySQL-i päring (PHP) veebilehele tagasi saata.

 (Piltidel olev andmebaas ja funktsionaalsus on eelkõige loodud testimiseks)

Kõige pealt peab adminipaneeli sisse logima, et kuvatav info oleks kätte saadav ainult lehe administraatorile.

Kuvatakse andmebaas kogu kogutud infoga

Vajutades nupule "Show earliest" kuvatakse kõige varasemad sissekanded esimesena.

Kuvatakse kõik sissekanded, mis näitavad kuhu on inimesed läinud kontakt lehel olles. 

Carl ja Kristjan - kolmas nädal Diva-e's

Eelmine nädal jäi pooleli väga põneva koha pealt - keycloak ei töödanud. Olime otsustanud tegeleda keycloaki login, registreerimise ja kasutajavaate disainimisega. Proovisime teha need võimalikult samasugused nagu diesel medaille koduleht. Alguses ei saanud kuidagi vedama aga hiljem hakkas asi edenema ja saime disainid valmis. Salvestasime need eraldi kausta ja panime gitlabi ülesse. Tol hetkel me seda veel katsetada ei saanud, kuna keycloak ja vue ei töödanud veel koos. Kätte jõudnud teisipäev ning hakkasime keycloakiga jälle pusima, mitu tundi hiljem proovisime Vue CLI'd seadistada manuaalseslt ning see tuli meile kasuks, sest erroreid oli kõvasti vähem. Seejärel oli koosolek Andreasega ning see võttis nii kaua aega, et tööpäev saigi läbi. Kolmapäeva hommikul me alustasime kohe keycloakiga ning suutsime saavutada staatuse, kus meid eemaldas keycloaki tööleminekust üks error. Googeldasime ja otsisime sellel lahendust, kuid asjatult. Siis tuli mõte proovida Vue CLI installida nii, et me routes ei kaasa sellesse. Ja asi toimis- me saime lõpuks keycloaki ja vue omavahel tööle. Peale lõunat tegime natuke disaini bootstrapiga ja ühendasime ennist tehtud keycloaki login, logout disaini vuega. Tunne hea, sai tööpäev läbi.

Vue.js esileht

Kätte oli jõudnud neljapäev, hommikul testisime, kas kõik asjad ikka töötavad - jah, kõik asjad töötasid siiani. Peale lõunat läksime Carl Zeissi tehasesse, millele kulus pea kolm tundi. Peale seda hakkasime uurima jwt (jason web token) kohta ning kuidas sealt kasutajanime ja muid andmeid kätte saada. Jõudsime natuke lugeda ja videoid selle kohta vaadata, kui tööpäev läbi sai.

Meie tehtud keycloaki kujundus

 Reedel jätkasime jwt õppimist ning leidsime vue plugina selle jaoks. Lisasime plugina oma vue projekti ning tuli välja, et seda kasutada on vaja ka jqueryt, kuid siis hakkas pihta grill-party. Diva-e korraldab selliseid asju paar korda aastas ja just siis see juhtus. Grilliti liha ja bratwursti. Grillpidu läbi, naasesime töölaudade taha ning hakkasime jqueryt lisama. Enamus õpetusi olid arusaamatud ja ei töödanud, kuid leidsime ühe väga hea video, mille järgi tehes, saime jquery lisatud. Testisime, kas ka see töötab ning tõepoolest, see tomis ning kõik eeldused olid täidetud jwt vue plugina kasutamiseks. Sellega saigi reede ja ka töönädal läbi.

Carl ja Kristjan - teine nädal Diva-e's

Teine nädal algas rahulikult, läksime kooli, kus tutvustati sealset õppekäiku/meetoteid, mis erinesid Eesti omast päris palju. Peale seda tegime ringkäigu koolis ja saime proovida ka koolilõunat. Kool nähtud, läksime edasi grillpeole, mis algas ringmängudega, millest me Kristjaniga väga kaua osa võtta kahjuks ei saanud, kuna läksime ratast vaatama. (PS! Saime ratta). Kätte jõudis tesipäev, saime HTML komponendid valmis ja hakkasime keycloaki lisamam. Nagu arvata võis, see ei töödanud, kuid me ei andnud alla ja pusisime terve pika päeva sellega. Peale mitut rasket tundi intensiivset mõtlemist ja proovimist saime keycloaki tööle.

Keycloaki esialgne login

Sai sisse logida, välja logida ja ka registreerida. Olime väga uhked oma saavutuste üle ja sellega ka tööpäev sai läbi. Kolmapäeval hakkasime uurima, kuidas keycloaki globaalselt tööle saada, kuid siis tuli Andreas (meie juhendaja) ja andis meile teada, et selle pärast meie muretsema ei pea. Samuti tegi ta meile kasutajad gitlabi (mis on tasuline) ja liitis meid projektiga. Kuna me olime varem githubi kasutanud, ei olnud gitlab meile võõras ja suutsime kiiresti selle selgeks saada. Peale pärastlõunat lisas Andreas gitlabi mõned ülesanded ja ka kirjeldused, mida peaks järgmisena tegema, sellega sai ka kolmapäev läbi. Neljapäeval alustasime Vue CLI kasutamist, proovisime, kuidas see töötab ning mis võimalusi see pakub. Me valisime tavalise konfiguratsiooni, mis tundus mõistlik, peale seda hakkasime keycloaki lisama. See erines väga palju sellest, mida me olime ennist HTML failiga teinud. Keycloak viskas pidevalt erroreid, nii kui mõne olid korda saanud, ilmus uus. Selline nägi välja meie neljapäev - erroreid eemaldades. Kätte oli jõudnud reede, tunne oli väga hea, keycloak ei töödanud. Me ei andnud alla ja proovisime aina edasi, tegime uusi CLI projekte, kuid asjatult, reede lõpuks ei saanud me keycloaki vuega tööle ning otsustasime esmaspäeval värske peaga kõik läbi mõelda ja asi tööle saada. Mis juhtus esmaspäeval ja kas me saime keycloaki tööle, seda saate lugeda juba järgmisest postitusest.

Mahlzeit

Korraks tekkis nende kolme nädala jooksul esimene väike hingetõmbepaus, et anda põgus ülevaade senistest tegemistest.
Maandusime märtsi lõpus Berliinis ning selle asemel, et käed rüpes passima jääda, otsustasime koheselt osaleda velskrite meeleavaldusel apteegireformi vastu.

drogistide meeleavaldus Brandenburgi värava taga

Edasi viis meid tee läbi Jena Stadtrodasse, meie uude koju. Õigemini küll Stadtroda raudteejaama, koduni jäi sel hetkel veel mitu head versta mägironimist.

Stadtroda Hauptbahnhof

Järgmisel päeval jõudsime IT-paradiisi, kus asuvad praktikaettevõtted ning meid jagati "täiesti juhuslikult" erinevatesse ettevõtetesse.

Felsenkelleri trammipeatuse ootepaviljoni Diva-e reklaam

Kohtusime Andreasega Diva-e'st, kes tutvustas meile ettevõtet ning meid ettevõttele, lisaks näitas meile ka järgneva kuu aja ülesandeid, mis hõlmavad endas olulist kliendiprojekti, mille detailide avalikustamise võimalikkuse kohta puudub antud hetkel kindel teadmine.

Vahepeal külastasime kollektiivselt ka oma ala tunnustamata ekspertide poolt kõrgelt hinnatud kaupluskeskuse Kaufland Jena filiaali.

sõnad on üleliigsed

Nädalavahetusel rentisime auto ja võtsime ette tee Leipzigisse ning samuti osalesime ka Jena linnatuuril, mis tipnes botaanikaaia külastusega. Alljärgnevatel piltidel on muuhulgas näha nii eelmainitud auto kui ka erinevad vaated Leipzigi ja Jena linnadest.

Jena botaanikaaia ilmselt palmipuu

üksik valge sammas suure kiriku kõrval Leipzigis

Uus nädal algas vastuvõtuga kohalikus kutsekoolis, kus kohtasime ka rootslasi, kellest nähtavasti vähemalt osad olid siia tulnud sooritama praktikat parkuuris. Kohtumise keskmeks tõusis aga Miša, kelle tegelik identiteet on teatud põhjustel endiselt küsimärgi all.

Ülejäänud nädal möödus töiselt, Vue ja Keycloaki saatel.

Nädalavahetusel otsustasime uurida Stadtroda ümbrust ning just seda me ka oma uutel jalgratastel tegime.

vaade meie Stadtroda kodukandile Tissa poolt

Lisaks käisime vaatamas ka kuulsat Saalfelder Feengrottenit ning mekkisime väidetavalt väga kasulikku roostevett.

stalaktiidid

koopalaest langev tammejuur koos veenirega

Töönädal algas sealt, kus eelmine pooleli jäi, ainult selle erinevusega, et vahepeal tuli meil üle vaadata Jena kõige olulisem ettevõte Carl Zeiss.

tsirkuleeriva rakuvaba DNA ekstraheerimine Carl Zeissi mikroskoopide abil

Äsja lõppenud nädalavahetusel õnnestus meil külastada mitmeid olulisi Saksamaa linnu, sealhulgas ka Erfurti, kus püüdsime tabada doktor Schmidti, kuid edutult.
Ringreis kulmineerus tõelise pärli - Esimese Bratwursti Muuseumiga!

Bratwursti otseliin

Bratwurstimaailmavärav

Bratwurstikahur platvormil

plekkmees võidukalt Bratwurstil ratsutamas

Bratwursti monument austamaks Bratwursti

läbikäik keelatud

originaalne Tüüringi Bratwurst, kõikse parem

Kuigi viimasena kirjeldatut on selle praktika jooksul ilmselt võimatu ületada, jääme siiski kuulmiseni.

Carl ja Kristjan - esimene nädal Diva-e's

Meie esimene nädal oli rahulik, esimesel päeval saime teada oma tööülesanded ning planeerisime nädala nii, et saaksime Vue.js baasteadmised selgeks. Selleks otsisime välja YouTubest parimad õpetusvideod ning vaatasime need läbi. Teisipäeva õhtul vaatasime umbes tunniajase video, kus räägiti, mis Vue üldse on ja milleks seda kasutatakse. Kahjuks polnud tegu just kõige parema videoga, sest räägiti palju Reactist ja kuidas need omavahel sarnanevad, kuigi algteadmisi Vue kohta saime sealt kindlasti. Kolmapäeval liikusime juba koodi poole, leidsime hea video, mida sai ka ise järgi proovida. Tegime mõlemad selle läbi ja arutasime, kuidas see töötab ja mis loogika seal on. Siiamaani tundus kõik päris loogiline ja arusaadav. Teise päeva lõpuks oli meil juba aimdus, mis see Vue on ja kuidas seda kasutada. Neljapäeval hakkasime tegelema login süsteemiga, kuid saime lõuna ajal teada, et hakkame kasutama Keycloaki, mis on juba valmislahendus, mis sisaldab nii login, logout kui ka registreerimist.

Keycloaki põhiseaded

Peale lõunat tutvusime keycloakiga ja meile tundus see mõistlik lahendus. Proovisime keycloaki serverit tööle saada ja admin paneeli kaudu seadeid muuta, et see toimiks meie lahendusega.  Reedel võtsime keycloaki põhjalikumalt ette ja proovisime login süsteemi tavalise HTMl failiga. Meie projekt ja keycloak tuli kokku viia, see tundus alguses raske ja arusaamatu, kuid hakkasime lugema dokumentatsiooni ja erinevaid õpetusi, kuni leidsime javascript plugina, mida meil just vaja oli. Tänu sellele saime aimduse, kuidas need kaks omavahel tööle hakkaksid. Sellega sai reede ja töönädal läbi.

Esimene päev ettevõtetes

Meenutusi esimesest praktikapäevast..........26.03 jõudsime Jena Westi rongijaama, seal ootas meid Marc Rossner, kes juhatas meid IT Paradiesi - suur maja, kus tegutsevad erinevad it ettevõtted.

IT Paradies

Meid võttis vastu selle maja boss, kes näitas, kus miski asub ning mis ümbruses toimub. Peale seda jaotati meid firmadesse, mina ja Kristjan läksime Diva-e'sse, Merliti NewWebTec'i ja Gabriel JustOn'i. Saime lähemalt tuttavaks oma juhendaja Andreasega, kes näitas meile kontorit ja tutvustas inimesi. Ringkäik tehtud, asus Andreas meile projekti tutvustama, toodi välja tehnoloogiad, mida kasutada ja lõpptulemuse fuktsionaalsus. Meile anti valida Angulari ja Vue vahel, kuid ka Andreas arvas, et Vue oleks algajatele lihtsam, seega otsustasime selle kasuks. Tööülesanded selged, liikusime oma töölaudade juurde ja asusime Vue.js õpetusi vaatama.

Diva-e kontor

Umbes kolm tundi saime õppida, sest kell 14.00 pidime olema Jena koolis, et kohtuda Götziga. Õhtul vahetasime muljeid, kuidas ettevõte tundus ja mis tööülesandeid saime, sellega ka meie esimene päev ettevõtetes sai läbi.

Merliti -Teise ülesande algus

Nüüd kui on aminipaneeli registreerimine ja sisse logimine valmis, on vaja leida lahendus, kuidas vajalik info andmebaasist lehele kuvada. Ehk siis tuleb luua dünaamiline leht, mis kasutab erinevaid vaateid info kuvamiseks.

Kuna minu eesmärk on siin võimalikult palju õppida ja areneda, siis otsustasin, et kasutan Vue JS raamistikku, et oma lehele erinevaid vaateid kuvada. Kuna mul pole Vue JS-ga absoluutselt varasemaid kogemusi siis see nädal ja tõenäoliselt ka järgmine nädal, kuluvad ainiti Vue JS raamistiku õppimisele.

Merliti- Esimene posttus- Pool praktikat läbi

Minu esimene blogi postitus ... on tõenäoliselt väga hiljaks jäänud, sest minu välispraktikast  Saksamaale, Jenas on täpselt pool läbitud. Mul on vabanaduseks ainult öelda, et lihtsalt niipalju on olnud muid tegevusi, eriti kuna ilmad on olnud võrratud.

Minu töötan ettevõttes NewWebTec GmbH, mis keskendub interneti turundusele (SEO, SEA ja sotsiaalmeedia) ja veebiarendusele. Valdavalt kasutatakse WordPressi ja SEO teenuse pakkumist aga arendatakse ka oma poolseid veebirakendusi. Lisaks tehakse koostööd erinevate ettevõtetega, kes asuvad meiega samal korrusel ja majas. (Büroo hoone nimi - IT paradise, ütleb päris palju, mis keskkonnaga tegemist on).

Lõuna paus

Töölaud

Ettevõtte ise on võrdlemisi uus. Meie meeskonnas on tegevjuht David (kes on ka minu juhendaja), kaasasutaja ja WordPressiga valdavalt tegelev Patrick ja üks noor koolipoiss kes töötab osakoormusega. Lisaks pidi aprilli keskel meiega liituma üks tüdruk ja üks noormees, kes tulevad ka praktikale. 

Minu esimene praktika päev oli 26. märts ja esimene ülesanne oli luua jälgimise süsteem, ilma küpsiseid kasutamata. See tähendas siis seda, et ma pean kätte saama millal kasutaja sisenes veebilehele, millisel lehel ta on, millisele lehele suundub ja kui kaua ta lehel viibis.  Esialgu tundus ülesanne hirmutav, sest koheselt tekkis palju küsimusi:

• mida ma üldse kasutama pean, et see info kätte saada
• kuidas ma saan märkida kellaaja, millal leht laeti
• kas ma pean ka märkima, mingi info kasutajate kohta
• kus ma saan lehe asukoha url-i
• kuidas ma jälgin millisele lingile ta järgmisena vajutab
• kuidas ma saan selle info, et just sellele lingile on vajutatud,
• mis hetkel midagi salvestatakse
• ja kuidas ma saan selle ajavahemiku

Davidi soovitusel on kõige mõttekam, alustada väikeste ülesannetega ja siis järjest suuremaks minna. Ülesande kasutamiseks on vaja suurelt osalt kasutada JavaScripti (Jquery seal hulgas) ning PHP-d.

Kõige pealt panin ma paberile kirja millised nõuded peavad olema täidetud ja siis hakkas suur Googeldamine. Kuna uute ülesannete lahendamine näeb pigem selline välja, et loed midagi, siis proovid ja siis uurid, miks ei tööta, siis kogu protsessi käigus loed ja õpid sa väga paljude erinevate nüansside kohta, mida veebiarendamisel ja programmeerimisel peab silmas pidama. Näiteks, kui sa mingi JS funktsiooniga saad mingid andmed, siis sa pead teadma, mis liiki andmed need on ja kuidas neid peab töötlema. Tuleb alati natuke suuremalt ja kaugemalt mõelda.

Kuna alguses David soovitas, et kogu vajalik info CSV faili salvestada, et selle saaks siis hiljem alla laadida, siis ma esimese päeva maadlesin sellega, kuidas üldse infot salvestada, ja seda siis CSV formaati viia, ja mingil imekombel peaks kuskil olema ka allalaadimise link.

Minu esimese nädala otsingu märksõnad olid : saving data in JS, JS code to parse CSV, data processing with JS, count how many times a function is called, how do export JS array into CSV, sava data to fail, += operaator, variable equals as function jne.

Läbi sai proovitud väga palju erinevaid meetodeid ja how do send data to php using AJAX, oli vist küll lemmik otsingusõna sest JavaScriptiga info serverisse saatmine oli minu jaoks küll üks raskemaid probleeme, sest kuidagi ei sobinud minu PHP-skriptile need variandid, mis internet mulle lahkesti andis. Lõpp hea, kõik hea, nädala ja poole pärast oli mul andmebaas olemas, ning minu tehtud skript logis kõik vajaliku info ilusti andmebaasi.

 

Kaua tehtud kaunike 

Minu teine ülesanne on äsja loodud andmebaasi ekraanile kuvamine admipaneelis. Kõige pealt tuleb luua front-end pool, et veebilehe administraator saaks minu loodud andmebaasis kõik info ja päringud ilusti oma ekraanile kuvada. Ehk siis veebileht, kus kasutaja saab vaadata, kus lehel olid külastajad kõige kauem, mis leht on kõige populaarsem jne.

Selle ülesande juures tuleb kasutada nii front-end, back-end kui ka andmebaaside töötlust. Esmalt tuleb luua sisselogimise süsteem, sest need andmed on mõeldud ainult administraatorile. (Sisselogimise süsteem ise võttis juba terve nädala, et ilusti tööle saada).Kuigi koolis oleme korra samalaadselt asja teinud, siis oma arengu huvides tahan ma sinna juurde luua ka kasutajaks registreerimise võimaluse, kus siis kasutaja sisestatud info saadetakse serverisse ja hiljem saab ta läbi selle adminpaneeli keskkonda siseneda.

Kuid ülesanne on osutunud keerulisemaks kui ma arvasin ja olles sellega pea nädal aega maadelnud ei ole ma just väga kaugele jõudnud. Olen küll väga palju õppinud ja mõistan juba rohkem, kuidas andmebaasi ühendada ja mida kõike selleks vaja läheb. Aga praeguse seisuga, veel midagi ei funktsioneeri.

Aga kuna programmeerimine on valdavalt vigade otsimine siis läbi selle olen õppinud, error 500 kohta…mis ei ole just väga informatiivne error, aga läbi selle sain uurida SSL-i sertifikaadi kohta,  ühendasin oma andmebaasi töökoha serveriga, ning avastasin, et pean ikka oma localhost-iga hakkama saama. Tagasi ühendamisel, aga skript enam nii hästi ei tahtnud joosta ja tõenäoliselt on seadistuses mingi viga …

…aga kuna vahest juhtub, et koodi on juba nii palju erinevatest allikatest kokku lapitud, siis otsustasin, et proovin täiesti otsast alustada. Õnneks saan palju koodi ümber kopeerida aga login süsteemi osas pean internetist lihtsalt mingi hea õpetuse leidma.