Ember.js en Laravel uitproberen

Voor een project van school ben ik twee weken bezig geweest met Ember.js, Ember Data en Laravel. Met het Laravel PHP framework heb ik de API geschreven die gebruikt wordt door Ember.js en de iPhone applicatie.

Ember.js is een Javascript Framework dat werkt volgens het MVC principe. Het was voor mij de eerste keer dat ik hier mee werkte, hierdoor moet ik veel uitzoeken en proberen. Ember.js heeft op dit moment al bijna versie 1 bereikt en is daardoor al bijna een stabiele versie. Ember Data daarin tegen is nog volop in ontwikkeling. De communicatie tussen Ember en de API werkend krijgen koste veel tijd en regelmatig wat frustraties.

Het uiteindelijke resultaat is een pagina die een lijst van bewegingsopnames laat zien en een details pagina die grafiek laat zien met bewegingen.

De site is hier te bekijken: http://bci.remcoraaijmakers.nl/

Tijdens de ontwikkeling ben ik tegen verschillende problemen aangelopen. Hier volgen twee tips.

Lijst en details view

In veel gevallen wil je in een website gegevens laten zien. Bij deze applicatie zijn er verschillende opnames van bewegingen, al deze opnames worden in een lijst weergegeven. Als je op een item (exercise) klikt wil je hiervan meer informatie krijgen, namelijk alle logs (motionlogs).

Een belangrijk probleem waar ik tegen aan liep was het laden van de details gegevens van een exercise. Aan de hand van dit (code) voorbeeld kreeg ik een lijst + details weergave werkend. Echter werd bij het openen van de details niet de bijbehorende motionlog gegevens opgehaald via de API. Door de zelfde model voor de lijst en de details te gebruiken werd bij het laden van de details de gecachede data gebruikt van de lijst.

De oplossing heb ik uiteindelijk hier gevonden. Het advies was om een aparte model aan te maken voor de lijst.

1
2
3
4
5
6
7
8
/*
* List model
* Om een aparte lijst te maken
*/
App.ExerciseListing = DS.Model.extend({
name: DS.attr('string'),
createdAt: DS.attr('string')
});

Deze model heeft ook een eigen onderdeel nodig in de API. In mijn geval heet de model in Ember “ExerciseListing”. Daarvoor is volgende endpoint nodig in de api “.nl/api/v1/exercise_listings“.

Om de lijst met exercises te laden bij het openen van de moet de standaard route van Ember.js aangepast worden. De hierboven genoemde model moet namelijk ingeladen worden.

1
2
3
4
5
6
7
8
/*
* Default route
*/
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return App.ExerciseListing.find();
}
});

Opbouw van Ember en data laden via Ember Data

Bij het laden van de details van een exercise wordt de telefoon data via de API geladen. Bij het openen van de details pagina wordt door Ember.js direct de html weergeven. Ember laad hierna pas de data in de html.

Om de grafiek weer te geven is moet eerst de motionlog data geladen zijn. Om de grafiek pas te laten genereren als de data aanwezig is heb ik een javascript timeout gebruikt.

1
2
3
4
5
6
7
8
9
10
11
12
13
App.ExerciseRoute = Ember.Route.extend({
model: function(params) {
return App.Exercise.find(params.exercise_id);
},
setupController: function(controller, model) {
var data = App.Exercise.find(model.id);
controller.set('model',data);
controller.set('content',data);
setTimeout(function(){
controller.addGraph();
}, 3000);
}
});

 

PHP framework Yii

Tijdens de PHP lessen was ik opzoek gegaan naar een PHP framework om iets OO (Objectgeoriënteerd) proberen te maken. Ik ben toen begonnen met een Quiz te maken in CakePHP.

Wat me toen al een tegen zat was de speciale manier van naamgeving aan je classes. Je moest iets in het Engels enkelvoud aanmaken waarna het systeem het meervoud vervolgens bedacht en je het op die manier verder moest gebruiken.

Zo kon je het model ‘Post’ aanmaken en moest je vervolgens de controller ‘posts’ aanmaken.

Het admin gedeelte van de Quiz heb ik werkend gekregen, waarna ik er niet meer verder mee ben gegaan omdat er weer andere opdrachten waren.

Drankjes Gadget

Ondertussen hebben we met project 3 een Hyves gadget gemaakt. Deze staat online en moet natuurlijk ook beheerd kunnen worden. Toen ben ik weer eens gaan zoeken naar een nieuw framework om daarmee op een eenvoudige en snelle manier een beheer systeem mee te maken.

Yii (Yes It Is!)

Ik ben toen al snel met Yii gaan werken. Met behulp van de screencasts en de Gii module heb ik gemakkelijk models en controllers kunnen maken. Je kon direct drankjes en ingrediënten aanmaken, bewerken en verwijderen.

Zelf moet ik nu nog het onderdeel maken dat er voor zorgt dat de ingrediënten ook bij het drankje weergegeven worden.

TYPO3 @ Redkiwi

Ben nu al bijna 3 volle weken aan het stage lopen bij Redkiwi. Erg naar me zin en het is gezellig.

Begin steeds meer te leren over TYPO3, erg mooi CMS systeem. Veel configureerbaar en veel mogelijk met extenties.

De basis dingen ken ik nu wel redelijk alleen er zitten denk nog veel dingen ik die ik niet ken of weet dat ze mogelijk zijn. Maar daar kom ik nog wel achter in de komende maanden.

Binnenkort maar is beginnen aan stage project. Vandaag al maar wat voorbereiden.

Zen-Chart

Heb een tijd geleden een webshop in elkaar gezet voor CompSolution met osCommerce. Het was een klote werk om de layout aan te passen en er was geen mogelijkheid om een klein plaatje + groot plaatje bij een product te uploaden, wat ik dus zelf erin heb gemaakt. Met andere dingen daarbij heb ik aardig wat uurtjes erin gestoken.

Afgelopen week vroeg iemand van school of ik weer even kon helpen bij installeren van osCommerce, omdat hij het ook op zijn vorige site had draaien. De installatie weer begonnen maar op gegeven moment kwamen we weer allerlei vage fouten tegen. Kan ze zo effe niet meer opnoemen, maar iritant genoeg dat ik maar naar een alternatief ben gaan zoeken.

Toen kwam ik op de volgende site ‘5 reasons why oscommerce is a nightmare‘. Paar van die punten herkende ik wel. Het mooie was dat er ook gelijk een paar alternatieve werden vermelden. Wat me dus bracht op Zen-Chart.com ook opensource :). Vervolgens ook de nederlandse site gevonden waar ook een Ideal plugin beschikbaar is met daarbij de nederlandse taal bestanden. Wat erg handig is, want dat scheeld ook weer werk.

Onder tussen is diegene die de hulp vroeg zelf ook verder gegaan met Zen-Chart en heeft voor de rest nog geen moeilijke problemen gehad met de layout aan te passen. Het is natuurlijk wel wat zoek werk allemaal maar dat heb je er wel voor over als het beter werkt.