Min-Yuh Day, Ph.D. Assistant Professor Department of Informa9on Management Tamkang University

Size: px

Start display at page:

Download "Min-Yuh Day, Ph.D. Assistant Professor Department of Informa9on Management Tamkang University"

Phoebe Jordan
6 years ago
Views:

Tamkang University Social Media Apps Programming Google

(M2143) (Fall 2015) (MIS MBA) (2 Credits, Elec9ve) [Full

Ph.D. Assistant Professor Department of Informa9on

1 Tamkang University Social Media Apps Programming Google App Engine and Google Map API 1041SMAP11 TLMXM1A (8687) (M2143) (Fall 2015) (MIS MBA) (2 Credits, Elec9ve) [Full English Course] Wed 9,10 (16:10-18:00) B310 Min-Yuh Day, Ph.D. Assistant Professor Department of Informa9on Management Tamkang University h?p://mail.tku.edu.tw/myday

2 Course Schedule (1/3) Week Date Subject/Topics /09/16 Course Orienta9on and Introduc9on to Social Media and Mobile Apps Programming /09/23 Introduc9on to Android / ios Apps Programming /09/30 Developing Android Na9ve Apps with Java (Android Studio) (MIT App Inventor) /10/07 Developing iphone / ipad Na9ve Apps with Swia (XCode) /10/14 Mobile Apps using HTML5/CSS3/JavaScript /10/21 jquery Mobile 2

3 Course Schedule (2/3) Week Date Subject/Topics /10/28 Create Hybrid Apps with Phonegap /11/04 jquery Mobile/Phonegap /11/11 jquery Mobile/Phonegap /11/18 Midterm Exam Week (Midterm Project Report) /11/25 Invited Talk: Business Intelligent and Analysis in PIXNET, the Dominant Blog Plaform in Taiwan [Speaker: Dr. Rick Cheng-Yu Lu, CTO, PIXNET] /12/02 Case Study on Social Media Apps Programming and Marke9ng in Google Play and App Store 3

4 Course Schedule (3/3) Week Date Subject/Topics /12/09 Google Cloud Plaform /12/16 Google App Engine and Google Map API /12/23 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with ios/android Apps) /12/30 Twi?er API /01/06 Final Project Presenta9on /01/13 Final Exam Week (Final Project Presenta9on) 4

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

Google Cloud Pla@orm Compute Storage Big Data Services App

Cloud SQL Big Query Translate API Container Engine Cloud

6 Google Cloud Compute Storage Big Data Services App Engine Cloud Datastore Cloud Endpoints Compute Engine Cloud SQL Big Query Translate API Container Engine Cloud Storage Predic9on API Source: h?ps://cloud.google.com/products/ 6

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

8 Google App Engine, Google Cloud Datastore Datasotre is a database (persistent storage) for App Engine Web applica9on framework (AP) Persistent storage (Database) Google App Engine Google App Engine (Java, Python, Go) Datastore Tradi9onal Web applica9ons Perl/CGI PHP Ruby on Rails ASP/JSP RDBMS MySQL PostgreSQL SQL Server Oracle Source: Datastore Introduc9on, h?p:// 8

9 Google Cloud h?ps://cloud.google.com/docs/ 9

10 Try Google Cloud for free 10

11 Try Google Cloud for free 11

12 Google Cloud h?ps://cloud.google.com/docs/ 12

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

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

15 Google App Engine 15

16 Google App Engine 16

17 Google App Engine 17

18 Google App Engine 18

19 Google App Engine 19

20 Google App Engine 20

21 Google App Engine 21

22 Google App Engine 22

23 Datastore Internals Based on Bigtable high scalability High availability synchronous writes on mul9ple datacenters Datastore query Megastore transacmons Bigtable Scalable and reliable storage Source: Datastore Introduc9on, h?p:// 23

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 produc9on since April 2005 Web Search, YouTube, Earth, Analy9cs Bigtable Scalable and reliable storage Source: Datastore Introduc9on, h?p:// 24

25 Bigtable Data Model A row has a Key and Columns Sorted by Key In lexical order Enables range query by applica9on contents: anchor:cnnsi.com anchor:my.look.ca com.cnn.www <html> t 3 <html> t <html> t 5 6 CNN t 9 CNN.com t 8 Source: Datastore Introduc9on, h?p:// 25

26 Google Datastore Basic OperaMon Different terms for corresponding concepts Google Datastore Category of object Kind Table One entry/object En9ty Row RelaMonal Database Management System (RDBMS) Unique iden9fier of data entry Key Primary Key (PK) Individual data Property Field Source: Datastore Introduc9on, h?p:// 26

Kind, EnMty and Key Key Kinds BlogEntry Key: 1234 name: joe@ex.com message: xxxxx data: 1/1/2012 12:32 EnMMes User Key: joe@ex.com email: joe@ex.com followees: [usr2@ex.

27 Kind, EnMty and Key Key Kinds BlogEntry Key: 1234 name: message: xxxxx data: 1/1/ :32 EnMMes User Key: followees: followers: [] Key: followees: [] followers: Source: Datastore Introduc9on, h?p:// 27

ProperMes and Data Types Each en9ty has one or more named propermes Variety of datatypes (int, float, boolean, Sring, Date, ) Can be mul9-valued BlogEntry Key: 1234 name: joe@ex.

28 ProperMes and Data Types Each en9ty has one or more named propermes Variety of datatypes (int, float, boolean, Sring, Date, ) Can be mul9-valued BlogEntry Key: 1234 name: joe@ex.com message: xxxxx data: 1/1/ :32 User Key: joe@ex.com joe@ex.com followees: [usr2@ex.com, usr3@ex.com] followers: [] ProperMes Key: usr2@ex.com usr2@ex.com followees: [] followers: [joe@ex.com] Source: Datastore Introduc9on, h?p:// 28

29 CreaMng an EnMty with Java Low-level API DatastoreService datastore = DatastoreServiceFactory.getDatastoreService(); En9ty employee = new En9ty( Employee ); employee.setproperty( name, Antonio Saliery ); employee.setproperty( hiredate, new Date()); employee.setproperty( a?endedhrtraining, true); datastore.put(emploee); Source: Datastore Introduc9on, h?p:// 29

30 Google Maps API h?ps://developers.google.com/maps/ 30

31 Google Maps API h?ps://developers.google.com/maps/ 31

32 Google Maps API Demos h?p:// 32

33 Google Maps API Demos h?p:// 33

34 Google Maps API Demos h?p:// 34

35 Google Maps API Demos h?p:// 35

36 Google Maps JavaScript API v3 h?ps://developers.google.com/maps/web/ 36

37 Google Maps JavaScript API h?ps://developers.google.com/maps/documenta9on/javascript/tutorial 37

38 Obtaining an Google Maps API Key h?ps://developers.google.com/maps/documenta9on/javascript/tutorial 38

39 Demo: Integrate Google Maps JavaScript API with jquery Mobile 39

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

41 Google APIs Console 41

42 Google APIs Console 42

43 Google APIs Console 43

44 Google APIs Console 44

45 Google Developers Console Google Cloud 45

46 Google Maps API v3 46

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

48 Google Map JavaScript API Hello, World h?ps://developers.google.com/maps/documenta9on/javascript/tutorial 48

49 Google Map JavaScript API Hello, World <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini9al-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } API key #map-canvas { height: 100% } </style> <script type="text/javascript" src="h?ps://maps.googleapis.com/maps/api/js?key=api_key&sensor=set_to_true_or_false"> </script> <script type="text/javascript"> func9on ini9alize() { var mapop9ons = { center: new google.maps.latlng( , ), zoom: 8 }; var map = new google.maps.map(document.getelementbyid("map-canvas"), mapop9ons); } google.maps.event.adddomlistener(window, 'load', ini9alize); </script> </head> <body> <div id="map-canvas"/> </body> </html> h?ps://developers.google.com/maps/documenta9on/javascript/tutorial 49

50 Google Maps JavaScript API: Simple Map h?ps://developers.google.com/maps/documenta9on/javascript/examples/map-simple 50

51 <!DOCTYPE html> <html> <head> <9tle>Simple Map</9tle> <meta name="viewport" content="ini9al-scale=1.0, user-scalable=no"> <meta charset="uf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="h?ps://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; func9on ini9alize() { var mapop9ons = { zoom: 8, center: new google.maps.latlng( , ) }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapop9ons); } google.maps.event.adddomlistener(window, 'load', ini9alize); Google Maps JavaScript API Example JavaScript + HTML </script> </head> <body> <div id="map-canvas"></div> </body> </html> h?ps://developers.google.com/maps/documenta9on/javascript/examples/map-simple 51

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

53 <style> #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> Google Maps JavaScript API <script> func9on ini9alize() { var mapop9ons = { zoom: 15, center: new google.maps.latlng( , ) }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapop9ons); } func9on loadscript() { var script = document.createelement('script'); script.type = 'text/javascript'; script.src = 'h?ps://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=ini9alize'; document.body.appendchild(script); } window.onload = loadscript; </script> h?p://mail.tku.edu.tw/myday/app/map.html 53

54 <!DOCTYPE html> <html> <head> <9tle>Google Maps</9tle> <meta charset=uf-8 /> <meta name="viewport" content="width=device-width, ini9al-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>  <link rel="stylesheet" type="text/css" href="css/index.css" />  <script type="text/javascript" src="js/index.js"></script>  <script type="text/javascript"> app.ini9alize(); </script> <style> #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script> func9on ini9alize() { var mapop9ons = { zoom: 15, center: new google.maps.latlng( , ) }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapop9ons); } func9on loadscript() { var script = document.createelement('script'); script.type = 'text/javascript'; script.src = 'h?ps://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=ini9alize'; document.body.appendchild(script); } <body> <div data-role="page" id="googlemaps" data-theme="b"> <div data-role="header" data-posi9on="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> <div style="posi9on:absolute; height:100%; width:100%;"> <div id="map-canvas"></div> </div> <div data-role="footer" data-posi9on="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="index.html#myhome" rel="external" class="ui-btn-ac9ve ui-state-persist" data-transi9on="fade" data-icon="home">home</a></li> <li><a href="index.html#research" rel="external" class="ui-btn-ac9ve ui-state-persist" data-transi9on="fade" data-icon="star">research</a></li> <li><a href="index.html#teaching" rel="external" class="ui-btn-ac9ve ui-state-persist" data-transi9on="fade" data-icon="check">teaching</a></li> <li><a href="index.html#more" rel="external" class="ui-btn-ac9ve ui-state-persist" data-transi9on="fade" data-icon="bars">more</a></li> <li><a href="index.html#about" rel="external" class="ui-btn-ac9ve ui-state-persist" data-transi9on="fade" data-icon="grid">about</a></li> </ul> </div> </div> </div> </body> </html> map.html window.onload = loadscript; </script> </head> h?p://mail.tku.edu.tw/myday/app/map.html 54

55 Google Maps JavaScript API + jquery Mobile h?p://mail.tku.edu.tw/myday/app/map.html 55

56 Google App Engine Summary Google Cloud Google Cloud Datastore Google Maps API 56

57 References Google Cloud Plaform, h?ps://cloud.google.com/ Google App Engine, h?ps://cloud.google.com/appengine/ Google Cloud Datastore, h?ps://cloud.google.com/datastore/ Google Cloud Endpoints, h?ps://cloud.google.com/endpoints/ Google Maps API, h?ps://developers.google.com/maps/ Google Maps JavaScript API v3 Tutorial, h?ps://developers.google.com/maps/documenta9on/ javascript/tutorial Google Maps API Tutorial, h?p:// 57

1061SMAP12 TLMXM1A (8648) (M2143) (Fall 2017) (MIS MBA) (2 Credits, Elective) [Full English Course] Fri 8,9 (15:10-17:00) B206

Tamkang University Social Media Apps Programming Google Map API 1061SMAP12 TLMXM1A (8648) (M2143) (Fall 2017) (MIS MBA) (2 Credits, Elective) [Full English Course] Fri 8,9 (15:10-17:00) B206 Min-Yuh Day,