roys4d-blog

[roys4d-blog]

Einde van de minor in Lokaal'99

[roys4d-blog]

Reflectie workshop en minor

De minor Scripting For Designers is alweer bijna afgelopen en dus is het tijd voor een terugblik op de afgelopen maanden en in het bijzonder naar mijn eigen (opgedane) ervaringen, leermomenten en elementen die ik zeker meeneem naar projecten in de toekomst. 

Om nog even terug te komen op de workshop en de vragen die ik in mijn vorige blogpost stelde (Is de code niet te lastig voor beginners? Wordt alles goed uitgelegd?), daar ga ik nu antwoord op geven. Om met de eerste vraag te beginnen, de code was mijns inziens vrij moeilijk, vooral als je de code nog nooit eerder gezien hebt. Toch hebben we het zo proberen te verpakken dat het in hapklare blokken naar de overige klasgenoten zou komen. Steeds een klein stukje code en daarbij een uitleg geven van wat het doet (daar komt vraag twee al om de hoek kijken). 

Vraag twee is wat lastiger te beantwoorden, omdat je niet weet of alles overkomt bij de klasgenoten. Ik heb zo goed mogelijk mijn best gedaan tijdens de voorbereiding om de code zo in kleine delen op te breken zodat het begrijpelijk zou zijn. Tijdens de workshop zijn we eigenlijk niemand onderweg kwijtgeraakt, ondanks dat Arthur zei dat hij het ambitieus vond om de klasgenoten een hele applicatie te laten bouwen, en dat binnen 3 uur. Door veel te vragen 'is iedereen zo ver?' en 'snappen jullie dit?' nam ik iedereen aan de hand op weg naar de volgende stap. 

Of de klas de workshop nuttig vond, werd pas achteraf duidelijk. Ronald merkte correct op: "In het begin van de workshop was het abracadabra, in de laatste 30-45 minuten viel alles op zijn plek." Dat klopt zeker, bij Ruby on Rails moet je immers veel voorbereidingen treffen voordat je echt resultaat ziet. Dat kwam ook in de workshop terug. Voordat de voornemens-applicatie goed draait, moet er op verschillende fronten code worden ingezet om het werkend te krijgen.

Toch waren de reacties na afloop positief. Robert was onder de indruk van de hoeveelheid code die we in 3 uur hadden weten te stoppen en vond de workshop goed in elkaar steken met nadruk op de juiste onderdelen. Bauke liet via Twitter weten dat hij het best ingewikkeld vond, maar dat hij wel een goed beeld heeft van de mogelijkheden van Ruby on Rails. En dat was precies wat de bedoeling was van de workshop. "Wat een goede workshop" was Cornelis' reactie via Twitter.

Ikzelf vond de workshop goed gaan. We zaten niet in tijdnood en hadden zelfs nog tijd over voor een 10 minuten break die van tevoren niet was ingepland. Wel waren er een aantal onderbrekingen doordat de code bij zowel ons als bij de klasgenoten errors opleverden, maar dit viel redelijk snel op te lossen en het is niet echt natuurlijk wanneer het niet zou voorkomen tijdens de workshop.

De dag ervoor hadden we met de projectgroep de gehele workshop doorlopen en de applicatie nogmaals gemaakt als test of we niks over het hoofd hadden gezien. Dat ging erg goed en zou ik persoonlijk eigenlijk vaker moeten doen: het doorlopen van de stof/presentatie zodat eventuele tekortkomingen eerder dan tijdens de presentatie aan het licht komen. De rest van de voorbereidingen is terug te lezen in mijn vorige blogpost. 

Semester De pilotminor Scripting For Designers is nu ten einde gekomen en ik moet zeggen dat ik tijdens dit semester heel veel geleerd heb op het gebied van coderen. Niet zozeer het écht leren van code (schrijven) -want dat doe je alleen maar door herhaling, herhaling en nog eens herhaling- maar hoe je een nieuwe codetaal onder de knie moet krijgen en het herkennen van de syntax in vergelijking met andere codetalen. Tijdens de jQuery-weken en vooral tijden Ruby on Rails kwam dit sterk naar voren. Doordat je al meerdere talen hebt gezien, kun je sneller relaties leggen: 'ah, dus dit is hetzelfde als dat in bijvoorbeeld HTML'.

De stoomcursus vond ik erg nuttig en vooral JavaScript sprong eruit qua nuttigheid als basis voor jQuery. Arduino vond ik eigenlijk niks aan, maar bepaalde onderdelen uit de syntax kwamen wel terug tijdens de workshop van Flex/Flash, dus dat was wel blijven hangen. Vooral de enorme rits aan vreemde errors die je in de Arduino-console op je afgevuurd krijgt, werkt niet mee aan het snel begrijpen van de code. Ik denk dat hardware-based scripten mij dan ook niet echt ligt. Ik wil liever bezig zijn met client-side scripting en dan vooral (snel) resultaat boeken. Daar leende jQuery zich uitstekend voor.

In de drie weken van jQuery moest je het jezelf aanleren. Dat viel in het begin redelijk zwaar, maar ik was gemotiveerd en had van tevoren al goede bronnen gezocht om meteen mee aan de slag te gaan. De achtergrond van JavaScript kwam hierbij tevens goed uit. De aanpak om jQuery onder de knie te krijgen was een goede, het doen van tutorials, zelf dingen uitproberen en het lezen van geschikte literatuur droegen er aan bij dat dit redelijk snel ging. 

Wat me opviel tijdens de workshops in de eerste fase was dat bij Flash het vooral ging hoe het er uit zag en dat je niet echt de mogelijkheden of resultaten onder ogen kreeg. Beter zou zijn om gewoon een middag een workshop te geven met aan het eind een werkend product, zoals het bijvoorbeeld bij MAX/MSP en PHP ging. Dan kun je ook gerichter een keuze maken, nu viel het voor mij al bij voorbaat af omdat het gewoon niet goed gebracht werd.

De vrijheid in de keuzes die je kunt maken tijdens Scripting For Designers was een van de pluspunten van de minor. Zo creëer je mogelijkheden voor de student om hun eigen pad te volgen en zich te concentreren op de talen die ze écht liggen. Daarom heb ik ook eerst voor de 'makkelijke' weg gekozen om jQuery te doen, iets wat ik erg graag wilde leren. Ruby on Rails was daarna een gok die goed uitpakte, een hechte groep die samen naar een goed eindresultaat werkte was de basis voor het overdragen van kennis.

Ik heb tijdens de minor de juiste keuzes gemaakt, ben tevreden over hoe de minor verliep en ben blij met de opgedane kennis. Van de talen die ik geleerd heb, zal ik waarschijnlijk JavaScript en jQuery in de toekomst vaker gaan gebruiken. Ruby on Rails is een wat intensievere taal, misschien dat ik die ooit nog eens tevoorschijn tover voor een eigen project.

[roys4d-blog]

Voorbereiding workshop Ruby on Rails

De afgelopen week hebben we ons alleen nog maar beziggehouden met het realiseren van de workshop Ruby on Rails voor de overige klasgenoten. Allereerst hebben we gebrainstormd over wat we precies wilden maken. We kwamen na de workshop 'workshop geven' van Robert al snel tot de conclusie dat het het beste zou zijn om een kleine applicatie te bouwen waarin nadruk zou worden gelegd op de belangrijkste zaken in Ruby on Rails. Zo kregen de gebruikers het belangrijkste van Rails voor hun kiezen én hadden ze op het eind een werkend iets gemaakt.

Al snel werd besloten dat het een applicatie zou worden waarbij je je voornemens kon noteren of je bij bestaande voornemens aan kon sluiten. De plannen en uitwerking werden eind vorige week al gesmeed, deze week was het tijd voor de uitvoering van de applicatie. Bjorn had een Ubuntu-image gemaakt voor Virtual Box, zodat er tijdens de workshop met een stabiel systeem kon worden gewerkt.

Wat opviel was dat de Ruby-machine er in vergelijking met Windows helemaal niet uitklapte. Dat was wel een verademing om mee te werken, al was de interface van Ubuntu wel even wennen.

Op maandag en dinsdag hebben we de applicatie in elkaar gezet door de taken te verdelen. Ieder kreeg zijn eigen deel die hij moest uitwerken, zodat hij dit ook in de workshop ten gehore kon brengen. Voor mij waren dit de templates/views en random resolutions. Hier heb ik mij op gestort en heb onder andere de volgende code geschreven.

class HomeController < ApplicationController def index if not current_user @resolutions = Resolution.find(:all, :offset => (Resolution.count * rand).to_i, :limit => 3 ) render 'index_not_logged_in' else @my_resolutions = current_user.resolutions @resolutions = Resolution.all render 'index' end end end

Dit betekent dat de gebruiker een andere indexpagina te zien krijgt (index_not_logged_in) dan wanneer hij wel ingelogd is (index). Op de eerste pagina komen alleen drie redelijk random voornemens te staan, dat is vergelijkbaar met de drie wijnflessen op de voorpagina van de applicatie voor de wijnwebshop. Zo heb ik de twee applicaties geprobeerd bij elkaar te betrekken.

Via GitHub (een master van Daan) heb ik ervoor gezorgd dat de overige groepsleden ook mijn gemaakte werk konden krijgen zodat iedereen de laatste versie zou hebben. 

Toen de applicatie eenmaal stond, is er overleg geweest tussen de groepsleden over hoe we de workshop precies gaan aanpakken. Wat vertel je wel en wat vertel je niet en hoe diep wil je gaan in je workshop? Zoals Daan ook al op Twitter zei, is het lastig om het niveau en bereidwilligheid van de gebruiker te bepalen. Wij hebben vijf à zes weken continue met het taaltje gewerkt, maar kan iemand die dit voor het eerst ziet het allemaal behappen? 

Daar liepen we tegenaan, gelukkig stelde Arthur ons gerust tijdens de laatste vergadering voor de workshop. Hij vond de workshop uitdagend en de opzet goed. Daarna hebben we ieder kwartier gepland over wie wat gaan doen, dit stond eerst in een niet zo logische volgorde, maar door de gemaakte aanpassingen komt alles op zijn plaats terecht (met mogelijke uitloop). Met Daan heb ik besproken wat er op het bord moet komen te staan om de workshoppers een overzicht te bieden van de verschillende mappen en bestanden in een Rails-applicatie.

Voor mijn eigen onderdeel van de workshop heb ik de wijnwebshop nog eens goed doorlopen en een aantal kenmerkende elementen van Rails op een rijtje gezet. Hiervan heb ik een demo uiteengezet die in een aantal stappen is te doorlopen. 

Om mijn klasgenoten niet te veel te laten typen (en de kans op tikfouten daarmee te vergroten) heb ik voor de random resolutions en templates/views stukken code op Gist gezet (1) (2) (3). Zo kunnen ze eenvoudig copy/pasten en verlies ik ze ook niet in de workshop. Alles wat ik wilde vertellen heb ik uitgetypt en ook uitgeprint, zodat ik dat als leidraad tijdens de workshop kon gebruiken.

Kortom, deze week stond in het teken van de voorbereiding op de workshop voor Ruby on Rails. Ik vond dat de voorbereiding goed in elkaar zat, we hebben duidelijk eerst de applicatie besproken en gemaakt. Pas daarna hebben we besproken hoe de invulling van de workshop eruit zou gaan zien, zodat de applicatie niet te veel afhankelijk zou worden van de workshop. Waar ik het meest over inzat was de gewenste afweging tussen het diepteniveau van Robert (ondanks dat hij niet meegerekend mocht worden tot de workshoppers) en het oppakniveau van de klas. Is de code niet te lastig voor beginners? Wordt alles goed uitgelegd? Het antwoord op deze vragen kun je alleen maar te weten komen door de workshop uit te voeren.

In de volgende blogpost komt het antwoord op bovenstaande vragen, het verloop van de workshop en een algehele reflectie op het semester Scripting For Designers.

[roys4d-blog]

En zo ziet dat Virtual Box er dus uit (Ubuntu draaiend en daarin al Ruby on Rails draaiend)

[roys4d-blog]

Afronding applicatie Jacob's Creek

In deze laatste week van het maken van de applicatie (de wijnwebshop voor Jacob's Creek) hebben we ons vooral bezig gehouden met afmaken van kleine onderdelen, omdat het overgrote deel van de webshop al draaiende was. Daardoor heb ik me bezig gehouden met het valideren van de rating/review. Een gebruiker moet zowel een rating als een review invoeren, wil die te zien zijn bij de reviews aan de rechterkant van een product. Dit ging gepaard met de nodige errors, maar uiteindelijk heb ik het wel opgelost doordat Rails een vrij nauwkeurige erroromschrijving geeft. Ook het steeds uitvallen van Ruby hielp niet echt mee.

Naast de rating/review heb ik ook enkele CSS-problemen opgelost, zoals verkeerd gepositioneerde elementen op de pagina. Dit kwam voornamelijk doordat we gebruik maakten van het 960 grid system, een zeer handig HTML/CSS-systeem waarbij de webpagina al uit een soort raster bestaat en je dus eenvoudig content kunt plaatsen die juist gepositioneerd wordt. Met enkele herschrijvingen was dit ook verholpen. Om de laatste puntjes op de i te zetten wat betreft de pagina's, heb ik statische pagina's aangemaakt in Rails. Dat gaat op de volgende manier:

rails generate controller Pages about regions terms contact

Met één regel code heb ik de pagina's about, regions, terms en contact aangemaakt met de controller 'Pages'. Elke pagina heb ik vervolgens invulling gegeven. Het meeste werk had ik met Regions, hierop is een map van Australië te zien en per regio worden de wijnen getoond die daar verbouwd worden. Hieronder is een gedeelte van de map te zien zoals die in de applicatie gebouwd is. 

Wanneer een gebruiker over een van de gebieden hovert, ziet dat er zo uit:

Als de gebruiker klikt, wordt hij doorverwezen naar de productpagina die alle producten uit die regio laat zien. Met het aanklikken van extra filters kan het aanbod van de flessen wijn nog verder verfijnd worden. Het maken van deze pagina was niet zo'n groot probleem, het juist doorverwijzen van de gebruiker naar de productpagina ging iets lastiger, omdat het pad er naartoe nog niet bekend was. 

Daarnaast was het tijd voor bughunting, het doorlopen van de applicatie, het opsporen van mogelijke errors en deze dan (proberen te) verhelpen. Uiteindelijk viel het aantal bugs erg mee. Er zaten een aantal bugs in die vrij snel verholpen konden worden door mij. Voor wat meer ingewikkelde problemen heb ik de hulp van Bjorn ingeschakeld (hij had dat gedeelte gemaakt) en ook die zijn gefixt. 

Nadat dit gebeurd was, heeft Bjorn samen met Daan ervoor gezorgd dat de applicatie online kwam te staan. Op Heroku, een Ruby-platform waar je applicaties (gratis) kunt stallen, staat onze applicatie op dit moment. Het correct uploaden van de wijnwebshop had nog wat voeten in de aarde, maar dit is door Bjorn vakkundig opgelost. 

Op vrijdag hebben een workshop 'workshop geven' gekregen van Robert. Deze was zeer verhelderend over wat er precies van ons verwacht wordt tijdens het geven van de workshop Ruby on Rails een week later. Ook onderdelen voor een presentatie waar je normaal niet zo snel bij stil staat, zoals de verschillende werkvormen geven ons ideeën om toe passen in de workshop.

Al met al was dit een uiterst productieve week. Ondanks dat eigenlijk alle functionaliteiten er al in zaten, is de webshop compleet en getest op eventuele bugs. Dat zorgt voor een helder en overzichtelijk eindproduct dat ook nog eens werkt. Van tevoren dacht ik dat we de lat wel erg hoog hadden gelegd door het aantal functionaliteiten, maar door goed groepswerk en duidelijke afspraken zijn alle mogelijke functionaliteiten ingebouwd en hebben we een webshop gebouwd die online niet zou misstaan.

[roys4d-blog]

jQuery om aan te geven dat er minimum aantal karakters nodig is voordat een review gesubmit mag worden. Ook is de zoekbalk aangepast, onfocus verdwijnt de tekst.

[roys4d-blog]

Error #7459806 van vandaag...

[roys4d-blog]

Nu met related products op de juiste plek weergegeven. 

[roys4d-blog]

De ratings en reviews, nu met schone code :)

[roys4d-blog]

De gegeven rating wordt opgehaald uit de database en weergegeven in de vorm van sterren.

[roys4d-blog]

De rating wordt nu ook opgeslagen in de database.

[roys4d-blog]

Ruby on Rails 17 december

Donderdag stond onder andere in het teken van de checkout, deze linkte automatisch door naar de voorpagina zonder melding dat de bestelling gelukt was. Hiervoor heb ik een flash[:notice] gebruikt om de gebruiker te informeren dat de bestelling gelukt is. Hieronder is die melding te zien.

Ik wilde hier ook nog wat jQuery aan toevoegen zodat de melding na een bepaalde tijd zou verdwijnen (bijvoorbeeld na 5 seconden). Dit lukte op donderdag niet, waarom weet ik ook niet. Maar zojuist heb ik dit alsnog werkend gekregen door er een extra class aan te verbinden. De melding verdwijnt na 5 seconden automatisch zonder de lay-out te verschuiven.

Tussendoor hadden ook nog een gesprek met Arthur, onze begeleider, over onze voortgang en hij vond dat we goed op weg waren. Hij gaf nog enkele tips wat betreft de applicatie en dat we afspraken moesten maken over of we in de vakantie ook nog eraan zouden werken. Dit hebben we vrijdagmiddag doorgesproken en opgesteld in een email die naar alle groepsleden is verstuurd. 

Daarna heb ik nog gekeken naar ratings en reviews, zodat je de wijn kunt beoordelen en vooral kunt becommentariëren. De rating lukte in het begin niet, omdat de bewuste gem alleen werd ondersteund door Rails 2, terwijl wij met Rails 3 werken. Toen doorgegaan met reviews, maar dat lukte ook niet echt zo heel goed. 's Avonds heb ik nog de plussen en minnen voor ieder groepslid opgesteld om elkaar te vertellen wat de positieve dingen en de wat minder positieve dingen zijn die zijn opgevallen in de eerste paar weken van het project.

Gisteren (vrijdag) eerst geSCRUMd en vervolgens de plussen en minnen besproken. In zowel de positieve en minder positieve punten kon ik me vinden, en aan dat laatste probeer ik in de resterende weken dan ook te werken. Samen met Niels heb ik gisteren aan ratings/reviews gewerkt. Ratings werkt alleen nog statisch, je kunt wel een rating geven, maar deze wordt niet opgeslagen in de database, dat moet nog aangepast worden.

Reviews werken nu al, je kunt bij ieder product een review schrijven die meteen wordt opgeslagen. Als er nog geen review bij een product is geschreven, staat deze melding in beeld: No reviews yet. Be the first to comment. Hier (geen comments) en hier (wel comments) zijn screenshots te vinden die ik eerder plaatste op mijn blog.

De komende weken -in de vakantie- ga ik aan de slag met het werkend krijgen van de rating zodat deze ook naar de database wordt geschreven (zoals ook vermeld in de opgestelde email), eventueel alleen mogelijk met het geven van een review. Door middel van de submit-knop worden dan zowel de rating als de review naar de database geschreven. Samen met Niels is dit onze opdracht voor in de vakantie.

[roys4d-blog]

Er zijn drie comments/reviews bij dit product geplaatst, tevens met tijdsnotatie.

[roys4d-blog]

Er zijn geen comments/reviews bij dit product, vandaar deze melding.

[roys4d-blog]

Ruby on Rails 15 december

Gisteren en vandaag bezig gehouden met verschillende dingen voor de fictieve webshop van Jacob's Creek. De nadruk lag gisteren op het goed laten uitvoeren van de checkout (zoals vermeld in mijn vorige blogpost), zodat deze ook in de admin terug te zien is en de gekochte producten die daarbij horen. 

Het ging niet echt heel vloeiend, maar uiteindelijk is het wel gelukt door wat debugging en het inschakelen van Bjorn. Hieronder is het resultaat (zonder CSS-styling) te zien wanneer je een order wil bevestigen.

Daarna ben ik met CSS aan de slag gegaan om het geheel goed te krijgen. Met wat hulp van Bjorn heb ik het koppelen van de order en de gekochte producten aan de gang gekregen. Hieronder is te zien hoe dit in de admin er uit ziet. Het duurt soms wel lang voordat het lukt.

Toen dit werkte ben ik 's avonds nog doorgegaan om de homepage wat meer kleur te geven. Op dat moment was het een vrij statische pagina met alleen afbeeldingen erop. Dit heb ik aangepakt door er een imageslider in jQuery van te maken. Het resultaat hiervan is hieronder te zien.

Ondanks de tegenslagen die ik gehad heb tijdens het maken van de checkout (errors, crashes) is het mij uiteindelijk toch gelukt om het te realiseren. Door te googelen kwam ik erachter hoe het gedaan moest worden.

Vandaag me gericht op het random genereren van producten op de voorpagina van de applicatie. Dat ging vrij gemakkelijk, omdat de code hiervoor al gedeeltelijk eerder was gebruikt. De pagina laat nu random producten zien die in de database staan. In de toekomst moeten hier aanbiedingen verschijnen. Een gedeelte van de code staat hieronder:

Daarnaast heb ik vandaag de search getweakt. Deze stond nog niet goed op de pagina en was niet helemaal in Ruby on Rails geprogrammeerd. Dit heb ik ook nog verholpen door de code daarin om te zetten.

Al met al twee drukke en vooral voldoenende dagen met veel voortgang in onze applicatie. In het begin zat het aantal errors en crashes me echt hoog, op dit moment kan ik er redelijk mee leven en is het niet anders dan het maar aanvaarden. Het coderen staat ook steeds gemakkelijker doordat ik nu weet waar ik moet zoeken wanneer ik iets wil aanpassen in een bestand.

Morgen weer een dag op school (net als de afgelopen drie dagen) en ook nog een gesprek met Arthur over de voortgang (en plussen en minnen). Ik ben benieuwd wat hij van onze applicatie tot dusver vindt.

[roys4d-blog]

Ruby on Rails 13 december

Vandaag met Niels en Elbert op school gewerkt aan onze wijnshop. Bjorn was ook aanwezig (via Buro302) en samen hebben we eerst de SCRUM doorgenomen. Daarin gaf ik aan dat ik niet ver was gekomen met de related products-module, omdat het nogal erg lastig was om dit in te voegen in de huidige structuur. Vandaag zou ik me bezig gaan houden met het checkoutproces van de webshop, samen met Elbert.

Eerst gingen we op zoek naar een bruikbare methode die we konden gebruiken om in ons project in te zetten. Daarbij kwam ik uit op een pagina van Devarticles waarin stap voor stap werd aangegeven hoe je dit moest doen. Het bleek enigszins af te wijken van onze opbouw, dus daar moesten we omheen bouwen. Helaas gaf het veel foutmeldingen en lukt het niet om onze eisen met deze methode te vervullen.

Vervolgens maar zelf in de views van carts aan de gang gegaan en handmatig code toegevoegd aan de pagina. De code is nog statisch, maar werkt in principe wel. Het moet nog afhankelijk worden van het aantal items dat gekocht wordt. Hieronder is de ingevoegde code in de praktijk te zien (shipping costs zijn toegevoegd).

De dag verliep niet zo heel goed, vele errors waren het gevolgd van trial and error. Uiteindelijk wel de errors kunnen verhelpen, ook al schoot dat niet echt op het voor de voortgang van het project. Morgen een grotere slag slaan in het codeerproces dan vandaag, het was niet voor niets dramaandag.

[roys4d-blog]

Leuk, die errors om de haverklap..