SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture01.pdf · •App 1: a photo exhibition app (Cordova) •App 2: a 2D game just for fun (Appcelerator) •App 3:

SEEM4570 System Design and Implementation

Lecture 1 – Cordova + HTML + CSS

Apache Cordova

• Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript• iOS apps use Objective-C; Android apps use Java; Windows

apps use C#. • With Cordova, you use HTML+CSS+JS to write apps for all

platforms!• It is open source.• http://cordova.apache.org/

© 2017 Gabriel Fung 2

http://cordova.apache.org/

History of Cordova

• In 2009, Nitobi Software produced PhoneGap• In 2011, Adobe acquired Nitobi. But just before the

acquired, the code was contributed to an Apache project called “Apache Callback”. • The project later re-named as “Apache DeviceReady”,

and finally re-named as “Apache Cordova”.


Native Apps, Web Apps, Hybrid Apps

• Apps written by Cordova are hybrid apps.• Three kinds of apps: native, web and hybrid. • Native apps:

• For are written using native language for one particular device (e.g. Java for Android) and is installed directly onto the device itself. Native apps are usually download them from app stores. You may run the apps without Internet connection (e.g. Camera app).

• Web apps:• They are web sites but look and feel like an app. They are built

using HTML5, CSS and JS. They require a browser and Internet connectivity to run. You do not need to install anything (e.g. app.ft.com)


Native Apps, Web Apps, Hybrid Apps (cont’d)

• Hybrid apps:• They are partly native apps, partly web apps. Like native apps, they

are downloaded from app store and can take the advantages of the available device features (e.g. local storage, phone books, camera, geolocation, …). Like web apps, they rely on HTML5+CSS+JS for layout rendering.


Framework based on Cordova

• Many frameworks are based on Cordova:• PhoneGap https://phonegap.com/• Ionic https://ionicframework.com/• Onsen UI https://onsen.io/• Framework7 https://framework7.io/• …


https://phonegap.com/

https://ionicframework.com/

https://onsen.io/

https://framework7.io/

Other Frameworks

• Some other popular frameworks:• Appcelerator http://www.appcelerator.com/

• Pros: Create native app using JavaScript. Well organized APIs.• Cons: Difficult to compile and debug. Not intuitive from my

experience. • Cocos2d-x http://www.cocos2d-x.org/

• Pros: Free. Support C++, Lua or JavaScript. Excellent for 2D game programming.

• Cons: Not well organized APIs. Steep learning curve.• Unity https://unity3d.com/

• Pros: Excellent for game programming (including 3D games). Very well organized APIs.

• Cons: Support C# (I think most of you are not familiar with C#), UnityScript (a variation of JavaScript) or Boo. Steep learning curve.


http://www.appcelerator.com/

http://www.cocos2d-x.org/

https://unity3d.com/

Frameworks I have used

• My major app development experience:• App 1: a photo exhibition app (Cordova)• App 2: a 2D game just for fun (Appcelerator)• App 3: a psychology related app (Cordova) • App 4: a 2D game for learning Germany (Native iOS)• App 5: a survey app (Native iOS)• App 6: an app for KEF roadshow (Native Android)• App 7: an air quality survey app (Cordova)• App 8: Revamp App4 (Cocos2d-x)• App 9: An ITF project (Ionic)• App 10: Revamp App3 (Ionic)


Cordova Installation

• Official installation instruction:• https://cordova.apache.org/docs/en/latest/guide/cli/

• Note:• We need to use command line to build the app.

• Summary:1. Install Node.js https://nodejs.org/en/download/2. Install Cordova.3. Install Cordova Simulator.


https://cordova.apache.org/docs/en/latest/guide/cli/

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

Node.js

• Node.js is an open-source, cross-platform (Windows, Linux, Unix, Mac OS X, etc.), JavaScript run-time environment that executes JavaScript code outside of a browser. • Built on Chrome's V8 JavaScript engine

• Although .js is the standard filename extension for JavaScript code, the name "Node.js" does not refer to a particular file but just the name of a product.• Node.js represents a "JavaScript everywhere"

paradigm, unifying web application development around a single programming language.


Node.js and Packages

• The Node.js community around the world creates useful modules and publishes them as packages in anonline repository called “the npm registry”.• npm stands for Node Package Manager


Node Package Manager (npm)

• Node Package Manager (npm) is a package manager for the Node.js. • https://www.npmjs.com/

• It is a command line tool that installs, updates or uninstalls Node.js packages in your application. • npm is included with Node.js installation. You DO

NOT need to download it separately.


https://www.npmjs.com/

Install Node.js

• Follow the instruction in: https://nodejs.org/en/download/• After you install Node.js, verify NPM installation by

writing the following command:• > npm –v

• To update npm to the latest version:• > npm install -g npm


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

Install Cordova via NPM

• Install cordova via npm.• > npm install –g cordova

• For Mac and Linux, if you have problem in the installation, you may try: > sudo npm install –g cordova

• sudo stands for “superuser-do”

• Verify Cordova is installed properly:• > npm –v


Install Cordova Simulator via NPM

• Install Cordova Simulator via npm:• > npm install -g cordova-simulate

• For Mac and Linux, if you have problem in the installation, you may try: > sudo npm install –g cordova-simulate

• Verify Cordova Simulator is installed properly:• > simulate


It is normal if you got error!!!

Create Your First App

• Once you installed everything successfully. You can start write your first app by:

1. Create a Cordova project2. Add a platform (e.g. iOS, Android, …) to your project.

• You can add multiple platforms to your project.


Create a Cordova project 1

• Go to the directory where you want to creatre a Cordova project for maintaining your source code.• > cd xxx

• “cd” means “change directory”. xxx is your target directory.

• Issue the following command in the target directory:• > cordova create hello com.example.hello HelloWorld

• hello – the directory name in your computer where you will put all your source code related to your app

• com.example.hello – app ID. For app store submission• HelloWorld – The app name


Create a Cordova project 2

• Verify your project is created.• For Windows: > dir• For Mac: > ls

• Navigate to your newly created project:• > cd hello


Add A Platform to Your App 1

• To add a platform, make sure you are inside your project directory (e.g. hello in this case), then issue one or more of the following command (depends on your platform you want):• > cordova platform add browser

• This is for quick testing

• Reference:• https://cordova.apache.org/docs/en/latest/guide/support/i

ndex.html


https://cordova.apache.org/docs/en/latest/guide/support/index.html

Add A Platform to Your App 2

• If you want to build app for ios, first you need to install Xcode, then issue the following command:• > cordova platform add ios

• If you want to build app for Android, first you need to install Android Studio, then issue the following command:• > cordova platform add android

• Note: depends on your network speed, you may need to spend 5–10 hours to download and install Xcodeand Android Studio.


More Information for Android Developer

• From our experience, setting the Android development environment the first time is very difficult and not intuitive (i.e. setting the ”PATH”).• Please read the section “Setting environment

variables” carefully:• https://cordova.apache.org/docs/en/latest/guide/platforms

/android/index.html


https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

Cordova Simulator 1

• To use simulator to test/debug our app, issue one of the following command:• > simulate browser• > simulate ios• > simulate android• Note: make sure you installed the corresponding platform!


Cordova Simulator 2

• The default simulator is Chrome. Make sure you turn on “Developer Mode”.


Cordova Project Structure

• The project structure:

• In this course, we are interested in the directory “www” only. • DO NOT modify anything outside “www”.


HTML

• HTML stands for Hypertext Markup Language• It describe the structure of a document

• By denoting certain text as links, headings, paragraphs, etc.• Markup Language is not a Programming Language• Programming Language (e.g. C) tells the computer what to

do.• printf("some information");

• Markup Language (e.g. HTML) tells the computer what is the meaning of a piece of data by using “tag”• <p>some information</p>


HTML5

• To write apps using Cordova, we use HTML5.• There are thousands of books, websites, video clips

on YouTube, etc. about HTML5• We will not discuss every single element in detail in

this course• We will focus on using HTML5 to write an app under

the Cordova framework


HTML5 Basic

• <!DOCTYPE html>Declare a HTML 5 Document<html> Begin<head></head> Basic information, such as encoding<body></body> Information to display to the user</html> End

• An HTML element usually consists of a start tag and end tag, with the content inserted in between:• <tagname>Content Here</tagname>

• A tag can has attribute:• <tagname attribute=“xx”>Content Here</tagname>


HTML5 Basic (cont’d)

• Although tags and attributes are case insensitive, always use lower case only for convention.• Although <body>, <BODY> and <Body> are all valid, use

<body> only.

• Always quote attribute values• Write: <a href=”XXXX">XXXX</a>• Do not write: <a href=XXXX>XXXX</a>



• HTML treats “next line character” as “space character”. The output of them are the same:• <body>

This is the first sentence.This is the second sentence.</body>• <body>

This is the first sentence. This is the second sentence.</body>



• Like all programming languages, you can have comment in your work. For HTML, the comment tags like this:• 


Empty5 Elements

• HTML elements with no content are called empty elements. • E.g. <br> is an empty element (<br> means line break).

Empty elements can be "closed" in the opening tag like this: <br />. Closing or not is not mandatary in HTML5.• <body>

This is the first sentence.<br />This is the second sentence.<br /></body>• <body>

This is the first sentence.<br>This is the second sentence.<br></body>


CSS Styles

• Setting the style of an HTML element, can be done with CSS and the style attribute.• CSS stands for Cascading Style Sheets. It describes

how HTML elements are to be displayed.• CSS can be added to HTML elements in 3 ways: inline,

internal, and external.• To use CSS inline: • <tagname style="property:value;">• The property is a CSS property. The value is a CSS value.


Color Style

• The background-color property defines the background color for an element.• <body style="background-color:#4B53A4;">• #4B53A4 is the color code. You can refer to

http://htmlcolorcodes.com/color-picker/ for the color code. • You may use rgba as well, such as:

- <body style="background-color:rgba(255, 255, 0, 0.5);"> where the last component is the opacity (0–1).

• The color property defines the text color for an element:• <body style="background-color:#4B53A4; color:#641E18">


http://htmlcolorcodes.com/color-picker/

Text Style

• The font-family property defines the font face:• <body style="font-family:verdana;">

• The font-size property defines the text size:• <body style="font-size:50px;">

• The text-align property defines the horizontal text alignment:• <body style=”text-align:center;">

• There are many other properties to style the fonts, such as font-weight, text-decoration, etc.


About Size

• There are many ways to manipulate size. Try them yourself!• Pixel (px), Percentage (%), Viewport Width (vw), Viewport

Height (vh), Emphemeral unit (em)• E.g. font-size: 16vw vs. font-size: 16px


Internal CSS

• To use internal style sheet, add <style> element in <head>. It changes all elements with the same name in the whole page.• <head>

<style>body {

background-color: #aaaaaa;color: #444444;

}</style></head>


External CSS

• To use an external style sheet, add a link in <head>. An external style sheet define the style for many pages. With an external style sheet, you can change the look of an entire app, by changing one file:• <head>

<link rel="stylesheet" href="styles.css"></head>

And here is style.css:• body{

background-color: #aaaaaa;color: #444444;

}


Some Useful Elements

• Link <a>• <a href="http://www.cuhk.edu.hk">CUHK</a>

• Image <img>• <img

src="http://www.cuhk.edu.hk/english/images/cuhk_logo_2x.png">

• Span <span>• Usually is to define the style of a piece of text.• <body>This is a <span style=“color:red”>red</span>

word.</body>


Some Useful Elements (cont’d)

• Table <table>• Define a table.• A table is divided into rows (<tr> table row), and each row

is divided into cells (<td> table data). • <table>

<tr><td>A</td> <td>B</td>

</tr><tr>

<td>C</td> <td>D</td>

</tr></table>• You will learn more about <table> in the tutorial.


Some Useful Elements (cont’d)

• Layer<div>• Define a new layer. It is useful especially you want to layer

elements. • <body>

<div style=”position:absolute; top:0px; left:0px; width:90px; height:90px; background-color:#000000”></div><div style=”position:absolute; top:20px; left:20px; width:90px; height:90px; background-color:#888888”></div><div style=”position:absolute; top:40px; left:40px; width:90px; height:90px; background-color:#aaaaaa”></div></body>


Some Useful Styles

• Let’s use <div style=“...”>DEMO</div> as example:• Width and height:

• width:200px; height:200px• Border:

• border:solid; width:200px; height:200px;• border:solid dotted dashed double; width:200px; height:200px

• Margin:• margin:10px; border:solid;• margin:10px 20px 30px 40px; border:solid;

• Padding• padding:10px; border:solid;• padding:10px 20px 30px 40px; border:solid;


Some Useful Styles (cont’d)• Display:

• You can use it to show or hide an element, as well as change its default display style.

• <div style=“display:none; border:solid”>DEMO</div>• <div style=“display:block; border:solid”>DEMO</div>• <div style=“display:inline; border:solid”>DEMO</div>

Documents

SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture01.pdf · •App 1: a photo exhibition app (Cordova) •App 2: a 2D game just for fun (Appcelerator) •App 3: