Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-)onderwerpen. Ik ben lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij ook volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

14april

Wat is AngularJS? - Een introductie

Het tijdperk van de simpele website ligt inmiddels al weer enkele jaren achter ons. Websites van nu zijn complexe applicaties waarmee we hotelkamers reserveren, online bestellingen doen, e-mail lezen, agenda’s bijhouden en internetbankieren. Met de toenemende complexiteit van webapps is ook de code steeds gecompliceerder geworden.

Complexiteit

Ontwikkeltools zijn niet in gelijke mate meegegroeid met die complexiteit. Het is lastig om in een groot project alle onderdelen van elkaar te scheiden, te testen en te onderhouden. Een bibliotheek als jQuery is daar oorspronkelijk nooit voor ontworpen. Zelf JavaScript schrijven en foutloos invoegen voor alle browsers is een hele uitdaging.

In de praktijk komt het er vaak op neer dat de app wordt uitgebreid met een heel scala aan techniekjes en extra libraries voor sliders, carrousels, e-commerce en zo verder. Na een tijdje is de ooit zo cleane webapp een kerstboom van uitbreidingen en jQuery-plug-ins geworden. Vanuit beheeroogpunt is dit een kleine ramp.

Modulaire apps met AngularJS

angularjs-logoWelkom AngularJS! AngularJS is een JavaScript-framework dat geheel ontwikkeld is om tegemoet te komen aan de eisen van grote en complexe webapplicaties. AngularJS is oorspronkelijk gemaakt voor een intern project bij Google, maar inmiddels is er ook een grote open source-community actief.

In AngularJS ontwikkel je niet één grote applicatie waarin alles met alles verbonden is. In plaats daarvan maak je kleinere, gespecialiseerde modules. Deze zijn los van elkaar te ontwikkelen en te testen. Op de plekken waar ze nodig zijn in de applicatie, worden ze dynamisch ingevoegd via het principe van Dependency Injection.

Een applicatie wordt zo bijvoorbeeld verdeeld in modules voor het tonen van gegevens in een HTML-pagina (via het principe van controllers en data binding), modules voor het ophalen en cachen van gegevens van de server (met services en factories), modules voor routing, modules met constanten, een module voor in- en uitloggen in de toepassing en zo verder.

Je website of –app heeft dan één startpunt (index.html) met branding, hoofdnavigatie en meer. Hierin worden dynamisch de diverse views met functionaliteit van de applicatie geladen.

Om aan te sluiten bij onder ontwikkelaars bekende begrippen wordt AngularJS ook wel een JavaScript MVC-framework genoemd (naar het programmeerprincipe Model-View-Controller). Maar hiermee doe je de mogelijkheden van AngularJS eigenlijk te kort. AngularJS is veel meer dan dat.

De client en de server

Kenmerk van AngularJS-applicaties is wel dat de de applicatie in principe volledig in de browser draait. AngularJS is een client-sided framework. De rol van de server wordt verder teruggedrongen in vergelijking met traditionele webapps van bijvoorbeeld PHP, .NET MVC, Java of Oracle Apex.

AngularJS-toepassingen zijn in principe volledig onafhankelijk van een server. Ze worden via een API voorzien van gegevens. De server hoeft alleen maar de data te serveren waar de app om vraagt. De app zorgt zelf voor het tonen van de gegevens in HTML-templates, biedt voorzieningen voor filteren en sorteren, bewerken, enzovoort. Een AngularJS-applicatie is daarmee eenvoudig te gebruiken in de browser, op mobiele devices en op verschilende platforms. Met aanvullende tools als PhoneGap is een AngularJS-webapp desgewenst om te zetten naar een standalone app.

…maar AngularJS is wel lastig

Laten we er echter geen doekjes om winden. Het zelf realiseren van AngularJS-applicaties is een pad van vallen en opstaan. Er is ondertussen enorm veel documentatie over te vinden op internet (ik schreef eerder bijvoorbeeld een blogpost over bronnen voor AngularJS). Maar ook vaak zie je door de bomen het bos niet meer. Het is een goed idee om een training AngularJS te volgen, waarin je behalve alle losse termen ook de context leert waarin alle modules op de juiste wijze worden ingezet. Vragen als ‘Wanneer kies ik eigenlijk voor een Service en wanneer voor een Factory?’, of ‘Wat zijn best practices bij security van AngularJS-applicaties?’ worden in samenhang en met concrete voorbeelden besproken.

Als je kiest voor AngularJS als development-framework (en waarom zou  je daar eigenlijk voor kiezen? Ook dat wordt besproken), zijn er waarschijnlijk zelfs gedragingen die je moet afleren. Zo moet je bijvoorbeeld de verleiding weerstaan om voor elk probleem een jQuery-plug-in te zoeken. De meeste AngularJS-projecten kun je zelfs helemaal zonder jQuery realiseren.

Training

Volg bijvoorbeeld mijn driedaagse training AngularJS. Hierin neem ik alle ins en outs van het framework met je door, vanaf een eerste Hello World-voorbeeld tot een complete toepassing. Ook het uitwisselen van gegevens met een server wordt besproken, alsmede het werken met verschillende typen authentication. In overleg kunnen we in de training ook andere onderdelen behandelen. Denk bijvoorbeeld aan animatie met AngularJS, internationalization en localization of SEO-technieken voor AngularJS-applicaties.

Na afloop van de training kun je met een gerust hart beginnen aan het realiseren van moderne webapps met AngularJS!

Nog vragen of speciale verzoeken? Neem contact op om alles te bespreken.

-- Peter Kassenaar
14 april 2014.

20februari

Bronnen voor AngularJS

angularjs-logoAls docent merk je regelmatig dat je in trainingen en cursussen teruggrijpt op dezelfde bronnen. Zo ook in mijn training over AngularJS. Vaak verwijs ik naar eenzelfde blogpost, documentatiepagina of video op YouTube. En elke keer moet ik deze weer opdiepen uit mijn lijstje met Favorieten of uit mijn Diigo-links. Omdat de documentatie bij AngularJS zelf nou niet bepaald uitblinkt in leesbaarheid, voorbeelden en duidelijkheid (er is verbetering zichtbaar, maar echt handig vind ik ze nog steeds niet), heb ik er hier enkele op een rijtje gezet. Voor mezelf, maar ook als handig startpunt voor de lezer.

High level-achtergronden bij AngularJS

Waarom zou je – als bedrijf – je developmentcyclus omzetten naar, of uitbreiden met AngularJS? Wat is eigenlijk AngularJS en wat kan het voor mijn front-end development betekenen?

  • An overview of AngularJS for managers – blogpost van Fifod.com. Bekijkt meer op een high-level niveau wat er nodig is in de organisatie om (ook) Angular-projecten te gaan doen.K
  • Keynote NG-Conf 2014– Keynote van de eerste wereldwijde AngularJS-conferentie in januari 2014. Misko Hevery (maker van AngularJS) legt uit hoe Angular ontstaan is en waar het naar toe gaat. Een blik in het verleden, heden en de toekomst (roadmap).
  • [update] How do I “think AngularJS” if I have a jQuery background?  - uitgebreide post op Stackoverflow.com. In het antwoord wordt veel duidelijk over de manier waarop Angular werkt en hoe je daar het beste op kunt inspringen als je zelf vanuit een jQuery-achtergrond de switch maakt.
  • My Experience with AngularJS – The super heroic framework (…) – het blogartikel zelf bestaat voornamelijk uit onderstaande graphic – die ook mijn gevoelens voor AngularJS uiterst correct weergeven – maar lees vooral ook de commentaren onder de blogpost. Erg leerzaam en veel verschillende invalshoeken.

My feelings about AngularJS over time.

Beginnen met AngularJS – het totaalplaatje

Een serie totaal-overzichten, waar in alle gevallen een (eenvoudige) app wordt gemaakt, en een groot deel van de Angular-technieken aan de orde komt: een snel overzicht en gebruik van directives, modules, controllers, services en (soms) nog meer.

  • AngularJS Fundamentals in 60-ish minutes – Dan Wahlin laat in iets meer dan een uur zien hoe je een basis AngularJS-app maakt. Deze video is langzamerhand uitgegroeid tot een standaard-inleiding voor AngularJS.
  • A Step-by-Step Guide to Your First AngularJS App – een blogpost over het maken van een Formule1-app waarbij je via een open API live data opvraagt uit een database met F1-resultaten. Onder meer het gebruik van Ajax-calls met $http wordt hier getoond. Mede leerzaam omdat een andere techniek wordt gebruikt voor het ontwikkelen van controllers en services die via DI in de hoofdmodule worden ingevoegd.
  • AngularJS Sticky notes Pt. 1 – Architecture – Een totaalplaatje van een app om sticky notes te maken, met nadruk op de architectuur. Hier zijn services het uitgangspunt in plaats van een onderdeel dat later erbij wordt geïntroduceerd als best practice om in gegevensvoorziening te voorzien in je app. Dit ‘omgekeerd denken’ kan net net handig zijn om je op het goede spoor te zetten.
  • Searching the iTunes API asynchronously with Angular JS – artikel over een korte app waarmee je de openbare iTunes-API kunt doorzoeken en de resultaten presenteren.
  • JukeTube – Een AngularJS-YouTube videospeleer. Weinig uitleg, maar een compleet project om te downloaden bij Github en zelf de code te bestuderen.

AngularJS-ervaringen

Veel programmeurs hebben na verloop van tijd hun ervaringen in het werken met Angular op papier (of in ieder geval: op een blog) gezet. Er is veel te leren van hun fouten en ervaringen. Vaak geven ze ook een aantal tips om zelf dergelijke vergissingen te vermijden. Lees:

AngularJS en PhoneGap

Ik geef ook veel PhoneGap-trainingen, en zie langzamerhand dat AngularJS ook in deze omgeving doordringt, ten faveure van bijvoorbeeld ‘losse’ libraries als jQuery Mobile. De volgende artikelen gaan over het inzetten van AngularJS in een PhoneGap-project.

  • The Definitive Guide to Angular on Mobile – Hoe gebruik je bijvoorbeeld de module ngTouch in een mobiel project en hoe kun je met $swipe veeggebaren afvangen? Ongeveer halverwege wordt ingegaan op het omzetten van de webapp naar een standalone app met Cordova/PhoneGap.
  • AngularJS, PhoneGap and angular-seed. Let’s Go! – artikel over het gebruik van angular-seed om snel een project met basisstructuur te starten en vervolgens Angular en PhoneGap in te zetten.
  • Apps with AngularJS – combinatieartikel over het werken met AngularJS, PhoneGap en het Ionic-framework voor de user interface-elementen. Met veel nuttige verwijzingen naar meer online literatuur.

$http, services, interceptors en meer

Tot de lastigste onderdelen van het framework behoren (mijns inziens) onderdelen als het werken met promises, de low-level services $http en $resource en het gebruik van interceptors, bijvoorbeeld om gebruikers in een Angular app te authenticeren tegen een RESTful service/API. Deze artikelen hebben mij erg geholpen bij het begrijpen van de materie.

cookie-token-auth

Overige algemene blogs en literatuur

Een aantal personen in de community schrijven bijna altijd op hoog niveau. In plaats van hun individuele artikelen te noemen, verwijs ik naar de blogs zelf.

  • Dan Wahlin Blog – Eerder noemde ik al de 60-ish minutes video van Dan Wahlin, op zijn blog staan tal van andere nuttige artikelen en video-links (hij produceert ook de Web Weekly video-edition, met breder front-end webdevelopment nieuws over CSS, HTML5 en JavaScript).
  • John Papa – Ik volgde in Las Vegas een workshop van John Papa en dacht op voorhand dat ik al aardig wist hoe de vork in de steel zat. Ik vergiste me... Volg zijn blog voor meer artikelen over AngularJS en tal van andere frameworks (Breeze, Durandal en meer).
  • John Lindquist, egghead.io-  met een serie video-tutorials over AngularJS. Er is een betaald #pro-abonnement, maar veel video’s zijn ook gratis toegankelijk.
  • ng-newsletter – abonneer je op ng-newsletter, een wekelijkse nieuwsbrief met AngularJS-nieuws en verwijzingen. Hoog niveau.

AngularJS-training

<shameless plug>
Zijn bovenstaande adressen een stap in de goede richting, maar wil je liever in een wat rustiger tempo kennismaken met AngularJS, met begeleiding en feedback op je vorderingen? Neem dan contact op voor een
AngularJS-training. In twee of drie dagen maak je onder leiding van een ervaren docent (ondergetekende :-) kennis met dit uitgebreide JavaScript-framework. Ik laat je precies zien hoe je AngularJS kunt inzetten, hoe niet (!) en wat de knelpunten zijn die je kunt tegenkomen in productie-omgevingen.
</shameless plug>

Heb je zelf andere ervaringen, of meer nuttige links? Laat het weten, dan breidt ik het artikel uit!

Peter Kassenaar
-- 20 februari 2014

21oktober

Naar Anglebrackets in Las Vegas

Als ZZP’er moet je jezelf continu blijven (bij)scholen. In april 2010 ging ik naar Las Vegas voor de ASP.NET and Silverlight Conference and Expo, met de feestelijke lancering van Visual Studio 2010 en Silverlight 4. En daaromheen tientallen uiterst nuttige sessies van de bekendste sprekers en developers op .NET gebied. Ik heb er erg veel aan gehad. We weten weliswaar allemaal hoe het is afgelopen met Silverlight (namelijk: zo goed als dood), maar Visual Studio is levendiger dan ooit, en juist vorige week is Visual Studio 2013 gelanceerd.

(als je het leuk vind: ik heb destijds een blog bijgehouden met artikelen en filmpjes over randzaken als De Strip in Las Vegas, de woestijn, het Hollywood Sign en nog meer: http://www.kassenaar.nl/vegas/?page_id=25)

Homepage Anglebrackets

Fast forward 3,5 jaar. Eind deze week reis ik opnieuw naar Las Vegas, ditmaal voor de conferentie <anglebrackets />. Uit de online beschrijving:

/* anglebrackets is a conference for lovers of the web. We believe that the web is best when it's open and collaborative. We believe in the power of JavaScript and expressiveness of CSS the lightness of HTML. */

En dat is precies waarvoor ik er naar toe ga. Ik denk dat er geen conferentie ter wereld is die meer gericht is op de openheid van het web, open standaarden en hoe deze het beste toe te passen zijn, dan Anglebrackets. Alles ademt open source.

Hoewel veel sprekers uit de Microsoft-stal afkomstig zijn, zijn er ook workshops van Douglas Crockford (JavaScript-goeroe), Denise R. Jacobs, John Papa, Shawn Wildermuth, Elijah Manor en andere onafhankelijke webspecialisten. Ik kijk in het bijzonder uit naar de full day-workshop over SPA met AngularJS van John Papa en Ward Bell (ontwikkelaar van Breeze.js).

Meer informatie over anglebrackets vind je – behalve op de conferentiewebsite zelf – bijvoorbeeld op

En ik zal regelmatig mijn Twitterfeed bijwerken, op https://twitter.com/PeterKassenaar.

Ik heb er zin in!

Peter Kassenaar
-- 21 oktober 2013

19september

Handboek JavaScript en jQuery

Cover Handboek JavaScript en jQuery

Op 18 september 2013 is het Handboek JavaScript en jQuery verschenen.

Dit handboek bespreekt het werken met JavaScript vanaf het startpunt. Er is veel aandacht voor het leren programmeren in deze populaire scripttaal op internet. Er wordt geen voorafgaande programmeerkennis bekend verondersteld.

 

Specificaties

  • Boek, paperback, 350 pagina’s
  • Geschikt voor Windows, Macintosh, Linux en alle browsers
  • Geen speciale software benodigd
  • ISBN-13: 978-90-5940-614-8
  • Prijs: EUR 29,95

Inhoud

Het eerste deel van het boek gaat in op de JavaScript-core. Het besteedt veel aandacht aan de basis programmeerprincipes zoals de JavaScript-syntaxis, het werken met variabelen, de achtergronden bij functies, objecten en arrays. U leert meer dan alleen kopieren-en-plakken. Het Handboek JavaScript en jQuery is daarmee het beste oorspronkelijk Nederlandstalige werk voor het leren programmeren in JavaScript.

In het tweede deel van het boek wordt uw JavaScript core-kennis toegepast op het DOM in de browser en wordt jQuery geïntroduceerd. U leert ook jQuery vanaf de basis beheersen en maakt kennis met de tientallen functies in de jQuery API. Uiteraard wordt ook het werken met Ajax-functies voor gegevensuitwisseling met een externe server in detail besproken. Aan het eind wordt ingegaan op populaire jQuery plug-ins voor bijvoorbeeld diavoorstellingen en formuliervalidatie.

Maar ook nu is de achterliggende boodschap: u leert daadwerkelijk de basis van jQuery in combinatie met JavaScript goed beheersen. Deze kennis is van onschatbare waarde als u zelf scripts op internet vindt en deze in uw websites of apps wilt gebruiken. U weet dan precies wat u wel en niet moet kopiëren en plakken, en kunt zelf problemen oplossen als het niet direct gaat zoals u had gedacht.

Aan het einde van elk hoofdstuk zijn vragen en oefeningen opgenomen om de stof te herhalen. Hierdoor is het boek buitengewoon geschikt voor opleidingen en zelfstudie.

Beknopte inhoudsopgave

  • Kennismaken met JavaScript en JavaScript-gereedschappen
  • Statements, gegevenstypen, variabelen en operatoren
  • Functies, arrays en objecten
  • Programmaverloop
  • Events en event handlers in JavaScript
  • Werken met het document object model (DOM)
  • Kennismaken met jQuery
  • HTML- en CSS-functies in jQuery
  • Events afhandelen in jQuery
  • jQuery-animatiefuncties
  • jQuery en Ajax
  • jQuery-plug-ins
  • Werken met jQuery UI

Oefenbestanden

In het boek staan tal van codevoorbeelden en oefenbestanden om zelf met JavaScript en jQuery aan de slag te gaan. De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan in afzonderlijke mappen de oefenbestanden gerangschikt per hoofdstuk. Mocht hierin iets ontbreken of niet kloppen, neem dan even contact op.

 

-- Peter Kassenaar
19 september 2013

05september

PhoneGap voor Android (compleet) installeren op Windows

PhoneGapLogo

[English version of this article? Use Google Translate!]

PhoneGap is een uitstekende tool voor het maken van apps op basis van HTML, CSS en JavaScript. Ik schreef al eerder over PhoneGap:

Als je snel op weg wilt zonder zelf iets te installeren, kun je gebruik maken van de cloudservice PhoneGap Build. Maar zodra je vanaf je eigen computer aan het werk wilt, zul je PhoneGap en alle aanvullende development tools zelf moeten installeren. Op een Mac verloopt dat redelijk vlot is mijn ervaring; maar op een Windows-pc moet je vaak wat meer handelingen verrichten om alle aanvullende tools (Java Development Kit, Ant en meer) te installeren.

En: de PhoneGap-documentatie blinkt niet echt uit in ondersteuning voor Windows-developers…

logo-windows7Dit artikel bespreekt van A-Z zien hoe je vanaf een blanco Windows 7-installatie alle software en tools installeert om zelf PhoneGap-apps voor Android te kunnen compileren en testen. De termen PhoneGap en Cordova worden hierbij vaak door elkaar gebruikt.

Als je deze stappen volgt: het kan zijn dat op jouw pc sommige onderdelen al geïnstalleerd zijn (bijvoorbeeld wel de Java Development Kit, maar nog niet Ant). Ik geef aan hoe je test of de betreffende component goed werkt. Als dat het geval is, kun je de installatie daarvan overslaan.

Stap 1. Check Java

Android apps worden geschreven in Java. Je moet daarom de Java C-compiler javac.exe op je computer hebben staan. Deze moet bovendien in het pad (PATH) te vinden zijn. Check dit op de volgende manier.

  • Open een command-venster, bijvoorbeeld via Start, Cmd, Enter.
  • typ de opdracht javac. Als Java al goed is geinstalleerd en bovendien bereikbaar is via het pad, dan zie je een scherm met uitleg over de verschillende command line options voorbij flitsen. Als dat niet het geval is, ziet je scherm er zo uit:

Installatie PhoneGap Android - Check Java

Een melding als bovenstaande hoeft niet te betekenen dat Java nog niet geïnstalleerd is. Het kan op dit moment alleen nog niet worden gevonden in het pad. Check daarom via Windows Verkenner of Java misschien al aanwezig is op de computer.

  • Ga naar C:\Program Files (x86)\ en check of hier de mappen \Java en \Java\jdk1.7.0_xx aanwezig zijn. Op de plek van de xx staat het versienummer van de huidige library. Bij mij is dat op dit moment 25, maar bij jou kan dat natuurlijk alweer een hoger getal zijn.
    • Als je op een 32-bits versie van Windows werkt, kijk dan in C:\Program Files\ en vergeet de (x86).
  • Er kan ook een map \Java\jre7 aanwezig zijn. Dit is niet de goede versie voor PhoneGap-development. De jre staat voor Java Runtime Environment. Je moet echt de JDK, Java Development Kit-versie hebben.

Check je Java-versie via Windows Verkenner

Stap 1a. Installeer Java

Als Java bij jou nog niet aanwezig is, download en installeer dan de meest recente versie van de Java Development Kit.

Download en installeer Java Developmen Kit via Oracle

  • Ga daarna opnieuw naar Windows Verkenner en controleer of de mappen nu goed aanwezig zijn.
  • Belangrijk is de map \bin. Hierin staan de uitvoerbare bestanden. Check deze.

Stap 2 – Java aan PATH toevoegen

De installatieprocedure voegt Java niet automatisch aan het pad toe (tenminste, niet toen ik het probeerde). Dit moet je daarom zelf aanpassen. De PhoneGap-documentatie geeft aan dat je de variabele JAVA_HOME moet toevoegen en vervolgens %JAVA_HOME%\bin aan het pad kunt toevoegen, maar dat werkte bij mij niet goed (?). Ik voeg daarom het volledige pad naar java.exe toe.

  • Klik met de rechtermuisknop op Computer en kies Eigenschappen.
  • Kies Geavanceerde systeeminstellingen.
  • Selecteer indien nodig het tabblad Geavanceerd.
  • Kies Omgevingsvariabelen.
  • Selecteer in het vak Systeemvariabelen de variable Path.
  • Kies Bewerken.

Java toevoegen aan PATH

Ik zelf vind het handig om het pad even te kopieren naar een externe editor, bijvoorbeeld Kladblok. Dan heb je beter zicht op de complete samenstelling, in plaats van in het minuscule tekstvak van Windows.

  • Voeg de map met Java achteraan toe aan de Path-variabele.
  • Vergeet niet een puntkomma als scheidingsteken te plaatsen na de vorige (laatste) verwijzing. Je voegt dus bijvoorbeeld dit toe aan het pad: ;C:\Program Files (x86)\Java\jdk1.7.0_25\bin.

pg_05

  • Dit kun je desgewenst ook rechtstreeks in het venster Systeemvariabele bewerken doen, zoals je hieronder ziet.
  • Als je in Kladblok het pad hebt aangepast (het kan veel langer zijn dan hier in de afbeeldingen te zien is), vergeet het dan niet terug te kopiëren naar het Windows-venster. Er mogen geen regelovergangen (‘Enters’) in de variabelenaam zitten. Let hier goed op.

Systeemvariabele uitbreiden met pad naar Java

  • Sluit alle vensters met OK.
  • In principe hoef je de pc niet opnieuw op te starten na het aanpassen van het pad. Maar als je twijfelt, kan het ook geen kwaad.
  • Test nogmaals via het opdrachtvenster of de opdracht java nu beschikbaar is als algemene systeemopdracht. Als het goed is, zie je nu een venster waarin alle commandline opties worden genoemd. 
    • Let op: als je Path hebt aangepast, moet je altijd een nieuw opdrachtvenster cmd.exe openen.

Java is nu globaal beschikbaar

We kunnen verder met de volgende stap.

Stap 3 – Apache Ant toevoegen

Voor een goede werking van Eclipse (zie verderop) en PhoneGap, moet ook Apache Ant geïnstalleerd zijn. Standaard is dat in Windows niet het geval. Vraag me niet waarvoor Ant noodzakelijk is of gebruikt wordt; ik heb geen idee. Ik ben webdeveloper, geen Java-developer ;-).

Maar in ieder geval moet je het erbij plaatsen, anders werkt het niet. Dat kan op deze manier.

  • Check eerst of Ant al op je pc geïnstalleerd is en/of in het pad staat. Dat kan door de opdracht ant in een opdrachtvenster te typen. Waarschijnlijk ziet je scherm er zo uit.

Check of Ant al geinstalleerd is

  • Als je venster er uitziet zoals hierboven, is Ant nog niet aanwezig.
  • Ga naar http://ant.apache.org/bindownload.cgi
  • Kies voor het downloaden van het zip-bestand en plaats het bijvoorbeeld op je bureaublad.

Apache Ant downloaden en uitpakken

  • Apache Ant hoef je niet te installeren, alleen maar uit te pakken.
  • Kopieer bijvoorbeeld de map apache-ant-1.9.2 naar C:\Program Files (x86). De structuur ziet er dan als volgt uit.

Apache Ant als submap van C:\Program Files

Ant aan Path toevoegen

  • Herhaal de stappen zoals je hiervoor bij Java hebt gedaan, en voeg de locatie van Ant\bin toe aan het Path.
  • Na afloop kan je Path er als volgt uitzien(in werkelijkheid staat alles op één regel, in de afbeelding is regelterugloop ingeschakeld).

Apache Ant toegevoegd aan het Path

  • Test na afloop opnieuw of Ant nu wel via de opdrachtregel beschikbaar is.
    • Vergeet niet een nieuw opdrachtvenster cmd.exe te openen!

Apache Ant testen via de opdrachtregel

Het lijkt nu alsof de opdracht nog niet is geslaagd, maar je ziet nu een andere foutmelding dan voorheen. Ant zelf wordt in ieder geval gevonden. Maar nu wordt er geklaagd dat er geen bestand build.xml aanwezig is. Prima. Dat wordt later wel door Eclipse verzorgd, in ieder geval zijn nu de randvoorwaarden compleet.

Omgevingsvariabelen instellen

Behalve het pad aan te passen, moet je ook de omgevingsvariabelen ANT_HOME en JAVA_HOME toevoegen. Zonder deze variabelen (ook al gebruik je ze verder niet in het pad), werkt de Command Line Interface (CLI) van PhoneGap/Cordova niet goed.

  • Open opnieuw via Computer, Geavanceerde systeeminstellingen, Omgevingsvariabelen het venster om pad en variabelen te beheren.
  • Gebruik de knop Nieuw om twee Gebruikersvariabelen toe te voegen.
    • ANT_HOME verwijst naar de ant-directory, dus bijvoorbeeld C:\Program Files (x86)\apache-ant-1.9.2\
    • JAVA_HOME verwijst naar de Java-directory, bijvoorbeeld C:\Program Files (x86)\Java\jdk1.7.0_25 

Omgevingsvariabelen ANT_HOME en JAVA_HOME instellen

Sluit alle vensters met OK.

Stap 4 – Android SDK (= Eclipse + Android Developer Tools) installeren

Voorheen was de installatie van Eclipse als editor/IDE en binnen Eclipse de Android Developer Tools (kortweg ADT) altijd een apart proces. Tegenwoordig is alles door Google gelukkig in één proces gebundeld.

Android SDK (Eclipse + ADT) downloaden en installeren

  • Ga naar http://developer.android.com/sdk/index.html en klik op Download the SDK.
  • Accepteer op de volgende pagina de gebruikersovereenkomst en kies 32- of 64-bits.
  • Download het complete zip-pakket. Dit is ruim 440MB, dus het kan even duren.
  • Pak de map adt-bundle-windows-x86_64-xxxxxx uit het zipbestand uit naar een centrale locatie, bijvoorbeeld weer naar C:\Program Files en geef de map een iets eenvoudiger naam.
    • Ik heb de map eenvoudig hernoemd naar \adt-bundle.

De Android Developer Tools (ADT) in de map Program Files geplaatst

  • Net als bij Ant is er verder geen aparte installatieprocedure.
  • Binnen de map \adt-bundle\eclipse\ staat het programma eclipse.exe. Hiervan kun je bijvoorbeeld een snelkoppeling op het bureaublad plaatsen.

pg_15

Pad aanpassen voor de android tools

Het wordt een een eentonig verhaal, maar ook nu moet het pad worden aangepast, zodat de PhoneGap Command Line Tools de Android Developer Tools kunnen vinden.

  • Breid het pad uit met verwijzingen naar \adt-bundle\sdk\platform-tools en adt-bundle\sdk\tools.

Het pad uitgebreid met variabelen voor de ADT-tools en -platform tools.

Je kan eventueel ook in een (nieuwe) opdrachtprompt testen wat het huidige pad is. Typ hiervoor de opdracht path en windows laat zien welk pad op dit moment is ingesteld.

Het pad opvragen via de command line

Leek dit al heel wat werk? Je bent nu halverwege! ;-)

Stap 5 – node.js installeren

Met ingang van PhoneGap/Cordova 3.0 wordt een nieuw PhoneGap-project gemaakt via de PhoneGap Command Line Interface, of kortweg de CLI. De installatieprocedure voor PhoneGap 2.9 en eerder is volkomen anders, deze behandelen we hier niet.

De CLI is een module die draait onder node.js. Je moet dus node.js installeren voordat je ook maar iets met PhoneGap kunt gaan doen. Over node.js is enorm veel te vertellen, ik beperk me hier tot de meest noodzakelijke stappen. Check eerst of node toevallig al op je pc is geïnstalleerd.

  • Open een opdrachtvenster cmd.exe en typ node achter de opdrachtprompt.
  • Als je scherm er uitziet zoals hieronder is node nog niet aanwezig.

pg_18

Installeer node.js

  • node.js wordt als .msi-bestand gedownload; open dit zodra het helemaal opgehaald is.
  • Doorloop de installatiewizard en neem alle standaardinstellingen over.

Installeer node.js met de standaardinstellingen

De installatieprocedure van node.js is slim genoeg om wel direct de gewenste parameters aan het Path toe te voegen. Check dit door de opdracht path uit te voeren in een nieuwe opdrachtprompt.

pg_21

Er zijn verwijzingen aangebracht naar zowel de nodejs programmadirectory als naar de Node Package Manager, npm. Hiermee installeer je nieuwe modules binnen node. En dus ook PhoneGap!

Stap 6 – Cordova/PhoneGap installeren

Eindelijk kun je Cordova of PhoneGap gaan installeren (zie voor meer informatie over de verschillen in naamgeving tussen Cordova en Phonegap bijvoorbeeld dit PhoneGap blog).

Installeer Cordova op de volgende manier.

  • Open een opdrachtprompt. Via npm installeer je de gewenste node-modules.
  • Typ npm install –g cordova.
    • De switch –g installeert PhoneGap als globale module. Zo kun je  vanuit elke gewenste directory een nieuw PhoneGap-project maken.
    • UPDATE: Let op: Er is een verschil tussen de modules phonegap en cordova. Je kunt ze beiden installeren via npm. In dit artikel installeer ik cordova. Zie bijvoorbeeld dit artikel van Raymond Camden voor meer informatie.

Cordova installeren via NPM

De package manager gaat aan de slag en haalt alle benodigde modules en bestanden op vanuit https://registry.npmjs.org. Dit kan enige tijd duren.

Cordova is aanwezig en kan worden gebruikt

Na afloop keer je terug in de standaard opdrachtprompt, de benodigde Cordova-bestanden zijn nu aanwezig.

We beginnen op te schieten. De resterende stappen zijn nu  als volgt.

  1. Maak en build een nieuw project via de opdrachtprompt.
  2. Open het project in Eclipse
  3. Draai het project in de emulator of op je Android-device.

Stap 7 – een Cordova project maken

We gaan er van uit dat de Cordova/PhoneGap-projecten in een aparte map worden opgeslagen. Voor dit doel heb ik even de map C:\work gemaakt.

  • Open een opdrachtprompt in C:\work
  • Typ de opdracht cordova create hello com.kassenaar.HelloWorld "Hello World".
    • Met create maak je een nieuw project in een nieuwe map \hello.
    • De package name van het project wordt com.kassenaar.HelloWorld. Gebruik in jouw geval je eigen domeinnaam + projectnaam (in omgekeerde volgorde, ook dat is een afspraak)
    • Geef als derde parameter de naam van het project op. Als deze naam spaties bevat (zoals “Hello World”) moet hij tussen aanhalingstekens staan.
    • UPDATE: Let op - het lijkt er op dat de quotes ERG BELANGRIJK zijn. Als je deze weg laat rondom de projectnaam, kan het project niet goed worden gecompileerd omdat het configuratiebestand dan fouten bevat. Zet voor de zekerheid dus altijd quotes rondom de projectnaam.

pg_28

  • Na afloop wordt de opdrachtprompt weer getoond.
  • Ga naar de nieuw gemaakte map met cd hello.
    • Je moet nu aangeven dat het Android-platform wordt toegevoegd aan het project.
  • Typ cordova platform add android.

pg_29

Foutmelding?

Het kan zijn dat je op dit moment een foutmelding te zien krijgt. Ik kreeg dat althans wel, de eerste keer. Dat kwam omdat Eclipse/ADT standaard de API versie 18 installeerde (de nieuwste versie), terwijl Cordova de API versie 17 verwacht. Mocht er bij jou ook een foutmelding optreden, los dit dan op door de API versie 17 te installeren (wie zei dat Android eenvoudig was?)

  • Typ android achter de opdrachtprompt. Dit opent de Android SDK Manager.
  • Vouw de boomstructuur achter Android 4.2.2 (API17) open.
  • Selecteer minimaal SDK Platform en ARM EABI v7a System Image.
  • Klik op Install 2 packages.

Installeer zonodig de juiste Android API

Selecteer in het volgende venster de License en klik op Install.

Installeer de nieuwe API-bestanden

  • De pakketten worden gedownload en geïnstalleerd. Na afloop is dit te zien in de SDK Manager.
  • Sluit de SDK Manager en probeer nogmaals de opdracht cordova platforms add android.
  • Lukt het nog niet? Controleer dan of je wel in de goede map staat. Je moet de opdracht in de projectdirectory uitvoeren (in dit voorbeeld in C:\work\hello).

Nu zijn de juiste API's voor Cordova geinstalleerd

Build

Build het project voor de eerste keer. Dan worden de goede libraries naar het project gekopieerd en is het klaar om later in Eclipse geopend te worden.

  • Typ de opdracht cordova build.
    • Als je meer gedetailleerde uitvoer wilt zien, gebruik dan de opdracht cordova --verbose build.

pg_35

Tussentijdse evaluatie

Laten we even kijken wat er tot nu toe op schijf aanwezig is.

  • Open Windows Verkenner en blader naar je codedirectory (bij ons: C:\work).
  • Hierin staat nu een map \hello met daarin het algemene PhoneGap-project
  • In de map Platforms is één platform toegevoegd, \android (je zult begrijpen dat je een CLI-opdracht als cordova platforms add ios, iOS toevoegt aan het project – al heb je daarop een Windows-computer natuurlijk niet veel aan).

Het tussentijdse resultaat in Windows Verkenner

Stap 8 – Project openen in Eclipse

Je kunt nu het gemaakte project openen in Eclipse, wijzigingen aanbrengen en het gaan compileren en testen.

  • Open Eclipse via de snelkoppeling die je op het bureaublad had geplaatst, of door rechtstreeks op eclipse.exe te dubbelklikken in de programmamap.
  • Als Eclipse voor de eerste keer gestart wordt, vraagt het waar het de werkruimte (workspace) moet opslaan. Neem de standaardsuggestie over en klik op OK.

Open Eclipse voor de eerste keer en geef een Workspace-locatie op

  • Eclipse toont een venster over Usage statistics en een welkomstscherm. Sluit beiden.
  • Kies File, New, Project.
  • Open in de wizard de tak Android en kies Android Project from Existing Code.
  • Kies Next.

Een nieuw Android project maken op basis van bestaande code.

  • Kies in het vervolgvenster achter Root Directory de map waarin het Android project door Cordova/PhoneGap is geplaatst. In ons voorbeeld is dat C:\work\hello\.
  • Klik op Finish.

pg_36

Fouten herstellen

Vaak gaat het goed.

Soms gaat het ook niet goed (ik heb nog niet. Mochten er rode kruisjes bij het project staan, dan betekent dit dat Eclipse het project niet direct kan compileren. Als dit optreedt, probeer het dan als volgt te herstellen

  • Klik met de rechtermuisknop op de projectnaam (Hello World) en kies Properties.
  • Kies Android en selecteer de hoogste API-versie die op je computer beschikbaar is (bijvoorbeeld level 18). Sluit het venster met OK.
  • Kies het menu Project, Clean.
  • Als het goed is zijn daarna de kruisjes verdwenen.

pg_34

Stap 9 – project openen in emulator

Om een project te kunnen draaien, moet je een Android device aansluiten (je telefoon, of tablet) of een emulator starten. In Eclipse maak je op de volgende manier een Android-emulator (AVD, Android Virtual Device). Dit hoef je alleen te doen na een eerste installatie. Als er al een emulator beschikbaar is, wordt deze automatisch gebruikt.

Android Virtual Device Manager starten

  • Kies in Eclipse de knop Android Virtual Device Manager.
  • Selecteer het tabblad Device Definitions om snel een emulator te maken op basis van bestaande toesteldefintie.
  • Ik kies nu de eerste optie (Nexus S) en klik op Create AVD.
  • Neem in het volgende venster de standaardinstellingen over en klik op OK.

 

Een AVD maken op basis van bestaande device-informatie

 

Definitie van een AVD

  • Sluit het venster met OK om terug te keren naar de Eclipse-werkomgeving.

Emulator starten

Het starten van de Emulator/AVD is een langdurig klusje. Je kunt het beste de emulator eenmalig opstarten, en vervolgens gewoon in de taakbalk laten staan. Als je de app hebt gewijzigd en hem opnieuw start, wordt hij op de emulator vanzelf bijgewerkt. Het telkens afsluiten en opnieuw starten van de emulator zou erg veel tijd kosten.

  • Klik in de werkbalk van Eclipse op de knop Run en kies Run As, Android Application.

Run as Android Application

Als alles goed is gegaan verschijnt na enige tijd het standaard Cordova/PhoneGap-startscherm. Waarschijnlijk moet je de emulator eerst ontgrendelen voordat je app ziet.

Mogelijk verschijnt in Eclipse ook het venster Auto Monitor Logcat. Kies hierin Yes, om zoveel mogelijk meldingen te zien. Dat is altijd handig bij het debuggen.

Fouten en informatie tonen in LogCat wordt aanbevolen

Hoera! Je eerste zelf-gecompileerde Cordova/Android-app draait in de emulator.

Hoera! Je app draait in de emulator

Stap 10 – App verder uitbreiden

Vanaf dit moment is het een invuloefening, en kun je in Eclipse – of in een andere editor naar keuze – de app gaan aanpassen. Je doet dit uiteraard door de code in index.html te wijzigen, JavaScript en CSS toe te voegen, enzovoort.

De HTML-code aanpassen in Eclipse

Maak bijvoorbeeld een kleine aanpassing in \assets\www\index.html en kies opnieuw de knop Run. In de emulator wordt de nieuwe versie van de app getoond.

  • Standaard is in Eclipse geen HTML-editor aanwezig. Klik daarom met de rechtermuisknop op index.html en kies Open With, Text Editor om de tekst te kunnen wijzigen.
  • In een volgende blogpost zal ik dieper ingaan op de manier waarop je Eclipse kunt aanpassen om goed te werken als HTML/JavaScript/webeditor.
  • Als je in Cordova PhoneGap 3.0 device-opties wilt gebruiken (zoals het kompas, de camera en andere apparaatafhankelijke functies), moet je hiervoor apart de plug-ins installeren. Ook hier kom ik in een apart artikel op terug.

De app is aangepast met eigen wijzigingen

 

Conclusie

Het is een heel werk om PhoneGap/Cordova voor Android werkend te krijgen op een Windows-systeem. De standaard PhoneGap-documentatie blinkt niet uit in aanwijzingen voor Windows-gebruikers. Gelukkig hoef je veel zaken, zoals de installatie van Java en ADT maar eenmalig uit te voeren. Daarna kun je je concentreren op het maken van projecten en programmeren van leuke apps!

Mocht je meer willen weten over PhoneGap en de mogelijkheden die je na installatie op je eigen computer hebt, dan kun je altijd contact opnemen voor een cursus. Hierin bespreek ik behalve de installatie alle extra mogelijkheden van PhoneGap/Cordova en uiteraard de publicatie van je app in de diverse App stores.

Ondertussen veel succes met PhoneGap!

Peter Kassenaar
-- 6 september 2013

 

03september

Snel en gratis een website via Windows Azure

logo_windows_azure

Het Microsoft cloudplatform Windows Azure is nu ruim drieënhalf jaar commercieel beschikbaar. Maar pas sinds recente aanpassingen in het beheerdashboard en fikse prijsverlagingen deze zomer is het ook interessant geworden voor particulieren en hobbyisten. Azure is een compleet platform waar u allerlei zaken kunt onderbrengen: databases, webservices, websites, virtuele machines, uw complete Active Directory en nog veel meer.

Gratis hosting

In dit artikel kijk ik naar een interessante optie voor particulieren en kleine bedrijven. Het is sinds deze zomer namelijk zonder meer mogelijk om gratis (als in: voor 0 euro) permanent een website te hosten bij Azure. De website is gewoon 24/7 beschikbaar, maakt naar keuze gebruik van PHP of .NET (of uitsluitend HTML/CSS), u kunt er een gratis 20MB SQL Server database aan koppelen en elke programmeertaal van uw keuze gebruiken.

Pas op het moment dat u meer wilt – denk bijvoorbeeld aan de koppeling met een eigen domeinnaam, een SSL-certificaat, een grotere database, capaciteit voor meer bezoekers – dan hoeft u de site te upgraden en gaat de (financiële) teller lopen. Dat opwaarderen is eenvoudig een kwestie van een schuif naar rechts verslepen op het beheerdashboard van Azure regelt de rest. En als de piekbelasting voorbij is, kunt u de site weer afwaarderen naar bijvoorbeeld minder processors, minder RAM, enzovoort.

Dit is een perfect scenario voor particulieren en hobbyisten. Maar ook voor teams die bijvoorbeeld voor korte tijd een evenementenwebsite moeten plaatsen die gedurende een week (of korter of langer) zeer veel bezoek moet kunnen verwerken.

Iedereen kan zich gratis aanmelden. Stel dat u lokaal al een testwebsite hebt voorbereid, dan plaatst u die op de volgende wijze online bij Azure.

Stap 1. Aanmelden bij Azure

  • Ga naar http://www.windowsazure.com/nl-nl/ en kies rechtsboven de optie Gratis proefversie.
  • Meldt u aan met een Microsoft-account en volg verder de aanwijzingen op het scherm.
  • Let op: hebt u al een MSDN-abonnement, of bijvoorbeeld een Microsoft Partner-account? Dan is daarbij al Azure-toegang inbegrepen. U krijgt dan elke maand bijvoorbeeld 75 euro (de eerste maand zelfs 150,-) om te spenderen aan Virtual Machines, databases of andere diensten naar keuze.

Gratis aanmelden bij Windows Azure

Stap 2. Nieuwe website maken

Als u bent aangemeld bij Azure, komt u in het management portal, op https://manage.windowsazure.com. Dit is vanaf nu ook het centrale adres om al uw Azure-services te beheren. Aan de linkerkant ziet u een overzicht van alle diensten die u kunt benutten. We kiezen nu voor het maken van een nieuwe website.

  • Klik onderin, in de grijze balk op de knop met het grote plusteken NEW.
  • Kies Compute, Web site.

Azure - nieuwe website maken

  • Kies de optie Quick Create. Dit maakt een nieuwe, lege website die u naar eigen wens kunt vullen.
    • Quick Create is handig als u bijvoorbeeld al lokaal een website hebt voorbereid die u wilt gaan hosten op Azure. Als u nog helemaal niks hebt, kunt u ook een standaardsite beginnen via From Gallery. Dit bespreek ik later, in een volgende blogpost.
  • Geef de site een naam en kies een regio.
    • De regio bepaalt in welk Microsoft-datacenter de website wordt geplaatst. Voor ons ligt North Europe het meest voor de hand, maar als u veel bezoek uit Azië verwacht, kies dan bijvoorbeeld East Asia.
  • De naam moet uniek zijn, en bepaalt onder welke URL de website beschikbaar wordt. Ik kies als voorbeeld pk-asieldieren (ik heb een kleine testsite gemaakt die XML-data uit de Nederlandse asielen ophaalt en toont) en de totale URL wordt daarom http://pk-asieldieren.azurewebsites.net/.

Kies een naam en locatie voor de site

  • Klik onderin op Create Web Site. Azure gaat aan de slag en toont na enige tijd de status in het dashboard. Uw eerste Azure website is gereed!

De Azure-testsite is gereed

  • U kunt de website zelfs al testen. Klik op de URL achter de websitenaam om te zien hoe de site er uitziet. Standaard plaatst Microsoft de volgende pagina.

De standaard placeholder pagina bij Azure websites

Het is nu tijd om te bepalen hoe u uw eigen site op de Azure-site gaat plaatsen. Dit hangt af van uw voorkeuren voor een editor of publicatiewijze. Microsoft ziet natuurlijk graag dat u de (gratis) Visual Studio Express gebruikt – en dat is ook een prima editor. Een van de beste zelfs die op de markt is, wat mij betreft. Van uit Visual Studio kunt u rechtstreeks publiceren naar Azure.

Maar misschien werkt u liever met traditionele FTP-software zoals FileZilla of CuteFTP. Ook dat is geen probleem. U kunt dan een profiel aanmaken voor Azure. Vandaar dat ik de volgende stap heb gesplitst in twee delen

  • Stap 3a – publiceren vanuit Visual Studio via PublishSettings
  • Stap 3b – publiceren via FTP.

Stap 3a – Publiceren vanuit Visual Studio

Visual Studio is een van de beste IDE’s die beschikbaar is en de standaardeditor voor iedereen die programmeert in .NET. Vanuit Azure kunt u een bestandje met Publish Settings downloaden die u kunt importeren in Visual Studio. Azure is dan als publicatieprofiel beschikbaar in de werkbalk.

Publish Settings downloaden voor gebruik in Visual Studio

Na het maken van de website is het overzicht te zien (u kunt dit opnieuw openen door op het blauwe wolkje, links naast de tabs Dashboard, Monitor, enzovoort te klikken).

  • Kies onder Publish your app voor Download the publish profile en sla het .PublishSettings-bestand op (bijvoorbeeld op het bureaublad).
  • Open uw site in Visual Studio en kies voor het importeren van het publicatieprofiel.

Het publicatieprofiel importeren in Visual Studio

  • Met de knop Publish – ook zichtbaar, rechtsonder in de afbeelding – wordt de site vanuit Visual Studio rechtstreeks naar de juiste locatie bij Azure gepubliceerd. Makkelijker kan bijna niet.

De vensters zien er achtereenvolgens als volgt uit:

Eigenschappen voor publicatie naar Azure vanuit Visual Studio

  • Gebruik eventueel de knop Validate Connection om te zien of Visual Studio goed verbinding kan maken met Azure.
  • Klik op Publish als alles OK is. Na enige tijd laat Visual Studio in het venster Output zien dat de operatie geslaagd is.

Publiceren naar Azure vanuit Visual Studio

  • Op de URL bij Azure is nu de complete website te zien, in plaats van alleen de placeholder pagina.

Stap 3b – Publiceren via FTP

Als u liever werkt met een traditionele FTP-client zoals FileZilla, dan moet hierin eerst een publicatieprofiel aanmaken met een FTP-username en wachtwoord. Hiervoor kunt u uiteraard niet uw Microsoft-account gebruiken. U zult in Azure eerst een FTP-username en wachtwoord moeten instellen. Dat gaat op de volgende manier.

Instellingen opgeven voor publicatie via FTP

  • Kies onder Publish your app voor Set up deployment credentials.
  • Typ in het volgende scherm een gebruikersnaam en een wachtwoord. Deze moet u straks (samen met andere informatie!) gaan gebruiken in uw FTP-toepassing.
    • Een andere mogelijkheid is dat Azure rechtstreeks verbinding maakt met uw Github-account. Ook daar kom ik in een latere blogpost op terug.

Een FTP-gebruikersnaam en wachtwoord instellen

  • Azure wijzigt uw gegevens en laat dit via de meldingsbalk onderin het venster zien. Dit is altijd een handige locatie om te zien wat u hebt gedaan. Met het kruisje zijn eventueel de oude meldingen te verwijderen.

Azure statusmeldingen

FTP-toepassing instellen

U kunt nu een publicatieprofiel in uw FTP-toepassing gaan maken. Ik gebruik CuteFTP (een tamelijk verouderd FTP-programma, maar ik ben er nu eenmaal aan gewend en het doet alles wat ik wil). De complete gegevens zijn op te vragen via het Azure Dashboard. Dit gaat op de volgende manier. U kunt deze stappen ongetwijfeld vertalen naar uw eigen favoriete FTP-tool).

  • Selecteer bovenin de optie Dashboard. U ziet dan een overzicht met alle eigenschappen van de site, het dataverbruik en meer.
  • Blader naar beneden en bekijk rechts de opties bij FTP Host Name en Deployment/FTP User. Deze gegevens kopieert u naar uw FTP-tool.
    • De FTP Host Name begint met ftp://waws-…enzovoort.
    • De FTP Username is de naam van uw site plus de gebruikersnaam die u hebt opgegeven. In mijn voorbeeld dus letterlijk pk-asieldieren/PeterKassenaar.
  • Gebruik in uw FTP-tool deze items en het wachtwoord dat u in de vorige stap hebt opgegeven.

FTP-gegevens opzoeken via het Azure Dashboard

U kunt nu verbinding maken via FTP. In CuteFTP ziet het venster er dan als volgt uit.

Via FTP verbonden met Azure

  • Blader naar de map /site/wwwroot om de site te plaatsen.
  • Standaard is hierin alleen het bestand hostingstart.html aanwezig. Dit is de placeholder pagina die we hierboven al tegenkwamen. Zodra u de site hebt geplaatst, kunt u dit eventueel verwijderen.
  • Upload de site op de gebruikelijke manier.

Stap 4 – de site controleren

De site is nu geplaatst bij Azure en is voor iedereen op het web te bereiken. Test dit door de URL in de browser te bezoeken. In dit voorbeeld is dat http://pk-asieldieren.azurewebsites.net/

azure_12

Het is niet verplicht een database of serversided techniek te gebruiken. Deze voorbeeldsite (Asieldieren) is met uitsluitend HTML, CSS, JavaScript en jQuery (Mobile) gebouwd. Op Azure kunt u allerlei soorten sites kwijt. U kunt nu de site op de gebruikelijke manier onderhouden: lokaal, op uw eigen computer bouwen en testen, en daarna naar wens via Visual Studio of via FTP naar Azure publiceren.

In volgende blogartikelen zal ik dieper ingaan op de configuratie en verschillende mogelijkheden voor websites bij Azure.

Conclusie

Via Windows Azure kan iedereen gratis een website hosten. Er zijn tal van configuratiemogelijkheden via een uitgebreid beheerdersdashboard. In dit artikel hebben we gezien hoe u zich aanmeldt voor een Azure-account, hoe u een nieuwe website maakt binnen uw account en hoe u een site vervolgens met Visual Studio of via FTP publiceert. In volgende blogartikelen wordt dieper ingegaan op de diverse mogelijkheden van Azure.

Hebt u ondertussen vragen of opmerkingen, stuur dan even een mailtje of laat onder dit artikel een reactie achter.

 

Peter Kassenaar
-- 3 september 2013

14augustus

jQuery UI Cookbook – book review

Cover jQuery UI Cookbook

jQuery UI is een uitgebreide bibliotheek met tal van visuele componenten die user interfacedesigners kunnen gebruiken om attractieve websites te ontwerpen.

Nergens is de jQuery-slogan write less, do more zo van toepassing als in jQuery UI. Dat gezegd hebbende, is de bibliotheek natuurlijk niet 100% perfect of direct geschikt voor elke taak. Ervaren ontwikkelaars zullen onderdelen van jQuery UI naar eigen behoefte willen uitbreiden, of aanpassen voor de interface die ze aan het ontwikkelen zijn. Welkom jQuery UI Cookbook.

 

Kookboek

Het kookboek biedt ruim 70 'recepten' waarmee je naar hartenlust kunt hacken in de jQuery UI-code om op deze manier doelen te bereiken waarvoor de standaardmiddelen en configuratieopties niet toereikend zijn. Bijvoorbeeld: je weet waarschijnlijk al dat jQuery UI een tab-widget biedt waarmee je snel een tabblad interface maakt op basis van je HTML-code. Maar wat nu als je de tabs wilt uitbreiden met aanklikbare pictogrammen naast de tekst, zonder handmatig losse <img /> tags in de code te schrijven?

Of je wilt de widget Accordeon uitbreiden zodat je ook met de Tab-toets tussen onderdelen kunt navigeren, of je wilt met drag-an-drop inhoud tussen accordeons verslepen? Dit boek legt dat perfect uit, tezamen met nog tientallen andere voorbeelden van kleinere en grotere ingrepen in de bibliotheek.

Veel code

Maar pas op. Er staat code in dit boek. Veel code. Je zult je handen uit de mouwen moeten steken en diep in de functies moeten duiken die het hart van jQuery UI vormen. Je moet beschikken over solide achtergrondkennis van JavaScript en jQuery om te weten wat je eigenlijk aan het doen bent en om de recepten in het boek te kunnen aanpassen zodat ze perfect in je eigen projecten passen. En dit begint direct op pagina 1. Er is niet zoiets als een rustige start, om vervolgens kalm en rustig het eerste voorbeeld in te glijden. Het gaat meer van: "Bam! Kijk, zo doe je het,

(function ($, undefined) {
	$.widget("ab.accordion", $.ui.accordion, {
		_create: function () {
			// heel veel andere code …
		}
	})
})(jQuery);

Dus als je nieuw bent in jQuery UI of jQuery-development in het algemeen, is dit boek niet geschikt voor jou. Het legt niet uit wat jQuery UI is, waar je het kunt halen en hoe het basisgebruik is. In plaats daarvan worden alle widgets in de bibliotheek op alfabetische volgorde besproken. Hoofdstuk 1 gaat over de Accordion. Vervolgens gaat het over Autocompletes, Buttons, Datepickers, Dialogs enzovoort. Het boek besluit met een hoofdstuk over Widgets en de manier waarop je zelf vanaf het nulpunt je eigen widgets zou kunnen maken.

Conclusie

Ben jij tevreden met de basismogelijkheden en lay-out van jQuery UI? Prima. Laat dit boek lekker op de plank liggen. Maar voor ieder ander kan ik het van harte aanbevelen. Als je het niet gebruikt voor het uitbreiden van jQuery UI, dan leer je in ieder geval iets over de manier waarop je jQuery plug-ins kunt schrijven en jQuery-uitbreidingen in zijn algemeenheid programmeert.

Mijn enige wens is dat de auteur ook voorzien zou hebben in een inleidend hoofdstuk, waarin jQuery UI wordt geïntroduceerd en de basis kort wordt uitgelegd (voor als je bijvoorbeeld een ervaren ontwikkelaar bent, maar toevallig nieuw bent op het gebied van jQuery UI).

Het zou ook prettig zijn geweest als hij behalve de widgets nog andere onderdelen uit de bibliotheek meer in detail zou hebben besproken, zoals Effects, Interactions en/of Utilities zoals het object Position. Maar zelfs met deze kleine tekortkomingen, is het jQuery Cookbook elke cent waard.

 

 

Deze review bij Amazon.com.uk (Engels)

Peter Kassenaar
-- 14 augustus 2013

[disclaimer: ik heb het boek van de uitgever gratis gekregen ter review. De uitgever heeft op geen enkele manier invloed gevraagd of uitgeoefend op de inhoud van dit artikel. Het is mijn persoonlijke mening.]

07augustus

Website kassenaar.com vernieuwd

kassenaar.com.logo-114-precomposed Een nieuw seizoen, een nieuwe look.

In 2008 heb ik mijn website voor het laatst een grote make-over gegeven. Het betrof toen de overgang van een ‘gewone’ site naar een blog, waarover je in de eerste blogpost kunt lezen.

Nu, ruim vijf jaar en een kleine 200 blogartikelen later, is het tijd voor een volgende stap. Ik had het gevoel dat het blog – hoewel dynamisch en regelmatig bijgewerkt – de speerpunten en werkzaamheden van mijn bedrijf niet goed genoeg representeerde.

Website anno 2013

Daarom heb ik de afgelopen zomermaanden gebruikt om een nieuwe website te ontwerpen rondom de drie thema’s die mijn bedrijf covert:

  • Trainingen – ik blijf trainingen geven (voor partners en in eigen beheer) op het gebied van webdevelopment. De focus ligt op front-end technieken: HTML, CSS, JavaScript, jQuery en app-trainingen als PhoneGap. Binnenkort worden (als eerste in Nederland!) high-end technische trainingen aan het portfolio toegevoegd, waaronder trainingen in Twitter Bootstrap, Node.js en Angular.js. Volg mij op Twitter om op de hoogte te blijven van de ontwikkelingen
  • Schrijven – Dit jaar heb ik titels geschreven als Handboek Word 2013, Handboek Outlook 2013 en het binnenkort te verschijnen Handboek JavaScript en jQuery. Ook in de toekomst blijf ik schrijven voor uitgevers, websites en magazines.
  • Development – als programmeur ben ik verbonden aan projecten als Yindo en Boekenwolk. Ook ontwikkel ik gedurende projecten diverse besloten apps en websites als prototype of proof-of-concept. Als je hier een vraag over hebt, of een consultancy-afspraak wilt maken, kun je uiteraard contact opnemen.

Finetuning

De nieuwe website is voor een groot deel gereed, maar er zijn nog enkele aandachtspunten die finetuning behoeven. Hier wilde ik met de lancering echter niet op wachten. Dit is analoog aan het developmentprincipe release early, release often.

In de komende weken zullen de laatste plooien worden gladgestreken met betrekking tot:

  • Facebook Like-buttons toevoegen voor pagina’s (de Facebook API blijkt er niet van te houden als je deze dynamisch genereert/aanpast).
  • Weergave op tablets: op de meeste tablets (iPad, Android, Windows RT) is de weergave in orde, maar op tablets met een afwijkende resolutie (bijvoorbeeld 1024x600) is het responsive design nog niet helemaal correct. Het menu en sommige andere tekst kan wegvallen. Wordt aan gewerkt.
  • Typefoutjes en andere kleinigheden. Als je iets tegenkomt wat volgens jou niet klopt, of je vindt het onlogisch: laat het weten!

Die goede oude tijd…

Tot slot, in de categorie ‘opa vertelt’: het huidige ontwerp is de vierde generatie website op kassenaar.com. De eerste versie stamt uit 1997, hiervan is helaas geen screenshot bewaard gebleven. Deze tel ik daarom niet mee. Maar al vrij snel (na een paar maanden) was dit het ontwerp dat van 1998-2001 dienst heeft gedaan:

1998-2001

Een standaard website, opgemaakt met tabellen en afbeeldingen. Alles handgecodeerd in (jawel!) Frontpage 98 en Kladblok.

kassenaar.com-1999

2002 – 2008

Het kenmerk van deze site waren de tabbladstructuur (groot gemaakt door amazon.com en bol.com) en veel, heel veel tabellen en Dreamweaver MM_SwapImage()-scripts. Maar ook custom scripts om de stylesheets te wisselen tussen grote- en kleine letters en voor het eerst een ingevoegde Google-zoekdienst.

kassenaar.com-2003

2008 – 2013

Overgang naar een blogstructuur, waardoor de site regelmatiger bijgewerkt kon worden en er minder tijd aan onderhoud besteed hoefde te worden. Dit blog blijft gehandhaafd, maar ik keer toch ook een beetje terug naar de ‘oude’ opzet, waarin op eenvoudige wijze de pijlers van het bedrijf worden benoemd.

image

2013 – …

Een nieuwe site, een nieuw logo. Geheel volgens de mode van deze tijd, met één grote centrale visual en korte kernbegrippen. Een lichtere opmaak, verbeterde CSS en HTML5-elementen en meer witruimte moeten de inhoud beter leesbaar maken. De site is voor een groot deel gebaseerd op Twitter Bootstrap in combinatie met jQuery, maar maakt op de achtergrond gebruik van een SQL Server-database en het .NET-framework.

kassenaar.com-2013

Nogmaals, het is werk in uitvoering. Als je opmerkingen hebt, of punten ter verbetering dan hoor ik het graag!

Peter Kassenaar
-- 6 augustus 2013