tamkang university social media apps programming google app...
TRANSCRIPT
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
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
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
CourseSchedule(3/3)WeekDateSubject/Topics132015/12/09GoogleCloudPlaform142015/12/16GoogleAppEngineandGoogleMapAPI152015/12/23FacebookAPI(FacebookJavaScriptSDK)(IntegrateFacebookwithiOS/AndroidApps)162015/12/30Twi?erAPI172016/01/06FinalProjectPresenta9on182016/01/13FinalExamWeek(FinalProjectPresenta9on)
4
Outline• GoogleAppEngine
– GoogleCloudPla@orm
– GoogleCloudDatastore
• GoogleMapsAPI
5
6Source:h?ps://cloud.google.com/products/
ComputeEngine
AppEngine
ContainerEngine
CloudDatastore
CloudSQL
CloudStorage
BigQuery
BigDataStorageCompute Services
CloudEndpoints
TranslateAPI
Predic9onAPI
GoogleCloudPla@orm
MobileAppsBackendonGoogleAppEngine
7Source:h?ps://cloud.google.com/appengine/docs/java/endpoints/
CloudEndpointsAppEngine
GoogleCloudEndpointsArchitecture
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)
9
h?ps://cloud.google.com/docs/GoogleCloudPla@orm
TryGoogleCloudPla@ormforfree
10
11
TryGoogleCloudPla@ormforfree
12
h?ps://cloud.google.com/docs/GoogleCloudPla@orm
AppEngine"HelloWorld"starter
• Startedi9ngaworking"HelloWorld"apprightnow,inthebrowser.
• Thisgivesyouagoodstar9ngpointandafeelforwhatit'slikeedi9ngaworkingAppEngineapplica9on.
13
h?ps://console.developers.google.com/start/appengine
GoogleAppEngine
Deployyourfirstappinfiveminutes
TryGoogleAppEngineNow
1. NAMEYOURPROJECT2. SELECTYOURLANGUAGE3. EXPLORETHESTARTERCODE4. INSTALLGOOGLECLOUDSDK5. RUNYOURAPPLOCALLY6. CREATEYOURPROJECTANDDEPLOY
14
15
GoogleAppEngine
16
GoogleAppEngine
17
GoogleAppEngine
18
GoogleAppEngine
19
GoogleAppEngine
20
GoogleAppEngine
21
GoogleAppEngine
22
GoogleAppEngine
DatastoreInternals• BasedonBigtable– highscalability– Highavailability• synchronouswritesonmul9pledatacenters
23Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Datastore
Megastore
Bigtable
query
transacMons
Scalableandreliablestorage
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
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
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
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
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
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
GoogleMapsAPI
30h?ps://developers.google.com/maps/
31
GoogleMapsAPI
h?ps://developers.google.com/maps/
32h?p://www.morethanamap.com/
GoogleMapsAPIDemos
33h?p://www.morethanamap.com/demos
GoogleMapsAPIDemos
34
GoogleMapsAPIDemos
h?p://www.morethanamap.com/demos/basemaps/new-york
35
GoogleMapsAPIDemos
h?p://www.morethanamap.com/demos/rou9ng/cycling
GoogleMapsJavaScriptAPIv3
36h?ps://developers.google.com/maps/web/
GoogleMapsJavaScriptAPI
37h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
38
ObtaininganGoogleMapsAPIKey
h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
Demo:Integrate
GoogleMapsJavaScriptAPIwith
jQueryMobile
39
StartusingtheGoogleAPIsconsole
40h?ps://code.google.com/apis/console/?noredirect&pli=1h?ps://code.google.com/apis/console
41
GoogleAPIsConsole
42
GoogleAPIsConsole
43
GoogleAPIsConsole
44
GoogleAPIsConsole
GoogleDevelopersConsoleGoogleCloudPla@orm
45
GoogleMapsAPIv3
46
CredenMals:PublicAPIaccessGetGoogleMapsAPIKey
47
APIkey
GoogleMapJavaScriptAPIHello,World
48h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
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
GoogleMapsJavaScriptAPI:SimpleMap
50h?ps://developers.google.com/maps/documenta9on/javascript/examples/map-simple
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
52h?p://mail.tku.edu.tw/myday/app/map.html
<divstyle="posi9on:absolute;height:100%;width:100%;"><divid="map-canvas"></div></div>
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
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
55h?p://mail.tku.edu.tw/myday/app/map.html
GoogleMapsJavaScriptAPI+jQueryMobile
Summary• GoogleAppEngine
– GoogleCloudPla@orm
– GoogleCloudDatastore
• GoogleMapsAPI
56
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