Summer Faculty Development

difficultmangledΚινητά – Ασύρματες Τεχνολογίες

12 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

85 εμφανίσεις

Summer Faculty Development

HTML5, CSS3, JS in the Mobile World

Claudia Da Silva

http://www.cdasilva.info/conferences.htm


What is happening today?


Hybrid Apps


Using
PhoneGap

Still…I love the look
-
n
-
feel of native app


Well, you can:


Find a team of developers for each platform you
want to develop to


Still use HTML, CSS, JavaScript and then use
PhoneGap



Heard about
PhoneGap
…?!?

What is necessary to work with

PhoneGap
?


Knowledge about web development


Experience coding HTML, CSS, JavaScript


Basic
jQuery



Basic command line


Familiar with
some type of IDE


Remember what is a mobile app
(native app)?


Access to device features not available via web
browsers


Each platform has its own tools and language




What if I could have a hybrid application?


Mobile apps using HTML, CSS, JavaScript


With access to device sensors and API’s


Apps deployed and distributed as native apps

How do we start?


Create a regular HTML page as a template


Include certain <meta> tags


make
PhoneGap

app behave like other mobile apps


Open
app.html

file inside
phonegap

folder


Tag mega name=“format
-
detection”


browsers will
not turn on phone numbers into clickable links


Tag meta name=“viewport”


attributes to help the
web app behave on the device as a native app


Tag title will not be shown in the app

Brake…what is
PhoneGap
?


2009


started by
Nitobi


2011


bought by Adobe


Still an open source with different name


Apache
Cordova (cordova.apache.org)


Build mobile apps with HTML, CSS, JavaScript with
access to native API’s, full access to sensors /
features (through JavaScript)


Provides a full
-
screen browser window using the
HTML renderer of the device


Builds a bridge between the JavaScript API’s and
native code


Platforms Supported


iOS


Android


Windows Phone


Blackberry


Symbian


WebOS


Bada


Observations


Act as a full
-
screen browser


You can use any HTML, JavaScript/CSS framework
(example
jQuery
)


JavaScript access to most native features (example
camera)


Distributed like any other native app


JavaScript library is the link to the core device functions


Does not build the UI for you


Does not convert PHP, Perl, etc.


only HTML, CSS, JS


It’s not a native app killer


not a solution for everything

Who is using it?


BBC,
Untappd
,
exfm
, etc.

Ways to use
PhoneGap


PhoneGap

Build


http://build.phonegap.com



online, no need to
download, free account


PhoneGap

Software


http
://phonegap.com



use download button to
download and install
PhoneGap


The file to install
PhoneGap

in your computer will be
found inside the lib folder and you will see a folder
for each platform supported


Copy the .
js

file to the folder of your web app


More in the html file


Open
app1.html
file


Comments


deviceready



PhoneGap

specific event (need
cordova

.
js

file before)


will ensure the app can call
the device API’s


onDeviceReady



when this works, pop up window
‘Working’ will be shown and ready to call device
API’s


Everything else is provided by the
cordova

.
js

file

Need device simulators and native SDK’s

For
iOS


For
iOS



you need to download
Xcode



exclusively for
iOS

(how to install it in a
Windows
machine (using
virtual machine)
-

http://
www.youtube.com/watch?v=sb8BdYH4esQ

)


Need device simulators and native SDK’s

For Android


Available for Mac and Windows machines


http://developer.android.com/sdk/index.html



You can download:


The bundle


includes Eclipse, Android plug
-
in, SDK tools, and
simulator OR


Use an Existing IDE link


Bundle


unzip the file and you can use Eclipse (inside
the eclipse folder)


Using Eclipse


After starting Eclipse (double
-
click eclipse.exe)


Workspace


where your work will be saved


Tool most used = DDMS
(icon shown here to
choose DDMS)


Where emulator is controlled



What about others?


For Blackberry


https://developer.blackberry.com/html5/download/



WebWorks

SDK


Ripple Emulator


allows emulating the device from within
Chrome browser (extension)


may need to use
about:settings
, extensions to allow the extension to be added
manually (dragging the
ripple_ui_crx

file to the browser)


More about Ripple Emulator

https://
chrome.google.com/webstore/detail/ripple
-
emulator
-
beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en



How to use Ripple Emulator

http://developer.blackberry.com/html5/documentation/g
etting_started_with_ripple_1866966_11.html

Opening the
PhoneGap

folder


After downloading
PhoneGap


Open
PhoneGap

folder


Open
android
folder


Open
bin

folder


command line tools to create,
generate, and test projects

Creating a
PhoneGap

App for Android


Open Terminal (in OS) or Command Prompt (in
Windows)


Set the environment variables to point to SDK
(otherwise you will need to point to the directory every
time you use a command)


Use create command (create.bat) and give


Location for your project


Domain name reversed (
com.example.android
)


Name of the project (
androidproj
)

Creating a
PhoneGap

App for Windows


Download the
PhoneGap


Download the Windows Phone SDK


http://goo.gl/obECz



Using
PhoneGap

/
lib / windows
-
phone
-
8
directory


Using Visual Studio


Too complicated?

One platform at a time?


Use
PhoneGap

Build


Create a free account


FAQ
PhoneGap

Build
-

https://
build.phonegap.com/faq



Download Android SDK (the one with existing IDE)


Download .exe file


to install SDK (Java Development Kit
will be necessary


are you up to date with Java?)


Installation finished


SDK Manager will open


choose the
packages to install


Accept licenses and…..INSTALL!!!


Patience….it will take a while


You will have AVD Manager and SDK Manager

Account in
PhoneGap

Build


Open
PhoneGap

Build in
the browser
-

https://build.phonegap.com
/



Select the free account


Adobe ID or
Github


Create your account and agree to the Terms of
Use


This will be the account you will use to login to
Build
PhoneGap

Download and install the Android SDK


We have seen this one before………


You should install at least 3 different versions
of the OS when installing Android SDK (more,
will take more time to install)


You might need to create other accounts
depending on devices you will be choosing late


Example: HTC (htcdev.com), Motorola, etc.


Look for the SDK (Android SDK Tools) and
open SDK Manager


Using Android SDK


After you open Android SDK


click on
Tools

menu and select
Manage AVDs


Add new devices for you


Click on the New button


Fill out info (Name of your choice)


SD card should not be greater than 10 (it might
crash)


RAM should not be greater than 768MB (might
crash in Windows


an alert is shown)


Set the camera if you want (and if it’s possible with
the device you chose)

Develop your app in HTML, CSS, JS


You can add UI features using
jQuery

Mobile


remember this one???


Open
appini.html


Open
code.txt


Copy the code below CODE #1, up to the divider
(=====) to replace the div of My Content in
appini.html


Save it as
index.html

and open in the browser


Nothing fancy….not yet!

Why file named index.html?


It’s necessary to have an index.html file when using
Build
PhoneGap


You will get an error if you try to build anything
without an index.html file


Continue…


We need the
jQuery

Mobile files in the head
section, remember?


Go to
http://jquerymobile.com/download


Copy the Snippet for CDN
-
hosted files


Recommended: speed up the download of files


But…what about if we want to work offline? We
need then to download the Zip file (JavaScript, CSS,
and images
)


jquery.mobile
-
1.3.1.zip


Unzip this
jQuery

Mobile file, open
demos

folder and copy the
css

and
js

folders into the
folder where your app html file is

Continue…


Now, we need to reference the
jQuery

Mobile
files that we have downloaded (CSS and JS) in
the HTML code of our app


Open
index.html


Take the comment out of the tags that reference
jquery.mobile
-
1.3.1.css


Take the comment out of the tags that
reference
the two .
js

files


Save the file and show in the browser


you
will now see the app with
jQuery

Mobile
enhancements

Stop!!!

Geolocation


One of the most common features used in mobile
devices


Requires permission on Android


User is prompted in
iOS


Fine location = GPS X Coarse location = Wi
-
Fi


Generally used via Google API


Code based on the Google API


Need to know
jQuery

and/or JavaScript


Using
Geolocation

in the app


File
appini.html

will be our base file


Open the
appini.html


Open
code.txt


Copy the code below CODE #2 and paste it in
appini.html

to substitute the following lines

</head>

<body>

<div>My Content</div>

</body>

</html>


Testing
Geolocation


Modify the Back button (with the Back text and back
icon) to point to
index.html


Save file as
myapp1.html


Open
index.html

and make sure that the Directions
button has the
href
=“myapp1.html”


Save and test
index.html
in the browser and click on
the button Directions to call myapp1.html


Are you able to get directions?


Folder Preparation


Create a folder


example:
myapp


Place ALL the files of your app (folders, CSS, JS, images,
etc.) in that new folder


This will be the folder of your app


Open
config.xml



necessary file for Build
PhoneGap


More information at
http://build.phonegap.com/docs/config.xml



Copy this file to the folder you created


Take a look at
configex.xml


with other options and
comments


Zip the folder


Uploading Zipped file to Build
PhoneGap


Go to
http://build.phonegap.com


Login into your account


WE CREATED THIS ONE!


We will now upload the zipped file to our account


You can check:


Enable
debugging
-

more info at
https
://
build.phonegap.com/docs/phonegap
-
debug



Enable
hydration
-

more info at
https://
build.phonegap.com/docs/hydration



Click on the button to start building your app


Note:

iOS

will always come red


you need to be a
registered
iOS

Developer (add your key)

Finished “baking”?


Click on the app name


Settings tab


you find the settings from config.xml file


Under Basic


note that if the “eye icon” is not checked,
anyone can download the app


The QR code


you can use it to install in your device


Collaborators tab


you can add collaborators


Email address


Tester


read access only


Developer


read_write

access


Update the code button


to update your code by
uploading a new zip file to replace the existing one


So, let’s install


Your app is ready to be downloaded and tested!


Click on the platform you will download


We will use
ANDROID
!


Save the file in your computer and DO NOT change the
extension (.
apk
)


Move the file to where you installed the SDK


folder
Android
\
android
-
sdk
\
platform
-
tools


You may need administrative rights to write in this folder


You can change the name of the file if you want to



Testing the app in the emulator


Open the
Android SDK Manager


Click on the
Tools

menu and select
Manage AVDs


Select one of the devices installed and click on
Start



Use command line to check if the device is ready


Open the Command or Terminal


Change to the folder Android
\
android
-
sdk
\
platform
-
tools


Type
adb

devices and press ENTER

Testing the app in the emulator


cont.


When device is ready, you will use the command

adb

install
xxx.apk



where
xxx

is the name of the
file



Note:

you can rename the .
apk

file if you want!


Be patient!!! You need to wait for the SUCCESS message

Testing…


You can test with the emulator


sometimes
it’s hard!!! Very slow


You can test by emailing the file to you


Open the email in your Android phone


of
course, you need the Android phone!!!


Remember to allow unknown sources to be
installed in your phone (Android)


Using the QR Code in Build Phone Gap


Again, Android device!

More Testing…


You can test using the Ripple Emulator


Chrome
browser


Install Ripple Emulator follow the steps
shown here
-

http://
developer.blackberry.com/html5/documentation/
installing_the_ripple_emulator.html



After adding it to your Chrome Extensions, make sure to
check the box “
Allow access to file URLs



You will notice that you will have now the Ripple icon in
the Chrome Browser


Bring the
index.html

file (first page of the app) into
Chrome

Ripple Emulator


cont.


Click on the Ripple icon


Click on Start Ripple Services


starting a
localhost


First time you will need to accept the Service Terms


Click again on the Ripple icon and click on Enable


You now have the Ripple Emulator started


Devices can be changed in the Devices button

Debugging with Build
PhoneGap


Remember that you can Enable Debugging when
building your app


Settings tab / Check the
Enable Debugging
box


Rebuild your app


Click on the
debug

button


takes you to a portal with a
Unique ID generated by
PhoneGap


Go back to Build
PhoneGap

screen and using your phone
take a picture of the QR code to install the app


When the app is installed, go back to the portal and you
will see your device listed


all the functionality is
available for you to debug while running app in device

What about the Photo???


Open
appini.html


Open
code.txt


Copy all the markup below CODE #3 from code.txt
and insert between the <body> and </body> tags of
appini.html


Make sure that
index.html

is referring the link to
myapp2.html

and that the Back button in
myapp2.html

is referring to
index.html


Save all the files


you will need to test it in a
smartphone browser with camera

More resources for Build
PhoneGap


https
://
build.phonegap.com/docs


(Documentation)


https://github.com/cfjedimaster/Introduction
-
to
-
PhoneGap

(Demos)

Sencha

Touch


The first HTML5 mobile JavaScript framework that feel
native on Android, BlackBerry, and
iOS


There is a quick start guide at


http://www.sencha.com/learn/sencha
-
touch
-
quick
-
start/



Guide for Mac
-
OS


Guide for Windows


Should use
webkit
-
based browser to test (Safari,
Chrome)


not Firefox, IE


Download the SDK or point to the files (.
js

and .
css
) at
Sencha

server

Sencha

Touch


cont.


It has over 50 built
-
in components, themes for mobile
platform


Sencha

2.2 is the latest version (May/2013)


They have great tutorials at
http://www.sencha.com/learn/touch


Components and containers from the basic building
blocks to create any interface


Layouts are generally set to “auto”


means they grow
with the content


but this can be changed


Who is using
Sencha

Touch?


DirectTV
,
Vimeo
,
Xero
, Intuit, etc.


http://www.sencha.com/products/touch/whos
-
using



Gallery of apps that serve as examples


http://www.sencha.com/apps/


You can download it free from
http://www.sencha.com/products/touch/downl
oad/

-

need to read carefully as there are license
levels


Suggested to install in a
web server