Tutorial on Apache Cordova App
0.00.00[MUSIC]
Kirupa: 0.00.12.1 Hi everybody, my name is Kirupa, on this short video, we are going to dive right into building our very first Apache Cordova app. So first, go ahead and launch Visual Studio. Once video studio launches, you will see a start screen. You will see a lot of helpful links and news about what is going on in the Visual Studio community but what we want to do, is create a new project.
00.00.30.2 So go ahead and click on the new project link form the start page, go to file, new and select the project link form the menu bar. Once you select new project, the new project dialogue will appear. And this dialogue gives you an overview of all the various projects that you can create as part of your Video Studio installation. Well we want to create our Apache Cordova apps so find a JavaScript note or a Type Script note and under it find a sub note called Apache Cordova apps.
00.00.55.3 And once you’ve selected the Apache Cordova apps category, using the templates that we currently provide so I don’t need to build your first project. And I am going to keep it simple, I am going to take a blank application template and go and give it a name, let me call this one, Hello, World Channel nine. And once I’ve given a project name, I am just going to go ahead and create it by clicking the OK button.
00.01.16.8 Once you click OK, Visual Studio will take a few seconds to go ahead and get your project created. You will see a start page that gives you additional information on how the next steps can be and in a solution explorer, which is the tribune on the right hand side, you’ll get an overview of what your files and folders that make up your project currently are. And these files and folders mimic the exact structure of the pages you would see if you were to build the Cordova project not in Visual Studio using other third party tools available.
00.01.43.7 So what we want to do is go ahead and just build a simple Hello, World app. So I am going to go ahead and open the www folder and open index.html. And when you open index.html, you’ll see the primary view in Visual Studio switch to the code editor which in this case is color formatted and optimized when displaying HTML content. And notice we have a p tag in our HTML page and it says, hello, your application is ready.
00.02.10.7 And what we are going to do is modify this to say, hello and world. I am going to type it in directly inside it if I can spell it correctly and let me go ahead and preview what my changes are. Now to preview the application, there is an area we call the FI debug toolbar, this is an area you will be spending a lot of your time on because this is what controls for what platform and what deploy target will be building your app against. In this case, I am going to keep it at the default which is Android and Ripple, the browser based simulator just to quickly make sure my application works properly and once I’m ready, I’m going to hit the green button to go ahead and preview it.
00.02.48.6 So when I hit preview, behind the scenes we do a lot of work to not only build the package but also get everything ready to run the application. So in this case because Ripple is a browser based simulator, you see it running in Chrome and then you see the words Hello, World displayed. So there you have it, a very, very quick overview of how to build an app using Apache Cordova in Visual Studio. If you haven’t downloaded Visual Studio yet, go to ak.ms/cordova and if you run into any issues on the way, we’d love to help you out, pull some stack overflow, use the tag Visual Studio Cordova or Tweet to us @vscordova tools and with that, I will see you guys next time.
00.03.28.6 [music]