Bestand wählen
Merken

Case Study: Developing OpenLayers-based Mobile Applications

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
this man so this talk is a case-study of 3 different apps we made by using OpenLayers and we wanna share experiences pros and unicorns and actually you want to hear your feedback to have been the talk very has any other expense either way please share what everyone so OK and on so messag Ahmed take leader on a project called road and tighter here time Ghana his and 1 of our senior developers right rights and so will cover we have 3 different applications and there's an application we called orbiter is for data collection and we have a cross-platform version of it that used for gap and we get later on made another version and that's Strickland 100 version I will explain why and then a 3rd up we have is a pushpin our cross-platform version as well which uses form get so there were say orbited this is what it looks like and it's basically an open source and mobile application of for collecting data In disconnected environments so um ma project has a requirement for that required for a discounted by which would get into and then when we talk about the on the next slide this 1 so when we talk about push and this 1 is for people contributing points of interest back to OSM I will talk about this as well OK so add the ABA prior the application was developed under a project called rogue and them you need basically output assert acknowledges that there has been named to due shape if you go to Jewish 8 . org you can find all kinds information the project entirely free and open-source everything you see here is free and open source and we have all kinds of other stuff if you go to the uh rho GC TD and get help page the and going give you a quick overview of what I wardrobe years and so uh row site you shape that the overall goal of the project was to streamline collaboration on geospatial data between distributed partners but what does that mean are you have different organizations agencies and the government agencies volunteer groups etc. and that need to call and collaborate on could on basically collecting and and sharing geospatial data and and because of this and because also you could have different countries involved in case of a disaster so I wrote have to be free and open source simplifies export situations and things like that as well also has to be easy to deploy so we have scripts that basically stand up a note from scratch about 20 minutes on a good day stay in our 2 if you have any other issues going chance so i each partner what agencies of all the resource or so and they essentially have their own full-blown function instance as user react you know I'll all in a web client and all that stuff and also still be able to use these mobile applications to synchronize with it and then the sink with their own server then can sync with different servers that other organizations have so that's where the collaboration comes in and this prior part of that it's actually it's enabler major that is enabled as with the technological gets and basically this project funded and actually we developed and we know also in collaboration with Alice we developed and and you so and 1 The request big requirements of project again is it has to be fully operational ifyou have no network connected an arbiter which is what we're talking about here I want things we talk about here is the piece that does the data collection and on the field OK so that's what our looks like I we're going to bring up the simulator for the most
part works OK and we're going to create what you see here is an area of interest and it has a couple layers on it and let's go to just create a new feature you click the pencil you
select the layer that you want add a feature to and you drop at point B at the point line a polygon and when you say OK brings up to form and this form is it's actually at the drop downs and everything were using this scheme on server at to decide what the drop downs are if if you type this state that data time will bring up the corresponding which I'm also we have a special thing there is the name of the field is photos of photo
it puts a bond there where you can actually attach a photo to your feature or not a multiple we only have the single on this
in a later so reattached that going had safe
OK that's the users want confirmation that did you really take that know so we have to put an extra dialog there but now we are on the map with greater feature FIL that some options and actually catch of OK
so and we also have more videos about if a just wants to see how that works now we made some the use as training material and you can find and that link so why an area of interest so that if you go back to the
emulator you'll notice around the edges is little bit hard to see but there's a red border and that defines a Erevan interest and why
do we have to have that the thing is again we 1 working disconnected and environment so we have to
pull down all the tiles for all those levels and also get all the vector data for that area of interest get all in the more well device that way when and you know the user needs to use that they can collect data of the data and and go from there so why would you have to worry about it disconnected environment sometimes you have to work in very remote areas that's 1 a but also in case of of our project broke out because we're focused on the unit analysis and disaster relief and were basically the cases that a disaster happens and the network communication Austria overwhelmed actually damaged and down so and so the waterflood application is you essentially create a new project you specify an area of interest and you add more layers singing from 1 or multiple servers and die you don't say the project which sensors caching let's do that really quick were make
tiny project and this real quick so we have
to wait for to cash and you project name OK so we have 1 server now but that's about you see how it looks if you were to add a server if you were to add a server you say I have a DBMS him server you just give it the URL in your credentials and he and that's pretty much it the say at suburban cancel we already have a server
and induce servitude and
so from here we're gonna pick uh similarity to it as you need really the but right and on that screen we just passed and if you bring in a TMS layer a DBMS layer and you could actually selected to be a base layer if you want so instead of the default OS and background so some options here about you not gallon photos and their stuff soldiers go through this as so this is the step we have to pick
interest so I will pick something smaller weaker quick this says the 77
tiles only a few Ford at level by for 6 but then it has to do for all those levels up and because actually this is a subset of their project on this device that already has a resistance legality missing 1 so it should and superfast but just
speaking you have a big area at particular while to download for sure so OK alone so is correct slides OK so
am when you have data cache on a mobile device you have your own vector data now I have to deal with synchronizing right so you have 2 1 hold out new things and you have to push up new things so as let's go back to a pro the projects we had and so
if we let's see so you just created it which is great new feature I going to give it a tired and that's voted to drug
which in the same photo and
you wrote back to the map so there's a sick but on the lower left corner that you see that screen right
now that's because we have no or connectivity if there was no net network connectivity that would be red means you can think but when you go back to Europe you know uh your base Soria you know tell where we have Wi-Fi and you can then sink with the service let's that real quick and if you notice
the center of actually that had that feature feature didn't have this WMS symbol here is just around a circle so now once desynchronizes even see that at the
DBMS so uh symbol that's actually handled by the service in this question mark because of the drop down selection reaches but and those are all controlled uh could be different OK so so that's basically and how synchronization
works and so now let's scanner and when step back for a 2nd as I mentioned we make 2 different versions of this at the 1st version which I'll call calling arbiter cross-platform princes old and that's what you see on the screen is a slightly different than what you were just saying that that 1 was purely based on phone gap and OpenLayers to add a good good thing there was it runs with an Android and also runs on IOS and but and focus the absolute and you can see the menus or gray had this feature info self was transparent as is different and we were just looking at how we use Jake remote Walford interface and and I'm just straight up on gap and only special thing we have to get is this as you like plugin which is not standard but and there are a bunch of works of art that were quite well so OK and I am so water problems with so the biggest problem we had is was that G query mobile and caudal but didn't work consistently and well across all platforms so on all US perfect on iPhone just perfectly fine however is winter Android and we were getting these and just weird artifacts like this some pages which flicker an extra time were to Sullivan would take a lot longer to come up and across and actually some some devices the default color scheme would make it so you have a white background wouldn't bright green check mark was was actually possible to see so and so we did have a good experience there and and another issue we had is we get noticed that he when we browse around for a while something's that crashed and we couldn't we couldn't figure out what was going on back then you know we give it a good shot and the 3rd issue we had was that and the it just feels like a web so it's doesn't feel like a native application all US if you're in a web you if you just drag the screen kind moves and rubber bands back it does look like a solid native application but it's not a major points against that but it still hasn't feel quite a great so that then we decided to basically make the 2nd version right OK and we had a lot of user feedback and at that point I we had a lot users and for operational demonstration using it and and all use Andra's essentially so like OK as in 3 months when you know the 1 other thing working so we decided to go as a native as we can so we're so using OpenLayers too so when you're using any library that's JS you can only go so you can only use as source native code so I or you Y is in doubt yet actually saw and emulator was all native except a couple bonds on this that's always on the screen there so that was all in native Android and we still using gap why all again you were using a library that is js so now the from the JSI the to touch of that database or if you do any file access all at heart caching stuff for handling essentially in OpenLayers as so we need to be able to write to uh to foster some etc. so and say yes this is a set up for the new 1 OK and what problems we have here well on this implantation I we realize that and you know it's still would crash after a while if you start browse around the map de do which after that after a while the gap would crash and that when like Hindustan if implantation our UI stuff there's a lot of things uh native side and now we basically boiled it down to just open your browser on your Android device good to have a say site that is served up a lot images syllable is there will browse around rather will crash so it 2 kilowatt file figured out it's actually an entry book and it didn't get fixed until 440 which is quite recent and so and we have to put a workaround in there which was and we have to try to be like OK uh when you browse a lot we would keep track of how many times we've shown you start to hit the limit of a device would have problems and we will try to clear occassional no we literally have to tell the browser browse to blank page and do things over so it was this extra flashing their uh quite unpleasant but is actually the only way you could get around problems on Android and in the web OK but but that is really not that Abbas functional you know we've done 3 the operationalization with it but we still have wish lists the things would like to do and and by doing we get 2 q 9 and q naif anybody has any other experience on these please feel free to chime in what is provision in so let's say you have 20 devices and and you need to get all 20 devices have it giant chunk of area I catch hiding provision to well you could create a new project on every device with their area of interest weight for to catch that it's not been worked out nicely so that we essentially did end up our cocking deprived the folder and to all of them directly use a DBN or exhibited up use air droid or as a combination of some of them were good answer ways bands are ways but that's how we've gone by that still needs a better solution and the other thing is cashing should should be improved and you know when you start the 0 7 as server it could take a 2nd fertile and you get rid of smaller variates still could hit 40 thousand houses so he's so and you need to be able to handle 40 thousand thousand much easier we have plans for that but that is still this 1 thing need improvement on the 3rd 1 is symbology when disconnected OK so as soon as you have 4 5 layers or even 1 layer with a lot of different symbols and what you do when you disconnected and you can rely on the DBMS coming in I we have and as you might have seen the other 2nd uh uh the emulator real quick of we have different colors be somewhat later you're dealing with so that gives you
way of knowing at least what it is and we bring
this up to say which 1 is in which also those all in same layer but accept the Highland 1 but but that still isn't a quite solve the problem fully and in presence can be a fair he has to be 1 as the next we
have switching between base layer so let's say I have a device with 2 applicant are 2
projects on their each 1 caches different and base map and it should be easy to be able to switch between them because you spend all this time getting it on the device we should have to go add a layer removal layer to be able to just switch between so we want make it so that you can easily have switched the base not to be a new that filed 1 on the device if you don't have a tile for particular area that's finally the blank but that the user can at least easy switch between so and and also the last 1 is how to support for multiple platforms well we started with purely form gap approach because it be nice to be on I O S and also be an Android but now we have 100 solution we haven't had the resources to have an eye for an hour I was solution as well and that's where we stand still today so I if we want and I a solution if you have the resources you want develop native 1 party and and that side as well so and if not if that's not the case that way out the push 1 here will get to in a 2nd and you could still tries to components of our I so this is now a pushpin 1 so what pushed is that which was for basically contributing points of interest directly to us as spatial networks they have uh did they make their of the native IOS version and there wasn't a hundred version so in our spare time here and they're like OK we can we can make a project make it open so that's that I get help your by away a feel free to go there Deledalle play with that contribute back and so this 1 uses OpenLayers 3 and by the time we were to poke a reporter with this earlier at this summer policies in quite it's been a stable state as it was earlier so we decide to like just go with that is actually a police is much lighter than L 2 so and so and and we're using bootstrap the at other 1 the 1st app we made was using G query and an iPhone gap combination did not work well now problems might have been resolved by known dispersions however bootstrap and OpenLayers 3 and and phone gap that overall the defined there's no me uh massive issues that we notice and OK it the so I what problems is this 1 here well this is the cross-platform 1 they have the 1 thing that we've noticed is that the map is not as smooth as it is on our web browser and a quite honestly does it can use some investigation to see exactly what's going on and what is not a super smooth and also it still feels like a web app a not a native at and and you know you you don't really know what the differences on this you have the native version and then you have their full gap 1 and then you can start to be just doesn't feel as a solid but not that it's necessarily back as so what our recommendation is that if you're considering making a of mobile device or overlap uh with OpenLayers or with phone gap in general if you try decide if you should go native worse stick gap were so good at URL for work this is it's not too bad to build it build it run on android run it on all US you can see cross-platform how it is and especially works guys already have the uh solid IOS implementation 1 in native 1 run that compared and that we can try to decide which way would work for you again if you a limit on resources you can maintain 2 applications and inform gap I even if there's some things that they're are crazy about this can be a more practical solutions so and OK and I want to bring up the questions and by the way if anybody has any experience either way that you think can help everybody else by all means pills please filtering and give you a microphone and the yeah you said that the maps word as smooth on the devices neuralgia can you tell us what you meant by smooth should so I feel as well as when it comes to the mapping applications looking at the 1st the most important thing you want 1 of map that slipped right users when his school around its mood accelerates right and kills right that's just 1 of the things I notice is not as smooth as I would like it to be now had to be fair at that does need some investigation just in nature is not something an orange that is a set the the uh the pushpin app which is done in our free time here and there and so we haven't been would it a whole lot of time but as but but again the good news is if you are considering is I with phone gap downloaded install it you can spend a little time trying to figure out what's going on there I would even say if you want to leaflet by all means which that Abbas is already there switch out but leaflet in there you can see how right how well it runs out of love to be able to tell you that we leave later was this way or it's the same resources better so that's question time any if you have no questions whereas if have questions and approach and up but as anybody have any experience in the way that you think can benefit other people yeah should on the long bond model in this is but we don't have so and on working on excess what time is it and OK to acquire here I extend thinker all so all the Asher actually and we like what is the pushing the real quick so this is the annular again let's go ahead and and the impression that a quick yeah who could you learn a little bit more detail about the logistics of synchronizing data especially with like multiple clients in dealing with collisions the mean have OK so on the mobile device which is how users skew what they're still like the micellar database were bring all the vector features we put it there you edited reply get that OK theory's been worked on a when you go to synchronize with the server efforts will be pulled the features down using WFS we push it back using the FST so what we do is we going to hold on the data and you changes get k then you we would we push changes back now on on our servers were using duty gets is something very close similar to get an idea does version control as so but for mobile devices because we don't want to make the user have to deal with conflict resolution on a tiny screen we actually went with the last 1 wins and however and however on our web clients and all these things it's a full-blown using and you get and also when you sink across different partners in different servers and when you have conflicts and it actually brings up shows you what feels are in conflict just a three-way merge type of thing and you can see all the history in a lot of stuff that so of any other questions it the so in the 2nd version of the arbiter you said you're still using some phone there but not entirely I'm curious like native controls on the action bar for example are those generated through phone and also to do on did you explore the option of just using native of with with you rather than using fungi and putting open letters in in the web view so um so yes or or actual or menus and everything you see that were actually we kept everything all the you Y is on the negative side and and that's it and the only ones we have on the map or essentially G query coupled ones presume in and zooming out and but you're you're wondering if actually just as shoving dead Opel is directly web you have so essentially 100 by a happy by yourself express will buy a chance earlier so that what is what you see here that's essentially what's going on because and it's you know the API IBCs JS so your running at its usable gap and still running in a web views so have a less anybody else has any anything to add to it that's pretty much essentially what's what's going on so something like that anybody else anyone else OK so did you show that would look at that time is an hour so what this OK but there is it's almost time for us and if you have any questions please let us know and actually I could use a couple minutes here guess will who's right now developing of mobile app using a by either a leaflet oracle as fencing enhancement chance OK salt then thereafter is there was as yet sometimes there has you express catalogs of our the the the I have been working with this for 3 months now and the states quite from and I think that's responses so when you are the pinching them up this quicker to argue the alleged 3 of them by on that you know it's it's a that the maintenance of the system of fire eurostat if you do pull down there if you pull duple on the push been out to try see what's gone outside in price but we're time triggered to borrow so that's important feedback that anybody else want to add a comment anybody else have been very good expander about expanding share OK None non-imperial sunspots ahead I think you're much I guess thank you
Rückkopplung
Subtraktion
Web Site
Punkt
Gemeinsamer Speicher
Selbst organisierendes System
Browser
Versionsverwaltung
Gruppenkeim
Kartesische Koordinaten
Synchronisierung
Gerichteter Graph
Computeranimation
Homepage
Datensatz
Bildschirmmaske
Dämpfung
Diskrete Simulation
Skript <Programm>
Stromlinie <Strömungsmechanik>
Softwareentwickler
Funktion <Mathematik>
Metropolitan area network
App <Programm>
Lineares Funktional
Shape <Informatik>
Datennetz
Open Source
Orbit <Mathematik>
Portabilität
Rechenschieber
Arithmetisches Mittel
Kollaboration <Informatik>
Datenfeld
Rechter Winkel
Mereologie
Server
Projektive Ebene
Information
Programmierumgebung
Message-Passing
Instantiierung
Adressierung
Punkt
Vektorraum
Nummerung
Marketinginformationssystem
Sichtenkonzept
Polygon
Computeranimation
Videokonferenz
Bildschirmmaske
Datenfeld
Flächeninhalt
Digitale Photographie
Mereologie
Datentyp
Server
Tropfen
Gerade
Aggregatzustand
Mapping <Computergraphik>
Multiplikation
Digitale Photographie
Computeranimation
Konfiguration <Informatik>
Bit
Wellenpaket
Vektorraum
Einfach zusammenhängender Raum
Binder <Informatik>
Pi <Zahl>
Sichtenkonzept
Computeranimation
Videokonferenz
Flächeninhalt
Flächeninhalt
Emulator
Demo <Programm>
Telekommunikation
Datennetz
Betragsfläche
Dimensionsanalyse
Kartesische Koordinaten
Vektorraum
Computeranimation
Übergang
Flächeninhalt
Parkettierung
Projektive Ebene
Flächeninhalt
Programmierumgebung
Demo <Programm>
Leck
Caching
Server
Flächeninhalt
Projektive Ebene
Computeranimation
Caching
Adressierung
Digitale Photographie
Flächeninhalt
Ähnlichkeitsgeometrie
Default
Computeranimation
Touchscreen
Konfiguration <Informatik>
PROM
Caching
Teilmenge
Einheit <Mathematik>
Parkettierung
Flächeninhalt
Projektive Ebene
Computeranimation
Schlussregel
Übergang
Caching
Rechenschieber
Offene Menge
Caching
Flächeninhalt
Projektive Ebene
Vektorraum
Computeranimation
Demo <Programm>
Arithmetisches Mittel
Einfach zusammenhängender Raum
Mapping <Computergraphik>
Offene Menge
Dienst <Informatik>
Gewicht <Mathematik>
Synchronisierung
Datennetz
Rechter Winkel
Computeranimation
Touchscreen
Dienst <Informatik>
Adressierung
Kreisfläche
Synchronisierung
Einheit <Mathematik>
Verschlingung
Trennschärfe <Statistik>
Symboltabelle
Tropfen
Synchronisierung
Computeranimation
Humanoider Roboter
TVD-Verfahren
Punkt
Browser
Versionsverwaltung
Maschinensprache
Computeranimation
Homepage
Perfekte Gruppe
RPC
Gruppe <Mathematik>
Dateiverwaltung
Figurierte Zahl
Default
Schnittstelle
Nichtlinearer Operator
Mobiles Internet
Güte der Anpassung
Systemaufruf
Abfrage
Nummerung
Humanoider Roboter
Quellcode
Rechter Winkel
Server
Projektive Ebene
Information
Rückkopplung
Web Site
Subtraktion
Gewicht <Mathematik>
Schaltnetz
Automatische Handlungsplanung
Systemplattform
Mailing-Liste
Benutzerbeteiligung
Weg <Topologie>
Programmbibliothek
Inverser Limes
Bildgebendes Verfahren
Touchscreen
Green-Funktion
Plug in
Mailing-Liste
Symboltabelle
Elektronische Publikation
Portabilität
Mapping <Computergraphik>
Flächeninhalt
Kantenfärbung
Emulator
Leck
Mailing-Liste
Kartesische Koordinaten
Benutzerfreundlichkeit
Extrempunkt
Computeranimation
Stereometrie
Bit
Punkt
Gemeinsamer Speicher
Natürliche Zahl
Browser
Web-Applikation
Bootstrap-Aggregation
Versionsverwaltung
Kartesische Koordinaten
Eins
Client
Vorlesung/Konferenz
Bildauflösung
App <Programm>
Sichtenkonzept
Datennetz
Datenhaltung
Abfrage
Ein-Ausgabe
Konfiguration <Informatik>
Arithmetisches Mittel
Softwarewartung
Server
Projektive Ebene
Information
Aggregatzustand
Rückkopplung
Subtraktion
Stoß
Schaltnetz
Gruppenoperation
Mathematisierung
Implementierung
Online-Katalog
Physikalische Theorie
Bildschirmmaske
Benutzerbeteiligung
Informationsmodellierung
Datentyp
Endogene Variable
Inverser Limes
Zusammenhängender Graph
Logistische Verteilung
Glättung
Touchscreen
Dispersion <Welle>
Systemplattform
Physikalisches System
Vektorraum
Portabilität
Mapping <Computergraphik>
Flächeninhalt
Parkettierung
Caching
Gamecontroller
Wort <Informatik>
Verkehrsinformation
Expandierender Graph
Orakel <Informatik>

Metadaten

Formale Metadaten

Titel Case Study: Developing OpenLayers-based Mobile Applications
Serientitel FOSS4G 2014 Portland
Autor Mesdaghi, Syrus
Zusy, Kevin
Garner, Tyler
Lizenz CC-Namensnennung 3.0 Deutschland:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
DOI 10.5446/31702
Herausgeber FOSS4G, Open Source Geospatial Foundation (OSGeo)
Erscheinungsjahr 2014
Sprache Englisch
Produzent Foss4G
Open Source Geospatial Foundation (OSGeo)
Produktionsjahr 2014
Produktionsort Portland, Oregon, United States of America

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Developing an application with the capability to view, collect, and edit geospatial data in connected, limited connectivity, and disconnected environments was a necessity for the ROGUE project. The first version of the application was developed using Cordova/PhoneGap, with everything written in html, css, and javascript, using OpenLayers 2.13 as the mapping library, and jQuery Mobile for the UI. Due to various UI concerns, we decided to implement another version utilizing as much of the native Android API as possible. We also developed a third mobile application using OpenLayers 3 as the mapping library, and Bootstrap for the UI. This talk will cover our experience developing these three geospatial mobile applications, specifically the differences between the approaches we took and any challenges that we overcame.
Schlagwörter mobile
openlayers
geoserver
bootstrap
android
rogue
cordova
phonegap
openstreetmap

Ähnliche Filme

Loading...
Feedback