 Well, hello everybody. I think it's time to start So if you're ready Let's get started today I will talk about route planning with Drupal and open layers and also about Creating mobile apps with phone get this is a real world example. This is an ongoing project. So I Want to share some lessons what we learned I'm Peter for now I'm the CTO and the co-owner of the brain some dot com digital agency We are also Drupal services provider. You can find us and the Drupal org website to we work from Bratislava and Budapest from Slovakia and Hungary we got offices there so How we made this special? route planner website and Mobile apps for an oil company at the end I Hope there will be time for questions but if you have got any Questions in detail you can send me an email. There's my email address Okay, what is this all about as you can see on this Screenshot here's a route planner website At the top there is a station finder functionality you can switch to truck mode from car mode you can add waypoints and There is a planned route already with POIs with fuel stations along the route and a customized pop-up that shows Particular Fuel station and there is an add to route button there Okay, but see it in action Okay, that's typing our starting point Actually, this is our office in Budapest The destination will be this congress center in Prague we got the planned route here and You can see the different icons of the different brands of this oil company along the route I Had to pick up my colleague or at two in our office in Bratislava. So let's add the waypoints and Let's see the main feature adding fuel stations Of course, we got route options different for car routing different for truck routing. We got textual routing directions there And after this we select fuel station and As you can see there is the add to route button and it works. There is a new waypoint in the planned route Okay So that's it. This is the most important feature of the site. Of course, there are many more GPX export and loading saving routes and so on But what we will cover today The special requirements of the client There are some there were some really interesting requirements Choosing the right tools And some details about the website how we deal with different routing engines I will show up some special features some challenges that we faced and we solved like the stations along the route and a little Overview about the developing of the mobile apps for iOS and Android The technology used for that hub is that's connected to the website and What kind of offline features? We implemented for those mobile applications Okay The first requirement Of course this route planner website where you can add fuel stations as waypoints to the planned route Okay, so you saw this the mobile apps for Android and iOS with offline mode there was a strong need From the client for offline features because this company Runs fuel stations in many countries in Central Europe and when a driver passes the border and loses its own Provide or mobile cell phone provider The internet connection becomes really expensive the data roaming is is an expensive thing in Europe so The client wanted to mess many offline features as we can do for example search for nearby places of course fuel stations or Load the route planned on the website And after that you see it in offline mode With the mobile application Also, we had to create eight language mutations for each country's Yes, and there was a question that are we able to do this in three months But this is not the end of the requirement list Because we had to create truck navigation to because one important target group of this company and its products are truck drivers or The truck companies and truck driving is truck navigation is a whole different thing Especially with tall calculations. They wanted tall calculations to be implemented to the tall calculations are absolutely different in each country and Not just the rates, but the whole thing the whole algorithm of it. So this was a nice requirement Fuel consumption calculations and as I said offline mapping with the mobile apps if it's possible And the question remains the same are we able to do this in three months? Okay We started the background research are One of the strongest candidates for Mapping and routing was Google and its Google Maps API and Google directions API Google has an enterprise version Not a cheap thing, but it's working for these two The alternative is OpenStreetMap and service providers Built on top of the free data of OpenStreetMap like MacQuest We found some interesting alternatives to like this OpenStreetMap track routing which was developed on the Haydale Bay University For track routing features and this is OpenStreetMap base 2 and the Routino engine, which is a fully open source Routing engine written in C you can Install it on your run it on your server and interconnect with it with the CGI script Because of the strong lead of offline mapping we started to discuss with certain navigation software developer companies too But their license conditions were just not fit this project so the subject that I go and Mac Factor went out and finally we found a render Who just finished its implementation of? track routing engine based on OpenStreetMap data and they had a Total calculation engine too. So this was the safe port and About the concept In this short time frame We wanted something to work on every platform. We didn't want to bother with Objective C or Java on the applications and and The only thing what works everywhere nowadays is JavaScript So the heart of this application is written in JavaScript which works well on the desktop With great open layers library Which is also really greatly integrated to Drupal the Drupal OpenLayers model is It's really great and On the mobile On the mobile phones we Are using phone get this is not our first project where we used phone gap and It's already proved for us that it is working and it's doable this project in with this Okay, as I said the oil company the client Has got two main target groups Car drivers and truck drivers, so We had to implement or integrate two types of routing engine because The truck navigation is so different and Google doesn't provide truck navigation features and and of course there were the Requirements for that tool calculation to Okay Let's start with the classic approach Somebody already wrote this in a module. We just will find it on Drupal or There will be a contra module. We will extend it and customize it and and it will work But this is not that case There is no working routing Module for Drupal. It was a really big surprise for us There is one the root planner module, but that's a simple Integration of the Google Maps libraries to Drupal only on the client side So it's not designed to work with open layers where we can mix up different map providers and Custom features easily and and it hasn't got Backend features such as saving the route or loading the route so It was not usable for us Okay, so we had to face this The truth we will have to write code and And there were some question more questions about the special gear special features that Should we use post this instead of my SQL? We really need it there is a Geospatial distribution of Drupal the character. Oh, it's build of the top of this this Postgrease database really needs these special tools or not I Will see you later Okay Choosing the right tools for car routing This was the busier part because there are several quite good routing engines with API's for car routing Finally we picked Google Maps because It's geocoding. It's the smartest you can just mix up the Ordering of the street name with the country name and everything and it just works You can even mix up languages and it just works. So it's really a clever thing The Google API's are really fast and stable and the API is Very well documented and widely used so We thought that everything will be on the Google Okay Our second candidate was mapcast It has bigger usage limits. Yeah, I have to mention this because maybe if you start a mapping project So I recommend that read carefully the Google License policies and usage limits because the enterprise version is Really expensive things. So if your needs doesn't fit the free version that Maybe not the Google Maps is your choice But mapcast has bigger usage limits has much better license conditions Because it's based on the free open street of data But at the end its language support was just not enough for us And it's very difficult to translate an API So we decided to use Google Okay truck routing the main difference with truck routing is that trucks are not allowed to Go everywhere where cars Can and It is a really rare thing There are not so many truck routing engines on the on the market Especially with tall calculations for Central Europe that has a really big Big big big challenge what we face but fortunately at the end we found this vendor who had everything and and Had the it's their API had the answer for Questions like how much will I pay for my 11 tons heavy five axles truck from Frankfurt to? I don't know Croatia So here you can see that we have to first Put in these base parameters and the vehicle type the weight the number of axles and the emissions standard and after that There are some specific questions about some countries And it even depends on This is night or day and so it's very Complicated, but it works together Plant this API because they did not have one So we made the specs and they developed the rest API for us So it's now similar to Google to in a interconnect with them Okay Choosing the right tools for mobile there are several questions because The mobile application development is is not finished yet. It's currently under heavy development There were some big questions will open layers work on mobile phones will be the user experience Okay, or not or should we pick just Google maps for the mobile applications and How about those scary offline features needed can we store Maps with a phone gap based html5 application Google's license condition doesn't allow this You cannot save a Google map So when it comes to offline mapping You the best choice is free open street not data and the The services built on that there is a great javascript library the leaflet and There are some service providers like map ties with Working APIs to download the map data Okay, finally Ah We declared that we can do this. Okay But we discussed with the client about some of their requirements and we declared some part of the project as research and development The main difference between research and development and any other kind of project is That it is that a research and development project can state that it is not possible to reach the goal of the project in the predefined conditions I mean in deadline or budget so These becomes became nice to have features, but we Absolutely try to solve them and we will see That with success, okay Let's see a concrete example how the website works This is the station finder feature Where Drupal and views and the geo field Module showed us that their powers because This functionality is built without writing custom code these are Just exposed filters in a view there is a proximity search Filter and some other filters for taxonomy terms of the fuel stations. So This is a great example that the open layers the views and the power Drupal integration Okay With the website Routing engine integration that was a different story We had to build a new module we call it Open layers directions and it's built on top of open layers and geo field I Have a secret hint for you It was hard to find the documentation of the Great open layers Drupal module. It's located in the open layers paradox in the PHP file Not not in a wiki non-tone You can't find it with Google, but it there is there and it's a great documentation so This code snippet Shows how we declared new custom layers Which then Up here appears in in the administration interface of the open layers so if you got this module enabled you will get a checkbox on the map page that enable Google directions and There are also new layer types Google direction hybrid normal physical and satellite Okay Another example with code this is how we are dealing with the two types of the API's as you see this is JavaScript to If we are in car mode we are building a Google directions API request here and There is the other part of the code where we are starting to build the request for The safe port API So the control object the the business logic team in Missing JavaScript Okay, so as I said for track routing we find the correct service provider we were able to integrate Track navigation and talk calculations to so this was a research and development success and And then also as I said with the power of open layers Our application logic remain the same why we could easily switch between the two map Providers because the safe for the truck navigation is this open street that the Google of course uses Google Maps So this is how we solve this Okay Now let's see an interesting problem and a solution for it This is how the stations along the route feature works I Was a really little bit scared about this feature because I thought that we will have to implement some kind of Geospatial database and complex queries and that will be a performance killer to run a query for each track point of a root But Fortunately at the end we found this library. This is a Google Maps utility library and there is this great approach this algorithm simply provides you boxes bounding boxes or rectangular boxes and Any point with in the within the specified distance of the route is Guaranteed to be guaranteed to be in one of these boxes and also the number of the boxes is minimized so in this example you've got nine boxes at the end and With those nine rectangles you can just build a simple SQL query with indexable wear conditions and Run it really quickly. So this in performance. This is a really good approach and simple approach and we That there is no need for special Database this is simply runs on my SQL or marry a DB to So this was the along the feature along the route feature and another interesting Point was the rendering of the polyline was what Google returns Because we are using open layers Which wraps the Google Maps? APIs we had to create open layers object for drawing the polyline of the route This is okay But every example of the on the web says that you have to use this over your path or over your polyline in the response object of the Google directions API But there are just not there is just nothing of information that this is very very rude as you can see on this screenshot if you just Draw lines between those points the the lines are not following the route the road so So this was a little bit made us a little headache, but after that We found that there is the Data for the for a high resolution polyline in that response object But it's just a little bit high didn't split to pieces and and you have to Push it together there is there it is in the legs steps in the past Attribute of this and it contains 40 times an average 40 times more points than the overview play line So it's it's absolutely perfect after that. So this is the patch what we use that we wrote And the end and we solve this problem Okay Another thing what I have to mention that we had to create a Facebook integration of this website to This is not a very hard thing you can just make it with a different theme with proper width and And you have to enable HTTPS For for the website to correctly Integrated to a Facebook page Okay So I this is a Summary of the modules what we used the most important models what we used and created during this project Topic by topic For mapping we used open layers and geo field we brought new open layers directions model on top of these For the multi language we use the entity translation What is the way that droop late works to? We had to write a small model Custom custom model for the word the import database for the taxonomies By dealing with the data import we used feeds first we got a custom oracle SQL dump We needed to import it to Convert it and import it to MySQL write SQL queries select For producing a Dynormalized big CSV and and that CSV was imported with feeds We had to write small Custom model for converting the GPS coordinates, but the feet Did the work? Okay At the team layer we use the very nice JavaScript templating library it's handled bars We already used it. It's it's a very nice way to separate HTML from JavaScript when you write many many JavaScript code It's also supported by the Drupal 8 And and it works together with backbone gs So it's really a modern approach and a very clean Approach to separate this the presentation layer in JavaScript We just brought a simple integration module for this JavaScript library After that we had to write a Formatter for the custom brands of this oil company too Okay But other tools we used by Building this site for version tracking feature management testing of course we used GIT for for the version tracking features module for exporting every Every settings and in views and and features from the database and to make it manageable with with Version tracking and so on We created features in four topics the mouth language and the root planner the team and user management extension to because the client had a special requirements about the users they got special Customers we had to import them we used rules for this and The rules were exportable with features To okay With for testing we on the website. We use the Selenium ID. That's a this is a Very simple Firefox plug-in You can record sessions with it and define control points Conditions which when are true the test is passed Okay, so this was about the website and Let's talk a little bit about the mobile applications As I said, this is an ongoing development. You can see the versions of the splash screen here It's in progress. We have to build iOS and Android applications and if you If you haven't tried it yet, maybe you are a little bit scared about mobile application development but I send that Don't panic Phone Gap is a great tool for people coming from the web to start to create mobile applications and And it's really just like building mobile websites, but you got Much more features you can access the the device the special hardware capabilities of the device to so Okay, it's like building HTML 5 and JavaScript application But of course with the back end is different. You can't run my SQL and PHP on your mobile phone But you can integrate with Drupal through web services or Any other kind of thing and you can also use a storage Object HTML 5 local storage and so on which is a really wildly adopted and the HTML 5 local storage works on every platform And Additionally, you can even debug your code because debugging the Mobile applications is can be difficult But the base logic of your application you can even debug in your favorite browser if you use a phone get stream that HTML 5 application will just start in Firefox or Chrome and so on Also on When you'll do a little bit less application There is a simple way to connect the Safari's web development tools to a running Application which runs on an iPhone simulator and you can see the console and everything so it is a really familiar way to web development Also, it's easy to start with it. I There is a cloud-based solution to it's called phone get build It is a great way to start but if you don't have The best bandwidth or or just build building custom applications There are some limitation of the phone get build environment. I recommend to install it locally because it's faster and it hasn't got any limitations you can Use custom phone get plug-ins even write custom phone get plug-ins and And as you see here in six lines if you are lucky you will got Hello world application for iOS and And then Android After you built it and installed everything what's needed. So the start is easy, but reserve two days for it because For example live as You have to install setup Xcode register on different development portals pay for Provisioning profile and after that you will be able to run your own development Application on your own device. This is how the iOS development works and The Android is a little bit simpler, but because of the many many many kinds kind of Android phones and tablets That is a lot more to do with the testing So after you install the SDK you have to set up virtual devices Of course, you will have to configure the test DK download Extensions to it after that you have to you can you can start the actual development and of course You will have to read those manuals and and Googling the final get the working in development environment Okay Let's see a concrete feature How we sold this loading the route the interconnection with the website. So once you Blend the route on the website at the first station you can save it For every route we generate a unique ID. This is a small ID All the most human readable small short ID And we decided to make this as simple as possible. So we did not implement Login or something like that you can this is Not really a sensitive information a route plan. So You can just Put in your root ID and After that simple adjox request HTTP get request Transmitted to Drupal we don't even use the services model or any kind of Rapper mechanism for this. This is a simple menu hook simple menu hook which returns the route Here I wrote Jason, but it's now XML it's a GPX format what's returned and parsed by JavaScript because the GPX is a interchangeable format for other Navigation devices too. So the website provides a GPX is Okay So about offline features The fuel station database Is stored in local storage because it's neat it needs to be updateable the initial data Is in a big JSON file and if the local storage doesn't exist at the application We'll build it from the JSON file at start up The current state of the offline mapping research and development task is that We are we are experimenting this Clyde made and map box and leaflet things but we think that in the First milestone this won't be implemented. Maybe in a later step But to have some offline features the nearest fuel station feature will work offline to just Textually so When you don't have an internet connection you will get a list of the nearest fuel stations from the local Fuel station database and if you have Interest connection you can switch to map mode Okay, so The current project state. I think this is a success because we the website is already done. It's it's Release candidate level. It's under acceptance at the client And the mobile app development is going out casting to plan Okay This is my Session You can find us on the web at Brayson.com or at Drupal org as a service provider, so thank you and Free fee to ask me some questions or send me the questions in email and please Don't forget to take the survey link And drop back home website, so thank you any questions The question was which version what we used it was a 3.0 0.0. I think it is the latest Could you please use the microphone there because Sorry two questions First the custom modules that you build like face tamper GPS and open layers directions Would they be are there any plans to contribute them back to the report at org? Yes, we are planning this because but now those modules are Very very customized for the client's needs. So we have to clean up the whole code and and separate the reusable parts From the custom parts, but yes, we planned this and and so and of course they are GPL License now too. So if you want to look at them, I can send the modules to you And the second question is I know phone gap evolved quite fastly in last year, but Apple is notorious for Approval of phone gap apps and HTML fobs apps in general. Have you had problems with getting your app approved? No, this is not our first phone gap project and and we hadn't got this kind of problems and I Read about a lot With this about this topic a lot and the problem is not really with HTML based applications or with phone gap applications from the Apple side The problem is Apple has really strict guidelines that have a mobile application should look like and work to If you just simply convert a simple website with phone gap They will reject it, but if you create Mobile application like user experience with buttons and so on This won't be a problem. There are a lot of phone gap in build applications on the app store. Thank you Okay, many more questions Thank you