Software development for Web & Hybrid App Development Part 1

(Web Development QQI Level 6 Computer Science 2)

A Short Introduction to Cordova

  • Apache Cordovais an open-source mobile development framework where you use HTML, CSS and JavaScript to create mobile applications targeting multiple mobile operating systems.
  • The web applications that you build with Cordova run inside native applications called wrappers, that are targeted to each mobile platform. Cordova uses standard-compliant API bindings to expose different features of the mobile devices – for example, sensors, data and network status – to your application.
1
  •  The main benefit of using Cordova is that it allows you to use JavaScript, HTML and CSS to develop mobile applications that can run on multiple platforms, bypassing the respective programming languages of each platform.
  • However, you trade this ease of development for a degraded user experience. The reason is that you are ultimately running a web application on a mobile browser, and mobile browsers have performance and other limitations in their integration with the native features of the device.

Cordova Development

Setting Up the Cordova Development Environment Portable Installation ( on USB key)

website-blue
  1. Install Node JS
  2. Install Command Prompt Portable
  3. Install npm
  4. Change path of Node.js so it can run globally
  5. Update npm using the command line
  6. Install Git
  7. Install Cordova /PhoneGap (use the command line version)
  8. Install Android sdk tools or install Android Studio
android-blue

1. Install Node JS

https://nodejs.org/en/download/

  • Download the Windows Binary (.exe) 32-bit version.
  • This is suitable if you do not have administrator rights on the PC you are using and you want to install on an USB key.
  • Create a folder called Web Development.
  • Copy the Node.js exe file to a folder called Node inside Web Development on your USB key.
  • Node runs on the command line so you need a portable version of windows command line
2

2.Install Command Prompt Portable

http://portableapps.com/apps/utilities/command_prompt_portable

1
  • Install the command prompt portable to the Web Development folder and run it
  • The following shows the command line steps to take
  • Using the cd command navigate to the Node folder and test for the node.js version by using the command node –v
  • Node is now working on your USB key.

3.Install NPM

https://nodejs.org/dist/npm/

  • npm is a package manager which installs, publishes and manages node programs.
  • Download npm-1.4.12.zip and extract it to the Node folder
2
4
  • Run the command line again and check for the npm details.
  • use the following command line argument

        npm version

4. Change path of Node.js so that we can use it globally on the USB key

Run the command prompt and follow the following instructions to achieve this

1

5.Update npm using the command line

33

6.Install Git

https://github.com/github/msysgit/tree/PortableGit

10
  • Download this zip file and extract the PortableGit.7z file
  •  Add to the Web Development folder.
12
14
  • Next we add git to the path

7.Install Cordova /PhoneGap

(use the command line version)

  • Run npm on the command line
  •  npm install -g cordova
15

The following is how your USB key should look

21
23
24

8.Install Android Studio

http://tools.android.com/download/studio/builds/1-5-1

  • We need Android Studio if we want to build android apps.
  • Skip this section and go to Part 2 if you don't want Android version
  • We could have simply installed Android Studio
  • However for USB use we need to download and install Android Studio and the android sdk separately.
logo
  • Android sdk is available here
  • Both files need to be extracted into the Web Development folder in a folder called Android
333
w
  • Run the SDK Manager and install any required platforms and packages
  • Android 23 and 24 are enough for now
  • Be careful not to download system image for android tv and android wear, as the file size will be too large for the USB key.

Learn what Tyler can Do for you.   Take a tour >