Intro to Mobile Development

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

10 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

42 εμφανίσεις

Intro to Mobile Development

Cindy Royal, Ph.D

Assistant Professor

Texas State University

School of Journalism and Mass Communication

croyal@txstate.edu

www.cindyroyal.com

www.onthatnote.com

tech.cindyroyal.net

@cindyroyal


History of Mobile Hardware


PDA


personal digital assistants were precursor


Apple Newton in 1992


Personal data management and productivity (contacts, address
book, etc)


Online synchronization


Limited dialup Internet connectivity


Bluetooth


Cell data services
-

eventually 3G


WiFi


Mobile Phones


Netbooks


smaller than laptop, bigger than pda


PDAs and Phones merge
-

Palm Pilot, etc,


Smartphones replaced PDA
-

more capabilities, browser, apps

Mobile Phones


1
st

mobile phones


Motorola Brick
DynaTAC
8000x


1983


Bag phones


car phones




early 90s


Camera phones


late ‘90s


Addition of data services

Mobile Development Evolves


WAP (Wireless Application Protocol)
standard/browsers. Wireless Markup Language


Considered clunky and limited, but it was cross
platform


Proprietary formats emerged to better take advantage
of hardware capabilities:


Palm OS (became Garnet OS)


RIM Blackberry OS


Java Micro Edition


Symbian OS (Nokia, Sony Ericsson, Motorola, Samsung)


iPhone iOS


Major players now
-

Blackberry, iOS, Android,
Windows 7


Challenges to development


Merging phones and pdas
-

couldn't keep up
with demand for services, needed a platform
that could provide these services without
allowing direct access to modifying handset
(Internet)


Difficult to emulate Internet on a handset
-

small
size, battery life, resolution/display type, etc


Plus data transmission was costly

Smartphone Stats


Top Smartphone Platforms
-

Share % of Smartphone
subscribers (Feb. 2011)


Google/Android 33%


RIM Blackberry 28.9%


Apple 25.2%


Microsft 7.7%


Palm 2.8%


Smartphone overall penetration


2008 11%


2009 17%


2010 27%


AT&T biggest smartphone carrier (38.3%), Verizon 2nd
at 26.7%


> 1 billion iPhone apps downloaded

Source: Comscore

Mobile Activities

Besides voice calls:


texting (68% of users)


taking photos (52%)


news and information (40%)


Web browsing (36%)


using apps (34%)


e
-
mail (30%)


weather (25%)


social networking or blogs (24%)


games (23%)


search (21%)


shooting video (20%)


looking at maps (18%)


instant messaging (17%)


sports info (16%)


listening to music (16%)


Evolution


"Traditional HTML" is static content; initial browsers did not
support scripting


“Browser wars" made scripting very cumbersome


Multimedia content was required for commercial content


Java was an existing (but heavy) solution from enterprise IT


Flash evolved from a more content
-
centric perspective


Today's browsers are runtime environments themselves


Rich and fairly robust scripting environments


More limited access to OS resources than add
-
ons


Mobile software developers work with distinctly different
programming environments, different tools, and different
programming languages. Porting among the platforms is often
costly and not straightforward.


Technologies for Web dev now include HTML5, CSS3, and
JavaScript



Native Languages


iOS
-

Objective C


Android Java, but some C, C++


Blackberry
-

Java


Windows Mobile
-

C, C++


Native Apps or Web Apps


Native


Ability to build a superior user interface


Need to access device hardware
-

gps, accelerometer,
camera, storage, etc. wifi, 3g, messaging, email, browser,
music player...


Leverage popular, established app store distribution
channels


Web


Ease and cost benefits of providing one interface accessible
on multiple platforms


Direct control over own distribution, no need to seek third
party approval



Ability to build a superior user interface



phone, multimedia, internet connectivity/
(browser), keyboard input, email, text message,
3rd party apps.


Wrapping in PhoneGap to make into a native
app.

Android Platform


Android philosophy
-

more open, choice of phones,
carriers
-

freeware, shareware, paid apps.


Open Handset Alliance Nov 2007
-

non
-
proprietary open
standard
-

Android; Google leading the way, but includes
chip marks, handset manufacturers, software devs and
service providers.


T
-
Mobile Gi
-

1st Android Handset Oct 2008. by HTC


Free and open source

iPhone History and Development


iPhone introduced June 29, 2007


Apps sold through iTunes then App Store,
proprietary. Apps approved by Apple.


Open SDK in Feb. 2008. Free download,
simulator. Pay fee to to put in App store
-

Apple
Developer Connection. Set any price, developer
keeps 70% share.


In most recent quarter, iPhone accounts for
more than half of Apple’s revenue.

JQuery Mobile


JQuery Mobile
-

broad
-
based mobile
development platform. Uses web standards.
Runs on all major platforms.


HTML5 markup driven


Object
-
oriented CSS that provides a unified
visual design theme. Like JQuery UI
ThemeRoller.



JQuery Mobile Demo

Download or link to JQuery, JQuery Mobile and JQuery Mobile CSS



<!DOCTYPE html>

<html>


<head>


<title>jQuery Mobile Tutorial on Codeforest.net</title>


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile
-
1.0a1.min.css" />


<script src="http://code.jquery.com/jquery
-
1.4.3.min.js"></script>


<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile
-
1.0a1.min.js"></script>

</head>


JQuery Mobile, continued

<body>

<div data
-
role="page”>


<div data
-
role="header">


<h1>The title</h1>


</div><!
--

/header



<div data
-
role="content">


<p>Hello World</p>


</div><!
--

/content
--
>


<div data
-
role="footer">


<h4>The Footer</h4>


</div><!
--

/header
--
>

</div><!
--

/page
--
>

</body>

</html>



Use data
-
role attribute in div

Create this file, name as index.html


Run in iPhone Simulator

http://testiphone.com/


External link
-

add this in content div

<p><a href="index.php">Click me to
show the first page!</a></p>



Internal link
-

more link anchors

use the id attribute

<div data
-
role="page" id="first">


</div>


<div data
-
role="page" id="second">


</div>


then reference in href as:

<a href="first">Back to first</a>


Change themes with data
-
theme

Native App Demo

iPhone Development

Download XCode and the iPhone SDK

Open XCode

File, New Project

Name it HelloWorld, find a location for it.

iPhoneOS

Application
-

these are project templates

Choose View
-
based application

Makes lots of files (like a framework)

Open Resources in the left panel

Open View Controller, double click

Opens Interface Builder

You can add things to the View from the Library

Choose a Label, Drag on to view, Change it to Hello World

Save it.

Back in XCode, click Build and Go Button

Links


JQuery Mobile
-

http://jquerymobile.com/


Apple iOS Dev Center
-

http://developer.apple.com/devcenter/ios/index.action


Tutorials


http://www.codeforest.net/jquery
-
mobile
-
tutorial
-
basics


http://www.webdesignerdepot.com/2009/05/how
-
to
-
get
-
started
-
with
-
iphone
-
dev/


http://mobile.tutsplus.com/tutorials/mobile
-
web
-
apps/jquery
-
mobile
-
forms/


http://www.mightymeta.co.uk/test
-
your
-
website
-
across
-
ios
-
devices
-
using
-
the
-
iphone
-
simulator/


iPhone simulator
-

http://www.testiphone.com/


Turn Web app to native
-

http://www.phonegap.com/