Maak je eigen app zonder programmeren

Wie maakt brood? De bakker. Wie maakt  worst? De slager. Wie maakt apps? De programmeur. Er zijn zo van die evidenties die uiteindelijk… niet zo evident blijken. Het brood en de worst laat ik voor wat ze zijn, maar over die apps kan ik intussen al een woordje meespreken. Ik ben hoegenaamd geen programmeur, maar ook zonder in complexe code te duiken blijkt het best wel mogelijk eigen apps te ontwikkelen.

Nu ja, ontwikkelen… op een bezonnen manier bij elkaar klikken lijkt mij meer van toepassing. Er zijn namelijk van die handige diensten en tools die je toelaten alle gewenste onderdelen van je app in een visuele omgeving bij elkaar te sprokkelen. Op de achtergrond wordt netjes de bijhorende code gegenereerd, maar daar merk je nauwelijks iets van. Van het resultaat des te meer, want je staat ervan versteld hoe aantrekkelijk en gebruiksvriendelijk de apps zijn die je op die manier uit je mouw schudt.

In dit artikel stel ik je een paar (gratis) oplossingen voor, waarbij ik de drie populairste omgevingen aan bod laat komen. Dat zijn enerzijds Android en iOS, anderzijds Windows 8 (RT). Ik geef ten slotte ook nog even mee hoe je zo’n app tot in de officiële stores krijgt.

[related_article id=”161563″]

Android & iOS (AppMakr)

Om onze Android- en/of iOS-app te maken, kloppen we aan bij AppMakr. De service is gratis, als je met ads kan leven. Je vindt de dienst op www.appmakr.com, waar je je allereerst aanmeldt met je Google-, Facebook-, Twitter- of Yahoo!-account. Vul vervolgens een geschikte titel voor je app in, evenals je naam en een e-mailadres. Duid het gewenste app-type aan – ik ga alvast voor "Multi-purpose" – en klik op "Next Step" (als je er echt op staat, kan je in deze fase al bepaalde data toevoegen via knoppen als "Website url" of "Blog RSS url").

Je belandt nu in een scherm waar je de gewenste in-app functie(s) naar het voorbeeldvenster (in de vorm van een smartphone) versleept. Die functies zijn in een 9-tal categorieën opgedeeld, waaronder "Common Functions", "Social Feeds", "News & Blogs", "Photos & Videos", "Contacts" en "Locations". Een multimediale app lijkt me wel wat en dus sleep ik zowel "Music (Music)" als "Photos (Photos & Videos)" naar het venster. Verkeerde functie gekozen? Gewoon even naar de prullenmand verslepen!

Vormgeven en invullen

Laten we ons eerst met het uitzicht van de app bezighouden. Daarvoor moet je bij "Appearance" zijn, linksonder. Klik alvast op "Backgrounds" en kies een geschikt plaatje uit de online bibliotheek ("Free Library") of upload zelf een afbeelding ("Upload Image") van minstens 768×1024 pixels. Dat kan je trouwens niet alleen voor de achtergrond doen, maar ook voor het ‘laadscherm’ ("Splash Screen"). Over naar "Header" waar je desgewenst een titel of een afbeelding bovenaan je app-venster plaatst. Ook de pictogrammen en het onderschrift kan je makkelijk aanpassen. Dat doe je door Icons aan te klikken en vier parameters in te stellen (tekstkleur, icoongrootte, menukleur en -transparantie). 

Op elk moment kan je trouwens een live preview opvragen om op je smartphone of tablet te bekijken. Je hoeft dan alleen maar je e-mailadres of je telefoonnummer in te geven en vervolgens de link in het bericht of de sms aan te klikken om je app in werking te zien.

Natuurlijk, veel valt er nog niet te zien of te horen. Klik dus maar snel de knop "Music" in het voorbeeldvenster aan. In het rechterpaneel kan je nu een videoclip met feedback bekijken, maar eigenlijk wijst alles zichzelf uit. Bij "Specs/Info" hoef je alleen maar een leuk icoontje te selecteren (ook dat kan je zelf uploaden), een geschikte titel te voorzien, een fraaie achtergrondpagina te kiezen of te uploaden en je muziekalbum samen te stellen. Dat laatste doe je via de knop "Edit Album", waar je dan een titel en artiest voor het album invult, evenals eventuele lyrics en links voor elke track. Deze laatste kan je zelf uploaden via "Bestand kiezen". Nog meer tracks? De knop "Click here to add another track" gaat op die wens in, althans tot je de grens van 20 MB hebt bereikt. Bevestig met "Save".

Over nu naar het onderdeel "Photos". Ook hier kan je een icoon, titel en achtergrond kwijt, waarna je een RSS photo feed toevoegt. Die mosterd haal je bijvoorbeeld uit je eigen online collectie – of die van iemand anders – bij populaire services als Flickr of Picasa. Ben je klaar met alles, druk dan op de knop "Save".

Publiceren

Je bent al een heel eind opgeschoten en wat nu rest, zijn vooral een paar administratieve taken.  Klik alvast op "Next". In het linkerpaneel krijg je nu een tiental onderdelen te zien. Laat je dat echter niet afschrikken: de meeste heb je in een paar seconden ingevuld. Een "Project Title" heb je bijvoorbeeld al, en bij "Pick your HTML5 Domain" kan je nog een leuk subdomein aanduiden, waar anderen je app kunnen vinden. Verder upload je nog een aantrekkelijk icoon, vul je een beschrijving, een welkomstboodschap en wat-je-allemaal-wel-niet-kwijt-wil in, zoals tags, categorie, contactinformatie, herkomst, enz. Vergeet niet op "Save" te klikken.

Vervolgens klik je nogmaals Next aan voor het grote moment: het publiceren naar een marktplaats of store. Op de eigen marktplaats van Appmakr hoeft je dat niets te kosten, maar dan ben je wel tot Android en het ‘universele’ HTML5  beperkt en wordt je app door ads ontsierd – voor minder dan 1 euro per maand ben je daar echter van verlost. Wil je de app ook in de Play Store en de Apple Store dan kost je dat circa 6,65 euro per maand. Maak je keuze en bevestig met "Publish Your App Now!". Even later is de link naar je app up and running.

Windows 8 (Project Siena)

Voor onze Windows 8-app gaan we aan de slag met een gloednieuw stukje software van Microsoft zelve: Project Siena – je vindt het (uiteraard) in de Windows App Store, maar een goed vertrekpunt is ook www.microsoft.com/en-us/projectsiena. Houd er rekening mee dat het programma nog in bèta steekt en dat is af en toe wel te merken.

Microsoft richt zich met deze visuele ontwikkelomgeving weliswaar vooral op zakelijke omgevingen, maar er vallen ook wel apps te brouwen waar je ‘privé’ iets mee kan. Ik houd het hier bewust eenvoudig, want met Project Siena zijn best ook complexe constructies mogelijk! Wat dacht je van het volgende. Wie je app opstart, krijgt een paar foto’s te zien van je vakantiereizen. Afhankelijk van de aangeklikte foto toont je app dan een bijhorend filmpje.

Ik ga er alvast van uit dat je al een drietal reisfoto’s (circa 300×300 pixels) en -filmpjes klaar liggen hebt. Waar je die best stockeert, vertel ik je meteen. Gezien in Project Siena alles vanuit een ‘databron’ wordt aangestuurd, moet je vooraf wel nog een en ander in een Excel-spreadsheet kwijt. Je creëert hierin een werkblad (bijvoorbeeld met de naam Filmpjes). Dat bevat één rij data voor elke vakantietrip, voorafgegaan door kolomtitels. Let er ook op dat je je gegevens (in mijn voorbeeld: Land, Fotolocatie en Filmlocatie) in één enkele tabel giet. Dat doe je als volgt. Selecteer je data inclusief de kolomtitels, open het tabblad "Invoegen", kies "Tabel", laat het vinkje staan bij "De tabel bevat kopteksten" en klik op "OK". De tabel wordt meteen gecreëerd – dat zie je ook aan het uitklapmenu in de kolomtitels. Heb je "Hulpmiddelen voor tabellen" geselecteerd, dan kan je in de rubriek "Eigenschappen" je tabel ook nog een zinvolle naam geven.

Ik heb als locatie een ‘publiek toegankelijke’ submap gekozen (C:UsersPublicVideosPS). Ik raad je aan hetzelfde te doen, want Project Siena is behoorlijk kieskeurig wat je mapkeuzes betreft. Ik kom daar straks nog even op terug. Het xlsx-bestand van je spreadsheet kan je alvast (tijdelijk) op je bureaublad bewaren.

Projectdata importeren

Je heb nu alles in gereedheid. Start dus maar Project Siena op en kies "File", "Data Sources". Rechtsboven selecteer je nu Excel en klik je het blad-pictogram naast het veld "File" aan. Klik desgevallend op het kleine pijltje om SkyDrive te verlaten en binnen "Deze pc" te navigeren.

In de veronderstelling dat ook jouw spreadsheet zich op het bureaublad bevindt, duid je dus deze locatie aan. Als het goed is, zie je hier inderdaad het bewuste xlsx-bestand staan. Selecteer dit bestand en klik onderaan rechts op "Openen". Plaats een vinkje bij de tabelnaam uit je werkblad en bevestig met "Import data". Als het importeren is gelukt, hoor je eigenlijk al meteen de foto’s van je vakantietrips te zien. Is dat niet het geval, dan zit er weinig anders op dan foto’s en filmpjes niet in de “publieke” map te bewaren, maar in je eigen map, bijvoorbeeld: C:UsersToonVideosPS. In dit geval moet je natuurlijk ook wel ook alle verwijzingen in je spreadsheet aanpassen.

Foto"s en films plaatsen

Tijd nu om onze mediabestanden een plaatsje te geven. Klik op het pijltje linksboven zodat je naar Screen1 terugkeert. Klik op "Add Visual" en vervolgens op "Label" – een van de opties in het rechterpaneel. Tik een geschikte titel en sleep het kader tot de gewenste locatie en grootte. Via de knop "Design" (onderaan) kan je die titel nog op allerlei manieren lay-outen. Ziet dat er goed uit, klik dan het plus-knopje bovenaan rechts aan en voeg een tweede ‘visual’ toe. In dit geval kies je achtereenvolgens "Galleries", "Image Gallery": het is namelijk de bedoeling dat hierin je foto’s terechtkomen. Selecteer deze galerij, druk op de knop "Items" (linksonder) en selecteer je tabelnaam. De foto’s duiken nu op in de galerij.

Nu moet je nog een scherm voorzien waar de filmpjes te zien zullen zijn: rechtsklik en kies "Add Screen". Screen2 wordt nu toegevoegd. Klik op Screen1 om naar je fotoscherm terug te keren. Selecteer de eerste foto en klik onderaan op de knop "OnSelect". We gaan Project Siena duidelijk maken dat bij een muisklik (of vingertik) het bijhorende filmpje moet opstarten… Kies vervolgens "Navigate" en selecteer "Screen2". Test het uit door een van je foto’s aan te klikken: je hoort nu in scherm 2 te belanden.

In dit tweede scherm voeg je nu als visual een "Video Player" toe; laat die gerust het ganse scherm inpalmen. Klik onderaan op de knop "Image" en verwijder (de naam van) het standaardplaatje. Klik nu op "Media" en selecteer achtereenvolgens "Gallery1!Selected" en op de kolomtitel die de verwijzingen naar je filmpjes bevat – in mijn voorbeeld was dat "Filmlocatie". Het filmpje verschijnt. Om de kijkers te laten terugkeren naar het fotoscherm kan je op Screen2 nog een tweede visual toevoegen: kies "Shapes" / "Back Arrow". Positioneer, lay-out en selecteer die knop, klik op "OnSelect" en kies "Navigate" / "Screen1".

Je app is nu klaar. Test hem uit door met de rechtermuisknop te klikken en bovenaan rechts "Preview" te kiezen. Druk na afloop op de Esc-toets. Rechtsklik en kies "File" / "Publish". Vul een aantrekkelijke naam in, plaats een vinkje bij "Publish resources locally" (zodat alles netjes in één pakketje komt), bevestig met "Publish" en zoek een geschikte opslaglocatie. Open hier de map "Published Package" en dubbelklik op "InstallApp". Kies "Install on this PC" of "Create an apx file for sharing", ingeval je de app wil delen.

Op naar de shop

Je hebt het voor elkaar: een hoogsteigen app die even lekker draait als oogt… Je vrienden zijn alvast enthousiast en dus wordt het tijd voor het ernstiger werk: uploaden naar de officiële app store! Nu kan het best zijn dat je daar weinig inspanning moet voor leveren, gezien sommige app builders dat grotendeels voor je regelen – de betaling laten ze natuurlijk wel graag aan jou over. Wil je het toch zelf proberen, dan zet ik je graag een eind op weg.

Android

Laat ik met het meest ‘toegankelijke’ platform beginnen: Android. De bedoeling is dat je je eerst op de registratiepagina voor de Google Play-ontwikkelaarsconsole aanmeldt met een Google-account.  Nadat je dan 25 dollar hebt betaald, wordt je registratie binnen de 48 uur in orde gebracht. Vanuit de ontwikkelaarsconsole kan je vervolgens "Nieuwe app toevoegen" aanklikken. Je zal dan een of meer apk-bestanden moeten uploaden evenals een paar screenshots. Uiteraard geef je ook enkele details over je app, zoals categorie, taal, titel en beschrijving – al dan niet met eigen vertalingen.

iOS

Apple heeft op het vlak van geslotenheid een traditie hoog te houden. Voor would-be app-ontwikkelaars is dat weinig anders. Het hele proces is hier dus net wat ingewikkelder. Via deze link vind je hiervan alvast een stap-voor-stap beschrijving (inclusief video). In een notendop komt het hierop neer. Je meldt je als ontwikkelaar aan en je tekent in voor het Apple ontwikkelaarsprogramma (circa 73 euro per jaar). Wanneer je hebt gecheckt of je app wel aan de Apple-vereisten voldoet kan je met het uploaden starten. Daar heb je trouwens nog wel een en ander voor nodig, zoals een unieke app-ID, een paar certificaten, een private sleutel, pictogrammen en een grafische representatie voor je app.      

Windows

De Windows Store werkt op een min of meer gelijkaardige manier als Android. Eerst meld je je aan in je Windows Store Dashboard.  Een persoonlijk account kost je 14 euro per jaar; een bedrijf betaalt 75 euro. Vervolgens klik je op "Een app indienen", waarna je een naam voor je app invult evenals enkele verkoopgegevens en andere informatie. Daarna upload je de pakketten die bij je app horen. Vervolgens klik je op "Indienen voor certificering" en ontvang je, na voltooiing van dat certificeringsproces, een bevestigingsmail. Overigens kan je de status van deze certificering ook altijd opvragen vanuit je dashboard.