How Cordova CLI helps A Designer

Cordova CLI helps a designer, to preview prototype of your design. When you create a design especially for a mobile app, you can’t visualize how your design will look on final output. To preview how your prototype looks actually on mobile, Cordova CLI will help you. But for this, you need to install Cordova on your machine. Let’s check out how to install the Cordova and then we will see how you can preview your prototype on your mobile with the help of Cordova CLI.

First, you need to install node.js. You can use default windows command prompt or you can install git bash, which is popular nowadays, I’m also going to use git bash.

Once you install node.js, you need to run it as administrator. Now firstly you need to install Cordova on your machine. To install Cordova on your machine, you need to execute this command –

npm install -g cordova

This command will install Cordova on your machine. npm is the official package manager for Node.js. npm is bundled and installed automatically with the environment. The -g flag is used to install Cordova globally.

Once you have installed Cordova, now you need to create a project. (To create the project you need to select the directory where you want to create the project.) To create a project, you need to execute this command

 cordova create hello com.example.hello HelloWorld

(when you execute this command it will take some time, so you need not worry.)
First, one is ‘hello’ that is main Directory or repository of your project, which created by Cordova. Its subdirectory ‘www’ contains index file of your application with other common resources like CSS, js, and img folder. These assets will be stored on the device’s local file system, not served remotely. Second is ‘com.example.hello’, that is a local domain of your app. It should be unique. And the third is ‘HelloWorld’, that is your application display title.

You can check on the same location where you install the Cordova, a folder has been created by Cordova CLI with the name of ‘hello’.

Now to build the project you should add the platform. To which platform you will create the app? Let’s see I design layouts for Android, so I need to add android platform. For this execute next command, you should move to the current working directory that is your ‘hello’ folder.

cd hello

Now you move to your present working directory which is Hello. The next step is to install the platform. So you must execute this command

cordova platform adds android

This command will take some time, so be patient.

To build the project, you need to execute this command

Cordova build

Cordova by default create some files to make an app, and the Build command helps you to convert HTML file to Mobile app.

Next step is the move to hello\www folder there is the index.html file. Open index.html on an editor, now write the command inside the body tag

<img src="img/preview.jpg" class="paper-prototype">

now edit the CSS file which inside the www/css folder to set the size of an image (previwe.jpg). For this, you need to add CSS class

.paper-prototype{ width: 100%; height: 100%;}

Now you just need to do, prototype a layout of your mobile app. Save the layout in www/img folder with the same name which is you mention in index.html (preview.jpg).

To build the project in the Hello folder and run it on an Android device, you should connect to your Android device to computer using a USB cable, and execute this command on git bash