Tamkang University Social Media Apps Programming Google App...
Transcript of Tamkang University Social Media Apps Programming Google App...
![Page 1: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/1.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/2.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/3.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/4.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/5.jpg)
Outline• GoogleAppEngine
– GoogleCloudPla@orm
– GoogleCloudDatastore
• GoogleMapsAPI
5
![Page 6: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/6.jpg)
6Source:h?ps://cloud.google.com/products/
ComputeEngine
AppEngine
ContainerEngine
CloudDatastore
CloudSQL
CloudStorage
BigQuery
BigDataStorageCompute Services
CloudEndpoints
TranslateAPI
Predic9onAPI
GoogleCloudPla@orm
![Page 7: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/7.jpg)
MobileAppsBackendonGoogleAppEngine
7Source:h?ps://cloud.google.com/appengine/docs/java/endpoints/
CloudEndpointsAppEngine
GoogleCloudEndpointsArchitecture
![Page 8: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/8.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/9.jpg)
9
h?ps://cloud.google.com/docs/GoogleCloudPla@orm
![Page 10: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/10.jpg)
TryGoogleCloudPla@ormforfree
10
![Page 11: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/11.jpg)
11
TryGoogleCloudPla@ormforfree
![Page 12: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/12.jpg)
12
h?ps://cloud.google.com/docs/GoogleCloudPla@orm
![Page 13: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/13.jpg)
AppEngine"HelloWorld"starter
• Startedi9ngaworking"HelloWorld"apprightnow,inthebrowser.
• Thisgivesyouagoodstar9ngpointandafeelforwhatit'slikeedi9ngaworkingAppEngineapplica9on.
13
h?ps://console.developers.google.com/start/appengine
GoogleAppEngine
Deployyourfirstappinfiveminutes
![Page 14: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/14.jpg)
TryGoogleAppEngineNow
1. NAMEYOURPROJECT2. SELECTYOURLANGUAGE3. EXPLORETHESTARTERCODE4. INSTALLGOOGLECLOUDSDK5. RUNYOURAPPLOCALLY6. CREATEYOURPROJECTANDDEPLOY
14
![Page 15: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/15.jpg)
15
GoogleAppEngine
![Page 16: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/16.jpg)
16
GoogleAppEngine
![Page 17: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/17.jpg)
17
GoogleAppEngine
![Page 18: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/18.jpg)
18
GoogleAppEngine
![Page 19: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/19.jpg)
19
GoogleAppEngine
![Page 20: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/20.jpg)
20
GoogleAppEngine
![Page 21: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/21.jpg)
21
GoogleAppEngine
![Page 22: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/22.jpg)
22
GoogleAppEngine
![Page 23: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/23.jpg)
DatastoreInternals• BasedonBigtable– highscalability– Highavailability• synchronouswritesonmul9pledatacenters
23Source:DatastoreIntroduc9on,h?p://www.youtube.com/watch?v=fQazhzcC-rg
Datastore
Megastore
Bigtable
query
transacMons
Scalableandreliablestorage
![Page 24: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/24.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/25.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/26.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/27.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/28.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/29.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/30.jpg)
GoogleMapsAPI
30h?ps://developers.google.com/maps/
![Page 31: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/31.jpg)
31
GoogleMapsAPI
h?ps://developers.google.com/maps/
![Page 32: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/32.jpg)
32h?p://www.morethanamap.com/
GoogleMapsAPIDemos
![Page 33: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/33.jpg)
33h?p://www.morethanamap.com/demos
GoogleMapsAPIDemos
![Page 34: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/34.jpg)
34
GoogleMapsAPIDemos
h?p://www.morethanamap.com/demos/basemaps/new-york
![Page 35: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/35.jpg)
35
GoogleMapsAPIDemos
h?p://www.morethanamap.com/demos/rou9ng/cycling
![Page 36: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/36.jpg)
GoogleMapsJavaScriptAPIv3
36h?ps://developers.google.com/maps/web/
![Page 37: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/37.jpg)
GoogleMapsJavaScriptAPI
37h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
![Page 38: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/38.jpg)
38
ObtaininganGoogleMapsAPIKey
h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
![Page 39: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/39.jpg)
Demo:Integrate
GoogleMapsJavaScriptAPIwith
jQueryMobile
39
![Page 40: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/40.jpg)
StartusingtheGoogleAPIsconsole
40h?ps://code.google.com/apis/console/?noredirect&pli=1h?ps://code.google.com/apis/console
![Page 41: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/41.jpg)
41
GoogleAPIsConsole
![Page 42: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/42.jpg)
42
GoogleAPIsConsole
![Page 43: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/43.jpg)
43
GoogleAPIsConsole
![Page 44: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/44.jpg)
44
GoogleAPIsConsole
![Page 45: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/45.jpg)
GoogleDevelopersConsoleGoogleCloudPla@orm
45
![Page 46: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/46.jpg)
GoogleMapsAPIv3
46
![Page 47: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/47.jpg)
CredenMals:PublicAPIaccessGetGoogleMapsAPIKey
47
APIkey
![Page 48: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/48.jpg)
GoogleMapJavaScriptAPIHello,World
48h?ps://developers.google.com/maps/documenta9on/javascript/tutorial
![Page 49: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/49.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/50.jpg)
GoogleMapsJavaScriptAPI:SimpleMap
50h?ps://developers.google.com/maps/documenta9on/javascript/examples/map-simple
![Page 51: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/51.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/52.jpg)
52h?p://mail.tku.edu.tw/myday/app/map.html
<divstyle="posi9on:absolute;height:100%;width:100%;"><divid="map-canvas"></div></div>
![Page 53: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/53.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/54.jpg)
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: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/55.jpg)
55h?p://mail.tku.edu.tw/myday/app/map.html
GoogleMapsJavaScriptAPI+jQueryMobile
![Page 56: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/56.jpg)
Summary• GoogleAppEngine
– GoogleCloudPla@orm
– GoogleCloudDatastore
• GoogleMapsAPI
56
![Page 57: Tamkang University Social Media Apps Programming Google App …mail.tku.edu.tw/myday/teaching/1041/SMAP/1041SMAP11... · 2015-12-07 · Social Media Apps Programming Min-Yuh Day,](https://reader034.fdocuments.in/reader034/viewer/2022043007/5f94db2db36b5d029a40df81/html5/thumbnails/57.jpg)
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