Hello, in this video, we're going to show you how to set up ionic and create an application. I'm doing this on a Mac, the process is essentially the same if you're on Linux, or on Windows, the only one probably made a difference is you can do iOS development, or you can deploy it and test it on an iOS device simulator via Mac world online, or on Windows, you can own it, you can only test and deploy it for Android, we'll have a separate video covering Android. So this tutorial is going to simply show you how to set up create an application and then just briefly touch on testing in iOS please really simple to test it on iOS. First of all, you want to make sure you've got node.js installed. We're not gonna be coding you didn't know.js is just part of node.js get NPM which is node package manager.

It's a great way of creating projects, integrating library With frameworks, that sort of stuff, a lot of frameworks and API is nowadays, or relying on the fact that you would have NPM installed via node.js. So I recommend learning node.js in your spare time. Anyway, we've got a video series on it on our education platform. So now learning duck code at UK, there'll be a link in the description for that if you're interested, but at the very least, install it for NPM. So to do that, just go to the node js.org website, and either just install the long term support or the current one which has the latest features are recommended long term support, the installation itself is blank free. Once you've got that all set up, you want to load up terminal and to confirm node.js has been set up properly with NPM.

Just type in the NPM command. And if you get something along these lines, fantastic. If you get something saying Okay, I'm gonna put NPM J i say get something like command not found, then you know something's wrong. And feel free to ask a question and we'll help I'm not going to clear this. The first step for this tutorial is to is to install Cordova via NPM. And to do that you do sudo npm install dash g Cordova, click enter, type your password in.

Don't repeat the mph it is actually tracking what you're typing. So just click enter once you don't and if you just download and install Cordova, Cordova is just use to be able to get our application bundler using a native wrapper which allows us to run it as a native application. Hence the whole point of using something like on onic This shouldn't take too long. So just be patient. Okay, you will probably have a lot more text than that if you're installing it for the first time, because I've already installed it. It's a okay for me.

Or if you're online next, or you're on Windows, just make sure. For Windows, you've got something like the Java SDK governing the Java JDK, the Apache and Android SDK installed and set up because you'll need that for your Android development. If you just Google Java JDK Apache and an Android SDK, you can just get the latest version installed. Very simple stuff, but on Mac don't need to do that. And so I'm interested in Android Dev, if you are to make sure you install those prerequisites. So now we need to install ionic in our system.

So to do that, we do sudo npm install dash g I unyk gonna ask me for my password because it's the same instance of terminal, and I had already typed it in once, but it usually would if let's say I close this terminal down, then I reopened it. And this shouldn't take long as well to install ionic. Unless this commands done, we've actually installed ionic we can create our ionic application. That's the beauty of something like NPM he allows you to set up in store just by using a couple of simple command instead of you know, downloading something yourself, copying and pasting it somewhere and hoping that it's in the right place, then maybe setting up environment variables and blahdy blahdy blah. So also what another fantastic thing about NPM is doc man PM, as a side note, because this is just downloading and extracting demographic by NPM or something along the something like NPM is when you're updating when you're updating you Just run like an update command.

And he thought out everything in your system. Okay, so this is installed. Again, you'll probably have a lot more output than this, but cover your install. That's all I've got. Now to create application, I'm first just going to CD to our desktop to create an input ionic start. Now the name of your project, so I'm going to put ionic is awesome.

And you can have a optional argument which is blank. If you run it with the blank argument, you basically just get a blank project that don't have nothing more than essentially a single page with a title text. But if you run it with a blank object, which I'm going to do now recommend you do the same because it gives you a tabbed application where you've got tabs, different pages, and it's got a few controllers in there using Angular JS is a great way of learning how ionic and Angular JS work and how they inter gray with each other. If you do want a blank project, just add blank at the end. So just wait for this to complete. And then we can start diving into our code.

So nice is asking us to we do want to create an ionic account for push notification. If you're interested interested in that, just put yes or no, just keep it simple. For now we're all done. So just go to our application. So this is our project. If we go to platforms, by default, we have iOS in there, but that's only because I created it on a Mac if I created it on Windows or Linux, this will be empty and I would need to add the Android platform.

I'm going to cover how to add the Android platform and how to build fans. And testing and all that other good stuff in a separate video because there's quite a lot of content to cover. The only thing I'm going to show you in here is how to build for iOS, and how to just quickly test it. So to build, first of all, you need to make sure you go to your directory, your new project. So mine is ionic app is awesome. And to build it up ionic build iOS, set that run and that will just build your project.

Okay, I believe that's done now. Yep, that has now successfully don't know why we're this all on one line is sort of confusing that's built. So if we go to iOS and open up this Xcode project We can actually no run it. And in here, we have our project. So let's let's wait for this bad boy to run, we can see this amazing tabbed application that you get by default. So here we go.

It's all loaded up. And we got a lot and welcome to ionic chat. This is just like a list view got paid systems is fantastic. It just provides a few different components to check out, see how it's all linked together, and just test it out. So few things to note. The code that you modify is all the code in this www folder, pod staging, you'll find another www folder.

You don't want to touch this at all. Because when you modify the code in here, and then run the code ionic build iOS command, it actually copies any changes from here to this ww folder. So you just want to leave this and modify here. And that's the same for Android. Because if I just minimize this Sorry about that. This is the WW folder that he was referring to though, or changes you want to make within here, I actually recommend purely just using Xcode for just deploying to a simulator, testing the on device and just creating release versions, and only specific stuff for iOS, like version build, and that sort of stuff.

Generally speaking, I'll recommend coding using an external ID or text editor like brackets or sublime, because the code formatting the IntelliSense isn't very good index code for web development. And that's essentially what this is in terms of the sort of code that you access into CSS, JavaScript, HTML, and all that stuff. Good stuff. But what I'm going to do is just open up this and in here to lock in, I'm not going to do that. I'm going to go to templates. So if I open up, I open up the tab.

This one right here. I'm gonna make a slight modification to it. Firstly, welcome to ionic. I'm gonna say welcome to some more system. So if I save that, close it, and I'm going to show you what happens if I run it without without build in it. So I've run that now.

Application is not it still says Welcome to ionic because we need to run the build command which is ionic build iOS. And once this is built, build succeeded close for some reason. And close the projects or lemons reopen that. Weird why closed it? So the updates have now been copied over. So if I run it now after running the build command Oh, sorry, I ran the cord over lib instead of the actual project as well just sitting here like lemon thinking, why the hell is this not working?

So far let's let this open up. And as you can see, says Welcome to sonar systems. I said what wanting to know, need to always run the ionic build iOS command within our project directory, and then you can just run it via Xcode. And that's it for this video on setting up an ionic application. If you have any questions Feel free to post them on our education platform sonar learning Dakota, UK, there will be a link in the description. to that.

We're going to have a separate video on testing the application code in using ionic. We're going to have a separate video on how to build and test on a Android device and in the Android platform and all of that all the good stuff. So look out for that video. If you have any questions, like I said, feel free to post it on our education platform below this video. Please give it a thumbs up hit that subscribe button and leave us a comment. And as usual, thanks for watching, and I hope you have a wonderful day.