 And basically the idea of, it's good sir Tim Berners-Lee visited Australia, I think he's still in here, anyone visited his talk? Yeah, I saw him back in Queensland last week and it was a great, great talk and the quote I found from him is, mobile web initiative is important, information must be seamlessly available on any device and I bet all of you here, including me, have all those things floating around and some of you play with apps, some of you don't. But the idea of building mobile application is not only relevant to Drupal but what I decided to do, I just decided to show you some methods, pitfalls, through the experience of a few years that I've been through and let's get started. So basically I'll split the presentation into three parts, the first part, it's a mobile world, we talk about mobile world, mobile technologies, how we can apply them, how they get applied, do you actually need them, then we're going to build an app, it's going to be a very exciting app and those of you who are sitting here probably saw what app is that and it's not the one available on App Store yet. So you'll be the first one to see and then we're going to take through, I'll take you through Drupal tools available, what I use, how I build it and we'll go from there. So quick about me, I've been in Drupal world for about five years, that's when I first saw Drupal, I'm working for a company called Technocrat but they pretty much gave me to a slavery to FlightCenter guys, so that's what I do, there is no mobile involved where I am, they're front-end guys doing mobile but I'm doing all low level stuff of product importance, so but I've been working to a few studios as well for the last few years and there was a lot of mobile initiatives, mobile initiatives because a lot of the projects didn't resolve into anything but I actually managed to collect the massive amount of code experience information which I didn't know where to put it and eventually I said hey why not to create something useful out of it and you can find me on Twitter on TSDef if you want Drupal and the technical info, you can go to Technocrat and contact me through their Twitter or just my personal Twitter, it's LettyMir, AUS and my name is LettyMir. Alright let's get started on mobile, so if you came here because you want to write the next version of Angry Birds and Get Me Lens, you won't get it, not today, maybe tomorrow, I think there is a session about it maybe, yeah but and it's definitely not about how you monetize your app, three years of experience especially working in smaller studios, I saw the tendency where our customers comes in and say hey I want a website and the company goes alright, we can build your website, we get designers, we get developers, we get hold the shenanigans, you really want and then the client goes hey but I got some data, for example let's say let's get a real experience, I'm a festival, Italian festival and I have a timetable or I'm a Drupalcon, I have a timetable and I will be available to the app and when I change the content on a website I won't be available on there and suddenly the price of the bill goes twice and then the customer goes but it's very similar I'm putting content in one place why does it cost twice, so basically initiative for this presentation is build and trivial application prototypes so you actually can show the client how it might look, you also the most important thing, show the client strategy philosophy behind the data-driven application development process, so at one point you would actually show hey here's how it works and I need a bit more time to develop it, on the other hand you also say it shares some code but it's not the same thing I will also show you how to connect your app to a Drupal and on the fly, so let's take mobile approach, I mean there were a few things people saying and Drupal 8 is actually mobile first, taking mobile first kind of approach with all the frontend developments and themes and a lot of people saying yeah like Instagram is an awesome example where they said that we don't want to be on the web until yesterday I think when they went on a final on the web but we want to actually build mobile first, so mobile approach it depends on your particular project and we're gonna talk about approach more focusing on our particular project which is coming very soon and another talk then can go forever it's website against the application, differences, bonuses, having one having another is it good to have your application on the app store or is it better to concentrate on your responsive design website let's leave it all to the marketing but let's say that here's few points why do I need mobile application content needs to be available offline so again your timetable you go into a bunker where Drupal code is you can't get out there is no internet you need to know your timetable so here it is ability to save and sing content hey I want to snap someone on a beach on Kudji and still keep it there or I saw a photographer's website and there is an awesome picture there and I want to do something like that so I don't know and beyond the web functionality what's beyond the web the line is very murky now browsers had GPS detection and all that stuff but you know what I'm getting to it's where something that your browser still can't do so that's where we need the application and I think it's it's it's a very distant life when we got at least two of those three lines points we need to build one so Drupal at the moment let's take the responsive design approach it has an awesome tools available some of them good some of them bad some of them good but very hard to configure some of them opposite I saw a lot of stuff from developer's perspectives and from designer perspective good and bad but I'll just give you a list of mobile tools module is a great thing to look at not always works but it's there it's fair to see responsive themes my favorite is Amiga basically out of the box give you the functionality of responsive design for four by default you can go tablet quickly very easy to build and put it your website and yeah display see it in contests when you actually want to say for mobile phone I want this for sounds like responsive design but you can actually put different contests of different fields and stuff like that using either display see the contest but that's not what I'm talking about and of course if you want to web services listen to address no there is a big big big big mobile oriented thought towards and initiatives towards Drupal 8 and how it's going to be about that's awesome but we're not a Drupal 8 stage so we still need to build a client comes in say I want my talent film festivals a month away so let's talk about technologies available currently on the market so we know there are native technologies so something you go and build using the code objective C for IOS C plus plus for BlackBerry C sharp at the moment for Microsoft Java for Android you can also use frameworks great example and prove that flash is not that is Adobe Air thousands of apps all Android BlackBerry and IOS stores especially games that's what the flash is going to but still if you want to build an application use one frame and there is HTML HTML 5 alternatives something like jQuery mobile you can wrap it in a phone gap there is API you can do and use some of the features of your devices like geolocation yeah you name it phone gap is developing miles and miles and miles an hour very fast and there is a lot of a lots of API available and how about we'll actually build an application using Drupal so the story go fast story it's very interesting one and that's where I decided hey I go to move fast also go to a music festivals I go to develop conferences how about I'll have one app that's very responsive very nice has nice layout and all I want it's a timetable my favorite stuff maybe later on we can read something like that so that's how idea of the go fast came up and we can do it for Drupal con either separate app or we can do it in the same application or we can actually have two applications why one is generic for every festival we can get around and another one that's just sits and can be used for all Drupal cons why not so here's go fast story and I see you a bit starting to slip so let's do some audience participation so I build a go fast 1.0 about a year ago we put so who wants to be a website I'll show you how it was come on here you go here's a Drupal website and who wants to be a mobile device what's your preference that's a question here you go so we build a we build a website we build a mobile application and make them communicate to each other who wants to be iPhone and we made them communicate to each other so basically just providing data from website to website and go to phone and you can get yeah pretty much any festival so keep working on by myself just providing data to my website and what happens next next there's come few issues so I have to actually patch where my patches have to pitch a website and then the issues with mobile application so I go I patch the website thank you very much I pitch my mobile application and but no one else was putting the content then I decided okay I need some more people who wants to do it for free or whatever so after spending a weekend with my wife she said you know what your content editing is crap I had enough I had a few hours of putting this stuff in and thanks guys and yeah I am sick of it it was pretty bad and it was your just standard Drupal stuff so you have a session you have a festival you have a presenter and all this stuff and after that I realized so it's not only about building this stuff that works because that worked fine and but it's actually the content editing was another very very important thing for mobile applications and yeah as you can see I ran into the problem just by having this awesome idea so I thought hey how about our thinking we're thinking and make it available to the public not necessarily people can go and applaud the content modify the website but some easier way for me to do it the choice for air was I was researching air at the moment for people who don't know air is a package that allows you to wrap around flesh and deliver it to like Barry like Barry Android in iOS still available still kicking and still pretty good used a lot of in-game so let's finally build the application so I decided for the next version of it let's do HTML why not HTML is a new black how about we actually do the eye Drupal connect I don't know if there are any Apple haters they hate it for me but that's a generic name I came up with and what do we need we need a list of sessions like this one when the ability to sort those sessions when the individual sessions and at the favorite session by the way how many people here using the actual app that was written by cross-functional good more than a half great app and if you guys are in room good effort I think we should keep coming but at the same time I went on the app store and download the another Drupal connect from previous year it was still available but the content wasn't working I don't know either server was dead or something happened and here come another problem we actually have to if we are providing the application we they have to delete it after it's been used or provide the support for it because no one wants to download the application and see it's actually falling apart right there but last feature I wanted to show you and that's where our demo gonna be it's a syncing not only syncing session but what about if you want some critical data update like maps for example for us because what if something changes quickly and if you push it to app store it can take up to two weeks depending on the period how busy they are and you don't want a data that supposed to be available to more available in two weeks when no one cares about it so delivery is very very very important for this and let's use Drupal how about that so we provide the data to Drupal and we focus on delivering those three particular things I'll tell you that focus is really important because how many people actually build that mobile application few good you know that especially if you're doing something for yourself or something that not restricted by a budget you can easily go out of scope you say oh that would be nice oh that doesn't work right I want this I want that and yeah it just can go out of head very very quickly so it's not only development as we saw it's a content editing it's a data structure and I decided how about for content entering rather than going and teaching someone how to use a Drupal I'm gonna use Google Docs and improve the structure the original application work this way I would go to a Drupal website I would create a new session at times create the presenter connect the presenter to a session connected to a particular event depending on the rooms I also create a room so you get in it it's a bit of a complex structure but yeah in a long run it was kind of very hard to start imagine you have five different rooms running at the same time for two days it's you will spend a lot of time actually entering each sessions in and for a lot of the festivals and a lot of events those information is not available it's not really trivial to retrieve it so for improved go fast to engine so go fast to just an engine I was using which is going to store data in common place like a Drupal website read data I mean like stored data in a common place read data into Drupal provided data for application and then application gonna read data and render it the way it wants so I decided to use Google Docs just to spread sheet because we can publish spreadsheet as a Jason or XML for those of you who wants to go big technical so I'm gonna read data using Drupal using feeds I'm gonna provide later on output using views Jason and then my mobile application gonna read it for kind of structure you can see I set up feeds so it's set up festival info importer location important so basically each in Portugal to a particular tab you set up in feeds and grab the data it needs there was a bit of core modification not core feeds core modification needs to be done because the page wasn't applied and I did it about a month ago but at the same time it worked fine it was reading Google Docs fine actually connecting connecting the entities to each other no problem and taxonomies I set up taxonomies as well and it there was also one of the patches also help to connect taxonomies to particular festivals or so for example if you go performance tag tag one two and three in this case war room for for Drupal connect it was room it was track and it was face is it featured or not so I basically set up like a common text so you can I depending on the festival you can change them the way you want to and then I build the app so basically as we were planning we have our list of sessions which you can see on the screenshot to we had our help which is basically your Drupal pages and we can actually click on them we can add them to favorites we can sort data by day title track or room and we can view our favorites so now I'm gonna demo you the app this is built for iPhone but because it's HTML5 you can easily port it to the other devices thank you so we have a list of sessions that one that comes with the app because remember if we don't want to actually go and grab the stuff from the web less web is not available so there was some stuff that come with the session once we click on the session they can actually go and check and the summer is pretty small there and but we can see pretty much everything we want we can see room track speaker the level one we can sort by title track room and date tracking heaven from things that almost all comes with the truth for the Drupal website but remember we didn't connect to a Drupal website yet we can actually add stuff to the favorites and can see our favorites straight away so that was easy using just jQuery mobile stuff like that then it was more interesting part where we go to information or have something like about Drupal con and about this application and I even had a check for updates that's why we're gonna go to a website and when you click on it so for example if you want to update your terms and condition you no longer have to update your application this means your application can be reused just by using data and if you check for updates you will see that about an app once it connected to the hell it's gonna change the name about up to so to prove I'm not lying I'm actually gonna go to my Drupal website look at the content and we should see something that called like about an app too and we gonna modify it if we're gonna have an internet get it there so next time when the person goes I check for updates or we can even build like if anyone today opened the application they saw there's update available we can do it and stuff like that but anyway we'll go and edit saying about a hello from Drupal con Sydney hello from Sydney or something like that and see if it actually works the data sent by views and the views set up so they actually send them Jason feet so if you don't see it's just your normal Jason who was familiar with and yeah so that basically what application is reading is those things in the future there is an idea actually send you the date when it was updated so actually goes and checks oh yeah there is an update so by now we should have stuff available so if we'll do check for this one more time we should see hello from Sydney yeah this is this website the one that day it sits on a hosting somewhere maybe in Melbourne Sydney and yeah so that was exactly what we wanted her sessions still got our favorite sessions so that was enough but it's not then so we can see we can do a lot of stuff with it we can search sessions we can leave a feedback and for a feedback you won't use the functionality I did you can actually use something like services but I think without enough we showed that well don't do it to me please I think I just run out of this space so I want to announce mobile initiative and that's the main the most important thing of our topic so let's just let's quit everything but I think we should still quit the Chrome that's alright so mobile initiative is something that I want to provide people with necessarily for not necessarily from Drupal community but everyone and it's gonna be separated from Drupal all entirely but what it's gonna have it's gonna have set of scripts you can pull from offline and build your application based on your website it also gonna have bunch of Drupal stuff like modules features that you can put in and build your basic stuff again it's not about building the complete application it's about build a trivial application I mean how many how many companies are there that actually one simple time table application Drupal con is one example and we can actually yeah extend this application and extend this application and build very good one which can use on any Drupal con we can go and build something some other stuff that's very familiar like your standard information application I blew it not my joke sorry guys so again let's go sorry technical difficulties so again one initiative it's complete Drupal I Drupal con application in HTML that's going to be published in shop this month the the stuff you saw it's it's a base for it it's available on github so anyone can go take it pull it apart see how it's done or build something like that if you need to in the future idea is create a view plug-in where you can go and say I want HTML app and it's gonna speed you HTML for your standard stuff again don't look at it as a complete application but you can quickly show to the client who comes in and say hey I got a conference I have a festival how about you'll build me something that is very sortable and can get my data from my Drupal website today you can say yeah I can do that pretty quickly I'll just download this thing which has time table already it might not look like you want to but at least you will see do you actually really need it or you might just use responsive design and at the moment I'm working with a few people to provide the native alternatives for us Android and possibly windows 8 at the moment so it depends how people are available or how much time we're there's definitely one coming out in March for iOS so basically it means whatever you saw today in HTML 5 gonna be available alternative for iOS where you can quickly get the code compile it and get the application running and show it to the client I set up the board on Trello any Trello users yeah Trello is basically simplified JIRA if you use JIRA before if not it's pretty much tasks you set up and you can collaborate with people very popular app at the moment Adobe uses it it's you can set up open and closed project and pretty much manage people and manage their tasks so set up board on Trello the code for the application you saw is also available on github so you can grab this application at the moment and I'm gonna be updating it as well and we got a web page coming very soon we have a views plugin again as I said coming very soon to github not sure when it's when it's gonna be available as a proper module because there is a lot of testing involved and stuff like that but we'll try to provide the idea is to provide the actual very slick way to get your website and convert it into the app and show hey here you go it's your standard app you can use it and Drupal.org page coming as soon as we get all the bits together so we can actually publish all the links there at the moment I think Trello is a good way to use so in the conclusion I want to concentrate on a few things Drupal tools, views services they should add feeds so whatever you need something whatever you need to feed your app you should use one of the languages that understands like XML or JSON or whatever first this talk supposed to be a more technical talk so later on I converted it in because I was moved to a site building session so I decided to show something and talk about tips and tricks more so whatever you need something and you want to build something you know that the views services and feeds are your friends in terms of Drupal you already have tools you don't need to invent anything else again I Drupal coin application I think it's a great idea would be success or not it's it's not that but the idea is there is a easy very easy way to provide just copy and paste your sessions into Google Doc spreadsheet and the your website pick it up from there using services they just at all and then the data is going to be available on your website but at the same time there is going to be a JSON feed that's actually available to your application and once application is ready you can set up whatever you really want the basic idea is why this initiative is separate from Drupal stuff is because you can actually create the services using whatever you want you can stop services yeah any language or any platform so basically in a long run the idea is hey I have a I won't say curse word Joomla website and I want to pass some data from Joomla to my app you still can do it so basically idea to have kind of it's start we start building it on top of the Drupal community because I think it's the best way at the moment to deliver the content as as a website as well as deliver the content as a technology for application to read and the the main focus at the moment is to be fact fast and focused I don't want to per anyone download in the code and saying oh I don't know how to connect this to that I actually wanted to make really slick where you go to your website install the feature and the feature says alright now you can download this code and change one or two lines or maybe don't change anything and that would be the stage one the stage two would be we got views how about here's my data here's what I want to be available for my application publish me an app and the views gonna speed you an app so you can grab the HTML code and the stage 3 native code then you can compile your app show to your client so that's the main idea do we have any questions no questions at all understand it's the last session of the world so I guess then we should go in and one question I won't show you hope then yep yeah I can definitely so yes I use jQuery and Genquery mobile and the phone gap because I'm a subscriber to phone gap services how many people know what fun gap is how many people know what fun get build is few are I'll tell you that first so basically phone gap it's it's a library written by a few guys and what they focused on it's they decided hey we have this all HTML stuff how about to provide a library that connect Android like very windows phone they get about six operating system available how about we'll provide the API's for for that for and using just JavaScript you can control like you can read your location you can it you can take a photo with the device if it's available and yeah whatever so they start building it and then Adobe acquired them and Adobe said we're not that evil as 3 said today but so we want to contribute to the community so they took the code and they contributed to Apache as a yeah so it's always gonna be open source and it's always gonna be a well which is great thing for a special mobile project and which targets so many platforms but at the same time those guys who build phone get say hey we want to make some money how about we create this stuff called phone get built when it was I mean when it was created it wasn't any money initiatives but at the moment Adobe is actually charging for the reason one of their services and if you subscribe to their creative suit it's available basically what it does you know that if you're building an application you need like a compiler for each environment and in case of iOS my phones in case of windows you actually need a certificate and certificates you only get them when you pay hundred bucks to Apple hundred bucks to Microsoft and stuff like that but you can only build Apple application native application on Apple iOS application you can only be native Windows application on Windows so there was a bit of a problem like which operating system to use and for a normal like developer having multiple operating system was a bit of a problem so phone get bill it's a service online when you can upload your phone get application and it will speed up depending on your certificates and settings it will speed up the application for you for Windows 8 for Blackberry for Android and they even provide you QR code you can scan and it will download it to your device it works with Android it works with iOS and test it so what I did back to the application what I did I use a lot of people were saying that jQuery mobile is really a lot of HTML stuff actually let's not talk about names at the moment a lot of HTML application very draggy you know they leg in sometimes and that's true in many cases you can see the examples you have to go too far download any HTML app you'll see something that is not smooth the screen like for example when I built first phone gap the scrolling of the listing was smooth as using flash but when I build it first time in HTML the least crawling wasn't wasn't as nice like at the moment it's a lot of memory so at the moment when you scroll it it's kind of nice but this is all CSS tricks so I decided okay I'm gonna build it in jQuery mobile whatever it costs and see actually how I can improve it yeah there was a bit of tweaks and I can say probably developing with HTML is harder than developing with Objective-C in Java for Android and stuff like that but it's only in the case when you know Java Objective-C and a lot of stuff most of us are web developers here and developers do know the HTML CSS JavaScript so there is a bit of tweaking being done especially to CSS JavaScript is pretty much straightforward I use just jQuery libraries for reading Ajax and stuff like that testing was another problem there are a lot of stuff for testing to set up but you need a server in the server to actually for app to communicate and preferably you need the stuff sitting like your data sitting on the same server because there is a security policy which doesn't allow you to read some script from the other website unless you know a couple of tricks or using some particular data format so there were a few bumps and if you want to talk about like how to deliver your PhoneGap app it we can take it offline and go from there but in in the end what I did PhoneGap changes a lot before they provide you a module where you go to Xcode which is tool that allows you to build iPhone apps and say in your PhoneGap application and you have a template you just drag your double double double folder and click build and it appears on your phone now they actually provide you with a script where you go and say build an application name and it builds you the actual application then you drag the folder so pretty much similar way only use the term in a little bit so that was my experience the whole process of the building this particular app took about two weeks after work so it's not two weeks full time but there is a lot of minor tweaking like even sometimes because jQuery comes with a lot of CSS and stuff like that actually fixing sometimes I don't know positioning can be harder than you think and then there is a lot of tweaking stuff that glitching because Apple is using different JavaScript processing library and stuff like that so it's a lot of minor stuff that you actually need to look at but it comes with any mobile application I use the HTML database which is yeah pretty much offline store HTML5 local storage HTML5 yeah so yeah I use as many HTML tools as I can yep no I know I didn't go this way because I have a friend who decided to go I wanted to build it quick and I know it seems like using a framework with a phone gap seems to be a right way to go but I decided okay how about I'll just use jQuery I just wanted to see the performance on jQuery mobile so I thought yeah let's go this way and just use jQuery mobile we can introduce later another story my friend was doing the website and they decided to use one of the frameworks like backbone.js they decided to go with knockout if you heard about knockout which is now part of the Microsoft I think Microsoft got the guy who wrote an account very interesting framework and actually was at the moment which was about a year ago was they just released knockout too and was very interesting to see but we ran into the few problems which weren't the trivial to fix where it works fine basically for those who don't know what frameworks we're talking about it's something that connects your UI with your data for example if we look at our application we have data so like a session so we have a session that title and all the description and we also have a visual component to it in that case it's your list so a numbered list so in case you say I want to delete this session you have to go delete the data from your JavaScript from your SQL whatever we store it and you also have to delete this li tag so and lots of frameworks they actually connect visual stuff to a data so when you go and say through backbone or through knockout say I want to delete this particular element in array which applied a jail for Drupal project it would go and delete li because it's connected to it that was a good idea until we run to the problems where it wasn't that easy to bind the form so we have a form for example we want to edit the session so we click on it go to the form so it puts title as applied a jail for Drupal development project so we can edit it save it but when we go to the same form a deleting the other stuff it wasn't actually working that well because it couldn't properly unbind the previous process so it was only working for some so each framework comes with its limitation and they say hey how about we'll focus as I said before and actually get the jQuery stuff out and it's pretty much ready to go and when it's ready we're going to improve the bit by bit because again with this project it can go as big as you want to because no one pays you for it and yeah so focus of that application was jQuery mobile and phone gap no I saw Firefox marketplace someone sent me a link a couple of days ago and it looks very very promising but that's awesome yeah for people who don't know the Firefox also announced Firefox OS which is part of this whole initiative so they definitely can go in into mobile market so it's gonna be even more exciting you have more frameworks and stuff to work with any more questions so then I guess I'll ask a few questions people so well do actually feel when you open your application because everyone works with application do you feel if it's written in HTML or if it's native did you have any bad experience good experience anyone if we talk about enterprise size stuff Facebook is a perfect example so how many people would say that three months ago Facebook was HTML based would you say it so what changed since they moved to native any particular changes because apart from liking of share button I wouldn't say it was that much different oh yeah well that I used Facebook there and actually couldn't tell now my experience with all Facebook app was pretty good so I didn't have any liking and stuff I was just always wondering why there is no share button but apparently that was also a big drag for Facebook so they moved to native Titanium is one of this again HTML frameworks yeah that's the same like titanium corona it's all new and that's what exciting like doing this talk in four months it would be bunch of new tools coming into market and even bunch of new names like Firefox now coming soon so any more questions you can you can take the code you can take the code I can install on on Android not yet we I'm going through I decided to polish it rather than publish it especially when the guy is from cross farm because when I started building there was no app was Drupal conceding so I was like quick quick quick quick quick let's build it and then the app was published so I decided okay I'll just live it and yeah make it make make it better so for the next Drupal con I'll make it available and you can even download it now if you want to play with the code or you want to improve it in some places this is a great example of how to use jQuery mobile you can do push notifications the phone gap runs on a plugin basis there are the plugin thing where people can go and write a plugin if you don't have something for iOS or Android you can go and say plugin write a plugin and yeah create it so there is a plugin that does push notifications for HTML you can do proper push notifications no I haven't seen I saw that that's what I wanted to talk to when we'll make it available the code the code is already there they can take it they can use whatever which way we like and we can contribute it free of charge and no it's so yeah it's I guess I will contact them as soon as wasn't on priority list because I was trying to get it you know as smooth as possible it was smooth definitely smoother yeah air itself as a framework you can download it and you can build apps from a command line if you want to build it from flash you can you need to buy flash once you get one of the apps which used to be a flash builder now flash builder they submit flash builder to Apache so flash builder is free so if you grab fresh builder from Apache and if you go and download Adobe air and they've got bunch of tutorials how to put them together and build stuff air is great stuff oh I didn't do benchmarking but it's definitely smoother than HTML I'll give you that I didn't I never had all that looks ugly flash looks crisp on a mobile device and they keep improving well they convert in it I mean yeah application delivered in flash looks creeps let's put it this way any more questions so again you can yeah let's enjoy the beach and if you want to contact me go to a technocrat booth or go to a technocrat websites my contact details are there thank you guys