{"id":41623,"date":"2016-03-17T07:38:11","date_gmt":"2016-03-17T07:38:11","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=41623"},"modified":"2016-05-23T10:21:55","modified_gmt":"2016-05-23T10:21:55","slug":"41623-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/41623-2\/","title":{"rendered":"How Cordova CLI helps A Designer"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

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 –<\/p>\n

npm install -g cordova<\/pre>\n
\"img-1\"<\/p>\n
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.<\/p>\n
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<\/p>\n
 cordova create hello com.example.hello HelloWorld<\/pre>\n
\"img-2\"<\/p>\n
(when you execute this command it will take some time, so you need not worry.)
\nFirst, 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.<\/p>\n
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’.<\/p>\n
\"img-10\"<\/p>\n
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.<\/p>\n
cd hello<\/pre>\n
\"img-3\"<\/p>\n
\"\"<\/p>\n
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<\/p>\n
cordova platform adds android<\/pre>\n
\"img-4\"<\/p>\n
This command will take some time, so be patient.<\/p>\n
To build the project, you need to execute this command<\/p>\n
Cordova build<\/pre>\n
\"img-5\"\"img-6\"<\/p>\n
Cordova by default create some files to make an app, and the Build command helps you to convert HTML file to Mobile app.<\/p>\n
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<\/p>\n
<img src=\"img\/preview.jpg\" class=\"paper-prototype\"><\/pre>\n
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<\/p>\n
.paper-prototype{ width: 100%; height: 100%;}<\/pre>\n
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).<\/p>\n
\"\"<\/p>\n
\"img-13\"<\/p>\n
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<\/p>\n
cordova run android<\/pre>\n
\"img-8\"<\/p>\n
\"img-9\"<\/p>\n
You can see the privew.jpg (prototype) on your mobile run like an app.<\/p>\n
\"img-14\"<\/p>\n
***<\/span> Trademarks , logo, and images are owned by their respective owner licenses<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/a><\/p>\n","protected":false},"author":74,"featured_media":43313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1202],"tags":[2870,2871,2872],"class_list":["post-41623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-trends","tag-cordova","tag-git-bash","tag-prototyping"],"yoast_head":"\nHow Cordova CLI helps A Designer - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/41623-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Cordova CLI helps A Designer - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"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 [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/41623-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-17T07:38:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-23T10:21:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shweta Rawat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shweta Rawat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/\"},\"author\":{\"name\":\"Shweta Rawat\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/6e42618399f0b7235515158ea8837a33\"},\"headline\":\"How Cordova CLI helps A Designer\",\"datePublished\":\"2016-03-17T07:38:11+00:00\",\"dateModified\":\"2016-05-23T10:21:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/\"},\"wordCount\":616,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png\",\"keywords\":[\"cordova\",\"git bash\",\"prototyping\"],\"articleSection\":[\"Design Trends\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/41623-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/41623-2\/\",\"name\":\"How Cordova CLI helps A Designer - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png\",\"datePublished\":\"2016-03-17T07:38:11+00:00\",\"dateModified\":\"2016-05-23T10:21:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/41623-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/41623-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Cordova CLI helps A Designer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/6e42618399f0b7235515158ea8837a33\",\"name\":\"Shweta Rawat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/37e3087e582f6fca0198f8ef4238b0c2e3f596772ad7c3ac90088100bdbfa4ad?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/37e3087e582f6fca0198f8ef4238b0c2e3f596772ad7c3ac90088100bdbfa4ad?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Shweta Rawat\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/shweta-rawat349\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Cordova CLI helps A Designer - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/41623-2\/","og_locale":"en_US","og_type":"article","og_title":"How Cordova CLI helps A Designer - Webkul Blog","og_description":"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 [...]","og_url":"https:\/\/webkul.com\/blog\/41623-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-03-17T07:38:11+00:00","article_modified_time":"2016-05-23T10:21:55+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png","type":"image\/png"}],"author":"Shweta Rawat","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shweta Rawat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/41623-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/41623-2\/"},"author":{"name":"Shweta Rawat","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/6e42618399f0b7235515158ea8837a33"},"headline":"How Cordova CLI helps A Designer","datePublished":"2016-03-17T07:38:11+00:00","dateModified":"2016-05-23T10:21:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/41623-2\/"},"wordCount":616,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png","keywords":["cordova","git bash","prototyping"],"articleSection":["Design Trends"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/41623-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/41623-2\/","url":"https:\/\/webkul.com\/blog\/41623-2\/","name":"How Cordova CLI helps A Designer - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png","datePublished":"2016-03-17T07:38:11+00:00","dateModified":"2016-05-23T10:21:55+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/41623-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/41623-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/41623-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/cordova-banner.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/41623-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Cordova CLI helps A Designer"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/6e42618399f0b7235515158ea8837a33","name":"Shweta Rawat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/37e3087e582f6fca0198f8ef4238b0c2e3f596772ad7c3ac90088100bdbfa4ad?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/37e3087e582f6fca0198f8ef4238b0c2e3f596772ad7c3ac90088100bdbfa4ad?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Shweta Rawat"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/shweta-rawat349\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/41623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=41623"}],"version-history":[{"count":51,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/41623\/revisions"}],"predecessor-version":[{"id":50046,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/41623\/revisions\/50046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/43313"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=41623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=41623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=41623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}