Follow Us on Twitter

Mobile applicaties bouwen in Apex

Januari 2013 - Sinds de introductie van versie 4.2 is de functionaliteit van APEX voor mobiele websites voor apparatuur zoals smartphones en tablets uitgebreid. In dit Whitebook wordt een voorbeeld gegeven van een applicatie die geschikt is voor zulke apparaten. Aan de hand van dit voorbeeld wordt getoond welke mogelijkheden Oracle heeft ingebouwd in APEX voor mobiele applicaties.

De casus

De fictieve gemeente Midden Holland kent een systeem waarbij burgers telefonisch meldingen kunnen registreren over de publieke ruimte. Hierbij kan bijvoorbeeld gedacht worden aan uitgevallen straatverlichting, verzakte stoeptegels of kapotte bankjes in het park.

De gemeente heeft behoefte aan een applicatie waarmee burgers via internet zelf de melding kunnen registreren. Deze applicatie moet bereikbaar zijn via een desktop computer, maar ook via smartphones en tablets. Het moet mogelijk zijn om automatisch de locatie van de melder te bepalen en ook moet er een foto van de situatie toegevoegd kunnen worden.

Alles overwegende heeft de gemeente gekozen voor een webapplicatie in plaats van een app. Op die manier hoeft er maar één applicatie gebouwd te worden, die meteen geschikt is voor desktops, smartphones en tablets.

Om de applicatie meteen in werking te kunnen zien, wordt er voor deze case voor gekozen om het geheel op de Oracle cloud service (http://apex.oracle.com) te ontwikkelen. In de praktijk zal een applicatie op een eigen database en applicatie server met bijvoorbeeld de APEX Listener worden geplaatst.

De opbouw van de applicatie

Om aan de eisen van de gemeente te voldoen, bouwen we in dit Whitebook een eenvoudige APEX-applicatie met meteen al veel functionaliteit. Via een walkthrough laten we zien welke stappen nodig zijn om tot dit resultaat te komen.

De applicatie zal bestaan uit een startpagina, een formulier om meldingen te maken en een rapport om eerder ingediende meldingen te bekijken. Hoewel we iets zullen zien van de overige pagina’s, zal het zwaartepunt van onze aandacht liggen op het formulier, aangezien daar de meest interessante toepassingen te zien zijn met betrekking tot mobiele applicaties.

De bouw

Sinds versie 4.2 van Application Express is het mogelijk om declaratief een mobiele applicatie te ontwikkelen. Dat wil zeggen, dat er weinig tot geen programmeerwerk aan te pas komt, maar alleen nog configuratie.

Het declareren begint al bij het aanmaken van een nieuwe applicatie. Nadat het type applicatie is gekozen (in dit geval Database Application), volgt het scherm waarin de naam en het ID van de nieuwe applicatie worden ingevuld. Onderaan dit scherm is een nieuwe optie User Interface te zien.

Create application

Door de optie ‘jQuery Mobile Smartphone’ te selecteren, wordt de nieuwe applicatie voorzien van allerlei gemakken om een mobiele applicatie te kunnen bouwen. Zo wordt jQuery Mobile geïntegreerd (daarover later meer) en zullen in de ontwikkelomgeving opties worden afgeschermd die niet geschikt zijn om te gebruiken op een mobiel apparaat. Denk hierbij aan layout of item types.

Als bij Create Options is gekozen voor ‘Include Home Page’, kan doorgeklikt worden op Next tot het scherm waarin de User Interface Theme wordt gekozen. Omdat in het begin is gesteld dat dit een jQuery Mobile applicatie gaat worden, is slechts 1 theme beschikbaar. Dit is het nieuwe Theme 50 dat speciaal geschikt is voor gebruik op mobiele apparaten. Het is een zogenaamd responsive theme. Zo’n theme heeft als eigenschap, dat de lay-out zich automatisch aanpast aan de grootte van het scherm waarop het getoond wordt. Dit heeft als duidelijk voordeel dat 1 applicatie meteen geschikt is voor zowel de diverse formaten van kleine schermen van smartphones als de grote schermen van tablets. Hierdoor hoeft er niet voor iedere schermgrootte een andere lay-out te worden geïntegreerd.

Als er wederom op Next wordt geklikt en daarna op Create Application, is de basis van de applicatie af.

Wanneer we nu de applicatie uitvoeren in een browser, is al te zien dat de toolbar bovenin het scherm reageert als het venster breder en smaller wordt gemaakt. De toolbar blijft altijd de volledige breedte van het scherm gebruiken.

Volledige breedte

Een ander ding wat vooral ontwikkelaars zal opvallen, is dat bij het starten van deze applicatie vanuit de APEX Application Builder, de zogenaamde Developer Toolbar niet meer zichtbaar is. Dit is specifiek voor mobiele applicaties.

Datamodel toevoegen

Nu de basis van de applicatie staat, wordt het tijd om functionaliteit toe te voegen. Allereerst is er een tabel nodig om de gegevens van de melding op te slaan. Om de casus niet meteen te uitgebreid te maken, wordt ervoor gekozen om alles in één tabel op te slaan.

Via de Object Browser binnen de SQL Workshop van APEX is het mogelijk om dit snel te doen. Wanneer gekozen wordt voor het creëren van een nieuwe tabel, kunnen alle kolommen worden beschreven. De naam van de tabel wordt GMH_MELDINGEN en deze bevat een twaalftal kolommen.

CREATE TABLE  "GMH_MELDINGEN" 
   (	"ID" NUMBER, 
	"MELDER" VARCHAR2(255), 
	"KERN" VARCHAR2(255),
	"BESCHRIJVING" VARCHAR2(255),
	"URGENTIE" NUMBER, 
	"LATITUDE" VARCHAR2(255), 
	"LONGITUDE" VARCHAR2(255), 
	"OBSERVATIE_DATUM" DATE, 
	"MELDING_FOTO" BLOB, 
	"MIMETYPE" VARCHAR2(255), 
	"FILENAME" VARCHAR2(255), 
	"IMAGE_LAST_UPDATE" DATE, 
   )

De vier laatste kolommen zijn belangrijk genoeg om even apart te noemen. Omdat we een foto gaan opslaan in de tabel, wordt een kolom gemaakt van het type BLOB. Dit type kolom vergt normaal gesproken wat extra programmeerwerk om te vullen via PL/SQL, maar omdat we de kolommen met de namen MIMETYPE, FILENAME en IMAGE_LAST_UPDATE toevoegen, kan APEX dit automatisch voor ons doen.

Als in de wizard de naam van de tabel en alle kolommen zijn ingevuld, kan op Next worden geklikt. In het volgende scherm kan de sleutelkolom worden gekozen, de zogenaamde Primary Key. Als we hierbij kiezen voor de optie ‘Populated from a new sequence’, zal APEX een sequence en de bijbehorende logica genereren.

Hierna kan doorgeklikt worden op Next, totdat de knop Create Table beschikbaar komt. Na het klikken hierop, wordt de tabel gecreëerd.

Nu is het datamodel ook klaar voor de nieuwe applicatie.

Het scherm

Nu kunnen we terug naar onze basis applicatie in de Application Builder. Zoals te zien is, bevat de applicatie nu 3 pagina’s.

Applicaation builder

De eerste pagina is nummer 0. Pagina’s met nummer 0 worden door APEX anders behandeld dan andere pagina’s. Functionaliteit op een dergelijke pagina, wordt in alle andere pagina’s ook gebruikt. In dit geval worden de header en de footer in deze pagina gedefinieerd, waardoor deze overal in de applicatie beschikbaar zijn.

De laatste pagina met nummer 101 is ook automatisch gegenereerd op basis van de gekozen authenticatie methode.

We gaan ons nu concentreren op pagina 1. Toen bij het aanmaken van de applicatie bij Create Options is gekozen voor ‘Include Home Page’, is deze pagina aangemaakt. Als we er nu op klikken, is te zien dat er geen inhoud aanwezig is.

Page definition

Wat overigens op dit scherm opvalt, is dat het niet standaard getoond wordt in de in APEX 4.0 geïntroduceerde Tree View, maar in een hernieuwde versie van de ouderwetse editor.

Het is vaak verstandig om in een webapplicatie een openingspagina te hebben met weinig informatie. Dit kost dan niet teveel bandbreedte om te downloaden. De gebruiker kan hierna doorklikken naar de gewenste informatie. Nadat de volgende twee pagina’s aangemaakt zijn, kan op deze pagina bijvoorbeeld een button gemaakt worden die direct naar de te maken Report pagina verwijst.

Om gegevens in de tabel GMH_MELDINGEN in te kunnen voeren en te kunnen te tonen, gaan we een formulier met een rapport maken.

Hiertoe drukken we op de Create knop rechts bovenin het scherm. In de lijst die vervolgens opent, kiezen we New Page. In de wizard die hierna getoond wordt, kiezen we de optie Form. Daarna kiezen we voor de optie ‘Form on a table with Report’. In het volgende scherm kunnen eventueel de namen van de pagina en report region worden aangepast, evenals het paginanummer.

Na het klikken op Next, moeten we de tabel kiezen waaruit we onze informatie gaan halen. Zoek hierin de tabel GMH_MELDINGEN op en klik weer op Next.

Hierna selecteren we de kolommen die op het Report getoond gaan worden. Schuif met behulp van de Shuttle alle kolommen naar rechts en druk op Next. Selecteer hierna een plaatje om te gebruiken als knop om te navigeren naar het formulier en druk weer op Next.

Daarna moeten de gegevens voor het Form ingevuld gaan worden. Dit begint net als bij het Report met het gewenste paginanummer en de namen voor de pagina en region. Wijzig hier de gewenste velden en druk op Next.

Vervolgens moet op de volgende pagina de Primary Key geselecteerd worden. Omdat die aanwezig is in de tabel op de kolom ID, kunnen we die selecteren door de optie ‘Select Primary Key Column(s)’ te selecteren. Hierna wordt automatische de kolom ID geselecteerd.

Nadat we weer op Next hebben geklikt, laten we de selectie op Existing Trigger staan (die hebben we immers ook al aangemaakt bij de tabel definitie). Daarna kunnen we de te gebruiken kolommen selecteren. Omdat we ze allemaal willen gaan vullen, moeten deze rechts in de shuttle staan, voordat op Next wordt gedrukt.

Hierna wordt gevraagd welke opties de gebruiker moet krijgen. De gemeente wil graag dat burgers hun meldingen niet meer aan kunnen passen na het doorgeven, dus alleen de optie Insert laten we op ‘Yes’. Delete en Update kunnen op ‘No’ worden gezet.

Op het laatste scherm van de wizard kan nog een overzicht bekeken worden van de wijzigingen. Door nu op Create te drukken, wordt de region aangemaakt.

De applicatie is nu bijna klaar om data te ontvangen. Nadat de region is aangemaakt, moeten we nog een aantal dingen aanpassen om het echt goed te laten werken.

Allereerst verwijderen we de 3 gegenereerde items voor de kolommen MIMETYPE, FILENAME en IMAGE_LAST_UPDATE van de formulier pagina. Deze kolommen gaan we op een andere manier vullen. Navigeer hiervoor in de Application Builder naar de form pagina (in dit voorbeeld is dat pagina 3). Klik dan in de sectie Items op de link P3_MIMETYPE en selecteer vervolgens bij Display As de optie ‘Hidden’. Druk op Apply Changes en herhaal dit voor P3_FILETYPE en P3_IMAGE_LAST_UPDATE.

Hierna klikken we op het item P3_MELDING_FOTO om deze aan te passen. In de sectie Settings vullen we de gegevens voor MIME Type Column, Filename Column en BLOB Last Updated Column met de corresponderende kolommen uit de tabel voor dat doeleinde. Pas tevens de optie Content Disposition aan naar ‘Inline’.

Edit Foto item

Hiermee is in principe het formulier klaar voor gebruik. Het kan allemaal nog een stukje netter getoond worden, maar dat komt later. Eerst maken we ook het Report wat bruikbaarder.

Ga naar de Report pagina (pagina 2 in ons voorbeeld). Klik daarna in de Regions sectie op de link Report achter de aangemaakte region voor het report. Haal vervolgens alle vinkjes weg onder de kolom Show in de Column Attributes, behalve bij KERN, OBSERVATIE_DATUM en MELDING_FOTO.

Klik vervolgens op het potloodje links naast MELDING_FOTO om hier ook wat opties te wijzigen. Pas in de sectie Blob Column Attributes de velden aan naar de waardes uit onderstaand figuur.

Edit Report item

Druk nu tweemaal achter elkaar op Apply Changes om de wijzigingen op te slaan.

De applicatie openen

Het wordt nu tijd om eens te kijken hoe de applicatie er echt uit komt te zien in een browser op een mobiel apparaat. Om te testen gebruik ik een HTC One X waar Android 4.1.1 op draait. Als browser heb ik gekozen voor Google Chrome. Uiteraard zijn andere apparaten ook zeer geschikt, maar de resultaten zullen er dan anders uit zien dan in de getoonde screenshots.

Omdat ik de applicatie nu gebouwd heb op http://apex.oracle.com, is de site direct bereikbaar. Het URL zal iets zijn als http://apex.oracle.com/pls/apex/f?p=56751:2 om direct op de report pagina te komen.

Android overzicht meldingen

We kunnen nu op de knop Create drukken, waarna de Form pagina opent om een melding in te voeren.

Onderaan het formulier is een knop te zien waarmee een foto toegevoegd kan worden. Als we hierop drukken, komt een menu tevoorschijn vanuit het Android systeem zelf, waarmee we onderdelen van de telefoon zelf aan kunnen sturen. In dit geval willen we een foto maken, waarvoor we eerst kiezen voor Android Systeem en daarna voor Camera.

Foto toevoegen 1Foto toevoegen 2Foto toevoegen 3

Hierna kunnen we een foto nemen. Deze zal na goedkeuring door de gebruiker meteen worden opgeslagen in de APEX pagina.

Tenslotte kunnen we eventueel andere onderdelen van de melding invullen en drukken we op Create. Hierna zullen we teruggeleid worden naar de report pagina, waar we een overzicht zien van de zojuist opgenomen melding.

Voor de duidelijkheid wil ik nogmaals zeggen dat dit er op ieder willekeurig apparaat of browser anders uit zal zien. Bijvoorbeeld Firefox op ditzelfde toestel laat een ander menu met Acties zien.

Maar het belangrijkste hierbij blijft, dat er niks geprogrammeerd hoeft te worden om een onderdeel als de camera aan te sturen vanuit een APEX applicatie. Het operating systeem begrijpt wat de applicatie wil en neemt hiervoor de juiste acties.

Aanpassen van de applicatie

Om de applicatie nog wat gebruiksvriendelijker te maken en wat zaken te tonen die door Application Express 4.2 worden ondersteund, passen we de Form pagina nog een beetje aan.

Navigeer in de Application Builder naar pagina 3 en bekijk het overzicht van Items op de pagina. Van twee items gaan we het type wijzigen, zodat de applicatie wat vriendelijker wordt in gebruik.

Open als eerste het item P3_KERN. Omdat de gemeente Midden Holland uit drie dorpen bestaat, gaan we van dit item een select- list maken met 3 opties.

Selecteer als eerste de optie ‘Select List’ bij Display As, of klik op de snelkoppeling met dezelfde naam. Scroll vervolgens naar beneden om bij de sectie List of Values de onderstaande code in te vullen bij het veld List of values definition:

STATIC2:Ons Dorp;Ons Dorp,Vlagterbrugge;Vlagterbrugge,Veenstrand;Veenstrand

Druk vervolgens op Apply Changes.

Het volgende item dat we aan gaan passen is P3_URGENTIE. Het is de bedoeling van de gemeente dat melders aan geven hoe dringend een melding opgelost moet worden. Losliggende bedrading van straatverlichting is bijvoorbeeld gevaarlijker dan een achtergelaten vuilniszak.

Om aan deze wens te voldoen, gaan we het item veranderen in een zogenaamde Slider. De gebruiker kan dan met een vingerbeweging schuiven tussen de aangeboden opties. In dit geval worden de opties de cijfers 1 tot en met 5.

Open het item P3_URGENTIE en verander het veld Display As in ‘Slider’.

Scroll hierna naar beneden tot de sectie Settings. Vul hier de opties als volgt in; bij Minimum Value: ‘1’, bij Maximum Value: ‘5’ en bij Increment: ‘1’.

Edit slider

jQuery Mobile gebruiken

De laatste twee items die we gaan aanpassen, zijn P3_LONGITUDE en P3_LATITUDE. Dit gaan we op een andere manier aanpakken.

In deze velden worden de lengte- en breedtegraad van de melding verwacht. Het is niet van een burger te verwachten, dat hij of zij op elk moment weet wat z’n GPS-positie is. Vandaar dat we dit automatisch laten invullen, via een aanroep naar functionaliteit van jQuery Mobile.

De ontwikkelaars van Application Express hebben ervoor gekozen om jQuery in versie 4.0 te integreren. jQuery is een bibliotheek met javaScript, bedoeld om veel taken te vereenvoudigen. Hierdoor wordt het bouwen van complexe toepassingen nog makkelijker.

In APEX 4.2 is de variant van jQuery gericht op mobiele toepassingen geïntegreerd. Onder de naam jQuery Mobile worden diverse mogelijkheden geboden voor gebruik in applicaties voor mobiele toestellen. Eén van die mogelijkheden is het ophalen van GPS- coördinaten op apparaten die daarvoor geschikt zijn. Maar ook het responsive theme waarop onze applicatie is gebaseerd, is opgebouwd met behulp van jQuery Mobile.

jQuery Mobile functies kunnen declaratief worden aangeroepen. Het ophalen van GPS-coördinaten is hier een goed voorbeeld van.

Navigeer naar pagina 3 in de Application Builder. Linksbovenin is een sectie Page te zien. Klik in deze sectie op de Edit-knop (de knop met het potloodje) of op een willekeurige link en vervolgens op de tab ‘HTML Header’.

Vul in het veld HTML Header de onderstaande code in:

<script>
  navigator.geolocation.getCurrentPosition (
    function (pos)
    {
      var P3_LATITUDE = pos.coords.latitude;
      var P3_LONGITUDE = pos.coords.longitude;
      $("#P3_LATITUDE").val (P3_LATITUDE);
      $("#P3_LONGITUDE").val (P3_LONGITUDE);
    }
  );
</script>

Deze code zorgt ervoor dat de jQuery Mobile functie navigator.geolocation.getCurrentPosition wordt aangeroepen. Daaruit worden de waardes in pos.coords.latitude en longitude opgehaald en geplaatst in de items P3_LATITUDE en P3_LONGITUDE.

Eindresultaat

Met deze laatste aanpassingen is de applicatie klaar voor gebruik. Het beste kunnen we dit testen op een smartphone, zo zien we meteen wat de aanpassingen voor gevolgen hebben gehad.

Navigeer in een browser op een smartphone naar het URL van de applicatie in uw eigen omgeving of op http://apex.oracle.com.

Het is ook mogelijk om de applicatie aan te roepen op onze omgeving. Vul het volgende URL in: http://apex.oracle.com/pls/apex/f?p=56751:3 om direct naar het formulier te springen.

Het kan zijn dat de browser vraagt om een bevestiging voor het ophalen van de huidige locatie gegevens. Als daarop akkoord is gegeven, verschijnen in de velden latitute en longitude de lengte- en breedtegraad waarop het gebruikte apparaat zich op dat moment bevindt.

Verder is ook het nieuwe slider element te zien. De gebruiker kan door te slepen met de vinger over het item, de waarde van het veld urgentie wijzigen van 1 tot en met 5.

Melding maken 2

Naast deze velden die we hebben aangepast, zijn er ook een aantal velden die door de browser zelf worden herkend en getoond volgens een standaard lay-out. Twee voorbeelden daarvan zijn de select-list voor het selecteren van een Kern en het datum veld voor het selecteren van de observatiedatum.

Melding maken 1Melding maken 3

In blogs op de website van Whitehorses zullen in de nabije toekomst een aantal artikelen voorbijkomen, waarin meer tips worden gegeven rond het bouwen van APEX applicaties die geschikt zijn om te tonen op mobiele apparaten.

Conclusie

Het bouwen van een applicatie die gebruik maakt van de ingebouwde functies van een mobiel apparaat, lijkt voorbehouden aan apps die op het toestel zelf zijn geïnstalleerd. Maar niets blijkt minder waar.

Zonder enig programmeerwerk is het mogelijk om een webapplicatie te maken, die van alle functies van een smartphone of tablet gebruik maakt, zoals de GPS en camera. Met een aantal eenvoudige extra handelingen is al een volledig werkend geheel te maken, waarmee de gebruiker van een mobiel apparaat kan werken met het gemak en de lay-out die hij gewend is van geïnstalleerde apps.

Referenties

http://jquerymobile.com

http://apex.oracle.com

http://blog.whitehorses.nl

Waardering:
 

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.