Cordova HTML apps

Door deathgrunt op woensdag 25 februari 2015 10:35 - Reacties (35)
Categorie: Apps voor Windows Phone en Android, Views: 2.203



Een jaar geleden ben ik begonnen om app te maken voor Windows Phone. En alhoewel ik (door schade en schande) hierdoor redelijk Java / C# heb leren schrijven, heb ik er toen toch voor gekozen om zo veel mogelijk alles in HTML op te lossen.

Sindsdien heb ik een twintigtal apps gemaakt - vaak one-trick ponies, maar daar zijn het apps voor - met allen één overeenkomstig kenmerk;

Ze werken alleen voor de zeer kleine doelgroep (3% en dalend) van Windows Phone (en ze zijn allemaal even slecht in elkaar gezet). Een week geleden heb ik het roer omgegooid...

...

PLATFORM AGNOSTISCHE AANPAK

Omdat de basis van mijn Windows Phone apps gewoon HTML is, ben ik gaan rondspeuren wat de alternatieven waren om mijn bestaande apps te porten, meer dan 85% marktaandeel aan te kunnen spreken en nieuwe apps platform agnostisch op te zetten.

Aangezien ik vertrouwd ben geraakt met Visual Studio (de IDE waarin ik de Windows Phone apps maakte), was de keuze snel gemaakt;

Cordova, voor Visual Studio - gratis en voor niets en ondersteuning voor alle major-platforms, out of the box. Een geduchte concurrent was nog Xamarin (waarin Microsoft een stevige vinger in de pap heeft, door een uitgesproken partnership). Maar waar je bij Cordova vooral in HTML / JS werkt om je apps te bouwen, doe je dat bij Xamarin in C#. Dat heeft voordelen (sneller, meer opties, direct access tot alle API’s en minder vertaalslagen, omdat er minder lagen zitten tussen je eigen code en de uitvoerende code).

Maar goed, C# is toch een beetje Duits voor mij; ik spreek het, maar het houdt niet over.

...

Een ander voordeel (voor mij) is dat Cordova 100% open-source is én dat Microsoft het met beide armen heeft omarmd, uitgebreid en voorzien van een zeer goede tooling-omgeving (het eerder genoemde Visual Studio). Los daarvan heb je inmiddels 700+ plugins die je kan gebruiken om extra functionaliteit aan je app toe te voegen (waarover straks meer) en omdat ik zowel Java als C# als HTML / JS schrijf, kan ik bestaande plugins gewoon uitbereiden of desnoods nieuwe plugins toevoegen.

...

WAT IS CORDOVA

In het kort is Cordova (bedacht, ontwikkeld en vrijgegeven als open-source door Adobe) een soort intermediair tussen de "lage" en "hoge" programmeertalen. De hoge programmeertaal (een taal die dichtbij de menselijke taal ligt, bijvoorbeeld Javascript - welke zelfs een leek redelijk kan "lezen" zonder er echt kennis van te hebben) is de taal waarin je werkt.

De "lage" programmeertaal (een taal die dicht bij de hardware ligt en op chipniveau kan communiceren met je device) is de taal waar het naar toe moet. En Cordova zit daartussen en vertaalt alles voor (kort door de bocht). Je kan dus in Javascript zeggen iets zeggen als "writeEmail(subject,body,recipient)" en mevrouw Cordova maakt daar een mooie C# of Java code van, zodat je vanuit je app een mail kan sturen.

Omdat Cordova zelf geen interface kent en alles via een CLI gaat (Command Line Interface, zeg maar Old Skool DOS), is het uitzichzelf een weinig aantrekkelijke optie voor non-programmeurs; wil je lekker simpel gaan HTML-en, moet je nog de terminal in...

...

Om die reden zijn er diverse wrappers bedacht die weer rondom Cordova zijn gaan zitten. De bekendste is wellicht Phonegapp - mede doordat eigendom is van Adobe. Die zag aankomen dat Flash het niet ging worden, wat cross-platform solutions aangaat en dus zijn ze zich gaan richten op andere oplossingen. Ander voordeel is dat Adobe de compilatie van alle apps in de cloud doet. Iets waarvoor je overigens wel moet betalen (de gratis optie is niet echt bruikbaar, hooguit om te testen en debuggen op kleine schaal).

...

Overigens is Phonegap ook weer een CLI oplossing, dus je moet wederom de commandline induiken, wil je het aan de praat krijgen. Wel is er een bèta met GUI, maar de ontwikkeling daarvan zit op versie 0.1.1, terwijl de Visual Studio "concurrent" een stuk verder ontwikkeld lijkt (en bovendien alles lokaal compileert - zodat je veel sneller en effectiever kan ontwikkelen, waarover straks meer).

...

ALTERNATIEVE WRAPPERS

Naast Phonegap, zijn er nog meer wrappers voor Cordova waarvan die van Intel wellicht het bekendst is. Maar zoals ik al aangaf; ik ben vertrouwd met Visual Studio, dus ik heb besloten dichtbij huis te blijven (ook omdat ik binnen Visual Studio dan mijn reeds gemaakte Windows Phone app gewoon kan blijven updaten, waardoor ik niet in meerdere IDE’s moet gaan prutsen).

...

Los daarvan heeft Visual Studio twee grote voordelen, die geen enkele andere oplossing kan bieden;

1]. Het is de enige Cordova tool die ook voor Apple kan compileren, zonder dat je zelf een iDevice hoeft te hebben. Je hebt wel een Apple Developers-account nodig (100 euro per jaar), maar meer eisen zijn er niet. Als je iTunes installeert op je pc en eventueel een iDevice (iPad / iPhone) via de USB aan Visual Studio koppelt, kan je zonder issues direct je apps debuggen.

Je kan "zelfs" een definitieve iOS-app compileren door via remote access een Mac aan te spreken; je schiet je Visual Studio Cordova code dan via het internet naar bv. de MacBook van je vriendin, die compileert de app - en geeft hem vervolgens weer terug, waarna hij in de Visual Studio omgeving zichtbaar en bruikbaar wordt (waarna je hem kan indienen bij de Apple Store).

Alle andere oplossingen kunnen dit niet, vanwege de strenge restricties van Apple; als je target dus onder andere iOS is, kan Visual Studio om die reden een zeer goede optie zijn.

2]. Je kan live debuggen via Visual Studio, zonder de app te hoeven (her-)compileren. Als je kiest om je app te testen via USB op een Android device met API level 19 (Android 4.4 of hoger) of de eerder genoemde iDevices, dan krijg je een nette debugomgeving waar je onder andere je DOM-structuur kan manipuleren (live, terwijl de app draait) en je een uitgebreide Javascript-console kan raadplegen.

Ook kan je legio breakpoint maken, de code pauzeren, meten hoe snel je app draait tegen welke framerate, etc... Adobe heeft ook zo’n soort developers-app, maar die werkt omslachtiger, niet real-time en je hebt directe toegang nodig tot fysieke hardware (bij Microsoft is dat een optie, omdat je het ook kan debuggen in een Android emulator, of gewoon in je browser via een Ripple Simulator).

...

Kortom; los van het feit dat alles gratis is te downloaden en te gebruiken, zijn er dus meer dan genoeg redenen om voor Visual Studio te kiezen als framework / wrapper rondom je Cordova HTML-apps.

...

DE INSTALLATIE

Visual Studio zelf is gratis en kan je downloaden via dit adres (kies voor de developers versie).

...

Om Visual Studio te voorzien van Cordova ondersteuning, moet je ook even de gratis uitbereiding downloaden. Het kan zijn dat die al in de standaard versie zit; maar dat geeft de installer zelf aan, en in dat geval kan je hem natuurlijk gewoon overslaan.

Tenslotte moet je wat Cordova Tools downloaden, die als een soort plugins op de uitbereiding werken. Mocht de automatische installatie van de tools niet lukken, of heb je liever alle tools los en handmatig in je systeem - dan kan je ze ook één voor één downloaden.

...

Zelf heb ik gekozen voor deze laatste optie; je kan bij de automatische installer zelf aanvinken wat je wel, en niet wil hebben - maar daarna gaat alles vanzelf. Aangezien ik graag zelf bepaal in welke folder de SDK komt te staan van Android en waar de ADB-drivers zich verstoppen en hoe de system-variables zich nestelen, was dit voor mij een betere optie.

Heb je geen zin in gedoe, dan kan je echter via de automatische installer met één druk op de knop je hele installatie compleet maken.

...

DE INSTALLATIE

Of je de tools nu handmatig installeert of via de automatische batch, je hebt deze pakketten nodig;

...

1]. Node.js - een framework waarmee je (via een netwerk) applicaties kan bouwen. In de praktijk merk je niets van de aanwezigheid van Node.js op je systeem, behalve dat je (als je dat leuk vindt...) via de commandprompt allemaal commando’s er naar toe kan sturen, die dan vrolijk worden uitgevoerd (bijvoorbeeld om een plugin aan Visual Studio toe te voegen, een nieuwe update van GitHub binnen te harken of om je Android .APK van de app te compileren). Echter worden al deze commando’s juist via Visual Studio uitgevoerd, met een normale interface - dus maak je er vooral niet al te druk om.

...

2]. Chrome, de browser... is niet 100% nodig - maar wel handig als je voor Android wil ontwikkelen. Je kan namelijk een soort Android Emulator draaien binnen Chrome, waarbij je kan aangeven of hij een tablet, telefoon, of whatever moet voorstellen. Echt nuttig vond ik het niet, omdat ik mijn apps sowieso develop in Chrome en dan via de F12 Developers Tools ook al toegang had tot alle debug-opties. Voordeel van Ripple is hooguit dat het wat dichter bij "de echte device" staat en je een nettere integratie met Visual Studio krijgt.

...

3]. Apache Ant... Cordova is ooit gemaakt door Apache (je weet wel, van de servers) en deze uitbereiding bouwt de feitelijke app. Redelijk handig om te installeren, dus.

...

4]. Git Command, niet persé nodig - omdat je veel Git zaken gewoon via de interface van Visual Studio kan doen. In de praktijk gebruik je Git vooral om plugins te installeren of te kijken naar updates voor de plugin. Doe je veel met Git of vind je de terminal helemaal te gek... sla deze dan vooral niet over.

...

5]. Java... blèch... traag, security gevoelig, omvangrijk en outdated... maar wel 100% nodig als je ook maar iets met Android te maken wil hebben. Installeren dus, en vink meteen alle opties uit in je syteem en browser dat Java uitzichzelf mag gaan draaien of mag updaten. Voor je het weet zit je systeem anders vol met iconen in je system-tray en open je in je browser poorten naar de hell.

...

6]. Android SDK (Software Developers Kit) - deze is een must have voor Android developers. Nadat je de basis hebt gedownload, moet je nog even wat Android Machines downloaden. Visual Studio gaat uit van Android 4.4 (omdat je dan live kan debuggen en nog meer opties tot je beschikking krijgt), maar het werkt vanaf Android 2.3. Zelf heb ik gekozen voor API 14 (Android 4.0) en hoger - waarover straks meer.

...

7]. Apple iTunes - je kan via Visual Studio als enig Cordova tooltje ter wereld direct iOS apps bakken. Behalve 100 euro per jaar (voor Apple) heb je hiervoor alleen iTunes nodig. Wil je de app daadwerkelijk uitrollen naar de store, dan is zelfs een iDevice niet nodig - omdat je dit desnoods via remote access op de laptop van je buurvrouw kan doen.

Zelf heb ik niet zo veel met Apple (en ook geen honderd euro per jaar), dus dit is de enige optie (naast de volgende) die ik zelf niet heb gedownload (ook vanwege de slechte reputatie van iTunes op de pc - maar goed, dat heeft Java ook...). O ja, Apple gooit wel wat roet in het eten wat open-source, security (de afwezigheid van, in hun geval) en het platform agnostisch werken... Meer hierover lees je hier.

Alhoewel ik zelf niet veel ervaring met Apple heb, is dit wellicht wel een zeer interessante review voor de mensen die Visual Studio en Cordova willen gaan gebruiken voor iOS apps.

De auteur van dit artikel had geen hoge pet van Microsoft / Visual Studio, maar moest al snel "toegeven" dat deze combinatie de beste tooling-set is voor iOS-developers. Er is geen pakket ter wereld die zo snel en effectief voor Apple kan ontwikkelen als Visual Studio / Cordova. In die zin lijkt de aanpak van Microsoft voor "exotische" (lees "niet-WP") platforms hetzelfde als hun eigen app-ontwikkeling;

Cloud First, Mobile First, Android First, iOS First... Windows Phone Last...

Windows Phone heeft de slechtste ondersteuning binnen Visual Studio en Android (en vooral iOS) hebben een uitmuntende ondersteuning wat debugging en tooling betreft.

...

8]. SQLite... heb ik ook niet geïnstalleerd. SQLite is de mini-me versie van de normale SQL database oplossing. Telefoons hebben tegenwoordig gewoon een database-model aan boord en die kan je aanspreken via Cordova / via je app. Wil je dus wat "complexere" apps maken met een lokale SQL-database, dan is dit tooltje handig. Zelf draai ik al XAMPP, een standaard Microsoft SQL server (ISS) en gebruik ik Navicat Premium om alle queries uit te spugen, dus een SQLite is voor mijn situatie niet van toepassing (los van het feit dat mijn apps geen lokale database aanroepen).

Let er op - dat als je bovenstaande tools met de hand op je systeem giet - dat je dan de nodige system variables aan je environment toevoegt.

Als je dit niet (goed) doet, dan krijg je bij het opstarten van Visual Studio een vrolijke error dat bijvoorbeeld Java ontbreekt, terwijl je die wel gewoon over je harde schijf hebt uitgesmeerd.

...

AAN DE SLAG

Als de bovenstaande uitleg je nog niet krijsend heeft weg doen laten lopen, kunnen we aan de slag.

Overigens valt de installatie reuze mee; alles is gratis, goed gedocumenteerd en de systeem-eisen zijn erg laag (zelf werk ik op een pc uit 2007, ofzo... aangeschaft voor 225 euro en het ding draait alles als een zonnetje, supersnel en extreem stabiel).

Wanneer je Visual Studio opstart, en je geen meldingen krijgt dat één van de bovenstaande tools mist, kan je een nieuw project beginnen. Dit kan vanaf scratsch, maar waarom zou je? Kies dus gewoon voor "Project / New / Installed (template) / Typescript / Apache Cordova".

...

Hiermee worden er een x-aantal bestanden en folders aangemaakt die de kern van je app vormen. In het echt worden er veel meer aangemaakt dan je kan zien; Visual Studio laat feitelijk alleen de "www/html" map zien, waarbinnen je dient te werken. En nog een folder waarin je plugins komen te staan (vreemd genoeg met de naam "plugins").

Aanvankelijk is die map leeg - maar hij zal zich gestaag vullen, omdat je eigenlijk zonder plugins niets aan Cordova hebt (waarover later meer). De map "images" en "css" kan je weggooien, of hergebruiken - up2you. "Scripts" is eigenlijk ook niet nodig, al zitten er wat assets in die wel gerefeerd worden - maar tegelijk werkt alles ook zonder...

...

Als je op "okay" klikt, wordt je project gegenereerd en... is je app klaar. Hoe moeilijk was dat? Je ziet een "index.html" bestand staan in je rootfolder en laat dat nu net het bestand zijn waarmee je app start.

...

Je kan in theorie nu al je Android / Windows Phone / iDevice via USB aan je pc’tje hangen en op de grote groene "play" knop drukken. Hiermee wordt de app gecompileerd voor je platform naar keuze.

Hoe cool is dat? Zelfs Windows tablets / pc’s met x86 / x64 instructie-sets zitten tussen de opties.

...

IN DE PRAKTIJK

Zelf richt ik me voornamelijk op Android en Windows Phone, dus via twee USB-kabels schiet ik de app met één druk op de knop om-en-om naar één van deze twee devices om ze real-time te kunnen debuggen.

...

Aanvankelijk was ik "bang" dat je met veel code-overhead zou komen te zitten. Dit valt in de praktijk echter mee; een app die ik eerst "met de hand" had gemaakt in C# en HTML (voor Windows Phone) was iets van 250kb groot. Via Cordova werd die ongeveer 350kb, maar daar zaten dan ook wel een viertal plugins bij om extra functionaliteit toe te voegen aan de app. Functionaliteit die overigens ook in de "native" app zaten, maar die zonder plugin niet werken in de Cordova app.

De Android counterpart werd 1500kb, dus een stuk groter - maar ik heb nooit een native (Java) versie van de native (C#) app geschreven, dus wellicht is Android sowieso wat groter.

Als je de Cordova .APK (Android) of .APX (Windows Phone) opent - dit kan gewoon via een gratis tooltje als 7ZIP - dan zie je ook dat de assets en codes meer dan netjes worden geordend. Er zit een extra .DLL file bij die blijkbaar nodig is voor Cordova, en wat klein grut die je wellicht kan verwijderen - maar de uiteindelijke packages zijn gewoon mean and lean, wat mij toch wel verraste (ook omdat Apple jarenlang Cordova heeft tegengewerkt, omdat ze niet "native" genoeg zouden zijn en ze eisten dat je alle Cordova apps met de hand zou ombouwen naar C++).

...

Apache / Adobe / Intel / Microsoft hebben echter puik werk geleverd; hierdoor zijn de apps dus ook gewoon voor Apple bruikbaar, al heeft Apple wel een closule die van belang is; mocht je Cordova app (in hun ogen) niet snel genoeg zijn of niet native genoeg aanvoelen, dan hebben ze het recht deze alsnog te weigeren. Dit laatste is meer dan een dreigement, wat me doet aankomen bij een volgend punt; de performance.

De technische kant van de gecompileerde apps zit dus (naar mijn mening) wel goed; bijna net zo groot als native, weinig overhead aan codes / DLL’s, en alles is kant en klaar om direct ingediend te worden. Als je de app echter installeert, merk je echter toch wat verschil met de handmatige manier van werken.

Mijn oude manier van werken was om een beeldvullende webview (browser) in de app te zetten en vervolgens de rest via HTML en JS / CSS op te lossen. Eventueel riep ik via een code-bridge wat native functies op (vibrator aanroepen, flashlight laten branden, emailomgeving opstarten, etc...).

...

Het gevolg was wel dat "de app" eigenlijk gewoon een webpagina was, en dat voelde / merkte je toch wel in de praktijk. Het waren een soort imitatie-apps; een webpage die doet alsof hij een app is... Verder was alles goed bruikbaar, ook op low-end devices, maar je merkte toch wel dat het niet zo snappy was als "echte" apps. Later heb ik ook wat apps in puur C# geschreven, en dan merk je direct dat dit 100% performance geeft en eigenlijk ook zo bedoeld is.

Een Cordova app is echter weer een vertaling van een imiatie-app; je bouwt het immers niet handmatig (waarbij je volledige controle hebt over alle regels code die uiteindelijk in de app komen), maar je geeft dit proces uit handen. Deels aan Cordova (de back-end zeg maar), deels aan Visual Studio (de wrapper rondom de back-end) en deels aan third-parties providers (voor de plugins en extra’s).

De perfomance is hierdoor - naar mijn mening - net niet goed genoeg. Sure, alles werkt snel en soepel - op zowel Android (telefoon / tablet) en Windows Phone, maar toch "mis" je net dat extra beetje native power.

Aan de andere kant; je hebt nu maar één code base te onderhouden, met de druk op één knop schiet je naar meer dan 5 platforms je app weg (eventueel kan je nog Blackberry / Tizen / Sailfish / Jola / Firefox OS / Ubuntu Touch / etc... toevoegen in een later stadium) en je kan Visual Studio ook gewoon misbruiken voor het normale C# / Java / HTML werk (één IDE voor al het werk dat je doet).

...

Dat zijn toch wel hele grote voordelen, al zijn dat vooral voordelen voor de developer - de eindgebruiker wil immers gewoon een snelle app en zal het een rotzorg zijn dat je als developer 300% minder werk hoeft te doen voor het zelfde eindresultaat.

In de praktijk is het dus een kwestie van afwegen; wat is het budget (als dat er al is) dat je tot je beschikking hebt voor de app.

Is die ruim afdoende (zijn ze ooit ruim afdoende?), dan kan je beter losse / native apps maken voor elk platform. Is het budget beperkt en is de back-end sowieso al HTML-based (of leent de app zich er voor om via HTML samengesteld te worden), dan is Cordova het afwegen meer dan waard.

Door slim te spelen met je DOM-structuur, hier en daar een kunstmatige animatie in te voegen en goed CSS-gebruik kan je de performance fine-tunen. En door gebruik te maken van alle (optimalisatie) tools die Visual Studio je biedt, kan je dus - ook wat snelheid betreft - uiteindelijk een heel eind komen.

...

ENKELE KANTTEKENINGEN

Is alles dan hosanna wat Visual Studio betreft, behalve dat je iets op snelheid inlevert? Nou nee... Om te beginnen is het helemaal niet 100% cross-platform...

Als je ook maar iets wilt dat buiten het technische spectrum van HTML / JS valt, dan heb je namelijk een plugin nodig... Wil je een mailtje opstellen en versturen vanuit je app? Download een plugin! Wil je weten met welk OS / Platform je te maken hebt (zodat je daar je CSS / JS op kan fine-tunen)? Download een plugin! Wil je de app laten raten of sharen via de Market Store? Download een plugin!

...

Voor de meest "lullige" zaken heb je dus plugins nodig - en soms zelfs meerdere plugins voor exact dezelfde oplossing. Veel plugins ondersteunen namelijk alleen iOS, de meeste werken ook nog wel met Android en een handjevol (de grote jongens, zeg maar - voor de alledaagse functies) werken ook met Windows Phone. In die zin is het plugin-landschap een mooie weergave van de marktaandelen;

Alle plugins werken voor iOS, de meeste hebben een equivalent voor Android en die voor Windows Phone zijn schaars, worden niet geupdate of kennen een (zeer) beperkte functionaliteit.

...

ANDROID

Behalve Windows Phone gaat Android gaat trouwens ook niet vrij uit; ik heb zelf gekozen om Windows Phone vanaf 8.0 te ondersteunen (wat effectief 8.1 is, omdat vrijwel alle toestellen inmiddels geupgrade zijn). En wat Android betreft, ga ik uit van minimaal Android 4.0 (API level 14).

Deze laatste is iets van 3 tot 4 jaar oud - niet héél oud dus... maar lang niet alle plugins ondersteunen nog Android 4.0. In mijn app wilde ik bijvoorbeeld de gebruiker een SMS kunnen laten sturen met de samenvatting van een nieuwsartikel.

De éne SMS-plugin werkte goed op Windows Phone, maar had geen ondersteunig voor Android 4.0. De ándere SMS-plugin werkte op alle Droids - maar weigerde soelaas voor Windows Phone te bieden.

Uiteindelijk heb ik dus voor één functie (SMS) twee plugins moeten installeren. En om te weten of de app op een Droid of WP draait, heb je ook weer een plugin nodig; okay - je kan user-agent sniffen of kijken naar de browser-capabilities, maar laat ik dat soort werk nu net níet willen doen; ik kies immers voor Cordova om van die basale zaken af te zijn en me vol op de vormgeving en functionaliteit te kunnen richten.

De werkbare eindsituaties was dus drie plugins, twee gescheiden Javascript-functies en een handjevol fallbacks / callbacks om iets simpels als een SMS’je te realiseren.

...

In C# of Java doe je dit - letterlijk - met vier regels code, voor Cordova heb je dus een handvol plugins en honderden regels nodig...

Behalve die plugin-honger van Cordova, viel het me ook op hoe slecht Android 4.0 wordt ondersteund door Google zelf; om de haverklap kreeg ik (op mijn Android telefoon) de melding van Google dat functie-X of optie-Y niet meer wordt ondersteund door Google en ik moest upgraden naar Android 5... terwijl die update door mijn hardware fabrikant (Sony) niet beschikbaar is gesteld (de telefoon ik dan ook al 3 jaar oud, ofzo).

Als je vanuit je app een rating wil laten geven door de gebruiker (hallo plugin, ben je daar weer!), dan kan dit dus wel als je Android 4.4 of hoger gebruikt, maar de Market weigert Android 4.0 toegang via de browser; die is te outdated, onveilig en wordt niet meer geupdate (en laat een Cordova app nu net 100% browser-based zijn).

Het oerwoud aan resoluties speelt bij Android ook een rol. Een splashscreen is leuk om tegen aan te staren bij het opstarten van de app (dat overigens binnen één seconde gebeurt), maar Cordova rekt de splashscreens wel vrolijk uit, als je een device hebt met een wat afwijkende resolutie.

Dit heb ik zelf opgelost door uiteindelijk 9patch assets te gebruiken, speciaal voor Android. Het gaat wellicht wat ver om die techniek hier ook weer uit de doeken te doen - maar als je de Android SDK download, zit er een 9patch tool bij, speciaal voor dit doeleinde. Verder zijn er legio manuals te vinden voor deze - verder interessante - techniek .

...

Veel CSS-declaraties worden door Android 4.0 niet herkend; een fixed background-image scrollt vrolijk mee, :active :focus :hover bij sommige DOM-objecten worden niet uitgevoerd (waardoor visuele interactie met de gebruiker niet mogelijk is), etc...

Uiteindelijk heb ik alles op weten te lossen door meerdere plugins te gebruiken, speciale Javascript-routines te schrijven voor oudere hardware, etc... maar het was niet iets waar ik op had gerekend; ik dacht dat Cordova echt cross-platform was en dat het "gewoon" op alles zou werken, waarvan ze stellen dat ze het ondersteunen... niet dus.

...

WINDOWS PHONE

De ondersteuning voor Windows Phone staat nog in de kinderschoenen (officieel is Cordova voor Windows Phone zelf een bèta, al merk je daar in de praktijk niet zo veel van). Dat is een mooi excuus om niet volledig functioneel te zijn - en helaas loop je daar onder bepaalde omstandigheden ook wel tegen aan.

Zo maakt Cordova wel een fijne wide-tile aan voor Windows Phone, maar heeft die geen optie om een plaatje op die tile te tonen (waardoor je een lege tile ziet en je dwars door de achtergrond aankijkt).

Door echter in de "native" folder van je project de benodigde XAML-bestanden te droppen en handmatig aan te passen, kan je toch een wide-tile mét plaatje maken (yeah!). Op die manier kan je de tekst op de tile ook aanpassen, evenals de splashscreens en de icons.

Standaard tonen die het gezichtje van Cordova - erg sympathiek, maar met geen mogelijkheid aan te passen als je niet even in de XAML duikt.

...

Ook leuk is dat de device-rotation in je "config.xml" gewoon wordt genegeerd- evenals het verbergen van je system-tray. Door de "mainpage.xaml" en de "mainpage.xaml.cs" handmatig te coden, voorkom je deze - en andere issue’s - ...maar dan moet je dus niet bang zijn voor wat C# en XAML syntaxen.

...

CROSS DOMAIN ACCESS

Een laatste, maar wel belangrijke, opmerking gaat over XHR en COR. In de praktijk wil je vaak dat je app (die lokaal op je telefoon binnen een browser draait) gewoon informatie kan ophalen / uitwisselen met een externe server. Bijvoorbeeld om nieuws-updates binnen te harken, of het weerbericht te lezen.

Meestal gebruik je hiervoor een SPA model (Single Page App), waarbij alle updates dynamisch gebeuren - in de vorm van een AJAX-call naar bijvoorbeeld een JSON- of PHP-file die ergens op een externe server staat, en gevoed wordt. Uit beveiligingsoverwegingen is de toegang van "server A" naar "server B" via de clientside dichtgetimmerd; je wil immers niet dat je browser onveilige data en instructies ophaalt van server B terwijl jij je veiligt waant en browsed op server A.

In het geval van Cordova is dit echter opgelost; je kan dus gewoon via de app (lokaal) alle data via AJAX binnenhalen (remote), zonder security-gedoe. Als je je app gaat ontwikkelen / testen / debuggen, dan is de kans echter groot dat je dit ook lokaal doet - en niet 100% vanaf je telefoon of tablet.

...

Dat laatste zou niet mogelijk zijn, omdat je normale browser die uitwisseling van gegevens wel blokkeert. Dit valt echter ook weer op te lossen; zelf werk ik met Chrome als developer tool - en daar kan je bij de settings de "safe web settings" wat losser maken (door een flag te raisen dat het wel mag). Of je start Chrome op via de commandprompt met een switch achter de opdrachtregel, waarmee Chrome (tijdelijk) de verbinding wijdt open gooit.

Echt lekker vind ik dat niet; straks vergeet je dat de cross domain access hebt opengezet, en ga je tijdens het werken even je bankzaken doen... als die site dan net geïnfecteerd blijkt te zijn - dan zit je met de gebakken peren.

...

Om dit te voorkomen, heb ik dus een gratis Chrome Extension gedownload, waarmee je de toegang tot externe servers zelf aan- en uit kan zetten. De status van de verbinding wordt in je toolbar met een kleurtje aangegeven, dus je ziet direct of je gevaar loopt - of niet.

...

TENSLOTTE

Deze handleiding is ongetwijfeld niet 100% toereikend - maar wellicht wel een stapje in de goede richting. Het geeft vooral de meest basale zaken aan, waar je als beginnend Cordova developer tegenaan kan lopen.

Zelf heb ik alles dat hierboven staat in ongeveer 2 dagen "geleerd en ontdekt" (inclusief de realisatie van mijn eerste Cordova-app voor Android en Windows Phone - waarover in een ander blogje meer).

Om te voorkomen dat anderen tegen dezelfde zaken aan lopen, heb ik het dus even op papier gezet. Mocht je - net als ik - jezelf thuisvoelen in HTML / CSS / JS en overweeg je om cross-platform te gaan ontwikkelen? Dan is de combinatie van Visual Studio en Cordova meer dan interessant;

Beiden zijn gratis, Cordova zelf is open-source, er is vollop ondersteuning vanuit de community en Visual Studio levert een goede prestatie waar het gaat om het maken, onderhouden en uitwerken van je codes.

Natuurlijk, die-hard-core native C# en Java apps zijn sneller, effectiever en verdienen absoluut de aanbeveling voor de echt grote jongens. Heb je echter een beperkter budget - of simpelweg een app die zich goed leent voor een HTML-achtige oplossing, dan is Cordova absoluut een winnende partij. Geen gedoe met losse code-bases, meerdere IDE’s en issues met hardware en API’s.

Gewoon alles in één omgeving schrijven, één keer op de knop drukken en je hebt een app die werkt op alle major platforms die je maar wenst.

O ja, een Windows Phone app kan je - vanuit Visual Studio - indienen bij de Microsoft Store. Een Android app werkt op je test-device, maar moet je "signen" en "alignen" voordat je hem kan indienen bij Google.

...

Ik heb niet kunnen ontdekken of Visual Studio deze optie biedt, dus ik heb een gratis tool gedownload die het voor je doet. Een vage Java-applet (lijkt wel op een keygenerator, maar dat is het niet... nou ja, soort van - want je moet ook de Android Keystore genereren). Natuurlijk kan je ook Android Studio of Eclipse hiervoor gebruiken, maar om nu 1000mb te downloaden terwijl het ook met een stand-alone tooltje van 150kb kan...

...

...

Titty Tiles en Booty Blocks... soort van

Door deathgrunt op dinsdag 17 februari 2015 12:21 - Reacties (8)
Categorie: Apps voor Windows Phone en Android, Views: 2.385

...
...

Titty Tiles en Booty Blocks... ze mochten niet, maar zijn er nu toch... soort van...

In een poging de app-gap voor Windows Phone nog wat groter te maken, had ik het lumineus kinderachtige idee om Titties en Booties op je startscherm te kunnen pinnen... animated!

Helaas waren de plaatjes voor de tegeltjes volgens Microsoft keiharde porno (in het echt gewoon thumbnails uit de lokale Hunkemöller body).

Kortom; de apps waren ready-2B-published, maar mevrouw Microsoft stak er een stokje voor. Wat volgde was een kat-en-muis spel, met hulp van een meer dan vriendelijke Market Escalations Support Engineer, a.k.a. Marty (een soort Saul Goodman - maar dan digitaal).

...

...

...

Marty wilde namelijk voorkomen dat ik zou stoppen met het maken van de appjes, omdat het aantal actieve developers voor Windows Phone daarmee met 45% zou afnemen. Alleen Marty mocht níet zeggen hoe ik mijn app in de store kon krijgen, maar kon wel aangeven dat het aan de titels, teksten en icons lag (de content was dus niet zozeer het probleem, maar de meta-data wel).

Ik ben exact dezelfde apps gaan publiceren, onder telkens een andere naam, met andere screenshots en andere teksten, waarbij ik telkens een kleine aanpassing toevoegde, om te zien waar het schip strandde.

...

...

...
  • TittyTiles - verboden
  • Busty Blocks - verboden
  • Booby Blocks - verboden
  • Booty Blocks - verboden
  • Babe Blocks - toegestaan!
  • Babe Blockz - toegestaan!
  • Pin some Boobies / Booties / Busties / Titties to your screen - verboden
  • Pin some Babes / Babez to your screen - toegestaan!
...

Het gevolg was dat ik na talloze pogingen nu een app-lijst op mijn developers-dashboard heb, met allemaal afgekeurde apps (die je vervolgens niet kan verwijderen; komt de overzichtelijkheid niet echt ten goede).

Maar het goede nieuws is dus dat Babes en Babez wel zijn toegestaan :)

Kortom, have fun - download de apps en geniet van al het moois dat Windows Phone te bieden heeft!...

...
...
...
...

...
...
...
...

...

PS. aan de Camel Tile ben ik maar niet begonnen; dat kon ik arme Marty niet aandoen.

...

tw¤ak¤r$.n¤t - poll

Door deathgrunt op zaterdag 07 februari 2015 15:05 - Reacties (41)
Categorie: Apps voor Windows Phone en Android, Views: 3.784

...

Okay, de titel is zwaar gechargeerd - maar vat wellicht wel de essentie in een oogopslag (een website die geld móet verdienen om te kunnen overleven)...

...want de hoofdredacteur van Tweakers opperde gisteren het idee dat Lumia-telefoons wellicht niet meer besproken moesten worden (let wel - slechts een suggestie, geen officieel standpunt).


De belangrijkste reden was dat het A] te veel tijd kost, B] niets oplevert en C] mensen de reviews niet (objectief) in dank af nemen.

...

Als we de lijn doortrekken, dan kunnen natuurlijk ook Ubuntu (OS), Jola, Sailfish, Pebble, Blackberry en zelfs iOS worden genegeerd (want 10 tot 15% marktaandeel is ook niet heel baanbrekend en kost net zo veel tijd om te beoordelen)... dan blijft uiteindelijk alleen Android over lijkt mij (80 tot 85% aandeel - dat tikt lekker aan als we de hoofdargumentatie volgen).

Natuurlijk is Tweakers een (meer dan) commerciële site en hebben ze veel overhead / hoge kosten / mensen op de payroll staan... dus ergens kan ik me er wel in vinden.

...

Niche producten? Laat maar; levert geen geld op, weinig clicks, veel gezeik - we focussen ons alleen op de core - dus enkel producten met een substantieel (winstgevend) marktaandeel...

...niche producten dienen (dus) minder vaak belicht te worden op Tweakers.net
...

...

Tieten, billen en nog wat...

Door deathgrunt op maandag 02 februari 2015 19:19 - Reacties (30)
Categorie: Apps voor Windows Phone en Android, Views: 3.264

...

- INSTANT UPDATE -

Woohoo, damage control - of gewoon 100% toeval :)

Microsoft reageert live op mijn gezeik uitdagingen met deze twee suffe apps...


...

...

...

Ik blijf natuurlijk sowieso WP braaf ondersteunen... wel heel goed dat ze zo betrokken zijn.

Ook wel coole titel op je visitekaartje; "Marketplace Escalation Manager" ...

...

- ORIGINELE BLOG -

Lol, een Windows Phone app kan zelfs geweigerd worden vanwege het icoon :P

...

...

http://i.imgur.com/g4Aus5F.png

...

De titel was eerst Titty Tiles, toen Booby Blocks nu Busty Blocks...

Alle titels zijn verboden - net als de icons (want sexual implicit).

Yeah, right... een sexual implicit icon?

Na ja... zoek het maar lekker uit met je Windows Phone - ben er wel een beetje klaar mee, met die minder dan 3% marktaandeel (en dalend...).

OS agnostic apps... here I come :)

Overigens zijn het gewoon plakplaatjes uit een reclamefolder voor lingerie... er is níets, maar dan ook níets te zien wat ook maar enigszins explicit is...

Een beetje zombie-schieter met knallende hersens, afgerukte ledematen en chicks met dikke tieten en harde tepels komt zo in de store - maar een allitererend geintje is verboden...

...

http://i.imgur.com/0pY8KYw.png

(app staat wel in de store - maar dat is omdat Microsoft vooraf de apps nooit checked... eerst zend je hem in, dan wordt hij direct online gezet - en pas na een week of wat gaan ze checken... de app verdwijnt dus binnenkort vanzelf weer uit de store... dit is een oude versie, die ik niet meer mag / kan updaten terwijl ik juist de bugs er uit had gehaald)

http://i.imgur.com/dIfJoPb.png

...

http://i.imgur.com/iSJcHgX.png
 
http://cdn.marketplaceimages.windowsphone.com/v8/images/ec08b9c4-5457-4854-bce0-7edeb9faf35c?imageType=ws_icon_largeAllianz Koerz door deathgrunt
 
Allianz Koerz...Realtime inzicht in het koersverloop van alle Allianz fondsen.

...

(nog een app die ik vorige week had gemaakt - was ik vergeten te posten... hiermee kan je live je koersverloop bij Allianz checken en op je homescreen pinnen)

Goodbye, strictly Windows Phone only - it was nice knowing you }:O

...

...

...

Tweakers live 3.1 - Twitter Tile

Door deathgrunt op vrijdag 30 januari 2015 17:33 - Reacties (2)
Categorie: Apps voor Windows Phone en Android, Views: 896

...

- tweakers.net live ... nu met extra-gratis twitter stream -

...

Another day, anther tile... en voor vandaag is dat... (tromgeroffel)... de Twitter Tile!

Want als we dan toch langzaam maar zeker de volledige pressroom van Tweakers H.Q. aan het overnemen zijn, dan kan daar een live twitter-stream ook nog wel bij.


Kortom, wil je op de hoogte blijven van de verse tweets van Android Wokke, Female Taken en Mooi-Boi Wout? Ga dan naar http://tweakers.deathgrunt.nl , kies voor "twitter", "push the button" en pin die page!

...

- bovenin het nieuws

- bovenin het nieuws, onderin de tweets -


- tweakers tweets op je tablet / pc / laptop -

- tweakers tweets op je tablet / pc / laptop -


...

HOE HET WERKT

"Vroegahhhh" kon je per Twitter-user gewoon een RSS-stream inlezen, later werd dat een JSON-stream en nu mag je niets meer...

Om toch een live Twitter-feed te krijgen, heb ik een simpele DOM-parser geschreven die om het half uur de timeline van Tweakers' Twitter inleest.

Die ruwe data wordt via een eenvoudig scriptje op de server omgezet naar de 15 meest recente tweets en die tweets worden weer netjes uitgesmeerd over een vijftal XML-bestanden.

Deze XML-bestanden worden tenslotte uitgelezen door de live-tile API van je telefoon / tablet / pc en random geshuffeld - zodat je niet te vaak dezelfde tweets ziet (afhankelijk van hoe vaak iemand een tweet de wereld inslingert, natuurlijk).

Het maken van de Tweaker-Twitter-Tile (r) was wederom minder dan een half uur werk... tijd dat Tweakers dit zelf implementeert?

- van Twitter naar PHP naar XML naar je live-tile -

- van Twitter naar PHP naar XML naar je live-tile -


...