00:01I'm glad to be here after three years.

00:03It's very hard to come here because almost 24 hours travel is for us.

00:11We are from Turkey, Ankara. We are working at State Hydraulic Works.

00:16Me, Alper Dincer, and my manager, Mr. Kemal Seyrek.

00:22First start with who we are, DSI is the State Hydraulic Works.

00:27It's a governmental agency.

00:28It's responsible from all kinds of water-related activities.

00:33And 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:49And, who am I?

00:50I am an ordinary geoweb developer. Lately, a mobile developer.

00:54Works on GIS and LBS projects.

00:57It may be some remember, I am the winner of DevSummit Mashup Challenge 2009 with ExtMap Framework.

01:05Then I develop iExtMap for iPhone as a side project, which is similar to today's topic.

01:11It's based on Google Maps API.

01:13It's a hybrid application.

01:16And then I develop ExtMap Touch with Sencha Touch framework.

01:19It's a fully web application which consumes HTML files possibilities like local cache and geolocation.

01:34And why GIS? Especially this is a classic, but I am skipping this, because we are all GIS guys.

01:42And why mobile?

01:43Until 2008, web is the emerging market.

01:46Everyone is starting to get on the web.

01:49But, in 2008, with the iPhone, Apple starts App Store and revolution started from web to app.

01:59And now mobile is the king.

02:03There are lots of mobile sessions through DevSummit, and some of the sessions....

02:09...people ask that, what are you looking for.

02:13People who have smartphones have first look at for the App Stores.

02:17If you're on the App Store or markets, your findability is more than the web applications.

02:27Why mobile GIS?

02:30Your location with sensors.

02:33Most of you guys have smartphones, tablets, and these have GPS sensors, accelerometers, and compass.

02:45Those sensors are all data for the GIS.

02:53You can easily get data or analyze data whenever and wherever you are with mobile devices.

03:00And if the application is properly designed, it's very user-friendly.

03:08I think sometimes we have a problem with the design because one which states mobile GIS...

03:16...it should be mobile.

03:18It's not a transferring all the functionalities from desktop to mobile, because they are two different things.

03:26Mobile should be focused on the job or the task.

03:31It should be and it should be doing good.

03:38And I think this is very important slide of my presentation.

03:44What's development path of mobile?

03:47I think you will hear these kind of slides in developer's conferences.

03:53Which platforms to cover? The first question.

03:58iOS, Android, Windows Phone 7, or BlackBerry.

04:02I think this is related to your projects.

04:05If you are developing an enterprise application and you know that's all the audiences are using iOS devices...

04:14...iPads or iPhones.

04:15Then you should go to the iOS spots.

04:19If 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:30And which type of application?

04:33There are three types, maybe three and a half because the half part is in this presentation.

04:42We have three parts--native, web, or hybrid.

04:46Most of you know that native is developing with the SDKs, that's iOS, Android, [unintelligible].

04:55You should write in their own language.

04:58If you want to write an Android application, you should know Java and its platform.

05:07Or if you want to write on iOS, you should know Xcode and Objective-C.

05:12I think they're very hard to learn, especially the Objective-C parts.

05:19And web applications, if you come to web applications, they are just web apps working on devices' browsers.

05:30They just consume some of the devices' APIs.

05:34But in native, you have all access to all APIs of devices.

05:39And hybrids, nowadays, there are some frameworks like PhoneGap.

05:46Most of you heard it.

05:48PhoneGap 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:06The native APIs, that you can't use in the web applications.

06:12And if you come to source, of course, every project has source.

06:17So you have to [be] really careful about money, people, and time if you cover different platforms.

06:25And 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:45You have to deal with different code bases, different coders, and more time and more money needed if you have more platforms.

06:57So what are we going to solve this problem?

07:05Solutions 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:25But this time we are using Appcelerator, Titanium Appcelerator, which I will explain later with Esri JavaScript API.

07:37All coding can be done via JavaScript, CSS, and HTML, and output, except mapping part, is all native.

07:44You will see later in the demo.

07:47Let's look at what's Titanium Appcelerator.

07:50It's an open source framework.

07:52It builds native mobile applications, and it uses JavaScript.

07:57Maybe our question that how this can be happen, possible.

08:02It is some kind of virtual machine on all platforms, especially nowadays, just iOS, Android...

08:10...and BlackBerry has supports for this framework.

08:16And this virtual machine, it transfers your JavaScript code to native code.

08:24So finally you have all the native components.

08:27There is no such web view.

08:30If you have something, user interface, that's all native.

08:36And extendability, it can [be] extendable via modules.

08:39Modules can be written in their own language.

08:43If 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:00And support there, both community and commercial support.

09:06And how to code in Appcelerator.

09:08Here, first, we create a window. It's there, name space--Titanium.UI.createWindow...

09:16...with background color red.

09:18We open it in full screen, then we create a label...

09:22...with text "Appcelerator," then we add label to the window.

09:26This is just a simple one, but it's something like that.

09:31Why Appcelerator?

09:32Seventy percent of code works in all platforms.

09:36I say it's 70 because, as you know, that different mobile operating systems have different UIs.

09:47For example, Android has Back button for going back, but on iOS you have a Back button at the top.

09:59So 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:19There is no need for extra developers.

10:21One can develop both Android and iOS and also BlackBerry applications.

10:28And you just have one code base. It's all JavaScript, and you have just one code base to follow.

10:37And at the end, you still have native components you will see later.

10:42And all things have costs. And why not Appcelerator?

10:47There are still missing platforms such as Windows Phone 7.

10:52Maybe 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:04And another con is, there is no user interface builder.

11:09If you want to build your interface, you have to code all the things, x,y's and widths and lengths.

11:18But you will learn indeed in later when you deal with it.

11:26And the last con is you should wait for new APIs if you don't have deeper knowledge.

11:33As 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:50Okay. Now it's time for a demo. [Inaudible].

12:02This is our development platform.

12:04If anyone use Aptana, this is similar to Aptana because Appcelerator bought Aptana in 2010, sorry, in 2011.

12:18You 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:33Let's start with iPad.

12:48I used ArcGIS sample server services to access this data.

12:55Here you can see satellite map.

13:02What functionalities in this application have, such as measuring to lengths.

13:12Sorry 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:42All 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:56And 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:11Also we have Favorites.

14:20Now let's add some Favorites.

14:23If 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:47Also you can send these points to someone who has the same application.

14:56And 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:12And here we have a curl window like Google Maps, which can be done quite easily in Appcelerator.

15:21We have queries here.

15:25Let's query population 2000 bigger than 10 million in states, and we have this status as a result.

15:36If 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:55We can adjust the state name here, but you can add also other attributes to this point.

16:03We can also have quick search here.

16:15What does here...we have also some data collection, but it's not working now.

16:25But 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:40And we have also some adds or drop some layers.

16:48You can also add some default layers.

16:51You can add some ArcGIS Server and we can query it.

16:57Here you can see the exports of ArcGIS Server layers.

17:02One, you can click on it.

17:04It says, Do you want to add it, and click yes, and the layer is on the fly is added here.

17:10If you click on it, done. It's not possible here, but it will open in the map.

17:19We can also different map types here, can change it, add backgrounds.

17:34This is the application.

17:36I just want to show this in Android, but I have problems with my Android SDK so it doesn't work.

17:44But it's the concept is the same.

17:48If you just use the general elements, you can just transfer your iOS application to Android.

17:59If you can look at the code here, as you can see, they are just JavaScript codes.

18:08This is for user interface.

18:10If you can look at the mapping part, this is also JavaScript, but this time, this works for the web.

18:21And I just want to show here how they communicate with each other.

18:28We have events here. We can send events to web view or we can get events from web view.

18:39So they both communicate two ways.

18:43So there is no problem with your web view and native parts in communication.

18:51Okay. Now that's the links.

18:57You can access Titanium from appcelerator.com, and all of you know Esri JavaScript API.

19:06And 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:24This is working in browser.

19:27Thanks for listening.

19:29If you have any questions, I'm glad to answer.