Page 1
SocialMediaAppsProgramming
Min-YuhDay,Ph.D.AssistantProfessor
DepartmentofInforma9onManagementTamkangUniversity
h?p://mail.tku.edu.tw/myday
TamkangUniversity
2015-12-16
1041SMAP11TLMXM1A (8687)(M2143)(Fall2015)
(MISMBA)(2Credits,Elec9ve)[FullEnglishCourse]Wed9,10(16:10-18:00)B310
GoogleAppEngineand
GoogleMapAPI
Page 2
CourseSchedule(1/3)WeekDateSubject/Topics12015/09/16CourseOrienta9onandIntroduc9ontoSocialMediaandMobileAppsProgramming22015/09/23Introduc9ontoAndroid/iOSAppsProgramming32015/09/30DevelopingAndroidNa9veAppswithJava(AndroidStudio)(MITAppInventor)42015/10/07DevelopingiPhone/iPadNa9veAppswithSwia(XCode)52015/10/14MobileAppsusingHTML5/CSS3/JavaScript62015/10/21jQueryMobile
2
Page 3
CourseSchedule(2/3)WeekDateSubject/Topics72015/10/28CreateHybridAppswithPhonegap82015/11/04jQueryMobile/Phonegap92015/11/11jQueryMobile/Phonegap102015/11/18MidtermExamWeek(MidtermProjectReport)112015/11/25InvitedTalk:BusinessIntelligentandAnalysisinPIXNET,theDominantBlogPlaforminTaiwan[Speaker:Dr.RickCheng-YuLu,CTO,PIXNET]122015/12/02CaseStudyonSocialMediaAppsProgrammingandMarke9nginGooglePlayandAppStore
3
Page 4
CourseSchedule(3/3)WeekDateSubject/Topics132015/12/09GoogleCloudPlaform142015/12/16GoogleAppEngineandGoogleMapAPI152015/12/23FacebookAPI(FacebookJavaScriptSDK)(IntegrateFacebookwithiOS/AndroidApps)162015/12/30Twi?erAPI172016/01/06FinalProjectPresenta9on182016/01/13FinalExamWeek(FinalProjectPresenta9on)
4
Page 5
Outline• GoogleAppEngine
– GoogleCloudPla@orm
– GoogleCloudDatastore
• GoogleMapsAPI
5
Page 6
6Source:h?ps://cloud.google.com/products/
ComputeEngine
AppEngine
ContainerEngine
CloudDatastore
CloudSQL
CloudStorage
BigQuery
BigDataStorageCompute Services
CloudEndpoints
TranslateAPI
Predic9onAPI
GoogleCloudPla@orm
Page 7
MobileAppsBackendonGoogleAppEngine
7Source:h?ps://cloud.google.com/appengine/docs/java/endpoints/
CloudEndpointsAppEngine
GoogleCloudEndpointsArchitecture
Page 8
GoogleAppEngine,GoogleCloudDatastore
8Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Datasotreisadatabase(persistentstorage)forAppEngine
GoogleAppEngine Tradi9onalWebapplica9ons
GoogleAppEngine(Java,Python,Go)
Datastore
RDBMS• MySQL• PostgreSQL• SQLServer• Oracle
Perl/CGIPHP
RubyonRailsASP/JSP
Webapplica9onframework
(AP)
Persistentstorage(Database)
Page 9
9
h?ps://cloud.google.com/docs/GoogleCloudPla@orm
Page 10
TryGoogleCloudPla@ormforfree
10
Page 11
11
TryGoogleCloudPla@ormforfree
Page 12
12
h?ps://cloud.google.com/docs/GoogleCloudPla@orm
Page 13
AppEngine"HelloWorld"starter
• Startedi9ngaworking"HelloWorld"apprightnow,inthebrowser.
• Thisgivesyouagoodstar9ngpointandafeelforwhatit'slikeedi9ngaworkingAppEngineapplica9on.
13
h?ps://console.developers.google.com/start/appengine
GoogleAppEngine
Deployyourfirstappinfiveminutes
Page 14
TryGoogleAppEngineNow
1. NAMEYOURPROJECT2. SELECTYOURLANGUAGE3. EXPLORETHESTARTERCODE4. INSTALLGOOGLECLOUDSDK5. RUNYOURAPPLOCALLY6. CREATEYOURPROJECTANDDEPLOY
14
Page 15
15
GoogleAppEngine
Page 16
16
GoogleAppEngine
Page 17
17
GoogleAppEngine
Page 18
18
GoogleAppEngine
Page 19
19
GoogleAppEngine
Page 20
20
GoogleAppEngine
Page 21
21
GoogleAppEngine
Page 22
22
GoogleAppEngine
Page 23
DatastoreInternals• BasedonBigtable– highscalability– Highavailability• synchronouswritesonmul9pledatacenters
23Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Datastore
Megastore
Bigtable
query
transacMons
Scalableandreliablestorage
Page 24
WhatisBigtable?
• Scalable,distributed,highly-availableandstructuredstorage– Bigtableisnotdatabasebyitself(itdoesn’tsupportquery)
• Googleusage– Inproduc9onsinceApril2005– WebSearch,YouTube,Earth,Analy9cs
24Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Bigtable Scalableandreliablestorage
Page 25
BigtableDataModel• ArowhasaKeyandColumns• SortedbyKey– Inlexicalorder– Enablesrangequerybyapplica9on
25Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
“<html>…” “CNN” “CNN.com”“com.cnn.www”
“contents:” “anchor:cnnsi.com” “anchor:my.look.ca”
“<html>…”“<html>…”
t6t5t3
t9 t8
Page 26
GoogleDatastoreBasicOperaMon
GoogleDatastore
RelaMonalDatabaseManagementSystem(RDBMS)
Categoryofobject Kind Table
Oneentry/object En9ty Row
Uniqueiden9fierofdataentry
Key PrimaryKey(PK)
Individualdata Property Field
26Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Differenttermsforcorrespondingconcepts
Page 27
Kind,EnMtyandKey
27Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
BlogEntry UserKey:1234name:[email protected] :xxxxxdata:1/1/201212:32
Key:[email protected] :[email protected] :[[email protected] ,[email protected] ]followers:[]
Key:[email protected] :[email protected] :[]followers:[[email protected] ]
KindsKey
EnMMes
Page 28
ProperMesandDataTypes
28Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
BlogEntry UserKey:1234name:[email protected] :xxxxxdata:1/1/201212:32
Key:[email protected] :[email protected] :[[email protected] ,[email protected] ]followers:[]
Key:[email protected] :[email protected] :[]followers:[[email protected] ]
ProperMes
Eachen9tyhasoneormorenamedproperMes• Varietyofdatatypes(int,float,boolean,Sring,Date,…)• Canbemul9-valued
Page 29
CreaMnganEnMtywithJavaLow-levelAPI
DatastoreServicedatastore=DatastoreServiceFactory.getDatastoreService();En9tyemployee=newEn9ty(“Employee”);employee.setProperty(“name”,“AntonioSaliery”);employee.setProperty(“hireDate”,newDate());employee.setProperty(“a?endedHrTraining”,true);datastore.put(emploee); 29Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Page 30
GoogleMapsAPI
30h?ps://developers.google.com/maps/
Page 31
31
GoogleMapsAPI
h?ps://developers.google.com/maps/
Page 32
32h?p://www.morethanamap.com/
GoogleMapsAPIDemos
Page 33
33h?p://www.morethanamap.com/demos
GoogleMapsAPIDemos
Page 34
34
GoogleMapsAPIDemos
h?p://www.morethanamap.com/demos/basemaps/new-york
Page 35
35
GoogleMapsAPIDemos
h?p://www.morethanamap.com/demos/rou9ng/cycling
Page 36
GoogleMapsJavaScriptAPIv3
36h?ps://developers.google.com/maps/web/
Page 37
GoogleMapsJavaScriptAPI
37h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
Page 38
38
ObtaininganGoogleMapsAPIKey
h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
Page 39
Demo:Integrate
GoogleMapsJavaScriptAPIwith
jQueryMobile
39
Page 40
StartusingtheGoogleAPIsconsole
40h?ps://code.google.com/apis/console/?noredirect&pli=1h?ps://code.google.com/apis/console
Page 41
41
GoogleAPIsConsole
Page 42
42
GoogleAPIsConsole
Page 43
43
GoogleAPIsConsole
Page 44
44
GoogleAPIsConsole
Page 45
GoogleDevelopersConsoleGoogleCloudPla@orm
45
Page 46
GoogleMapsAPIv3
46
Page 47
CredenMals:PublicAPIaccessGetGoogleMapsAPIKey
47
APIkey
Page 48
GoogleMapJavaScriptAPIHello,World
48h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
Page 49
49
<!DOCTYPEhtml><html><head><metaname="viewport"content="ini9al-scale=1.0,user-scalable=no"/><styletype="text/css">html{height:100%}body{height:100%;margin:0;padding:0}#map-canvas{height:100%}</style><scripttype="text/javascript"src="h?ps://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script><scripttype="text/javascript">func9onini9alize(){varmapOp9ons={center:newgoogle.maps.LatLng(-34.397,150.644),zoom:8};varmap=newgoogle.maps.Map(document.getElementById("map-canvas"),mapOp9ons);}google.maps.event.addDomListener(window,'load',ini9alize);</script></head><body><divid="map-canvas"/></body></html>
h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
GoogleMapJavaScriptAPIHello,World
APIkey
Page 50
GoogleMapsJavaScriptAPI:SimpleMap
50h?ps://developers.google.com/maps/documenta9on/javascript/examples/map-simple
Page 51
51
<!DOCTYPEhtml><html><head><9tle>SimpleMap</9tle><metaname="viewport"content="ini9al-scale=1.0,user-scalable=no"><metacharset="uf-8"><style>html,body,#map-canvas{height:100%;margin:0px;padding:0px}</style><scriptsrc="h?ps://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script>varmap;func9onini9alize(){varmapOp9ons={zoom:8,center:newgoogle.maps.LatLng(-34.397,150.644)};map=newgoogle.maps.Map(document.getElementById('map-canvas'),mapOp9ons);}google.maps.event.addDomListener(window,'load',ini9alize);</script></head><body><divid="map-canvas"></div></body></html>
h?ps://developers.google.com/maps/documenta9on/javascript/examples/map-simple
GoogleMapsJavaScriptAPIExampleJavaScript+HTML
Page 52
52h?p://mail.tku.edu.tw/myday/app/map.html
<divstyle="posi9on:absolute;height:100%;width:100%;"><divid="map-canvas"></div></div>
Page 53
53
<style>#map-canvas{height:100%;margin:0px;padding:0px}</style><script>func9onini9alize(){varmapOp9ons={zoom:15,center:newgoogle.maps.LatLng(25.174738,121.450381)};varmap=newgoogle.maps.Map(document.getElementById('map-canvas'),mapOp9ons);}func9onloadScript(){varscript=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>
GoogleMapsJavaScriptAPI
h?p://mail.tku.edu.tw/myday/app/map.html
Page 54
54
<!DOCTYPEhtml><html><head><9tle>GoogleMaps</9tle><metacharset=uf-8/><metaname="viewport"content="width=device-width,ini9al-scale=1"/><scriptsrc="js/jquery.js"></script><linktype="text/css"href="css/jquery.mobile-1.3.2.min.css"rel="stylesheet"/><scripttype="text/javascript"src="js/jquery.mobile-1.3.2.min.js"></script><!--PhoneGap--><linkrel="stylesheet"type="text/css"href="css/index.css"/><!--<scripttype="text/javascript"src="phonegap.js"></script>--><scripttype="text/javascript"src="js/index.js"></script><!--/PhoneGap--><scripttype="text/javascript">app.ini9alize();</script><style>#map-canvas{height:100%;margin:0px;padding:0px}</style><script>func9onini9alize(){varmapOp9ons={zoom:15,center:newgoogle.maps.LatLng(25.174738,121.450381)};varmap=newgoogle.maps.Map(document.getElementById('map-canvas'),mapOp9ons);}func9onloadScript(){varscript=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></head>
<body><divdata-role="page"id="googlemaps"data-theme="b"><divdata-role="header"data-posi9on="inline"data-theme="b"><adata-icon="back"data-rel="back"back-btn="true">Back</a><h1>GoogleMaps</h1><ahref="index.html#MyHome"rel="external"data-icon="home">Home</a></div><!--/header--><divstyle="posi9on:absolute;height:100%;width:100%;"><divid="map-canvas"></div></div><divdata-role="footer"data-posi9on="fixed"data-theme="b"><divdata-role="navbar"><ul><li><ahref="index.html#MyHome"rel="external"class="ui-btn-ac9veui-state-persist"data-transi9on="fade"data-icon="home">Home</a></li><li><ahref="index.html#Research"rel="external"class="ui-btn-ac9veui-state-persist"data-transi9on="fade"data-icon="star">Research</a></li><li><ahref="index.html#Teaching"rel="external"class="ui-btn-ac9veui-state-persist"data-transi9on="fade"data-icon="check">Teaching</a></li><li><ahref="index.html#More"rel="external"class="ui-btn-ac9veui-state-persist"data-transi9on="fade"data-icon="bars">More</a></li><li><ahref="index.html#About"rel="external"class="ui-btn-ac9veui-state-persist"data-transi9on="fade"data-icon="grid">About</a></li></ul></div></div><!--/footer--></div><!--/pageGoogleMap--></body></html>
h?p://mail.tku.edu.tw/myday/app/map.html
map.html
Page 55
55h?p://mail.tku.edu.tw/myday/app/map.html
GoogleMapsJavaScriptAPI+jQueryMobile
Page 56
Summary• GoogleAppEngine
– GoogleCloudPla@orm
– GoogleCloudDatastore
• GoogleMapsAPI
56
Page 57
References• GoogleCloudPlaform,
h?ps://cloud.google.com/• GoogleAppEngine,
h?ps://cloud.google.com/appengine/• GoogleCloudDatastore,
h?ps://cloud.google.com/datastore/• GoogleCloudEndpoints,
h?ps://cloud.google.com/endpoints/• GoogleMapsAPI,
h?ps://developers.google.com/maps/• GoogleMapsJavaScriptAPIv3Tutorial,
h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
• GoogleMapsAPITutorial,h?p://www.w3schools.com/googleAPI/
57