Tamkang University Social Media Apps Programming Google App

Tamkang University Social Media Apps Programming Google App Engine and Google Maps API 1031 SMAP 11 TLMXM 1 A (8687) (M 2143) (Fall 2014) (MIS MBA) (2 Credits, Elective) [Full English Course] Thu 8, 9 (15: 10 -17: 00) V 201 Min-Yuh Day, Ph. D. Assistant Professor Department of Information Management Tamkang University http: //mail. tku. edu. tw/myday 2014 -12 -17

Course Schedule (1/3) Week Date Subject/Topics • 1 2014/09/17 Course Orientation and Introduction to Social Media and Mobile Apps Programming • 2 2014/09/24 Introduction to Android / i. OS Apps Programming • 3 2014/10/01 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor) • 4 2014/10/08 Developing i. Phone / i. Pad Native Apps with Swift / Objective-C (XCode) • 5 2014/10/15 Mobile Apps Using HTML 5/CSS 3/Java. Script • 6 2014/10/22 j. Query Mobile 2

Course Schedule (2/3) Week Date Subject/Topics • 7 2014/10/29 Create Hybrid Apps with Phonegap • 8 2014/11/05 j. Query Mobile/Phonegap • 9 2014/11/12 j. Query Mobile/Phonegap • 10 2014/11/19 Midterm Exam Week (Midterm Project Report) • 11 2014/11/26 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store • 12 2014/12/03 Google Cloud Platform 3

Course Schedule (3/3) Week Date Subject/Topics • 13 2014/12/10 Invited Talk: Social, Data and Business Model - Let’s see PIXNET [Invited Speaker: Dr. Rick Cheng-Yu Lu, Technical Director, PIXNET] • 14 2014/12/17 Google App Engine and Google Maps API • 15 2014/12/24 Facebook API (Facebook Java. Script SDK) (Integrate Facebook with i. OS/Android Apps) • 16 2014/01/31 Twitter API • 17 2015/01/07 Final Project Presentation • 18 2015/01/14 Final Exam Week (Final Project Report) 4

Outline • Google App Engine – Google Cloud Platform – Google Cloud Datastore • Google Maps API 5

Google Cloud Platform Compute Storage App Engine Cloud Datastore Compute Engine Cloud SQL Container Engine Cloud Storage Big Data Services Cloud Endpoints Big Query Source: https: //cloud. google. com/products/ Translate API Prediction API 6

Mobile Apps Backend on Google App Engine Cloud Endpoints App Engine Google Cloud Endpoints Architecture Source: https: //cloud. google. com/appengine/docs/java/endpoints/ 7

Google App Engine, Google Cloud Datastore Datasotre is a database (persistent storage) for App Engine Web application framework (AP) Persistent storage (Database) Google App Engine Traditional Web applications Google App Engine (Java, Python, Go) Perl/CGI PHP Ruby on Rails ASP/JSP Datastore • • RDBMS My. SQL Postgre. SQL Server Oracle Source: Datastore Introduction, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 8

Google Cloud Platform https: //cloud. google. com/docs/ 9

Try Google Cloud Platform for free 10

Try Google Cloud Platform for free 11

Google Cloud Platform https: //cloud. google. com/docs/ 12

Google App Engine "Hello World" starter https: //console. developers. google. com/start/appengine Deploy your first app in five minutes • Start editing a working "Hello World" app right now, in the browser. • This gives you a good starting point and a feel for what it's like editing a working App Engine application. 13

Try Google App Engine Now 1. 2. 3. 4. 5. 6. NAME YOUR PROJECT SELECT YOUR LANGUAGE EXPLORE THE STARTER CODE INSTALL GOOGLE CLOUD SDK RUN YOUR APP LOCALLY CREATE YOUR PROJECT AND DEPLOY 14

Google App Engine 15

Google App Engine 16

Google App Engine 17

Google App Engine 18

Google App Engine 19

Google App Engine 20

Google App Engine 21

Google App Engine 22

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, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 23

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, You. Tube, Earth, Analytics Bigtable Scalable and reliable storage Source: Datastore Introduction, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 24

Bigtable Data Model • A row has a Key and Columns • Sorted by Key – In lexical order – Enables range query by application “contents: ” “com. cnn. www” “<html>…” “anchor: cnnsi. com” t 3 t 6 t 5 “CNN” t 9 “anchor: my. look. ca” “CNN. com” Source: Datastore Introduction, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg t 8 25

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, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 26

Kind, Entity and Key Blog. Entry Kinds User Key: 1234 name: joe@ex. com message: xxxxx data: 1/1/2012 12: 32 Entities Key: joe@ex. com email: joe@ex. com followees: [usr 2@ex. com, usr 3@ex. com] followers: [] Key: usr 2@ex. com email: usr 2@ex. com followees: [] followers: [joe@ex. com] Source: Datastore Introduction, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 27

Properties and Data Types Each entity has one or more named properties • Variety of datatypes (int, float, boolean, Sring, Date, …) • Can be multi-valued Blog. Entry Key: 1234 name: joe@ex. com message: xxxxx data: 1/1/2012 12: 32 Properties User Key: joe@ex. com email: joe@ex. com followees: [usr 2@ex. com, usr 3@ex. com] followers: [] Key: usr 2@ex. com email: usr 2@ex. com followees: [] followers: [joe@ex. com] Source: Datastore Introduction, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 28

Creating an Entity with Java Low-level API Datastore. Service datastore = Datastore. Service. Factory. get. Datastore. Service(); Entity employee = new Entity(“Employee”); employee. set. Property(“name”, “Antonio Saliery”); employee. set. Property(“hire. Date”, new Date()); employee. set. Property(“attended. Hr. Training”, true); datastore. put(emploee); Source: Datastore Introduction, http: //www. youtube. com/watch? v=f. Qazhzc. C-rg 29

Google Maps API https: //developers. google. com/maps/ 30

Google Maps API https: //developers. google. com/maps/ 31

Google Maps API Demos http: //www. morethanamap. com/ 32

Google Maps API Demos http: //www. morethanamap. com/demos 33

Google Maps API Demos http: //www. morethanamap. com/demos/basemaps/new-york 34

Google Maps API Demos http: //www. morethanamap. com/demos/routing/cycling 35

Google Maps Java. Script API v 3 https: //developers. google. com/maps/web/ 36

Google Maps Java. Script API https: //developers. google. com/maps/documentation/javascript/tutorial 37

Obtaining an Google Maps API Key https: //developers. google. com/maps/documentation/javascript/tutorial 38

Demo: Integrate Google Maps Java. Script API with j. Query Mobile 39

Start using the Google APIs console https: //code. google. com/apis/console/? noredirect&pli=1 40

Google APIs Console 41

Google APIs Console 42

Google APIs Console 43

Google APIs Console 44

Google Developers Console Google Cloud Platform 45

Google Maps API v 3 46

Credentials: Public API access Get Google Maps API Key API key 47

Google Map Java. Script API Hello, World https: //developers. google. com/maps/documentation/javascript/tutorial 48

Google Map Java. Script API Hello, World <!DOCTYPE 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="https: //maps. googleapis. com/maps/api/js? key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script> <script type="text/javascript"> function initialize() { var map. Options = { center: new google. maps. Lat. Lng(-34. 397, 150. 644), zoom: 8 }; var map = new google. maps. Map(document. get. Element. By. Id("map-canvas"), map. Options); } google. maps. event. add. Dom. Listener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html> API key https: //developers. google. com/maps/documentation/javascript/tutorial 49

Google Maps Java. Script API: Simple Map https: //developers. google. com/maps/documentation/javascript/examples/map-simple 50

<!DOCTYPE html> Google <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: 0 px; padding: 0 px } </style> <script src="https: //maps. googleapis. com/maps/api/js? v=3. exp&sensor=false"></script> <script> var map; function initialize() { var map. Options = { zoom: 8, center: new google. maps. Lat. Lng(-34. 397, 150. 644) }; map = new google. maps. Map(document. get. Element. By. Id('map-canvas'), map. Options); } Maps Java. Script API Example Java. Script + HTML google. maps. event. add. Dom. Listener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> https: //developers. google. com/maps/documentation/javascript/examples/map-simple 51

<div style="position: absolute; height: 100%; width: 100%; "> <div id="map-canvas"></div> http: //mail. tku. edu. tw/myday/app/map. html 52

<style> #map-canvas { height: 100%; margin: 0 px; padding: 0 px } </style> Google Maps Java. Script API <script> function initialize() { var map. Options = { zoom: 15, center: new google. maps. Lat. Lng(25. 174738, 121. 450381) }; } var map = new google. maps. Map(document. get. Element. By. Id('map-canvas'), map. Options); function load. Script() { var script = document. create. Element('script'); script. type = 'text/javascript'; script. src = 'https: //maps. googleapis. com/maps/api/js? v=3. exp&sensor=true&callback=initialize'; document. body. append. Child(script); } window. onload = load. Script; </script> http: //mail. tku. edu. tw/myday/app/map. html 53

<!DOCTYPE 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-1. 3. 2. min. css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery. mobile-1. 3. 2. min. js"></script> <!--Phone. Gap--> <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> <!--/Phone. Gap--> <script type="text/javascript"> app. initialize(); </script> <style> #map-canvas { height: 100%; margin: 0 px; padding: 0 px } </style> <script> function initialize() { var map. Options = { zoom: 15, center: new google. maps. Lat. Lng(25. 174738, 121. 450381) }; } var map = new google. maps. Map(document. get. Element. By. Id('map-canvas'), map. Options); function load. Script() { var script = document. create. Element('script'); script. type = 'text/javascript'; script. src = 'https: //maps. googleapis. com/maps/api/js? v=3. exp&sensor=true&callback=initialize'; document. body. append. Child(script); } <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> <h 1>Google Maps</h 1> <a href="index. html#My. Home" rel="external" data-icon="home">Home</a> </div><!-- /header --> <div style="position: absolute; height: 100%; width: 100%; "> <div id="map-canvas"></div> <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="index. html#My. Home" 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 window. onload = load. Script; </script> </head> http: //mail. tku. edu. tw/myday/app/map. html 54

Google Maps Java. Script API + j. Query Mobile http: //mail. tku. edu. tw/myday/app/map. html 55

Summary • Google App Engine – Google Cloud Platform – Google Cloud Datastore • Google Maps API 56

References • Google Cloud Platform, https: //cloud. google. com/ • Google App Engine, https: //cloud. google. com/appengine/ • Google Cloud Datastore, https: //cloud. google. com/datastore/ • Google Cloud Endpoints, https: //cloud. google. com/endpoints/ • Google Maps API, https: //developers. google. com/maps/ • Google Maps Java. Script API v 3 Tutorial, https: //developers. google. com/maps/documentation/javascri pt/tutorial • Google Maps API Tutorial, http: //www. w 3 schools. com/google. API/ 57