Ges$one’Avanzatadell’Informazione’ · 2018. 2. 12. · Mobile’compung ’ 2...

Ges$one Avanzata dell’Informazione

Mobile Applica$on Development & Data Management

Mobile compu$ng

GAvI -‐ Mobile Applica$on Development & Data Management 2

}  Mobile is no longer limited to communica$ons }  Mobile is a force transforming our world in an unprecedented way

}  Smartphones are reaching over 4 billion subscribers these days

}  Smartphone sales are now outpacing desktop/laptop computer sales

}  Handheld devices }  Small handheld compu$ng device

}  Screen display with touch input

}  Miniature or virtual keyboard

}  Less than two pounds }  Smartphones and PDAs


Mobile devices

}  Tablet computers }  Complete mobile computer

}  Larger than a mobile phone or PDA

}  Virtual keyboard

Mobile devices


}  Apple iPhone 6

}  Apple iPad Air 2


Mobile devices

Mobile devices


}  Samsung Galaxy S6

}  Apple’s iOS }  Started for iPhone }  Expanded to iPad }  Current version: iOS 8.3


Mobile opera$ng systems

}  Google’s Android }  Originally for smart phones }  Found on more devices than any other OS }  Current version: Android 5.1 (Lollipop)


Mobile opera$ng systems

Mobile form-‐factor (Field Mobility 2013)


Mobile OS market share (Netmarketshare, June 2014)


Top Smartphone OEMs market share (US, Feb 2014)



Mobile OS mobile traffic share (US, Jan 2014)

}  iOS (Apple App Store) }  1,400,000+ apps


}  Advances in the Web and mobile technologies offer new and exci$ng applica$ons and services to users…

Mobile Applica$ons

} Android (Google Play) }  1,500,000+ apps

Mobile Applica$ons: Apps price


}  Dropbox: on-‐line "cloud storage" that wirelessly synchronizes with you mobile devices. A great way to transfer documents from you computer to the mobile device.

}  iBooks: manages books, pdf files, and other text files

}  Kindle: eReader from Amazon }  …


Apps (Document Management)

}  Dic$onary.com }  Epicurious Recipes & Shopping List }  Google Earth }  Dragon Dicta$on: converts speech to text }  The Weather Channel }  …


Apps (Reference)

}  Google }  Google Translate }  Google Sky Map }  Google Goggles }  Google Earth }  Google Docs }  Google Maps }  Google Body }  Google Voice }  Google Books }  …


Apps (Google)

}  Facebook }  Flipboard }  Twijer


Apps (Social Networks)


Apps (Games)

20

...but how can such apps be programmed?

GAvI -‐ Mobile Applica$on Development & Data Management

Na$ve Development: iOS Dev Center


}  hjp://developer.apple.com/devcenter/ios }  API reference documenta$on }  Guides }  Tutorials }  Source code examples }  …

}  Programming language: Objec$ve C / Swim }  IDE: Xcode

}  Complete developer toolset for crea$ng Mac, iPhone, and iPad apps

}  Includes iOS Simulator and the latest Mac OS X and iOS SDKs

Na$ve Development: Android Developers


}  hjp://developer.android.com }  SDKs }  Development guides }  API references }  Sample code }  Tutorials …

}  Programming language: Java }  IDE: Eclipse }  SDK available for Windows, Mac OSX, Linux

23

}  Which plaoorms do you choose? }  How many codebases do you want to (or even can you) support?

}  How long will it take to build na$ve on N plaoorms? }  How much effort will be duplicated? }  What if you bet on the wrong plaoorm?


Na$ve Development: issues

24

Web Development is an op$on

}  Mobile browsers are progressing fast and converging around WebKit

}  But there are limita$ons }  Na$ve apps are inherently more capable than web apps

}  Na$ve apps run faster and smoother on resource constrained devices


25

Mul$plaoorm Development: Titanium

}  Titanium is an open source framework for building na$ve mobile (or desktop) applica$ons using open web technologies (JavaScript -‐ op$onally HTML and CSS)

}  hjp://www.appcelerator.com/


}  Open Source (Apache 2.0)

}  Titanium Plaoorms }  Desktop: Win32, OS X, Linux }  Mobile: iOS, Android, Blackberry, HTML5

26

Titanium Architecture

}  Desktop is HTML focused

}  Can use other scrip$ng languages

}  Mobile: JavaScript interpreted at run$me

}  JavaScript API >> na$ve APIs


27

Titanium: Examples


28

Titanium: Examples


29

Titanium: Examples


30

Titanium Fundamentals }  A Titanium applica$on is a JavaScript program that is interpreted at run$me on the device

}  app.js defines the root execu$on context of the app

}  It is not running in a browser }  It uses the WebKit KJS JavaScript engine (iOS) or Rhino (Android/BB)


31

Titanium JavaScript API

}  Organized into logical namespaces }  “Titanium” (or just “Ti” for short) is the root namespace for all Titanium func$onality


32

Typical App Composi$on

}  A single window or stack of windows

}  Tab Group containing many windows

}  Windows contain views


33

Windows and Contexts }  Windows are the top level container for Titanium applica$ons

}  Applica$ons usually consist of one window or several windows in a tab group

}  Windows usually create new execu$on contexts }  Execu$on context == A unique JavaScript symbol space }  Such windows are “Heavyweight” windows }  Can also create “Lightweight” windows (for apps that run in a single context)

3


34

The View Hierarchy

}  Views are the building blocks of Titanium UIs }  Specialized views: table views, image views, map views, etc.

}  Views can contain child views, which are posi$oned rela$ve to the parent

}  Layout Op$ons: Absolute, ver$cal, or horizontal


35

Demo: Hello World!

}  Crea$ng a mobile project }  Mobile project structure }  Edi$ng code }  Deploy to simulator


Demo: Hello World!


37

Hello World! (complete code)


var tabGroup = Titanium.UI.createTabGroup(); var win1 = Titanium.UI.createWindow({ =tle:'Hello!', backgroundColor:'#fff' }); var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', =tle:'Hello', window:win1 }); var label1 = Titanium.UI.createLabel({

color:'#999', text:'Hello world! I am Window 1', font:{fontSize:20,fontFamily:'Helve=ca Neue'}, textAlign:'center', width:'auto'

}); win1.add(label1); tabGroup.addTab(tab1); tabGroup.open();

Paste and try! h#p://pastebin.com/YvwZQSZX

38

Demo: Kitchen Sink

}  Example Code }  Living Reference Document }  Demonstrates API coverage

}  hjp://github.com/appcelerator/KitchenSink


Demo: Kitchen Sink


Mobile Data Management


Cool! But what about Data Management on mobile devices?

We have good news!

Mobile Data Management


}  In most cases, we don’t need to learn new ways of working with the kinds of data we are familiar with

}  We can exploit our know-‐how for: }  Rela$onal Data management (SQL, …) }  Full-‐text management (regex, …) }  XML Data (DOM parsing, …) }  …

Rela$onal Data Management: an example


var db = Ti.Database.open('mydb'); db.execute('CREATE TABLE IF NOT EXISTS DATABASETEST (ID INTEGER, NAME TEXT)'); db.execute('DELETE FROM DATABASETEST'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',1,'ISGroup'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',2,'Titanium'); var rows = db.execute('SELECT * FROM DATABASETEST'); var outputString ='Database results:'; while (rows.isValidRow()) { outputString += '\nID: ' + rows.field(0) +

' NAME: ' + rows.fieldByName('name'); rows.next();

} rows.close(); db.close(); // close db when you're done to save resources


Rela$onal Data Management: an example

Full-‐text Data Management: an example


var outputString='Regular expression results:'; var text="[email protected]"; var paj="([\\w\\.]+)@((\\w+\\.)+(com|it))"; var result = text.match(paj); outputString += "\n"+result[0]; outputString += "\nName: "+result[1]; outputString += "\nHost: "+result[2];

XML Data Management: an example


var readFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,'gamebook.xml'); var xmlString = readFile.read().text; var xmlDoc = Ti.XML.parseString(xmlString).documentElement;

var desiredSect="2"; var outputString ='XML DOM parsing results:'; var sec=ons = xmlDoc.getElementsByTagName("sec=on"); for (i=0; i<sec=ons.length; i++) { var sec=onN = sec=ons.item(i);

var num = sec=onN.ajributes.getNamedItem("number").nodeValue; if (num==desiredSect)

{ var textN = sec=onN.getElementsByTagName("text").item(0).text; outputString +=textN;

} }

XML Data Management: an example


47

Complete app code


}  Get the full app.js code and try it on Titanium! }  It includes:

}  Hello world page }  Data management demo

}  DB Data management demo }  Full-‐text data management demo }  XML DOM data management demo

}  hjp://pastebin.com/reHA3SbQ

Interested in Mobile Applica$on Development?


}  This was just a short overview! }  ISGroup has an ongoing agreement with Apple allowing students to freely access iOS Development resources }  hjps://developer.apple.com/programs/ios/university/

}  If you want more informa$on on developing mobile apps focused on data management issues, also for possible theses and/or for different devices, or if you want to join the iOS program, don’t hesitate to ask! }  hjp://www.isgroup.unimo.it/theses }  [email protected]

Ges$one’Avanzatadell’Informazione’ · 2018. 2. 12. · Mobile’compung ’ 2...

Documents

Transcript of Ges$one’Avanzatadell’Informazione’ · 2018. 2. 12. · Mobile’compung ’ 2...