1. Social Media Apps Programming
Tamkang University
Social Media Apps Programming
Google App Engine
and Google Maps API
1021SMAP10
TLMXM1A (8687) (M2143) (Fall 2013)
(MIS MBA) (2 Credits, Elective) [Full English Course]
Thu 9,10 (16:10-18:00) V201
Min-Yuh Day, Ph.D.
Assistant Professor
Department of Information Management
Tamkang University

2. Course Schedule (1/3) Week Date Subject/Topics
/09/19 Mid-Autumn Festival (Day off)
/09/26 Course Orientation and Introduction to Social Media and Mobile Apps Programming
/10/03 Introduction to Android / iOS Apps Programming
/10/10 Double Tenth Day (Day off)
/10/17 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor)
/10/24 Developing iPhone / iPad Native Apps with Objective-C (Xcode)

3. Course Schedule (2/3) Week Date Subject/Topics
/10/31 Mobile Apps using HTML5/CSS3/JavaScript
/11/07 jQuery Mobile
/11/14 Create Hybrid Apps with PhoneGap
/11/21 Midterm Exam Week (Midterm Project Report)
/11/28 jQuery Mobile/Phonegap
/12/05 Invited Talk: Social, Mobile and Business Model in PIXNET [Invited Speaker: Dr. Rick Cheng-Yu Lu]

4. Course Schedule (3/3) Week Date Subject/Topics
/12/12 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store
/12/19 Google App Engine and Google Map API
/12/26 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with iOS/Android Apps)
/01/02 Twitter API
/01/09 Final Project Presentation
/01/16 Final Exam Week (Final Project Report)

5. Outline Google App Engine Google Maps API Google Cloud Platform
Google Cloud Datastore
Google Maps API

6. Google Cloud Platform

7. Google Cloud Platform App Engine Compute Engine Cloud Storage
Cloud SQL
Cloud Datastore
BigQuery
Prediction API
Translate API
Cloud Endpoints

8. Google Cloud Platform

9. Google Cloud Platform

10. Google Cloud Products

11. Google Cloud Products

12. Google Cloud Products

13. Google Cloud Products

14. https://cloud.google.com/products/app-engine/
Google App Engine

15. Google Cloud Datastore

16. Mobile App, Goolge App Engine, Cloud Datasotre

17. Google Cloud Endpoints

18. Mobile, Web and Cloud

19. Build your mobile app with Google Cloud Platform

20. App Engine Architecture and Services
Google App Engine Architecture and Services,
GoogleDevelopers
Published on Feb 5, 2013
This lesson introduces how App Engine solves the needs of a real-time earthquake monitor in Japan, in a robust scalable way that handles peak request throughput during earthquakes without needing to keep server resources up and running all the time.
Learn how to configure your App Engine applications to best take advantage of the underlying Google infrastructure, including edge caching and load balancing, to optimize response speed and minimize cost.

21. Datastore Introduction
GoogleDevelopers
Published on Feb 5, 2013
Datastore service in App Engine is the core component of the platform and an essential part of learning App Engine technologies. In this lesson we will cover topics including "What is Datastore?", "Datastore Internals" and "Datastore Basic Operation". We will be looking at basic concepts including the difference between a Relational Database and Datastore, scalability, reliability and performance characteristics of Datastore. We will also dive deeper into the underlying technology, Google Bigtable. As basic operations, we will learn Datastore concepts like Entity, Property and Key as well as Datastore APIs.
Source: Datastore Introduction,

22. Google Cloud Datastore
Datasotre is a database (persistent storage) for App Engine
Google App Engine
Traditional Web applications
Web application framework
(AP)
Google App Engine
(Java, Python, Go)
Perl/CGI
PHP
Ruby on Rails
ASP/JSP
Persistent storage
(Database)
Datastore
RDBMS
MySQL
PostgreSQL
SQL Server
Oracle
Source: Datastore Introduction,

23. Datastore Internals Based on Bigtable high scalability
High availability
synchronous writes on multiple datacenters
Datastore
query
Megastore
transactions
Bigtable
Scalable and reliable storage
Source: Datastore Introduction,

24. What is Bigtable?
Scalable, distributed, highly-available and structured storage
Bigtable is not database by itself (it doesn’t support query)
Google usage
In production since April 2005
Web Search, YouTube, Earth, Analytics
Bigtable
Scalable and reliable storage
Source: Datastore Introduction,

25. Bigtable Data Model A row has a Key and Columns Sorted by Key
In lexical order
Enables range query by application
“contents:”
“anchor:cnnsi.com”
“anchor:my.look.ca”
“<html>…” t3
“com.cnn.www”
“<html>…” t5
“<html>…” t9 t6
“CNN”
“CNN.com” t8
Source: Datastore Introduction,

26. Google Datastore Basic Operation
Different terms for corresponding concepts
Google
Datastore
Relational
Database Management System
(RDBMS)
Category of object
Kind
Table
One entry/object
Entity
Row
Unique identifier of data entry
Key
Primary Key (PK)
Individual data
Property
Field
Source: Datastore Introduction,

27. Kind, Entity and Key Kinds Key Entities BlogEntry User Key: 1234
name:
message: xxxxx
data: 1/1/ :32
Key:
followees:
followers: []
Key:
followees: []
followers:
Entities
Source: Datastore Introduction,

28. Properties and Data Types
Each entity has one or more named properties
Variety of datatypes (int, float, boolean, Sring, Date,…)
Can be multi-valued
BlogEntry
User
Key: 1234
name:
message: xxxxx
data: 1/1/ :32
Key:
followees:
followers: []
Key:
followees: []
followers:
Properties
Source: Datastore Introduction,

29. Creating an Entity with Java Low-level API
DatastoreService datastore = DatastoreServiceFactory.getDatastoreService(); Entity employee = new Entity(“Employee”); employee.setProperty(“name”, “Antonio Saliery”); employee.setProperty(“hireDate”, new Date()); employee.setProperty(“attendedHrTraining”, true); datastore.put(emploee);
Source: Datastore Introduction,

30. Google Maps API

31. Google Maps API

32. Google Maps JavaScript API

33. Obtaining an Google Maps API Key

34. Demo: Integrate Google Maps JavaScript API with jQuery Mobile

35. Start using the Google APIs console

36. Google APIs Console

37. Google APIs Console

38. Google APIs Console

39. Google APIs Console

40. Google Developers Console Google Cloud Platform

41. Google Maps API v3

42. Credentials: Public API access Get Google Maps API Key

43. Google Map JavaScript API Hello, World

44. Google Map JavaScript API Hello, World
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( , ),
zoom: 8 };
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions); }
google.maps.event.addDomListener(window, 'load', initialize);
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
API key

45. Google Maps JavaScript API: Simple Map

46. Google Maps JavaScript API Example
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
<script src="
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng( , ) };
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Google Maps JavaScript API Example
JavaScript + HTML

47. <div style="position:absolute; height:100%; width:100%;">
<div id="map-canvas"></div>
</div>

48. Google Maps JavaScript API
<style>
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng( , ) };
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '
document.body.appendChild(script);
window.onload = loadScript;
</script>
Google Maps JavaScript API

49. map.html http://mail.tku.edu.tw/myday/app/map.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="js/jquery.js"></script>
<link type="text/css" href="css/jquery.mobile min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.mobile min.js"></script>
<!--PhoneGap-->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--
<script type="text/javascript" src="phonegap.js"></script>
-->
<script type="text/javascript" src="js/index.js"></script>
<!--/PhoneGap-->
<script type="text/javascript">
app.initialize();
</script>
<style>
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px }
</style>
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng( , ) };
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '
document.body.appendChild(script);
window.onload = loadScript;
</head>
<body>
<div data-role="page" id="googlemaps" data-theme="b">
<div data-role="header" data-position="inline" data-theme="b">
<a data-icon="back" data-rel="back" back-btn="true">Back</a>
<h1>Google Maps</h1>
<a href="index.html#MyHome" rel="external" data-icon="home">Home</a>
</div><!-- /header -->
<div style="position:absolute; height:100%; width:100%;">
<div id="map-canvas"></div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="index.html#MyHome" rel="external" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="home">Home</a></li>
<li><a href="index.html#Research" rel="external" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="star">Research</a></li>
<li><a href="index.html#Teaching" rel="external" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="check">Teaching</a></li>
<li><a href="index.html#More" rel="external" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="bars">More</a></li>
<li><a href="index.html#About" rel="external" class="ui-btn-active ui-state-persist" data-transition="fade" data-icon="grid">About</a></li>
</ul>
</div><!-- /footer -->
</div><!-- /page Google Map-->
</body>
</html>
map.html

50. Google Maps JavaScript API + jQuery Mobile

51. Summary Google App Engine Google Maps API Google Cloud Platform
Google Cloud Datastore
Google Maps API

52. References
Beginning PhoneGap: Mobile Web Framework for JavaScript and HTML5, Rohit Ghatol & Yogesh Patel, Apress, 2012
Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch, Scott Preston, Apress, 2012
Google App Engine,
Google Map API,