Webbappar med OpenLayers och jquery Johan Lahti GIT-utvecklare Malmö stad ULI Uppsala, 3 oktober 2011
smap (www.smap.se) Samarbete sedan maj 2009 Kartramverk byggt på OpenLayers och jquery Gemensam server med GeoServer och PostGIS Totalt ca 15 personer 2 projektsamordnare 3 utvecklare 2 serveransvariga Kartadministratörer m fl
smap-produkter Malmö stadsatlas (årets karta 2011) Kristianstadskartan med flera Helsingborgs adresskarta Skånekartan Lunds stadskarta
smap-mobile
Bakgrund Malmö stads byggnadsnämnd har skaffat ipadar för att hantera sina handlingar Ökat intresse: anställda medborgare
Problem Mycket resurser att utveckla för alla plattformar. Helt nya språk. Hög ingångströskel. Flera språk. Objective-C Java
Olika typer av appar Nativa appar ( native apps ) Plattformens utvecklingsverktyg (API) Appcelerator
Appcelerator 10 ggr kortare utvecklingstid JavaScript Objective-C Java
Skapa en karta med AppCelerator 1. Skapa ett fönster var win1 = Titanium.UI.createWindow({ title: En karta', backgroundcolor: '#fff }); 2. Skapa en kartvy var mapview = Titanium.Map.createView({ maptype: Titanium.Map.STANDARD_TYPE, region: { latitude: 55.60, longitude: 13.0, latitudedelta: 0.05, longitudedelta: 0.05 }, annotations: [] }); 4. Kompilera Objective-C Java JavaScript 3. Lägg till kartvyn win1.add( mapview );
Nativ app med AppCelerator Data och attribut från WFS-tjänst
För- och nackdelar med AppCelerator (+) Nativa appar, snabbt! (+) Kort utvecklingstid (x 10) (+) Flera plattformar (+) Tillgång till det nativa API:et (kamera m m) (-) Inga polygoner (-) Endast vektordata (-) Begränsad kartfunktionalitet (-) Inget stöd för WMS-tjänster (endast GMaps)
Andra nackdelar med nativa appar Hård kontroll av Apple lång kontrollprocess Uppdatering Registrera sig som användare Endast Googles bakgrundskartor i Apples API
Olika typer av appar Nativa appar Plattformens utvecklingsverktyg (API) Appcelerator Webbappar
Webbappar
Webbsida <-> Webbapp
Varför webbappar? I Malmö stads policy förordas webbappar för att de: Stödjer flera plattformar samtidigt Är billigare att utveckla Fler fördelar: Versionsuppdatering Ej begränsad av telefonens API Länka från dokument, e-post, hemsida Visa på karta Bättre integrerad med kommunens övriga information Kommunens egna bakgrundskarta
Webbappar: Malmös peka -app www.malmo.se/peka
Webbappar: Glosförhör lahtitude.com/vocables/
Fler webbappar http://www.apple.com/webapps/
Webbappskartor
HTML5 Ny standard för att presentera data på webben (under utveckling och färdigt först ca 2022) Mobila webbläsare har gått några steg i förväg Nya taggar: <video> <audio> <canvas> Avancerade formulär: <input type= email > Platsbestämning ( geolocation ) Offlinedatabas (istället för kakor) Offline application cache (webbapplikationer offline)
Programmeringsspråkens utveckling Högre nivå / enklare 00-tal 10-tal Webbapplikationer 90-tal JavaScript, PHP 80-tal Python 50-tal 60-tal 70-tal C C++ Java 40-tal Assemblyspråk Lägre nivå / svårare Maskinkod/hålkort: Nollor och ettor
jquery mobile (beta) Ett bibliotek för JavaScript som imiterar telefonens nativa gränssnitt (GUI) Stödjer över 20 olika mobila webbläsare
OpenLayers JavaScript-bibliotek för att göra webbkartor Öppen källkod Stöd för flera datakällor och format Stöd för pekskärmar!
Metataggar m.m. <meta name="viewport" content="width=device-width, user-scalable=no, initialscale=1, maximum-scale=1;"> Stäng av möjlighet till skalning <meta name="apple-mobile-web-app-capable" content="yes" /> Möjliggör installation på ios-plattformar <link rel="apple-touch-icon" href= some/image/path/image.png /> Appens ikon för skrivbordet <link rel="apple-touch-startup-image" href="some/image/path/image.png /> Uppstartsbild
smap-mobile Uppstart Bakgrundskarta Med datalager Markera i kartan Mejla karta Sök adress Min position
Webbapp för ULI-besökare kartor.smap.se/mobile
Skapa produkter i smap-mobile config_malmo.js config_lund.js config_hborg.js config_krstad.js smap - mobile config_felanmalan.js config_skane.js config_gatukontoret.js
Ansluta till produkt http://kartor.smap.se/mobile/? config=configs/config_malmo.js config_malmo.js
Config-filen i smap-mobile Väljer ut: Verktyg och deras konfigurering Lager Kartans projektion och utbredning smap - mobile
Slutsats
Fördelar med webbappar Kortare utvecklingstid och lägre ingångströskel Stöd för flera plattformar (tekniken är dock ung) WMS-tjänster, egna bakgrundskartor (+polygoner) Länka till karta Snabbt att skapa nya kartor på beställning Uppdatering
Nackdelar med webbappar Långsamma (än så länge ) Fungerar inte alls på långsammare telefoner Kommer inte åt telefonens funktionalitet (API) Ingen åtkomst från AppStore/Android Market http://www.apple.com/webapps/ Offline (men det finns lösningar)
Slutsats För kartor fungerar det tillräckligt bra på snabbare enheter En teknik som har framtiden framför sig. Åtminstone för mindre krävande appar.
Slutsats: Fördelar med webbappar Oberoende av AppStore och Android Market Ingen kontrollprocess, inget utvecklarkonto, versionsuppdatering Ej begränsad av telefonens API (t ex editeringsverktyg) Plattformsoberoende, fungerar även i webbläsare Kortare utvecklingstid Samma tjänster som för webbkartorna WMS, WFS, Tilecache (Geoserver, PostGIS) Egna bakgrundskartor! Länka från dokument, e-post, hemsida Kan massproduceras
Fördelar med webbappar Inget utvecklarkonto Behöver inte godkännas av Apple Versionsuppdatering Ej begränsad av telefonens API (funktionalitet) JavaScript, HTML och CSS Kartstandarder WMS, WFS Fungerar i webbläsaren också Nå kartan från hemsidan via länk (t ex från hemsida eller mejl)
Lyssna även på 11.30
Länkar Webbapp för ULI: kartor.smap.se/mobile/ Malmös webbapp: kartor.smap.se/mobile/?config=configs/config_malmo.js smap-samarbetets hemsida: www.smap.se Bok: Building iphone Apps with HTML, CSS, and JavaScript (Jonathan Stark)
Konsult!! www.malmo.se/karta