Het ontwikkelen en aanbieden van een Magento extensie

Door E-sites, E-sites
10 augustus 2015 - 3467 x bekeken - Categorieën: Tech

Binnen de E-sites Group werken we al een geruime tijd met Magento, een populair e-commerce platform wat verantwoordelijk is voor het aansturen van een groot aantal nationale- en internationale webwinkels.

Magento heeft naast een groot assortiment aan features ook een hele omvangrijke community waarin zogenaamde extensies een grote rol spelen. Een extensie is een uitbreiding op bestaande, óf compleet nieuwe, functionaliteit.

Hoewel Magento in basis een zeer compleet softwarepakket is voor het runnen van een webshop, zijn er ook genoeg scenario’s waar het platform standaard geen oplossing voor heeft. In dat geval kun je een beroep doen op de vele beschikbare extensies, zowel gratis als betaald en variërend van een vacature beheersysteem tot een uitgebreide helpdesk chat functie.

In deze blogpost doe ik uit de doeken hoe ik onlangs zelf een extensie ontwikkeld heb en wat er allemaal bij komt kijken om deze aan te bieden via Magento Connect.

Het idee

De gemiddelde front-end developer werkt regelmatig (het zij vrijwillig, dan wel onder fysieke dwang) met een WYSIWYG editor. Een term waar ikzelf vrijwel gelijk kromme tenen van krijg. Want hoewel het acroniem staat voor “what you see is what you get”, is dat zeker niet altijd het geval. En dan heb ik het natuurlijk specifiek over hetgeen wat browsers voor hun kiezen krijgen: HTML opmaak.

De gemiddelde WYSIWYG editor mag er dan misschien wel net uitzien als je favoriete tekstverwerker, maar schijn bedriegt. Onder water zorgt deze grafische modus vaak voor ongewenste en invalide opmaak. Daarom werk ik zelf altijd in HTML modus, zodat ik alle controle heb over de tags die gebruikt worden.

Dat gezegd hebbende, wil ik gelijk even klagen over de HTML modus van TinyMCE, de standaard WYSIWYG editor van Magento. De tags zijn namelijk lastig te onderscheiden en het ontbreekt aan diverse handige functies die bijvoorbeeld je favoriete IDE wel heeft.

Omdat ik in het verleden al eens een TinyMCE uitbreiding heb geschreven die een oplossing biedt voor deze tekortkomingen, liet het idee om dit te verpakken als een Magento extensie niet lang op zich wachten.

De basis

Hoewel ik de afgelopen jaren aan diverse Magento webshops heb mogen werken, had ik nog nooit eerder een eigen extensie ontwikkeld. Daarom ben ik me eerst gaan verdiepen in de architectuur van een extensie. Zoals bij de meeste software uitbreidingen (plugins, modules, etc) vereist ook Magento dat je een specifieke mappen- en bestandenstructuur aanhoud voor extensies.

Na een paar gerichte Google queries kwam ik al snel bij een Smashing Magazine artikel uit met de titel "The Basics Of Creating A Magento Module". Met behulp van dit artikel heb ik zonder al te veel moeite een groot deel van de basis architectuur op kunnen zetten. Dus, echt een must-read als je zelf aan de slag wil gaan met een Magento uitbreiding.

Omdat ik in deze post de focus wil leggen op het aanbieden van de extensie houden jullie een gedetailleerde uitleg nog te goed van me. De lezers met een technische achtergrond kunnen natuurlijk direct in de code duiken om te zien hoe het er onder de motorkap in elkaar steekt.

Features

Als ik het heb over mijn favoriete IDE, dan heb ik het natuurlijk over Sublime Text. Samen met een handjevol handige packages en dito setup maakt deze editor mijn werk als front-end developer een stuk makkelijker.

Vanuit die gedachte beschikt de extensie, genaamd Advanced HTML Editor, over de volgende IDE-achtige features:

  • syntax highlighting;
  • regelnummers;
  • code snippets in- en uitklappen;
  • zoek functionaliteit;
  • HTML autocomplete;
  • Emmet support / keybindings.

Ik denk dat het een understatement is om te zeggen dat met deze extra functionaliteit de code een stuk prettiger te lezen én te onderhouden is.

Configuratie

Naast het aanpassen van de look & feel kan de gebruiker ook per feature aangeven of deze ingeschakeld moet worden (of niet). Ik heb zelf een aanname gedaan in de standaard setup...maar de gebruiker is vrij om deze aan te passen naar eigen wens.

Al deze instellingen zijn te vinden onder System > Configuration > E-sites en de kans is groot dat hier toekomstige Magento extensies uit de E-sites keuken ook onder gecategoriseerd gaan worden.

JavaScript architectuur

Aan de client-side wordt vrijwel al het zware werk verricht door CodeMirror, een JavaScript library die een <textarea> omtovert tot een veelzijdige code editor en daarnaast diverse handige uitbreidingen biedt.

De code van de TinyMCE plugin zelf is iets meer dan 100 regels en doet eigenlijk niet meer dan het openen van de popup en het inladen van het bijbehorende .html bestand.

Als deze eenmaal ingeladen is neemt RequireJS het stokje over en wordt asynchroon alle overige JavaScript logica ingeladen. Dit gebeurd bewust asynchroon zodat de rendering van de interface hier geen hinder van heeft.

Omdat de logica bestaat uit losse modules is de code beter onderhoudbaar, makkelijker te lezen en eventueel in de toekomst ook eenvoudig aan te sluiten op een unit-test suite.

Compatibiliteit

Tijdens de ontwikkeling heb ik de extensie intensief getest in Magento 1.9. Maar, zoals een goede developer betaamt was ik niet van plan om het daarbij te laten. Hoe meer versies je extensie ondersteund, hoe groter tenslotte het bereik is.

Om dit te realiseren heb ik diverse Magento instanties (via MAMP) naast elkaar laten draaien om zo te zien of de extensie naar behoren functioneerde. Momenteel biedt de extensie ondersteuning voor versie 1.7, 1.8 en 1.9.

Licentiemodel

Voor iemand die regelmatig open-source software download (én deelt) heb ik me eigenlijk nooit echt verdiept in software licenties. De open-source projecten die we publiceren op GitHub vallen allemaal onder de MIT licentie. Dit betekent min of meer dat je mag en doen en laten wat je wil met onze software. Want, sharing is caring.

Echter, omdat deze extensie onderdeel is van een groter softwarepakket heb ik toch maar eens de moeite genomen om te onderzoeken wat nu het beste licentiemodel is. Na het openen van een aantal bronbestanden kwam ik er snel achter dat Magento onder de OSL 3.0 licentie valt. Ik zal je de juridische kromspraak besparen, het komt erop neer dat OSL vergelijkbaar is met MIT maar net wat meer restricties heeft. Namelijk:

  • MIT staat toe dat je wijzingen vrijgeeft onder een andere licentie (OSL niet)
  • MIT heeft geen copyleft vereisten (OSL wel)
  • MIT is compatibel met de GPL licentie (OSL niet)

Toen dit ik eenmaal helder had was de keuze snel gemaakt, OSL it is. De extensie is tenslotte onderdeel van Magento en maakt deels gebruik van Magento’s logica.

Magento Connect

De Advanced HTML Editor wordt momenteel op twee verschillende manieren aangeboden. Zo kan de doorgewinterde ontwikkelaar, die niet vies is van een beetje copy/paste werk, terecht bij de GitHub repository. De wat minder ervaren gebruiker kan de extensie installeren via Magento Connect.

Voor het plaatsen van je extensie op Magento Connect heb je een account nodig. Om je extensie professioneler over te laten komen is het natuurlijk zaak dat je het profiel netjes inricht en voorziet van dito avatar.

Eenmaal een account aangemaakt kun je via het admin panel vrij eenvoudig een nieuwe extensie toevoegen. Gelukkig had ik al documentatie al geschreven voor de GitHub repo, dus alle benodigde details waren snel ingevuld. Waar je wel wat extra aandacht aan moet besteden is de brief description, of te wel: de korte omschrijving. Deze mag maximaal 110 karakters bevatten en zou idealiter direct moeten vertellen wat de extensie inhoud.

In de gedetailleerde omschrijving kun je eventueel ook nog wat HTML tags gebruiken om het e.e.a. aantrekkelijker te maken.

Packaging

Nadat het profiel aangemaakt was en alle benodigde informatie van de extensie ingevuld was dacht ik “even snel een zipje maken, uploaden...en klaar”. Helaas, ik had kunnen weten dat Magento nog meer verrassingen voor mij in petto had.

Magento Connect verwacht namelijk een pakketje wat aan een bepaald formaat voldoet. Je extensie inpakken conform dit formaat wordt ook wel packagen genoemd en gaat via de Magento back-end. Je vindt dit onderdeel via: System > Magento Connect > Package Extensions.

Wetende dat ik aan dit proces een hele blogpost zou kunnen wijden...kun je gerust van me aannemen dat je deze stap zeker niet moet onderschatten. Na diverse gefaalde pogingen heb ik toch maar besloten de handleiding “How To Package Magento Connect Extensions” zorgvuldig door te lezen. Hierin wordt per stap uitgelegd wat je moet invullen bij de betreffende velden. Doe er je voordeel mee.

Na het aanmaken van de package is het raadzaam om deze nog even uit te pakken om te zien of alle benodigde bestanden aanwezig zijn. Daarnaast kun je gelijk controleren of er geen ongewenste bestanden ingeslopen zijn, zoals bijvoorbeeld .DS_Store of andere vergelijkbare (tijdelijke) bestanden.

Als de package eenmaal opgestuurd is laten ze je, naar eigen zeggen, binnen 10 werkdagen weten of de extensie goedgekeurd is. Echter kan ik je alvast verklappen dat dit ook een weekje of wat langer kan duren.

Versioning

Wanneer je extensie eenmaal in Magento Connect staat ben je er natuurlijk nog niet. Net als bij de meeste open-source projecten is het verstandig om een roadmap op te stellen met eventuele verbeteringen of nieuwe features. Toen ik begon aan dit artikel stond versie 0.1.0 net online, maar inmiddels is 0.3.0 de meest recente versie en is de opvolger (0.4.0) ook al in ontwikkeling.

Zowel tijdens het packagen als het uploaden van een nieuwe release vraag Magento om een corresponderend versienummer. Het is dus cruciaal om dit nauwkeurig bij te houden. Voor onze open-source projecten doen we dit op basis van Semantic Versioning. Deze specificatie schrijft het volgende formaat voor: MAJOR.MINOR.PATCH.

Dit betekent in een notendop:

  1. MAJOR: incompatible API / architectuur veranderingen;
  2. MINOR: nieuwe functionaliteit die backwards compatible is;
  3. PATCH: backwards compatible bug fixes.

Op deze manier waarborgen we consistentie in onze versienummers en zijn we transparant naar de gebruikers van onze software.

Handige resources

Naast het afkijken bij bestaande extensies heb ik tijdens het ontwikkelproces veel hulp gehad van Google. Hieronder een greep uit de artikelen waar ik veel informatie uit heb kunnen halen:

Resumé

Zeker vanuit mijn rol als front-end developer heb ik tijdens het ontwikkelen van de extensie bijzonder veel opgestoken over de architectuur van Magento en hoe zaken achter de schermen werken. Tel daarbij op mijn ervaring met Magento Connect en je hebt een bak met extra kennis waar we zeker uit kunnen putten bij toekomstige projecten.

Wil je zelf aan de slag gaan met een Magento extensie en je hebt vragen over hoe je dit het beste kan aanpakken? Stuur me gerust een e-mail (boye [at] e-sites [dot] net) of gooi een tweetje naar @_boye.

 

 

E-sites zoekt developers!

Technologie ontwikkelt zich razendsnel. En wij dus ook. We omarmen nieuwe technologie, experimenteren en investeren. In goede tools en apparatuur. En in jou. Join us! Bekijk onze vacatures.

 

 

E-sites blijft vernieuwen: een nieuwe hostingomgeving

Door Arthur Engel

E-sites gaat over op een nieuwe hostingomgeving. Benieuwd naar onze beweegredenen? En de oplossing die we gekozen hebben… - Lees meer

Lees verder