Developing Native Mobile GIS Applications with JavaScript

Alper Dincer and Kemal Seyrek of State Hydraulic Works share a sample mobile GIS application. http://video.esri.com/watch/1227/developing-native-mobile-gis-applications-with-javascript

Video Transcription
00:01 I'm glad to be here after three years. 00:03 It's very hard to come here because almost 24 hours travel is for us. 00:11 We are from Turkey, Ankara. We are working at State Hydraulic Works. 00:16 Me, Alper Dincer, and my manager, Mr. Kemal Seyrek. 00:22 First start with who we are, DSI is the State Hydraulic Works. 00:27 It's a governmental agency. 00:28 It's responsible from all kinds of water-related activities. 00:33 And we have been using GIS since 1999 and nowadays, we are working on mobile and web applications... 00:43 ...especially...I am specialized in mobile applications nowadays. 00:49 And, who am I? 00:50 I am an ordinary geoweb developer. Lately, a mobile developer. 00:54 Works on GIS and LBS projects. 00:57 It may be some remember, I am the winner of DevSummit Mashup Challenge 2009 with ExtMap Framework. 01:05 Then I develop iExtMap for iPhone as a side project, which is similar to today's topic. 01:11 It's based on Google Maps API. 01:13 It's a hybrid application. 01:16 And then I develop ExtMap Touch with Sencha Touch framework. 01:19 It's a fully web application which consumes HTML files possibilities like local cache and geolocation. 01:34 And why GIS? Especially this is a classic, but I am skipping this, because we are all GIS guys.

01:42 And why mobile? 01:43 Until 2008, web is the emerging market. 01:46 Everyone is starting to get on the web. 01:49 But, in 2008, with the iPhone, Apple starts App Store and revolution started from web to app. 01:59 And now mobile is the king. 02:03 There are lots of mobile sessions through DevSummit, and some of the sessions.... 02:09 ...people ask that, what are you looking for. 02:13 People who have smartphones have first look at for the App Stores. 02:17 If you're on the App Store or markets, your findability is more than the web applications. 02:27 Why mobile GIS? 02:30 Your location with sensors. 02:33 Most of you guys have smartphones, tablets, and these have GPS sensors, accelerometers, and compass. 02:45 Those sensors are all data for the GIS. 02:53 You can easily get data or analyze data whenever and wherever you are with mobile devices. 03:00 And if the application is properly designed, it's very user-friendly. 03:08 I think sometimes we have a problem with the design because one which states mobile GIS... 03:16 ...it should be mobile. 03:18 It's not a transferring all the functionalities from desktop to mobile, because they are two different things. 03:26 Mobile should be focused on the job or the task. 03:31 It should be and it should be doing good. 03:38 And I think this is very important slide of my presentation. 03:44 What's development path of mobile? 03:47 I think you will hear these kind of slides in developer's conferences. 03:53 Which platforms to cover? The first question. 03:58 iOS, Android, Windows Phone 7, or BlackBerry. 04:02 I think this is related to your projects. 04:05 If you are developing an enterprise application and you know that's all the audiences are

using iOS devices... 04:14 ...iPads or iPhones. 04:15 Then you should go to the iOS spots. 04:19 If you have a public application, then you should at least cover iOS and Android... 04:25 ...which has almost 80 to 90 percent of coverage. 04:30 And which type of application? 04:33 There are three types, maybe three and a half because the half part is in this presentation. 04:42 We have three parts--native, web, or hybrid. 04:46 Most of you know that native is developing with the SDKs, that's iOS, Android, [unintelligible]. 04:55 You should write in their own language. 04:58 If you want to write an Android application, you should know Java and its platform. 05:07 Or if you want to write on iOS, you should know Xcode and Objective-C. 05:12 I think they're very hard to learn, especially the Objective-C parts. 05:19 And web applications, if you come to web applications, they are just web apps working on devices' browsers. 05:30 They just consume some of the devices' APIs. 05:34 But in native, you have all access to all APIs of devices. 05:39 And hybrids, nowadays, there are some frameworks like PhoneGap. 05:46 Most of you heard it. 05:48 PhoneGap is some kind of wrapper that gives web developers to access device APIs... 05:58 ...so you can access the compass or phone book or other. 06:06 The native APIs, that you can't use in the web applications. 06:12 And if you come to source, of course, every project has source. 06:17 So you have to [be] really careful about money, people, and time if you cover different platforms. 06:25 And if you ask me which way is the best, I think native is the best way on all platforms, but, there's always buts... 06:40 ...you should have enough sources for all platforms if you go native. 06:45 You have to deal with different code bases, different coders, and more time and more money

needed if you have more platforms. 06:57 So what are we going to solve this problem? 07:05 Solutions are a hybrid approach, especially our solution is not fully hybrid because it's more than hybrid... 07:12 ...because hybrid applications most of time uses just a web view inside some APIs, it access some APIs. 07:25 But this time we are using Appcelerator, Titanium Appcelerator, which I will explain later with Esri JavaScript API. 07:37 All coding can be done via JavaScript, CSS, and HTML, and output, except mapping part, is all native. 07:44 You will see later in the demo. 07:47 Let's look at what's Titanium Appcelerator. 07:50 It's an open source framework. 07:52 It builds native mobile applications, and it uses JavaScript. 07:57 Maybe our question that how this can be happen, possible. 08:02 It is some kind of virtual machine on all platforms, especially nowadays, just iOS, Android... 08:10 ...and BlackBerry has supports for this framework. 08:16 And this virtual machine, it transfers your JavaScript code to native code. 08:24 So finally you have all the native components. 08:27 There is no such web view. 08:30 If you have something, user interface, that's all native. 08:36 And extendability, it can [be] extendable via modules. 08:39 Modules can be written in their own language. 08:43 If you want to access Bluetooth and if there is no support in Titanium Appcelerator... 08:50 ...you have to write in Objective-C and export to extend your framework. 09:00 And support there, both community and commercial support. 09:06 And how to code in Appcelerator. 09:08 Here, first, we create a window. It's there, name space--Titanium.UI.createWindow... 09:16 ...with background color red. 09:18 We open it in full screen, then we create a label...

09:22 ...with text "Appcelerator," then we add label to the window. 09:26 This is just a simple one, but it's something like that. 09:31 Why Appcelerator? 09:32 Seventy percent of code works in all platforms. 09:36 I say it's 70 because, as you know, that different mobile operating systems have different UIs. 09:47 For example, Android has Back button for going back, but on iOS you have a Back button at the top. 09:59 So this kind of user, different user interface, differences don't work in all platforms... 10:06 ...but all the logic parts, accessing databases, accessing accelerometer, accessing GPS and whatever is all... 10:15 ...works on all the devices with the same code. 10:19 There is no need for extra developers. 10:21 One can develop both Android and iOS and also BlackBerry applications. 10:28 And you just have one code base. It's all JavaScript, and you have just one code base to follow. 10:37 And at the end, you still have native components you will see later. 10:42 And all things have costs. And why not Appcelerator? 10:47 There are still missing platforms such as Windows Phone 7. 10:52 Maybe in the future it will come, but nowadays you have just stuck in three platforms... 10:57 ...but I think it's also the three platforms are the emerging platforms. 11:04 And another con is, there is no user interface builder. 11:09 If you want to build your interface, you have to code all the things, x,y's and widths and lengths. 11:18 But you will learn indeed in later when you deal with it. 11:26 And the last con is you should wait for new APIs if you don't have deeper knowledge. 11:33 As I explained in previous slides, that if you know Java or Objective-C, you can develop your own modules... 11:43 ...but if you don't know, you have to wait for Appcelerator to expose the APIs you need. 11:50 Okay. Now it's time for a demo. [Inaudible]. 12:02 This is our development platform. 12:04 If anyone use Aptana, this is similar to Aptana because Appcelerator bought Aptana in 2010,

sorry, in 2011. 12:18 You have here the projects and resources, and here, you can have the coding parts... 12:26 ...and the bottom one is for a console for debugging. 12:33 Let's start with iPad. 12:48 I used ArcGIS sample server services to access this data. 12:55 Here you can see satellite map. 13:02 What functionalities in this application have, such as measuring to lengths. 13:12 Sorry for the buttons and the other text are in Turkish, but I think it gives the text. 13:20 [Unintelligible]. Let's...In this application, this part is completely web view, so we used Esri JavaScript mapping APIs here. 13:42 All the things with Appcelerator and native site and website are communicating each other what's going on... 13:52 ...and transfer data between them. 13:56 And we have [unintelligible], Get Location, and, for example, if you want to get...here you can get the screen image... 14:06 ...then you can send it to a colleague. 14:11 Also we have Favorites. 14:20 Now let's add some Favorites. 14:23 If we can touch and hold on some points, then it will identify the layer in this part, and this is the states layer... 14:32 ...so it's...this is Wyoming, and if you want to add these points, there is Favorites. 14:47 Also you can send these points to someone who has the same application. 14:56 And when the people got this link here, the Si map and click on it... 15:04 ...then it opens the same application in their iPads or iPhones. 15:12 And here we have a curl window like Google Maps, which can be done quite easily in Appcelerator. 15:21 We have queries here. 15:25 Let's query population 2000 bigger than 10 million in states, and we have this status as a result. 15:36 If we can click on table view, we just see the data within them or we can click on the icon and it goes to states...

15:54 ...and shows the attributes. 15:55 We can adjust the state name here, but you can add also other attributes to this point. 16:03 We can also have quick search here. 16:15 What does here...we have also some data collection, but it's not working now. 16:25 But in conceptual, it gets your GPS location and some attribute data from you then send it to server... 16:35 ...then it shows on your iPad later. 16:40 And we have also some adds or drop some layers. 16:48 You can also add some default layers. 16:51 You can add some ArcGIS Server and we can query it. 16:57 Here you can see the exports of ArcGIS Server layers. 17:02 One, you can click on it. 17:04 It says, Do you want to add it, and click yes, and the layer is on the fly is added here. 17:10 If you click on it, done. It's not possible here, but it will open in the map. 17:19 We can also different map types here, can change it, add backgrounds. 17:34 This is the application. 17:36 I just want to show this in Android, but I have problems with my Android SDK so it doesn't work. 17:44 But it's the concept is the same. 17:48 If you just use the general elements, you can just transfer your iOS application to Android. 17:59 If you can look at the code here, as you can see, they are just JavaScript codes. 18:08 This is for user interface. 18:10 If you can look at the mapping part, this is also JavaScript, but this time, this works for the web. 18:21 And I just want to show here how they communicate with each other. 18:28 We have events here. We can send events to web view or we can get events from web view. 18:39 So they both communicate two ways. 18:43 So there is no problem with your web view and native parts in communication. 18:51 Okay. Now that's the links.

18:57 You can access Titanium from appcelerator.com, and all of you know Esri JavaScript API. 19:06 And one more thing, most of you know JavaScript, I think, but this is done in JavaScript ImpressJS... 19:16 ...and all the presentation here is done with JavaScript, CSS, and HTML5, thanks to Kemal. 19:24 This is working in browser. 19:27 Thanks for listening. 19:29 If you have any questions, I'm glad to answer.

Esri 2012 http://www.esri.com