(OK) Spend Leap Day with TACO + VS Code (visual studio code)

http://taco.tools/articles/leap-day.html

15 Feb 2016- byLinda

This year, we all have an extra day to spend doing whatever we want. So, why not take 15min to learn to build an iOS, Android and Windows app all at once?

This exericise introduces you to the core components of a Cordova app and how to create one in VS Code.

You in? Let’s go.

1. Setup

1.1 Install Visual Studio Code from the VS Code website, code.visualstudio.com.

VS Code is our lightweight, multi-screen code editor with the intellisense and debugging support of the Visual Studio IDE. This is the main tool we will use to create our Cordova project.

1.2 Install Apache Cordova, Ionic Framework, and the Tools for Apache Cordova CLI.

Enter into the Windows command prompt: npm install -g cordova ionic taco-cli

Or, enter into the Mac terminal: sudo npm install -g cordova ionic taco-cli

These are the three main tools we will use in VS Code.

• Cordova is open source platform for building native mobile applications using HTML, CSS, JS.

• Ionic is a front end framework for developing native-looking mobile apps built on top of Angular JS.

• Tools for Apache Cordova is a product built at Microsoft that makes setting up and getting started really easy. It abstracts away the tool chain needed to test your app, and includes features like kits to make migrating to new versions of Cordova easy.

2. Get an App Going

2.1 Create your app: In the command promt, navigate to the directory in which you want your project to live, and type the command ionic start myLeapDay. This will create a basic Ionic app called myLeapDay using the default tabs template.

This walkthrough uses Ionic framework to create a basic, native-looking Cordova app.

2.2 Add and remove platforms using taco-cli

Enter your new Cordova project by typing cd myLeapDay into the command prompt and ls to explore the file structure of your project. If you type cd platforms, you will see that Ionic already has added iOS to the platforms folder, so you can build your Cordova app into an iOS app.

Now, add an Android app to your project by typing taco platform add android into the command prompt. That will mean that your Cordova project will now try to build into Android and iOS.

2.3 Play around!

Check out what your app looks like by deploying it in a browser. Navigate back to the root of your project, and type ionic serve into the command prompt to open myLeapYear in a lightweight emulator running in your web browser. (Unfortunately, you can only see the iOS version).

3. Turn this basic app into a collection of golf balls in VS Code

Now, we will use VS Code to start poking around inside your project. Open VS Code, then go to File > Open, and navigate to the folder where you can see myLeapDay. Click on the folder (but not into it!) and press open.

You can see in the screenshot that your project should have a platforms/android folder, which you added using taco-cli.

The app itself exists in the www/ folder. You can see all the parts of a traditional website in this folder:

• css/ holds the an empty style.css, where you can add your own styling
• img/ holds images and other site assets
• js/ holds all the logic of the Angular JS project–essentially the core of the app
• lib/ holds the Ionic framework files that acts as scaffolding for this project
• templates/ holds the extra pages/html files shown in the app
• index.html, the landing page and where the app begins

3.1 Download this zip of web assets from this post. Unzip the folder and drag all the images to the www/img/ folder of your project.

3.2 Modify the landing page of the app. In templates/tabs.html, you see all three tab categories shown on the naviagtion bar. The dashboard tab links to an ion-nav-view called tab-dash. In templates/tab-dash.html, replace the file with the one in the zip folder, leapday/tabs-dash.html. Deploy using ionic serve to see the change.

3.3 Add golf ball data. In js/services.js, there is test data called var chats. We are going to take advantage of the existing formatting to replace each chat with a golf ball, and add some new fields like category and dimensions. Replace the js/services.js with leapday/services.js.

Deploy to your browser again using ionic serve, and click on the chats tab to see the change. In particular, notice that the chats are now replaced with golf ball data. Tapping a golf ball takes you to the templates/chat-detail.html page, where you can see that the golf ball pictures are a bit skewed. On to the next step!

3.4 Fix formatting and using new fields.

Replace the file with the one in the zip folder, leapday/chat-detail.html. It replaces the line style="height:64px;64px;", allowing each golfball to have its own custom dimensions that we set in services.js.

Now, to customize the detail screen further, go to chat-detail.html and try adding the following line of code right above the <p> {{ chat.lastText }} </p> element: <h2>Pattern category: {{ chat.cat }} </h2>

4. Bonus: Deploy to a virtual Android device

Since you have been viewing the app in its iOS form, let’s take a look at how it looks in Android.

4.1 Navigate to the root of your project and enter taco install-reqs android into the command prompt. This will install the dependencies needed to build and deploy your Cordova app into the standard Android emulator (Android SDK and Java 7, update 55).

4.2 Open the Android SDK manager using the command android sdk (sudo android sdk on a Mac). Check the following boxes for Android 5.0.1 (API 21)

4.4 Enter android avd (sudo android avd on a Mac) to open the Andriod AVD manager, click “Create” and set up an Android virtual device. Be sure to specify an AVD name, Device, Target, and CPU/ABI

4.5 Return to the terminal, and at the root of your project, emulate using the command taco emulate android (or sudo taco emulate android)

5. Pat yourself on the back

You did it!! You’ve built your first Cordova app, viewed it on two different platforms, and are ready to hit the road. Please let us know how you enjoyed this brief tutorial, and what you’d like to see next.

And we would love to hear about how you enjoyed your time in VS Code. Send feedback by clicking on the smile in the bottom-right corner of the code editor.

Until next time,

Linda Zhong Program Manager | Tools for Apache Cordova
Microsoft Visual Studio
lizhong@