Creating and Running an Ionic App

Samarth Agarwal
A free video tutorial from Samarth Agarwal
Application/Web Developer, Instructor, Tech Enthusiast
4.2 instructor rating • 11 courses • 15,816 students

Lecture description

Now is the time. Let's create our very first Ionic App. Not only that, let's also run it in a browser, and also on an emulator.

Learn more from the full course

Ionic Apps for WooCommerce: Build an eCommerce Mobile App

Learn Ionic Framework and start building your own eCommerce app for Android and iOS using HTML, CSS and AngularJS.

04:24:13 of on-demand video • Updated June 2016

  • Create amazing mobile apps using Ionic
  • Create apps that work on both Android and iOS
  • Build eCommerce Apps
  • Build Apps that use WooCommerce as a backend
  • Write apps by using HTML and JS
  • Write and understand AngularJS apps
  • Build and deploy apps on Android
English [Auto] Hello and welcome to Iona caps for newcomers in this video we are going to create our first ionic application. So I have created this folder inside my C-Drive projects and we will create our own application inside this project folder. We will use this project for the throughout of course. So now that we have installed in Cordova and we can use ionic commands in our good bash or in a command prompt. So it says to that. So here we have our good bash. You can use the command prompt and you can see that I am inside the projects folder in my C-Drive. Since we haven't started down in Cordova we can now use only commands to create an applications see how to do that. All you have to do is type in onic start and then the name of that allegation that you wanted to create. Since this is our first access name the app first app and then you can optionally provide the name of a template that you want to use. We will talk about templates later in this lecture but for now I'll just use the blank template. This will help us create a pretty much blank application with the name for us to. HURTADO And as this finishes you'll notice that a new folder. First up will be created inside the project foetida. This might take a while depending upon the speed of your internet connection. And once this is done we will run the application in the browser. We will also see how we can run this application in Android emulator. OK. So the first folder has been created. OK so the creation of an application has completed successfully. Now let's try and run this app in a browser. All we have to do is change the industry to our project directory which is first tab and now we can type in ionic. So this will open the app in your browser and you can see that the app is open in the browser. OK this is a pretty much blank application. It just has a header on there that says I own it blank start bar does does it actually feel like a mobile application. So how do we run this inside a browser and make sure that it feels like a mobile application. So what we can do we can press control-C to stop this over and now we can keep an eye on X-server. By this time we will use a flag card dash dash and this will enable the lab and the lab more allows you to view your application as it would look like on Android and iOS device. This is a really cool way to start applications on the live U.S.A. simulator. And on the right you'll see an android emulator. These two Imler does have their own limitations that we'll discuss later in the course. Bart Forbess of debugging and testing at application. This is fine. And for the most part of the schools we'll be using this way of debugging applications. So now you know how to create basic ionic applications but what about the templates. Now if you go to Iona documentation you'll see that onic supports three types of templates. The first one is that tabs which is a different template that is used and not template is specified while creating a new application. There is a side menu template that we'll be using to create a local application and then there is a blank template that we have just used. Now let's create another application with the side menu template and see what's the difference. So I just got out of this directory and I'll type in ionic start. Since this is a second app I type in second. And this time I'll use the Seidemann template here then. And this time around it will create another forward in my projects for it. And we create an app based on Seidemann complete OK. So a new form that has been created will have a look at the contents of the form in the next picture and it's done. Now let's just change the current directory to our application. There three and it's just real quick type and so dash dash. And this will launch that application in the browser in the lab more. And we have a basic onic application already set up for us and this application has a side menu that we can open my jagen this menu like this and it has something already created for us like the search page the browse page playlist. We can click on any of the playlist and the playlist page will open. So this is a basic structure that is already created for us. We need to modify this structure according to our own needs. This is how we create applications based on it's See how we can deploy these applications to emulate those and mobile devices. So I'll just press control-C to stop the software. Now if you want to deploy this application on an emulator you're going to have to build this application for a particular platform first. So if you want to build this application for Android you'll have to download and set up Android is decie from Def Leppard or android or com slash as the key word and click the green downard button that for the download the whole Android studio and was set up there and word is decay for you if you're going to develop applications for us. Go ahead. To Def Leppard or Apple or com slash I was. And then you can download the eyeless as DK and set it up on your map. Once you're done with that all you have to do is type in ionic platform. And since I've learned to add the platform Android because I wanted to build this application for android I just add Android and hook into this will add all the required files that we need to create an application for Android. Says this is also an operation this requires internet and the time taken to complete this operation depends upon the speed of your internet connection. OK it's done now all you need to do is type in ionic around Android. If you have an emulator up and running application will be drawn in your emulator. If we do not the emulator will be launched and your application will be installed on the emulator. But if you weren't already for this application on your own mobile phone you have to connect the mobile phone right now via the U.S. cable and enable us to be debugging mode on your Android phone. I've been I only Quraan on Android and who don't. And your application will be loaded onto a mobile phone or on your Emily. Since I do not have an Android phone connected right now it would be logged on to emigrate to McFate for this to complete and once it completes the application they will be launched on them Unico as you can notice. You also get a message no Daugaard specified deploying to me. Since I can not find any Android phones connector it is deploying the application today. OK so the application has been big successfully not just deploying the application on the emulator. So I have my emulator on the left and the console on the right and it says that the installation is successful and now its launching the application and you can see on the left are that allegation is being launched and there we go. So now we have the same application running inside an emulator that we had in the browser. So this is how you deploy it applications on your emulator and on your Android devices in the next redo you will examine the folder structure that we get when we create a new an application.