© PXimport

Van web naar app

Geplaatst: 10 juli 2012 - 14:07

Aangepast: 16 november 2022 - 09:23

Koen Vervloesem

Een smartphone of tablet is qua functionaliteit enorm afhankelijk van het applicatieaanbod in de winkels. De apps worden veelal gemaakt door professionele ontwikkelaars, maar waarom zou u het niet zelf doen? U hoeft hiervoor zelfs niet te kunnen programmeren, want met Conduit Mobile maakt u in een handomdraai een app. Wij leggen u uit hoe u zo'n app maakt voor Android, iOS en Windows Phone en hoe u deze vervolgens in de applicatiewinkels krijgt.

Helaas vergt het maken van mobiele apps maken aardig wat programmeerwerk, waardoor het slechts is weggelegd voor de 'happy few'. Toch zijn er programma's die het ontwikkelproces vereenvoudigen, één daarvan is Conduit Mobile. U zet hiermee eenvoudig, met uw browser, een willekeurige website om naar een mobiele app. Conduit Mobile haalt informatie uit de website via rss-feeds, van Twitter, Facebook enzovoort, en presenteert deze gegevens in app-vorm. U kunt de app zelfs in een online simulator testen. Als u klaar bent, creëert Conduit Mobile de app voor Android, iOS of Windows Phone en helpt u zelfs om deze in de juiste applicatiewinkel te krijgen. Het voordeel van deze aanpak is dat u de app maar één keer hoeft te maken en Conduit Mobile hiervan versies voor de drie platforms aanmaakt.

Conduit Mobile biedt zijn app-dienst gratis aan. Uiteraard kunt u gratis en zonder te hoeven programmeren nooit dezelfde resultaten bereiken als met doorgewinterd programmeerwerk. Voor eenvoudige apps die enkel wat informatie van een website moeten tonen in een vorm die geschikter is voor mobiele toestellen, is Conduit Mobile echter heel handig. Denk bijvoorbeeld aan een mobiele app voor het WordPress-blog van uw sportclub.

© PXimport

Met Conduit Mobile maakt u eenvoudig mobiele apps voor Android, iOS en Windows Phone.

1. Aan de slag

Maak eerst een gratis account aan door op Mobile Conduit bovenin op Join te klikken. Het enige wat u hoeft in te voeren is een e-mailadres en wachtwoord, meer wil Conduit Mobile niet van u weten. In het dashboard klikt u op Create new app. Geef daarna de url in van de website waarvoor u een app wilt aanmaken en klik op Create app. Conduit Mobile zoekt nu naar gegevensbronnen op de website en toont na een tijdje rechts een iPhone op uw scherm, die de app toont. Dit is een volledig functionele simulator, dus u kunt nu met uw muis op het scherm van de iPhone vegen en klikken om de app te testen. Door op View in landscape bovenaan te klikken wordt de virtuele iPhone geroteerd zodat u het resultaat ook in landschapsmodus kunt zien.

Boven de virtuele iPhone staan enkele icoontjes van andere smartphonetypen. Door hierop te klikken verandert het uiterlijk van de iPhone in bijvoorbeeld een Android-telefoon, Windows Phone, BlackBerry of Bada-telefoon. De app zelf ziet er op al deze platforms identiek uit, niet alleen in deze simulator, maar ook als u ze straks op uw telefoon uitprobeert. Overigens kunt u ook een virtuele iPad tevoorschijn toveren: als het Apple-icoontje geselecteerd is, kunt u kiezen tussen iPhone en iPad.

Voor muzikanten

Conduit Mobile richt zich met een aantal functies speciaal op muzikanten. De integratie met SoundCloud bijvoorbeeld is duidelijk op dit doelpubliek gericht, maar ook de andere typen pagina's zijn geschikt voor wie een mobiele app wil maken om zijn muziekband te promoten. Zelfs een grote naam als Dream Theater-drummer Mike Portnoy maakt gebruik van Conduit Mobile!

2. Pagina's

Conduit Mobile maakt voor elke gegevensbron die het op de website vindt een pagina aan, waarnaar te navigeren is door op een icoontje onderaan het smartphonescherm te klikken. Als we bijvoorbeeld de website van Computer!Totaal ingeven, detecteert Conduit Mobile een rss-feed, Twitter-stream en Facebook-kanaal. Links toont Conduit Mobile onder Your pages icoontjes voor deze pagina's. Door ze te verslepen wijzigt u de volgorde waarin ze onderaan in de app getoond worden, door erop te klikken opent u een venster met eigenschappen die u kunt aanpassen.

Zo kunt u het icoontje aanpassen, de naam (rss heet bijvoorbeeld standaard News, verander dit gerust in Nieuws), de lay-out waarin de nieuwsberichten getoond worden enzovoort. Als de rss-feed om één of andere reden niet klopt, kunt u die url aanpassen, evenals de naam van de feed die bovenaan de app getoond wordt als u meerdere rss-feeds in uw app hebt. U kunt hier ook aangeven hoe vaak de feed geüpdatet wordt en hoe Conduit Mobile de berichten sorteert.

© PXimport

Conduit Mobile detecteert gegevensbronnen van uw website en maakt automatisch pagina's aan.

3. Meer pagina's

U hoeft uw app niet te beperken tot de pagina's die Conduit Mobile automatisch toevoegt. Zo kan het zijn dat er op andere pagina's van uw website nog allerlei gegevensbronnen staan die niet door Conduit Mobile opgemerkt worden. U kunt perfect een tweede rss-feed, Twitter-stream of Facebook-kanaal aan de bestaande pagina's toevoegen. Klik op een icoon, kies in de eigenschappen hiervan voor Add another feed of Add another channel en geef de juiste url of gebruikersnaam op. Wilt u dat de nieuwe pagina een eigen icoontje krijgt op de knoppenbalk, dan klikt u onder het kopje Add more pages op één van de icoontjes om een pagina toe te voegen.

Conduit Mobile kent zestien typen pagina's. Aan een Photos-pagina kunt u een fotogalerij toevoegen van Picasa, Facebook, Flickr, SmugMug, Tumblr, TwitPic of u laadt een willekeurige rss-feed met foto's. Met Audio voegt u een afspeellijst toe van Soundcloud of urls van muziekbestanden, een Video-pagina laat u een YouTube- of Vimeo-kanaal integreren in uw app. Reviews voegt zogenaamde sociale reviews toe van Yelp of Citysearch, en de knop Events laat u toe om pagina's van gebeurtenissen van Facebook, Google Calendar, Eventbrite of Songkick te halen.

Met de Custom-pagina kunt u een volledig zelf ontworpen html-pagina aan uw app toevoegen. U krijgt een visuele bewerker te zien waarin u het lettertype, de lettergrootte en de kleuren kiest. Ook voegt u hier bijvoorbeeld opsommingstekens en afbeeldingen toe. Wie wil, kan ook rechtstreeks de html-broncode aanpassen. Deze typen pagina's zijn beperkt tot 7000 tekens inclusief de html-codes, maar dit is normaal voldoende aangezien niemand op een mobiele app lange teksten zal lezen. Houd het dus bij beknopte pagina's. Eigen CSS- en JavaScript-code invoegen werkt niet, daarvoor hebt u een Module-pagina (zie kader modules) nodig.

4. Voorgedefineerde pagina's

Voor veelvoorkomende typen pagina's heeft Conduit Mobile overigens ook al voorgedefinieerde sjablonen klaargezet. In een Contact Us-pagina hoeft u bijvoorbeeld alleen maar uw telefoonnummer, fax, e-mail, url, adres enzovoort in te typen en alles wordt in een standaard lay-out gezet. Hetzelfde geldt voor de pagina About Us, waaraan u ook knoppen voor sociale netwerken kunt toevoegen. Met Call Us kunnen gebruikers van uw app u eenvoudig bellen door op uw nummer te klikken en onder Email Us kunnen gebruikers u in één klik een mail zenden.

Verder kunt u ook een Map-pagina aanmaken waarin u een adres ingeeft dat dan op een Google Maps-kaart getoond wordt. Een LiveAlbum-pagina geeft toegang tot een live fotoalbum op uw Facebook-profielpagina, zodat gebruikers foto's kunnen delen en becommentariëren via uw mobiele app.

© PXimport

Een Over ons-pagina is in een handomdraai toegevoegd.

Modules

Een type pagina dat we niet hebben uitgelegd is Module. Deze geeft toegang tot de Conduit Mobile API, waarmee ontwikkelaars hun eigen aangepaste typen pagina's kunnen maken voor als ze iets nodig hebben dat niet door één van de zestien aangeboden typen pagina's geïmplementeerd wordt. Hiervoor moet u wél programmeren, maar het voordeel van de Conduit Mobile API is dat de modules die u hiermee maakt op alle ondersteunde smartphone-platforms draaien. U hoeft dus geen afzonderlijke Android-app, iOS-app, Windows Phone-app enzovoort te programmeren, maar volstaat met één API.

Het programmeren van de Conduit Mobile API gaat in HTML, CSS en JavaScript. De API geeft u toegang tot de hardware van de smartphones, zoals de gps en camera, laat toe om push-notificaties te gebruiken en ondersteunt ook speciale functionaliteit in de gebruikersinterface, zoals activiteitsindicatoren en dialoogvensters. Op Mobile Conduct vindt u uitgebreide documentatie over de Conduit Mobile API en hoe u uw eigen modules maakt.

© PXimport

Voor wie wel aan het programmeren wil slaan, zijn er nog meer mogelijkheden.

5. Uiterlijk

Tot nu toe hebben we het enkel over de inhoud gehad, maar onder Look & Feel zijn er ook een aantal instellingen voor het uiterlijk van uw app. De belangrijkste zijn de titel en achtergrondafbeelding van de balk bovenaan uw app. Ook het icoontje van de app, de stijl van de tekst (licht op donker of omgekeerd), de achtergrondafbeelding en de taal (Nederlands wordt ook ondersteund) bekijkt u het beste even. U kiest zelf een kleurenschema en bepaalt de plaats van de icoontjes van de verschillende pagina's. Standaard worden er onderaan de app advertenties getoond, waarvan u zelf de helft van de winst kunt opstrijken, maar dit kunt u eenvoudig uitvinken om meer schermruimte te winnen. Wanneer uw app klaar is, klikt u op Update changes.

Wie zijn uw bezoekers?

Conduit Mobile heeft uitgebreide bezoekersstatistieken, de Analytics-pagina toont het aantal nieuwe gebruikers van de app, het aantal keren dat de app gebruikt werd en het aantal pageviews (ook opgesplitst per pagina). Dit alles kunt u bekijken per datum, per platform, per paginatype enzovoort. Zo kunt u eenvoudig volgen wanneer uw app populair wordt en kunt u ook bekijken wat de populairste pagina's zijn. Ook de opsplitsing per platform is interessant, evenals de mogelijkheid om te zien hoeveel bezoekers de webapplicatie gebruiken en wie via de mobiele app werkt. Het is mogelijk om een push-notificatie naar al uw gebruikers te sturen, of enkel naar de gebruikers op een specifieke locatie. Toch raden we u aan om dit slechts heel uitzonderlijk te gebruiken, want dit lijkt ons nogal storend voor de gebruikers.

© PXimport

Het dashboard met uw apps en de Analytics-pagina met bezoekersstatistieken.

6. Test

Nu is het tijd om uw app te testen op uw smartphone. Klik op Test on mobile device. U hebt nu twee mogelijkheden: ofwel test u een webversie van de app die HTML5 gebruikt en in de browser werkt, ofwel een native versie die een echte app is specifiek voor uw platform. De webversie kunt u eenvoudig uitproberen door met uw smartphone de getoonde QR-code te scannen (onder Android kan dat bijvoorbeeld met de app QR Droid) en zo de url van uw app te openen. U kunt uiteraard ook de link naar uzelf e-mailen en de pagina dan op uw smartphone openen, of gewoon met uw smartphone in uw Conduit Mobile-account inloggen en daar de link openen.

De native versie kunt u testen op Android en Windows Phone. Hiervoor moet u wel eerst de Conduit Revu-app installeren op uw smartphone. In Conduit Revu geeft u uw e-mailadres en app-code in. Die app-code krijgt u in uw Conduit Mobile-dashboard te zien naast uw app, en heeft de vorm AB-CDEFG. Klik daarna op Start App, waarna u uw app buiten de browser om kunt testen. Wat u te zien krijgt is dus exact wat u zou zien als u de native app zou installeren, maar het voordeel van Conduit Revu is dat u uw app niet eerst in de applicatiewinkel moet krijgen om hem te kunnen testen.

© PXimport

De door Conduit Mobile gemaakte webapp op een Android-telefoon.

7. Publiceer

Bent u klaar met het testen van de webversie of de Conduit Revu-versie? Dan kunt u de app echt laten maken. Wanneer u in de pagina van uw app in uw Conduit Mobile-account klikt op Generate mobile app, dan creëert Conduit Mobile native versies van uw app. U moet eerst allerlei details ingeven, zoals contactdetails, een beschrijving van uw app enzovoort. U kiest hier ook een webapp-url: dit is de url waarop bezoekers de webversie (in HTML5) van uw app kunnen benaderen. Deze heeft de vorm http://.mobapp.at, waarbij u zelf kunt kiezen. U kiest hier ook het icoontje dat voor uw app getoond wordt, screenshots die in de applicatiewinkel getoond worden en een splash-screen dat verschijnt tijdens het laden van uw app.

© PXimport

In uw App Home uploadt u eenvoudig uw app naar de applicatiewinkels voor Android, iOS en Windows Phone.

Let wel op, het app-icoontje en twee screenshots zijn verplicht! Die screenshots kunt u bijvoorbeeld van de simulator maken, waarna u het beeld op de gesimuleerde smartphone eruit knipt. Of u toont de preview in Conduit Revu op uw smartphone en maakt daar een screenshot van. Hebt u dit alles ingevuld, klik dan op Generate!

Hierna krijgt u in uw account van Conduit Mobile op de pagina van uw app de verschillende mogelijkheden om te publiceren te zien. Let hier ook op: zodra u een app in een applicatiewinkel wilt publiceren, kost dit u geld (behalve voor Samsungs bada-platform, maar daar zult u niet veel bezoekers mee bereiken). Wilt u uw app in de App Store publiceren voor de iPhone en iPad, dan moet u zich eerst als Apple Developer registreren, wat 99 dollar per jaar kost. Klik op Get your Apple Certificate, waarna Conduit Mobile u door het hele proces gidst met een duidelijke uitleg. Voor publicatie in de Windows Phone Marketplace moet u zich registreren bij de App Hub, wat eveneens 99 dollar per jaar kost. Om uw app in Google Play te krijgen (vroeger Android Market), moet u zich als Android-ontwikkelaar registreren, wat eenmalig 25 dollar kost. Betalen gaat voor Google Play via Google Checkout met een creditcard.

© PXimport

Conduit Mobile legt stap voor stap uit hoe u uw app in de verschillende applicatiewinkels krijgt.

© PXimport

Google vereist een eenmalige betaling van 25 dollar voor een Developer Account.

Mobiele webapp

Behalve de echte app, kunt u ook een mobiele website maken. Op uw app-pagina in uw Conduit Mobile-account kiest u onder Publish dan voor Mobile Website. Klikt u op Open on mobile phone, dan krijgt u de url van de mobiele web­app te zien (http://.mobapp.at), die u ook via e-mail naar uzelf kunt versturen of via een QR-code op uw smartphone kunt openen. Deze pagina geeft u op uw smartphone overigens de mogelijkheid om de mobiele app te openen of om de native app op uw toestel te downloaden. Opent u de pagina bijvoorbeeld op een Android-telefoon, dan downloadt u hiermee een .apk-bestand van uw app, dat u dan kunt installeren zonder dat u via de applicatiewinkel hoeft. Conduit Mobile biedt ook JavaScript-code aan die u in de HTML-code van uw website kunt plakken om mobiele bezoekers de optie te geven om uw app te installeren.

© PXimport

Open een webapp op uw smartphone met de QR-code.

8. Premium account

Met een gratis account bij Conduit Mobile kan elke app tot vijfhonderd keer geïnstalleerd worden. Voor een app voor uw lokale voetbalclub volstaat dit waarschijnlijk wel, maar als u meer gebruikers wilt, kunt u altijd upgraden. Een Premium-account is er vanaf 29 dollar per maand per app, waarmee uw app vijfduizend keer geïnstalleerd kan worden en u ook extra support krijgt. Vergeet ook niet dat de mogelijkheid om te publiceren in een applicatiewinkel geld kost en dat Apple nogal streng is over de inhoud van apps. Dankzij Conduit Mobile kunt u dus wel gratis en zonder programmeren mobiele apps voor alle populaire platforms maken, maar u zult vlug merken dat er heel wat meer bij komt kijken als u echt een kwalitatieve app wilt maken en verspreiden.

Publiceer in Google Play

Voor dit artikel hebben we een voorbeeld-app geüpload naar Google Play. Klik hiervoor op de pagina App Home van uw app in Conduit Mobile op Upload to Android Market en volg de uitleg. Nadat u een Developer Account hebt aangemaakt, moet u enkele dagen wachten tot de betaling (via creditcard) in orde is. Download het apk-bestand van uw app en upload dit naar Google Play. Daarna geeft u nog productdetails op, waaronder twee schermafbeeldingen.

© PXimport

Upload uw apk-bestand naar Google Play.

Deel dit artikel
Voeg toe aan favorieten