element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • Community Hub
    Community Hub
    • What's New on element14
    • Feedback and Support
    • Benefits of Membership
    • Personal Blogs
    • Members Area
    • Achievement Levels
  • Learn
    Learn
    • Ask an Expert
    • eBooks
    • element14 presents
    • Learning Center
    • Tech Spotlight
    • STEM Academy
    • Webinars, Training and Events
    • Learning Groups
  • Technologies
    Technologies
    • 3D Printing
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • Technology Groups
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents Projects
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • Project Groups
  • Products
    Products
    • Arduino
    • Avnet Boards Community
    • Dev Tools
    • Manufacturers
    • Multicomp Pro
    • Product Groups
    • Raspberry Pi
    • RoadTests & Reviews
  • Store
    Store
    • Visit Your Store
    • Choose another store...
      • Europe
      •  Austria (German)
      •  Belgium (Dutch, French)
      •  Bulgaria (Bulgarian)
      •  Czech Republic (Czech)
      •  Denmark (Danish)
      •  Estonia (Estonian)
      •  Finland (Finnish)
      •  France (French)
      •  Germany (German)
      •  Hungary (Hungarian)
      •  Ireland
      •  Israel
      •  Italy (Italian)
      •  Latvia (Latvian)
      •  
      •  Lithuania (Lithuanian)
      •  Netherlands (Dutch)
      •  Norway (Norwegian)
      •  Poland (Polish)
      •  Portugal (Portuguese)
      •  Romania (Romanian)
      •  Russia (Russian)
      •  Slovakia (Slovak)
      •  Slovenia (Slovenian)
      •  Spain (Spanish)
      •  Sweden (Swedish)
      •  Switzerland(German, French)
      •  Turkey (Turkish)
      •  United Kingdom
      • Asia Pacific
      •  Australia
      •  China
      •  Hong Kong
      •  India
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Americas
      •  Brazil (Portuguese)
      •  Canada
      •  Mexico (Spanish)
      •  United States
      Can't find the country/region you're looking for? Visit our export site or find a local distributor.
  • Translate
  • Profile
  • Settings
Personal Blogs
  • Community Hub
  • More
Personal Blogs
Legacy Personal Blogs Cordova - my first App
  • Blog
  • Documents
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
  • Share
  • More
  • Cancel
Group Actions
  • Group RSS
  • More
  • Cancel
Engagement
  • Author Author: PEarle
  • Date Created: 29 Jan 2016 12:33 PM Date Created
  • Views 412 views
  • Likes 3 likes
  • Comments 2 comments
Related
Recommended

Cordova - my first App

PEarle
PEarle
29 Jan 2016

In my previous blog  Preparing to Develop Mobile Apps with Cordova I detailed my experiences in setting up Cordova. Now its time for the first App - and what better than 'Hello World' !

 

Step 1 - initialise a project

 

Cordova allows you to initialise a proected using the command

cordova create <root_directory> <package_structure> <application_name>

 

e.g.  cordova create hello com.example.hello HelloWorld

 

The above command creates a directory hello in the current location and then a skeleton application called HelloWorld, with a package structure of com.example.hello.

If we look at what this has created below we can see the directory hello which contains a configuration file (config.xml) and a www subdirectory, which itself contains index.html and some subdirectories for default image, css and javascript.

 

image

 

This 'skeleton' app is fully working (although it doesn't do much) all we have to do is to build and deploy it.

 

Building for Android

Before we can build our app we have to tell cordova what platforms it's to be deployed on. This is quite straightforward - we use the command

cordova platform add <platform_type>

 

So if I am going to build for android, I enter

cordova build platform android

 

(NB this and the subsequent command need to be run in the project's root directory - os in the above example I made sure I was in directory hello before running any more commands).

 

The project can support multiple platforms - its just a case of repeating the above command with the appropriate platform name.

 

Now that I have defined the platform I need to build for that platform using the command

cordova build <platform_type>

e.g. cordova build platform android

 

If all goes to plan you will end up with a message similar to the folllowing

image

 

Note that the generated apk file is in subdirectory hello/platforms/android/build/outputs/apk.

 

NB - only use the android-debug.apk for now. THe 'unsigned' file has relevance when building for publishing to Google, which is not covered in this blog.

 

Testing the App

There are various ways to test the app - one is to connect an Android device to your computer (e.g. via USB), download the file to the device (e.g. using Androind File Manager, avaialbe from Google Play) and then installing the app (e.g. clicking on it on the device). The exact details will vary depending on the device used.

 

Another alternative is to use an Emulator on your computer - I have been using BlueStacks which works really well - for more details see http://www.bluestacks.com/

 

With Bluestacks running, loading the app is as easy as right clicking on the apk file, and taking the 'Open with Bluestacks' option. The app will then deploy to Bluestacks and can be opened - e.g.

 

image

 

Coding 'Hello World'

The above is the output from the default index.html page provided when we created our application - inspection of that file will explain how the above output is generated. for my app I want it to say 'Hello world' so I need to edit the index.html file accordingly . For example if I edit the file as follows ;

 

<html>
    <head>
        
        <title>Hello World</title>
    </head>
    <body>
        Peter says <b>Hello World</b>
    </body>
</html>

 

I now rebuild the app - i.e. cordova build android

 

Redeploying the app to Bluestacks I see.

image

Obviously this is a trivial an app as it is possible to build - but 'all' I need to do now is to write html (plus javascript, etc!) and I can quickly build deploy and test my app. IN other words, if you can write a webapp, you can write a mobile app!

  • Sign in to reply
  • ipv1
    ipv1 over 9 years ago

    Is there any way to deploy your android app in say-api 19(kitKat) ?

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • DAB
    DAB over 9 years ago

    Nice intro into simple projects using Cordova.

     

    DAB

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
element14 Community

element14 is the first online community specifically for engineers. Connect with your peers and get expert answers to your questions.

  • Members
  • Learn
  • Technologies
  • Challenges & Projects
  • Products
  • Store
  • About Us
  • Feedback & Support
  • FAQs
  • Terms of Use
  • Privacy Policy
  • Legal and Copyright Notices
  • Sitemap
  • Cookies

An Avnet Company © 2025 Premier Farnell Limited. All Rights Reserved.

Premier Farnell Ltd, registered in England and Wales (no 00876412), registered office: Farnell House, Forge Lane, Leeds LS12 2NE.

ICP 备案号 10220084.

Follow element14

  • X
  • Facebook
  • linkedin
  • YouTube