Tag: tutorial

Let’s talk about where we find things in our Xamarin Studio. The first thing I’m gonna to talk about is this bar right at the top here. So this white bar which may look familiar to users of Mac, because you have it in iTunes and the App store and things, it’s a bar that tells you where your errors are located and various messages. So, if I double click it, it’s not happening right now. But when you have an error it will show up here at the top and if you double click it, it will take you to the error, and that’s very useful. On the right hand side of the bar, this arrow if I click it, it tells me there’s an update for Xamarin. At the moment, I’m not going to update but just know that occasionally you might have to update to a beta channel or in extreme cases an alpha channel. Now this is because sometimes there are errors in Xamarin and it doesn’t quite compile right in a way that either Android or iOS accepts. So, might have to update to the latest beta, or alpha, just remember that. Ok, If we look at the left hand side of the screen we have this big play button, and the play button allows us to run whatever currently selected project we have in a device or simulator. The two ways of running it are either in debug mode or release, and the difference between the two is debug is where we want to be as developers because debug allows us to receive messages from the device when things go wrong. Release mode will not send us messages, so we won’t be able to see if something goes wrong all we see is the app crash on the phone. In the next box, when we click it down, I’ve got various iOS simulators set up here, and you can go into Xcode and set up more iOS simulators but these are the standard ones that Xcode should install for you. If you plug in an iPhone it will show up here in the iOS devices list, and you can run it on your iPhone or iPod or iPad. I don’t think you can run it in your trial edition of Xamarin though, but correct me if I’m wrong. Just below this panel, we have the solution, which I went through before with you in the previous lecture. I didn’t address UI tests because we are not going to look at that in this tutorial course. You can look it up on Xamarin’s website, but at the moment it’s not really within the realm of our project. The large window in the middle here is where we do the majority of our work. So if I come over here to NoteTaker.iOS and I go to AppDelegate.cs and I double click it, it will open the middle here and show me a whole bunch of code, and of course I can type things in here. Here you’ll notice the first feature of Xamarin, and that’s if I have a piece of code that’s wrong that it disagrees with it will put a red line underneath it. That tells me that there’s an error and that will be something I have to fix. So, I’m just going to delete that will save it back and if we look over here on the right hand side, we have a properties panel and this properties panel is related to this file we’ve just opened. So you can change the build action compile resource, image resource and generally you won’t have to look at this side panel except in extreme situations when you add things to your project. For example, in the resources images folder it will automatically set it as an image asset for you. So, there’s no need to worry about that kind of thing. So, we’re just gonna close that, and I’m going to close AppDelegate. Right, so if we look down the side here, I’m just gonna take you into another part of the GUI, which is a graphical editor, here we have Main.storyboard. So if you double click that, that’s gonna open up, and it usually takes a little while to get going, but it’s a graphical editor that allows you to place various elements on the screen in iOS. You do not have this sort of graphical editor in the Android version of Xamarin. They have a different way of doing things, and we will cover that when we get to Android. Once that’s loading if you come over here, we have a section called toolbox on the right. In Toolbox we have a whole bunch of things that we can add to our graphical user interface. I’m not going to go with what they are, but they are all here. To put them into our app, we simply have to click and hold and drag them across and there they are and to delete them, select this grey bar at the bottom, and press Command+Backspace and that will get rid of it. At the top of the main screen, you can click to see what it will look like on various devices. So on iPhone 6 it will look like this. On a iPhone 6 Plus it will look like this. The items that are already laid it there for you, you can tap them once and if you come over to properties, you have three tabs, Widget, Layout, and events. Ignore Events because we will do that ourselves. Widget lets you setup your item that you have on screen, so I can give it a name, a class, if we scroll down, you can give it an alignment relative to the screen, there are many things we can do, Layout, tells it exactly where it should be in the screen, and you can align it, to the center of the whole screen, both vertically and horizontally. Now, for this course, I am not going to do this tutorial, I’m not going to use storyboards, at all. We’re going to do everything programmatically, and the reason we are going to do everything programmatically is for your learning experience. So in the future if you want to use a different platform, that’s not Xamarin, that might be PhoneGap or Intel SDK, whatever it’s called now. So for this course, we’re not going to use storyboards. If we come to the top we have our menu, and if we click on the first one Xamarin Studio we can check for updates, see what version we have, and change our preferences, etc. If you click on preferences, we find the screen that allows you to set various settings through out the app through out Xamarin, rather. The most important of which is this one down here, SDK locations and Xamarin needs to know where these are for both Apple and Android. The Apple one will search the default location. So, when you install Xcode this is what it searches for, and it will also search for Xamarin.iOS which is installed with Xamarin Studio if you just install it the default way. Android, 2it needs to find three things the Android SDK, The Java SDK, and the Android NDK. These are usually located in the standard folders. If you can’t find them, if you come into here and there are red X’s go unto the Xamarin website or unto the forums and request help from them because they will take you through it. That pretty much covers, what we need to talk about with the GUI, and that brings me on to section 3, where we are going to plan our app before writing any code. So I look forward to seeing you then.

Now that we’ve created our project called Note Taker, you’ll notice there are 4 folders. The first one just called NoteTaker is our shared project. Now this folder is where we’re going to store all of our shared code. So, all of the code for example, in this file if I double click it, it will open it is accessible using both NoteTaker.droid for Android and NoteTaker.iOS for iPhone and iPad. If you put code for example in NoteTaker.droid NoteTaker.iOS won’t be able to access it, and there’s a very good reason for that it’s because iOS and Android are very different code-wise. So, you never want to share your iOS with your Droid code, ever, ever, ever! Sometimes within the shared project we can have what they called a conditional compiler, which looks something like this. If, Android and we can write endif and #endif, and this basically says, anything I write here will be applied to anything I want to build for iOS, and anything I write here will be applied to anything I want to write for Android. If I want to write for Android, it will of course ignore everything in the iOS section, but we will come to that much later on. That’s just a quick note. Ok, going to close that. So, if we come down on our folders here, we have NoteTaker.droid and NoteTaker.iOS. Now, the iOS one is in bold. That means it’s the currently active one. So when we click play up here it’s going to send it to our iPhone, or to our simulator, or our iOS device, to whatever we’ve chosen. If we want to change which project we have active, you go to droid, you right+click, and you go to set as start up project. So if I click that now, it now comes up at the top with the bunch of Android devices. Now, sometimes you would be in let’s say release and then you right+click a project, and you won’t have set a start up project. It’s a common error that happens and I don’t know why Xamarin does it, but just know it’s best to click debug iPhone simulator, right click and then it appears again. Ok, so make sure that you’ve selected iOS as your start up project. Close your Droid one, because we don’t want to look at that in the moment. So, in your iOS project we have a bunch of folders once again, and these base folders that your project starts with you should never ever move or change the name of. You can add folders to here if you right click it and you click add new folder, that’s absolutely fine. However, these four here you should never delete. Otherwise, your app will not build and you’ll have lots of errors. So, I mentioned it earlier but it should go without saying, any code we write for Apple goes into here: NoteTaker.iOS. Any code you write for Android goes in here: NoteTaker.Droid, and we never want to mix the code between the two. Shared code goes into just NoteTaker and that code in NoteTaker will be accessible by both Android and iOS. Now that we’ve covered where we put our code, and the whole project structure, join me in the next lesson when we walk through the Xamarin Studio graphical user interface.

Now that you’ve got Xamarin installed, I want you to go ahead and open up Xamarin Studio. Note that you can follow this tutorial using Visual Studio using the Xamarin Plug-ins for that, and the workflow is pretty much the same. So, if you want to go that way that’s absolutely fine, but we’re gonna use Xamarin Studio. Once you’ve opened it, you are effectively in a lite version of Xamarin Studio, and what we need to do for this course to is to create ourselves a Xamarin account. So, if you click this log in button in the top corner it will ask you for your account details. We don’t have those at the moment. So come down here and click create account, and once you do that it will take you to this page on Xamarin’s website. You just put in your name, email, password, and you have the option here, to start a 30-day Xamarin trial. Now, this gives you access to the business version of Xamarin, which is what we want. Once you have finished this course the business version is the one that you should have if you want to use Visual Studio. You can get by on the Xamarin Indie Edition, which is much much cheaper, I think it’s a quarter of the price of the business version per year. This indie edition is perfectly fine for personal projects. So, once you’ve done all that click accept, and then come back here and enter your details. Once you’ve done that and you’ve clicked logged in, it will tell you: “You are now subscribed to Xamarin business.” I can subscribe on four computers, but on a trial I think you can only subscribe on two computers. So go ahead and close that. Let’s get started with creating our very first solution. So, come over here and click new solution. Now, if we look through the various options we have here, we have cross platform iOS, Android, Mac and other. If you’re only going to create an app for a single platform i.e., iOS or Android that’s fine, you can choose one of these options. I would advise to always choose cross platform because if you so decide you can add another platform later, and it’s going to be a lot easier than trying get all of your files together. So, we will click app and now you have a choice on cross platform, we can either do forms or native. Personally, I’ve used Xamarin forms and if you look over here in descriptions, it doesn’t actually say anymore, but it used to. Xamarin forms lets you write ones and run everywhere even on the graphical user interface which can be a good thing, but it can also be a bad thing because you can’t use the full system resources and various user-designed processes on Android or iOS if you use a generic version. But, if you choose a single view app, it allows you to use the entire Graphical User Interface native to each platform. So you can use everything that iOS can do and you can use everything that Android can do, and forms doesn’t let you do that. So, I would always choose single view app. Click next. It’s going to ask you for an app name and this could be anything you like. So, we’re just gonna call this note taker, and you’ll notice down here it doesn’t identify it for you. Now, this indentifier is going to be used to identify your app within the phone ecosystem on both Apple and Android. It’s typically formed of three words each separated by a period, and the first one is always com, the next one is your company name, but in this case I just put my name .grant.note_taker, and this is a unique identifier for your app. Right, so if you go to your Android developer account or your Apple developer account this identifier must be free. You’ve got to make sure that it’s free. Then we come down to shared code. We can either use what’s called a portable class library or a shared library, and the only difference between these two is how easy it is to share your code with other developers. If you want to share your code, and package it in one file, and to send it to loads of people you use a portable class library. If you want your code to allow you to do a lot more things then we use a shared library, and generally, I would say, let’s use a shared library and you can’t share your code as easily with people, but it allows you to do a lot more. We’re gonna take advantage of that so we can write a shared database later for both of our apps. So, go ahead and click next. It will ask you for a project name and a solution name. I would ignore this for now, just leave it as the default and I will explain what that means a bit later on. Lastly, you want to save it. So, wherever you want to save it it’s fine. You can save your projects in Dropbox. It syncs absolutely fine, no problems. So we’re gonna hit create and once it has worked through what it needs to do you come over here, and you’ll notice you have a bunch of essential folders, a tree structure. So, we’re going along like this. In the next lecture I’m going to explain exactly what each level of that tree structure is and how we’re going to structure all of our apps relative to these trees that you see here. So, join me for the next lecture.

I’ll just go through a couple of the numbers that I have when I first started out making apps. I started out making apps just for myself because I needed various things other apps couldn’t do. It was more a curiousity, if thing. Curiousity will take you very far in development as well. I found my very first client on a freelance website, and he wanted an android app to record a voiceover track. For that I charged him 200 pounds, which was for the first version. Following that, he said he would like to have this on Apple, and he would like to publish it on the app store with various enhancements and Facebook sharing. To do that he paid me 2,700 pounds. Later on he asked for a few more customizations, and so that added up to another 1,800 pounds, and in total it was about 4,500 pounds for that app. Now, that first app took me a month to make, and that was with me as a relatively new beginner to the app development world. Following that, he requested the app on Android and I charged him again 4,500 pounds to put it on Android, and that took me 2 weeks. So, you can see the potential really to make money is there. You can make a lot of money developing apps. I will tell you don’t keep your eye on the money at first, keep an eye on becoming a good programmer. I put LEARN in capitals because that’s what you need to do for the first 6 months. So, you need to be in this for the long haul, and once you’ve been through the long haul, money like this will be absolutely nothing because once you know how everything works, business can come to you. You want business customers because they will request a demonstration app which you can charge and average of 10-20 thousand pounds, and that will take you a month at most. Once they have that they’ll then be confident to invest in you. Depending on the app, I mean the sky is the limit, and we will be looking at 100k to 500k. So, throughout this course. I want you to follow it carefully. If you don’t understand something, ask. Also, I want you to go on YouTube, and on Google, and search for various things that you see popping up. So, with that said, I look forward to seeing you in the next section and we will get on with setting up our brand new project in Xamarin Studio.

The very very first thing we need to do is install Xcode, by Apple. Xcode is the traditional way of creating Apple apps. To use Xcode, you have to learn a language called Swift, but we’re using C# and what Xamarin does is it goes to Xcode with its C# code and says could you translate this for me? It’s not the completely correct way of describing it, but it will do for now. So go ahead and download Xcode and install it, and install all of the things it asks you to install. I’ll just point out one thing down here if you are a novice programmer. If we look at this customer review, he goes: “I mean seriously, why would you cast a swift array to an NS array?” If you are new to programming, you’ll come across this a lot. The correct way to do things, the opinionated way to do things, and I will tell you right now, there is no right way, there is no wrong way. Well, ocassionally there is a wrong way. But there’s no right way there are many ways to do things in programming, and that way, it’s more of an art form. So, once you have learned the basics then you can really do it the way your brain works. Okay, so if you come across someone else’s opinion, they say you should do it like this, or like that, don’t be afraid to fight back with what you think. Once you’ve installed Xcode your next step is to go and get Xamarin, and to do that you simply go to Xamarin.com, you click download, you fill out the form, and you download for OSX, and of course you could also get it for Windows. But, if you want to build your app for iOS, you need to be connected to another Mac. This is why I’m doing the whole course on OSX. So, we don’t have to worry about that, but just know you can do that. So, once you’ve downloaded Xamarin open up your installer, and it’s going to present you with a whole bunch of options to install Xamarin. Now, there are very a few sections of Xamarin that we need to consider installing, and it’s about to tell us what we need. You can have Xamarin.Android, Xamarin.iOS and Xamarin.Mac So, I have all of these installed, even .Android, I don’t know why it’s telling me I need a new one. Perhaps it’s an update. Once you’ve gone through and installed that, and you’ve continued, it will give you a screen that asks for prerequisites, like the Java development kit, the Google SDK, and various other bits and pieces. So, go ahead and install all of those, and once you’re done, please join me for the next lesson. I’m going to give you a quick overview of my personal experience with charging for apps, and that will be my experience where I have gone out and contracted with clients to make apps for. I’m sure that’s information that a lot of people would actually like to know.

So now we have to setup our hardware, which for this series of tutorials is ideally going to be a Mac. This can be any kind of Mac. A MacPro, a MacBook any of the older Macs as long as they run at least Yosemite, which is most of them at this point. I am currently using MacBook Pro, but as you can see they are pretty expensive. I couldn’t afford a MacBookPro until I got my first paycheck for one of my first apps, which was about 1,5000 pounds, and I bought a 13-inch MacBookPro with that. I can understand that perhaps you don’t want to make that investment right now, so an alternative is to buy a used MacBook, one of the older ones will be fine for what we are doing. Alternatively, you can go to websites like tonymacx86.com and these websites tell you how to put together New Entry 32 hardware so you can run OSX on a custom built PC. On tonymacx86 there are several articles that will assist you with building a custom Mac, and it gives you a list of ingredients, a recipe if you will, of all the necessary hardware components. Now, if you’re not comfortable with that, that’s fine. You can go to their laptop guides, and you can buy an off-the-shelf laptop and there are lots of helpful people on these forums that will tell you how to install OSX. So we can use ASUS, Lenovo, there’s all different kinds. Personally, I started with an HP EliteBook. I would recommend, if you’re going to configure what is called a Hackintosh, this is definitely where you should start. I’d recommend the model 8470p or something along the 8400 line. You can also have an 8440p. If you go back to the tonymac website and you look in the forum, there are a lot of recommendations. These EliteBooks have had an installer made by tonymac that lets you install OSX without too much fuss. So, I’d recommend that. The reason we need to run everything on a Mac is because iOS apps for iPhones and iPads will only be compiled on a Mac, and we need to use specific Mac software. Okay, with that said, once you’ve got your hardware setup, please go on to the next lesson where we will setup Xamarin, and all of the required software.