iOS and Android Cloud Apps with Xamarin & C# – Parse Developer Day 2013

everyone thanks for coming along today you already know a lot about pars obviously at the pars developer day so you know how cool it is how easy it makes storing data in the cloud what we’re going to talk about is how xamarin lets you write your parts client code once and deploy it across all the major mobile platforms specifically iOS and Android for us today I’m going to quickly tell you about xamarin what it is and how it works and then we’ll add the Parsis DK to examine project and wire it up so that you can see how easy it is to implement pars on iOS and Android with us firstly what is xamarin xamarin lets you reach all the major mobile platforms and by that I mean iOS and Android of course but also Windows Windows Mobile Windows Store apps because we share a common language that can run on those platforms firstly zaman offers a native user interface on all of the platforms so what I mean by that is the user interface for your app is fast scrolling it’s responsive to touch input you’re displaying native views of widgets so you’re displaying an iOS button on your iOS app you’re displaying an Android button on your Android app you’re using the native list controls you’re using those switches and sliders you can build your UI interactively using the platform’s tools so for X code you can use interface builder and for for Android we have our own user interface designer which I’ll show you later or you can build user and facing code by mewing up like I said the UI button or a native Android button consumer apps like our do take advantage of zamarons capabilities like this to provide great-looking fast easy to use applications that provide the user with the native user experience secondly xamarin apps often native performance because they are native apps for iOS the entire app is ahead of time compiled to an armed binary so while you’re writing your your app and your sharing code with with Android and with Windows the output from your code is compiled into a binary that can be put on the App Store and runs natively on the iPhone devices on Android we ship a native runtime that your app is JIT it on top of but in both cases you’re running directly on the operating system there’s no intermediate steps there’s no like passing through Java on the Android side everything runs at the speed of the CPU for example xamarin apps include a 3d flight simulator called infinite flight which is available on on Android and iOS there’s also circuit simulators that have real-time circuit simulation and graphing vector drawing apps where you can resize and drag and move objects around on the screen so using xamarin does not give you any performance penalty the third major benefit of using xamarin is that you can share your code across platforms so like I said you’ve built a native user interface for iOS and a native user interface for Android they look really cool and they work really fast you’ve built apps that are compiled to native code so they perform really well but you’ve also only had to write most of that code once because the business logic the database access the file system access using pars using another web service all of that stuff you only have to write once and you can reuse it on iOS you can reuse it on Android and you can reuse it on Windows platforms and how do we do all that using c-sharp and the dotnet framework so c-sharp is the common language for xamarin apps and because it’s c-sharp it also works across in the environment the.net framework that we use is based on mono which is an open source framework so you can actually go and look at the code that you’re running right down to the operations that are running underneath system my own system the HTTP client or whatever it gives you a lot of new language features that you haven’t had access to on platforms like iOS and Android so a really nice

generics implementation for example language integrated queries great asynchronous programming support which we’re going to talk about later so you get a familiar powerful programming environment that you can use to write code that you can share across all these platforms to make great mobile apps the other great thing about c-sharp and net is that many people already know it there’s a really big ecosystem of developers or partners of code libraries that you can bring into your apps to make them work for you even faster how do you develop in xamarin we have support for two IDs so anyone that’s worked with Microsoft where anyone’s worked in the industry knows about Visual Studio it’s great IDE with powerful editor and lots of extensibility and we’ve used that extensibility to create a plugin that lets you build apps for iOS Android and obviously all the windows devices from right within one solution structure or you can use emirates julia which is our own ide runs on the mac and on windows and excuse me and lets you build apps for iOS and Android the great thing about supporting both of these IDs is that the solutions and project structures can be transferred between them so you can build your iOS app on the Mac in salmon studio to start with and later on move to Visual Studio on Windows to share more code with Windows and Android apps both the ideas look very familiar they’re easy to switch between and give you maximum amount of choice for where you want to code your cross-platform apps we also have regardless of which I did you choose full syntax highlighting what a complete or intellisense what do you prefer to call it not just within the dotnet framework but until he cents for iOS SDK operations and for Android SDK operations so if your a.net developer or develop from one platform moving to another a great and easy way to learn it is going to be to start typing a hit dot and see what options if the idea gives you for what to type next we also support have full support for debugging in both platforms so on Windows and iOS you can step through debug from from xamarin studio or from visual studio so that means that you can actually have a Windows machine running visual studio with an iOS application and step through and hit a breakpoint on an iOS app connected to a Mac somewhere and and step through and see variables open a watch window pretty much any sort of debugging operation that you used to on any platform from from both our tools specifically for iOS developers we try and make our development environment as familiar as possible and to provide all of the options you need to build and deploy iOS apps so we surface all of the configuration options that Apple surfaces in Xcode too to let you do code signing to let you do your app configuration orientations screen sizes and that sort of thing and we also have deployment options from the menu that let you build the executable that you need to submit to a provide the App Store same for Android we do our best to make sure that everything is surfaced from within our tools you don’t need to go elsewhere to figure out how to deploy get an apk that you can deploy a Google place Play Store and we also surface properties windows that let you manage permissions your application configuration and also automatically manage the Android manifest file which is otherwise a manual process in some other platforms so this is conceptually what a xamarin solution looks like firstly everything is C sharp from whirring up the user interface at the top right down to web service and database access that we would consider to live in the core library the three boxes along the top represent the fact that you still write a custom user interface layer for each platform so as I started off with iOS buttons on iOS Android buttons on Android zamel buttons on Windows however the shared code underneath that the core library can be database access web services business rules file system image processing all the stuff I mentioned before and that’s where we can plug pars in so we can have an application deployable on the three platforms with a lot of shared code and included in that shared code can be our

cloud data access layer to put it another way using C sharp and dotnet either of the two IDs I mentioned you can write apps with a single code base to run on over 2.5 billion devices in the market at the moment and I’m going to show you in a minute how in about 10 lines of code you can add posits DK and add cloud storage to that app quickly going to run through the configuration story that you’d need to set up for pars and then we’re going to jump into some coding firstly if you’ve just signed up for a parsec ant and follow along with the website you’ll eventually see the QuickStart guide like this and there’s a xamarin box right there so right from within the pars website and the signup process if you’re interested in using xamarin pick iOS or Android hit the xamarin button and you’ll get a solution ready to go configured and set up with with the references that you need if you’ve got an existing xamarin app where you very started playing with our tools you’ll be familiar with the xamarin component store which is super easy to access from within the IDE and lets you download and install and a variety of components for your app from user interface controls right up to cloud integration and SDKs like ours so that’s as simple as clicking the add to our button on the component store so having signed up for pars and started your solution pretty much the only work you need to do is initializing the pars code in your app with the identifiers that deposits the pars website will give you and that’s done early on in your application life cycle where application is bootstrapped up you know from being dead to running on the app so in different places that’s in different places for different platforms windows you might put it in the public app constructor in iOS you’ll put it in the app delegate constructor and in Android also in an app method right early in the application life cycle but the neat thing about xamarin is that it’s the same line of code on all of those platforms so you can see that as we start to learn more about pars when using it with xamarin the code that we learn for one platform is the same if we’re going to be able to reuse it on all the others for example this is all the code you need to save some data in parts in the cloud so this is a Windows example and it’s taken straight from the pars documentation for using pass with the Windows when using iOS and xamarin that’s the code that you need to save data to the cloud from an iPhone it looks familiar right and doing an android app with xamarin that’s the code that you need to store data in the cloud from an android device it’s exactly the same obviously in case you think I’m trying to trick you with something c-sharp across all these devices means that you can write the same code and have it available across all of the platforms as I keep saying oh one more thing I don’t know if you could notice that the awake keyword is a new c-sharp type feature that’s been around for about a year maybe a bit longer in the Microsoft ecosystem using the parts it’s DK on iOS and Android is much easier than on any of the other languages in the native in the native tool kids and and this is one of the reasons parse is supported async/await programming since we had it as a beta in as part of xamarin and what it gives you is the ability to do this one line push something into a background thread don’t block the UI thread but tell me when you’re done and we’ll see it a bit more in code later but it’s not possible to do code that beautiful or something do any of the other languages at this time so now we’re going to switch over to a demo and see what some code actually running that was quick so let’s start off and look at as Ameren application this is a really simple task management app it’s like the hello world of apps that actually use data and it’s an iOS app it’s running in the iOS simulator and to prove that it’s iOS I’m just going to bounce the this box a bit and so that I’ve bought some cheese and bought some milk so we’re gonna have a look at the code for this app it’s currently using a local sequel Lite database so we’re going to look at how examine app currently works using a sequel Lite database and we’re going to convert that to using parts in a couple of lines of code and so you’ll get a bit of a feel for both xamarin and the power of parts

and using cloud data storage so write the same code over and over we’re not going to do that this is the database driven app that we just saw I just want to highlight four major parts of it and we’ll go through each one before and after we’ve converted two parts so the first one is bootstrapping the app up so that’s an app delegate for iOS let’s see a bit more code so I’m not sure if you guys can see that at the back and it’s not that important what’s interesting about this code is two things the first thing is a c-sharp you can kind of tell that there’s no giveaways it it’s any other language but the second thing is that throughout that code where we’re talking about iOS SDK objects there’s a UI application mentioned in there there’s a UI navigation bar that’s been created referenced aur windows being created these are all iOS widgets we’re working with the iOS native user interface from c-sharp and at the end of this method which is the first thing that runs in an iOS app we have started our app we’ve got it up and running so anyone that’s a programmer for any other platform than iOS and thinks that you know Xcode is too hard and objective-c is is too obscure it’s this easy to get an app up and running on the iPhone so it references a task list screen so let’s have a look at how that might work again we’re in c-sharp we’re setting up the touch up inside event of these buttons zoom in touch up inside is an event that happens in iOS when someone touches a button and because we’ve made it available as though it’s a c-sharp event we can just plus equals to save delegate you can’t assign a method that’s simply an objective-c because it doesn’t have those language constructs this makes developing an iOS app feel like it’s a c-sharp app if we go down and look at the save method we’re doing what you’re doing any c-sharp application some left-to-right assignments to populate the user interface elements on the screen those top few elements could be any language any any platform left-to-right assignments and then we’re calling the navigation controller that’s another iOS thing but we’re in c-sharp it looks and feels like c-sharp and if I had hit the dot while I was typing it would have given me all of the iOS options for that control so I’m making the same point over and over again that it’s super easy to build for iOS and c-sharp using xamarin we’re now hitting the point that I’ve just highlighted where we actually want to do something with the data so we’ve done some left-to-right assignments along the top here to get user input and put it into a task object now we’re going to save that in a database now I already promised you that you can write this code once and run it on any platform so how is that going to work we’ve got a line there that saves saves and data to a database we’ve added a component from the xamarin component store called sequel Lite net sequel Lite is available on all of the platforms that we’ve talked about Android iOS and Windows and sequel Lite dotnet is available in all of those places as well to abstract away the problem of you know saving objects of loading them looking them up by primary key and that sort of thing so what we have is a task object looks like any other dto or data transfer object that you might write except that we’ve added a couple of attributes and attributes are really cool it’s like a meta programming construct that c-sharp has that again the other platforms don’t necessarily share and in this case we’re using it to make our object behave like a database table when we want to query it so we’ve created a primary key and we’ve set it to auto increment so we don’t have to worry about it again and before we skip that class can live on any platform so this thing that we have just written is now a database table effectively that will run on iOS Android and Windows to access it we’re just going to create a quick manager class it’s sub-classing an

object coming out of the sequel like net library the great thing about components is it gives you stuff you don’t have to implement yourself and the screen isn’t quite big enough to show the entire class but that’s pretty much it that’s our data access layer for our tasks we can get one we can get many we can save and we can delete and that code can run on all platforms so this tasks database class I can deploy to Android is and 20 Windows platform so this is a pretty small app and you know that shared folder is looking a little anemic but you can imagine in a larger app the more data classes you have the more business logic you have that you you interact with before you save to the database that that amount of shared code grows rapidly and that’s the core of your application that you test you can write unit tests against and you share across all the platforms so let’s get back to the tasks screen and let’s just quickly look at the implementation so here’s the task database we’ve created a static data for it just so we can reference it and so that but that works save item that that data is now going to go to the local database and you just saw in the demo that I was able to take a couple of tasks is done and delete another one and all this stuff just worked the final thing I wanted to look at quickly here is the user interface so I haven’t used a designer in this case I’ve built the user interface up in code and again this will look familiar if you ever did windows forms 2.0 programming you often ended up dropping back into creating control sets like this again this is all iOS code these are UI buttons with UI colors and UI control States it looks and feels like c-sharp to you it is C sharp but this is the stuff that we’re going to write once for iOS because it gives us our nice native iOS feeling user interface and that’s the code that we’re going to have to write again when we get to the Android and the other platforms so we’ve seen quite a bit of code that’s going to be able to be transferred one to one and it’s a user interface the newing up of those buttons and the navigation between the screens that’s the bit we write again for Android and then again in Sam or for Windows so that’s this that’s a brief look at how xamarin app can work this this database driven task sample has been one of our oldest ones probably and it since available on the web site and I also tweeted a link to it earlier so let’s have a look at how we can make that work with paws instead so I’ve got an app but the tasks are all trapped in the device I want to be able to share them I want to better check them on my Android phone as well so the first thing we need to do is convert this this app to path so I’m going to do you really want to remove the sequel Lite yes and so if we looked at the xamarin component store to see how quickly we can add the Parsis DK it’s going to load while I talk it’s super easy like I said this idea this is available from within our idea as well as from within visual studio parses right there four stars and I should have my fire I’ll add that to the app and today there’s a dot update and it’s downloading the new version perfect so while that’s downloading the new version it’s finished it’s already created a reference for me in my references you know if you’re a dotnet program are you familiar with the way a DLL references work so now I have the past component ready to use I know I can delete this tas database because i don’t need that anymore and there’s a couple of things i have to do because of the way pass works so i’m kind of run through them quickly pass uses a string identifier instead of a integer so we’re just going to quickly change that and we’re gonna add some helpers this is called live uncommenting for those of you familiar with presentation terminology prevents me from making massive gaffes live coding so what i just uncommented was a way to

translate my business object into a dictionary that that Parrs can save it’s really similar to the example code i had up on the slides and it’s also really similar to if you’re ever populated a json object directly so it’s not rocket science it’s just something that we need to do to push our business objects out into the Parrs sdk and i’ve also implemented a query so that i can get back the entire list of tasks so that i can populate the first screen of the app so that’s a little bit of magic that’s happening there but it’s not a lot of code and I’m gonna say it again it’s code that I can share across all platforms because that pars SDK that I added is also available for Android and also available for Windows so this code that I’ve written here I can I’m gonna be out of reason in my android project any my other other apps at projects later so my database is gone I can delete that code and enable the code that we talked about earlier so when you bootstrap an app the first thing you want to do is send your PA’s authentication credentials into the code so that it knows when it’s calling the server you are who you say you are and this is your application so past client initial liars like I said it runs on all platforms there’s my secret key that’s going to let me save data to the pars server actually let’s quickly sidetrack to that so you know where to get it so when you when you sign up for pars you will have sent you’ll come to this screen and you’ll see this list of keys just copy them out into the code it’s that simple something else that you’ll need to do and every part tutorial mentions this but I’m going to mention it as well for completeness allow class client class creation so when we save our first task and we push it up to pars the path server is going to look at my credentials and say oh this account wants to say the task I don’t know WTF the task is but with this turned on it’ll say fine I’ll just create a new table called tasks and all these fields that it’s passed in I’ll just create new columns called title and is done you don’t want that on for production you want to sort of lock your apt ability to create dynamic columns and tables down but for development and especially for demos it’s great to have this left on so worthwhile recommending those two spots in the pars SDK that’s what we need to do now we’ve added the pars component to our application and we’ve configured the authentication so that this app can have access to to my account on the path server to work the task list screen and a kill the get items from the database and I’m going to await tasks get all and I really want to look at this code because it cool so this provide this example is a the beauty of PARs and be the beauty of c-sharp so task at all is going to go to the internet it’s going to go deposit servers it’s going to take some time and we don’t know how much time because I could be on an edge connection or I could be on 4G with if there’s no a wait there everyone knows what happens to the user experience right they’ve pressed a button to trigger this and if that task get all method is going to take a minute to return the user interface is locked up this methods running synchronously if you’ve used a synchronous method to do your web request nothing’s happening on that device until something comes back or it times out a weight and the async/await paradigm that’s introduced in c-sharp 5 is telling the compiler at this point this thing that I’m asking you to do it could take some time and I don’t know how long so let the user continue with what they want to do and I’ll call you back and if you’ve you’ve all written asynchronous code before we’ve had an access handler you’ve had an error handler you’ve chained them together you’ve done error checking in both everything that’s all done for you here at the very start of this method I turn the network activity on so that the spinner is showing the user knows something happens and in the finally block I turn that off in between those things the user can do anything well that task at all is running the

compiler a created continuation it’s returned control to the user interface they can scroll they can do stuff I could write more code that does stuff and when tasks don’t get all returns that list of tasks is going to pop up on the screen because the methods going to resume from this point so we’re going to await for tasks at or to finish and go into other stuff the user interface is going to be responsive when that network request comes back after some period of time the tasks are going to be in the response and the methods going to continue up where it left off oh now I have a list of tasks was there an exception in that request hopefully not turn this off reload and reload is using link to do a really funky display of those tasks on the screen so the only thing I’ve changed you to go from having a database up to a cloud op is that one line of code but the only reason I can do that the database up was synchronous it was happening locally and it was happening quickly this is an unbounded time to complete this get get list of tasks the only reason I can replace one line with another line is because I can wait it the user face continues to be responsive and when the data comes back it comes back and the method continues to run as I was running before so that’s actually all I need to do to get the list of tasks back from from pars what I’m actually going to do is just quickly fix up the three methods in the detail screen so I’m killing get tasks and I’m creating a query where I get a specific object by an ID so this is my select star from tasks where ID equals in pass syntax and again once I’ve set that query up I’m going to wait for it to finish the user interface will remain responsive and when that data eventually comes back from the cloud the method is going to continue to run like it was before was there an exception nope and finally turn the network activity off and then continue doing what I was going to do which is get the data back that path sent me and display it on the screen so once again the only reason I could take that database op which was local and it was always going to be fast and replace it with a network query that goes out to the cloud is the await syntax which is going to not block the UI while that requests and response happens I’m not going to tell you that story again for the next one just going to do it that’s to save and and that’s the delete so literally maybe we change five six seven lines of code to convert this app from a task-based a database based app to a parse based app and I’m gonna run this one because it’s a demo so there’s the old one disappearing and we’re loading from pars and we’re still loading and I know if you can see down the bottom here like there’s Twitter eleven threads running up that’s async away oh there’s stuff happening put on a thread when it comes back put it to the UI so here’s a new task list where is that coming from you are asking it’s already in pass so I did some testing earlier so those elements those rows there are now appearing in my app I can tick off that I’ve bought my soy milk and crackers and the cheddar so there’s and if you feel that tick just appear there I was hoping one of them would take a period of time let’s try it again let’s turn it off it’s not yeah it’s happening too quickly that flick that’s happening where the loading screen comes up and then the data appears that’s the code of waiting in the background you can grade the screen you can put a spinner on top you can just leave the fields blank but the user interface is still responsive while I’m pulling this down the network activity tells me that it was waiting for the latest release to the latest data to know that it should disappear so that responsiveness remains there while the

background operations happen so that’s cool we’re rapidly running out of time but I haven’t proven that you can actually share this code so let’s spend the last ten minutes looking at Android so this is exactly the same app except built in Android I’ll show it to you first so that kind of ruining the suspense the Android emulator is slower and while we’re waiting for it to go what we’ve got on the right is the same code that we used in iOS the same code that using Windows to initialize the client let’s start that up again so yeah so there’s the application well there’s nothing there well this is same waiting that’s the task of waiting I can still do stuff but it’s not a good idea because it’s about to be replaced with with data from the server and yeah the the emulator is definitely slower than the other platform there we go so that was a bad way of showing a good example that the user using a face is still responsive while the eight the await is happening at the code level now I made a bad design choice by letting the user click around there but like I said the option is up to you what you do while while the codes are waiting the point is its responsive in the user doesn’t feel like they’re locked out so let’s go back to that something that’s already been bought and quickly look through the anatomy of an Android app so that you can see that everything is the same as it was on iOS so pause client in the app bootstrap section we’re initializing it in the task list screen let me stop that in the task list screen we’re doing something very similar to what we did in iOS we’re just awaiting to get all and when that happens we call reload and a task list adapter is a way of rendering a collection on the on the ListView in Android you don’t need to know the implementation details of that it’s fairly boilerplate but I guess it’s interesting again to notice this is an Android class based adaptive type task and we’re implementing it in c-sharp all this stuff is c-sharp we’re overriding Android methods with c-sharp we’re using the novel syntax in c-sharp basically implementing Android native behaviors in c-sharp again this is the stuff that you’re implementing specifically for Android and you know this stuff here this is the stuff that you can just reuse the code it’s the same it’s the same on iOS it’s the same on Android it’s the same on Windows the tasks list screen is going to look much the same as well so if I scroll down to the try caches those lines are exactly the same lines of codes we had in the other platform in the other app we’re setting up a query to get by ID we’re waiting the result we’re getting a task from that and then after the catch we’re returning a base that we did to display on the screen same for the save control so for the same method and same for the delete method the differences I guess if you want to look into the Android application itself is I showed you before an iOS app where I really quickly mute up all the controls in code for Android we have a designer that you can drag and drop on to so the controls are all there you can see there’s properly lists down the side where you can edit and name things on the screen so you’ve got all of the controls that you would expect from a drag-and-drop designer as well as the ability to edit the source and like I said salmon’s working on and we currently have in beta a similar tool like this for iOS this is available in Xiamen studio and also in Visual Studio so Visual Studio will have the same capabilities for designing Android and iOS screens and you’ll be able to do all this on the PC as well and yeah if we go back to get

these things side-by-side hopefully that thing will run this Android emulator is clearly a lot slower let’s see again this is a waiting so the user interface here decision would be up to you and there we go just save that and again that’s going to go out to pars update here at some point and then hopefully when this gray loads it’ll say it was done and the done switches on so that round-trip kind of worked okay that’s about all we have for a demo and we’ll go back to the slides because the last thing I wanted to leave you with after you’ve done all your past development and you built a cross-platform app that runs on iOS and on Android you probably want to test it and xamarin is really excited to introduce xamarin test cloud which we’re currently running as beta which lets you test android and iOS apps on a physical bank of real devices and get the results back basically all through your browser so there’s an app Explorer you can upload your app and just let our code just manically click buttons and type in two inputs and see what happens or you can write targeted scripts in calabash that will let you activate a button type specific data into an input there’s hundreds of devices for both iOS and Android and the vectors are like it’s obviously different versions different screen sizes different manufacturers and the output is incredibly detailed so for every step of each test there’s a screen shot taken for every device as well as the device log like the console output that was visible Lord that was output at that point in the test so you can probably see it better on this screen you can see what’s happening with your application there’s two devices in this set of six have a different theme applied by the manufacturer and it’s stuff like that that’s often hard to find when you’re when you’re trying to test on your own two or three devices that you friends have so test cloud is like I said xamarin calm slash test cloud open for beta now and a really nice way to finish off your application development by actually getting and tested before you distribute to users that’s everything because I wanted to have time for questions and I like two minutes to go but if you have any questions we might be able to squeeze a couple in and thank you everyone for coming as well so I’m wondering if you can run the native code side by side with xamarin like is there a way to maybe build the stuff you’ve built for Zaman and and put it into a library that you can access on other native platforms so it doesn’t really work well that way where you would build something in xamarin to give to an objective-c or to a Java developer but you can certainly pull in objective-c libraries or existing Java libraries to xamarin projects so we provide tools and documentation lets you do that basically we give you the ability to describe how you want the API to be represented so you provide a mapping between that tools methods and parameters how they would be represented in c-sharp and then you you can include that in your xamarin apps or give it to others to include in there xamarin apps slightly different mechanism for Java and objective-c but the end result is a package within a with the c-sharp api that people can use can you talk a little bit about code sizes for exam or an app versus a native Android or Objective C so we ship the runtime that you need to run c-sharp inside of each app it would be possible technically to share it on Android but none problems could exist with people’s mismatched versions etc so we ship it within each app we use linking like it’s a strongly typed language so the language tree is easy to prune we take off as much as we can and typically the overhead of shipping that is 2 megabytes for an iPad app with a full-size Retina horizontal and landscape startup image that PNG is bigger than 2 megabytes so unless it’s

flat black so there’s that’s the overhead but it’s fairly insignificant in the size of today’s applications with lots of graphics heavy resources I think that’s it with like 10 seconds to go thanks everyone