SlideShare uma empresa Scribd logo
1 de 30
Baixar para ler offline
CS4HS
Using Google App Engine

Michael Parker
(michael.g.parker@gmail.com)
So what is it?
What's it for?
● Building and running web applications

Why use it?
● Handles serving web pages, efficiently storing and retrieving
lots of data
● Allows authenticating users, sending email and IMs,
downloading remote files
● Easy management; don't need to buy or administer servers
● Supports both Python and Java

Get the SDK at https://developers.google.
com/appengine
Outline
● Some background + DEMO!
● Building the app
○ Defining the data
○ Writing the server-side code
● Deployment + Conclusion
The Demo and
Some Other Stuff

Go to
http://cs4hs-tasklist.appspot.com
Start with a mock-up
Identify your data (nouns)
Identify your actions (verbs)
The mock-up: creating a task
<h3>Add a new task:</h3>
<form id="new_form" action="create" method="post">
Summary: <input type="text" name="summary" value="" />
Description: <textarea name="body" rows="5"></textarea>
<input type="submit" value="Add Task" />
</form>
The mock-up: showing/deleting tasks
<h3>Task list for mgp@google.com:</h3>
<form id="delete_form" action="delete" method="post">
<ul>
<li>
<input type="checkbox" name="task_id" value="task_id_1" />
<h4>make cs4hs slides</h4>
<div>those will be the slides i'm presenting</div>
</li>
<li>
<input type="checkbox" name="task_id" value="task_id_2" />
<h4>give presentation</h4>
<div>hopefully to a thunderous applause</div>
</li>
</ul>
<input type="submit" value="Delete Tasks" />
</form>
Anatomy of a web application
Reading data:
1
HTTP GET /index.html
username=user@domain.com

Web
Server

2
Get tasks for
user@domain.com

/index.html
handler

4
<html> ...
<li><h3>title1</h3>body1</li>
<li><h3>title2</h3>body2</li>
... </html>

3
/create.html
handler
/delete.html
handler

task1: (title1, body1)
task2: (title2, body2)

Storage
Anatomy of a web application
Modifying data (add, edit, delete):
2
1
HTTP POST /create.html
username=user@domain.com
title=title3, body=body3

Web
Server
/index.html
handler

Create task for
user@domain.com:
title=title3, body=body3

3

Get tasks for
mgp@google.com

5
<html> ...
<li><h3>title1</h3>body1</li>
<li><h3>title2</h3>body2</li>
<li><h3>title3</h3>body3</li>
... </html>

/create.html
handler
/delete.html
handler

4
task1: (title1, body1)
task2: (title2, body2)
task3: (title3, body3)

Storage
Defining and
Manipulating Data
Defining your data
Extend db.Model and define properties:
class Task(db.Model):
"""A saved task."""
creator = db.UserProperty()
summary = db.StringProperty()
body = db.TextProperty()
Inserting new data
Class db.Model provides a put method:
def NewTask(user, summary, body):
"""Creates a new task.
Arguments:
user: The user who is creating the task.
summary: A summary of the task.
body: The full description of the task.
"""
task = Task()
task.creator = user
task.summary = summary
task.body = body
task.put()
Retrieving data
Add identifiers so they can be deleted later:
def GetTasks(user):
"""Returns all tasks created by the given user.
Arguments:
The user to return tasks for.
Returns:
A list of tasks created by the given user.
"""
query = db.Query(Task)
query.filter('creator =', user)
tasks = query.fetch(1000)
for task in tasks:
task.id = str(task.key())
return tasks
Writing the
/index.html Handler
Retrieving tasks
class GetTasksHandler(webapp.RequestHandler):
"""Displays all tasks for the user, and a form to
enter a new task.
"""
def get(self):
if users.GetCurrentUser() is None:
login_url = users.CreateLoginURL(self.request.uri)
self.redirect(login_url)
else:
write_html(self.response)
Retrieving tasks
def write_html(response, template_values={}):
"""Writes the tasks for the user in HTML.
Arguments:
response: The connection to the user
template_values: Any additional template values to render
"""
user = users.GetCurrentUser()
user_tasks = tasks.GetTasks(user)
template_values['user'] = user
template_values['tasks'] = user_tasks
rendered_page = template.render(
_TEMPLATE_PATH, template_values)
response.out.write(rendered_page)
A look at template_values
{ "user": "mgp@google.com",
"tasks": [
{ "id": "task_id_1",
"summary": "make cs4hs slides",
"body": "those will be the slides i'm presenting",
},
{ "id": "task_id_2",
"summary": "give presentation",
"body": "hopefully to a thunderous applause",
}
]
}
A look at the template
<h3>Task list for {{ user }}:</h3>
<form id="delete_form" action="delete" method="post">
<ul>
{% for task in tasks %}
<li>
<input type="checkbox"
name="task_id" value="{{ task.id }}" />
<h4>{{ task.summary }}</h4>
<div>{{ task.body }}</div>
</li>
{% endfor %}
</ul>
...
The rendered output
<h3>Task list for mgp@google.com:</h3>
<form id="delete_form" action="delete" method="post">
<ul>
<li>
<input type="checkbox"
name="task_id" value="task_id_1" />
<h4>make cs4hs slides</h4>
<div>those will be the slides i'm presenting</div>
</li>
<li>
<input type="checkbox"
name="task_id" value="task_id_2" />
<h4>give presentation</h4>
<div>hopefully to a thunderous applause</div>
</li>
</ul>
...
Writing the
/create.html Handler
Creating tasks
class NewTaskHandler(webapp.RequestHandler):
"""Handler that creates a new task."""
def post(self):
user = users.GetCurrentUser()
summary = self.request.get('summary')
body = self.request.get('body')
tasks.NewTask(user, summary, body)
self.redirect('/index.html')
Creating tasks with error handling
class NewTaskHandler(webapp.RequestHandler):
"""Handler that creates a new task."""
def post(self):
user = users.GetCurrentUser()
summary = self.request.get('summary', None)
body = self.request.get('body', None)
if not summary or not body:
self.handle_error(summary, body)
return
tasks.NewTask(user, summary, body)
self.redirect('/')
Creating tasks
...
def handle_error(self, summary, body):
new_task_template_values = {}
new_task_template_values['has_error'] = True
if summary:
new_task_template_values['summary'] = summary
if body:
new_task_template_values['body'] = body
template_values = {}
template_values['new'] = new_task_template_values
write_html(self.response, template_values)
A look at template_values
{ "user": "mgp@google.com",
"tasks": [
{ "id": "00001",
"summary": "make cs4hs slides",
"body": "those will be the slides i'm presenting",
},
{ "id": "00002",
"summary": "give presentation",
"body": "hopefully to a thunderous applause",
}
],
"new": {
"has_error": True,
"summary": ...,
"body": ...,
}
}
A look at the template
<h3>Add a new task:</h3>
<form id="new_form" action="new" method="post">
{% if new.has_error %}
<div class="error">Please enter both a summary
and description below</div>
{% endif %}
Summary:
<input type="text"
name="summary" value="{{ new.summary }}" />
Description:
<textarea name="body" rows="5">{{ new.body }}</textarea>
<input type="submit" value="Add Task" />
</form>
Deployment and
Wrapping Up
Deployment
● Prerequisites:
○ Download the SDK
○ Get the code from https://github.com/mgp/cs4hs-tasklist
○ Import project into GoogleAppEngineLauncher
● Running it locally:
○ In GAELauncher, click Run, then Browse
○ Data is stored on your hard drive
○ Can edit the code without restarting the web server
● Deploying it to the web:
○ Register the application name at http://appengine.google.
com
○ Change application value in app.yaml to app name
○ In GAELauncher, click Deploy
○ See it at http://app-name.appspot.com
Questions?

Mais conteúdo relacionado

Mais procurados

ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentationnishasowdri
 
VMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with ClarityVMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with ClarityJeeyun Lim
 
Grails Launchpad - From Ground Zero to Orbit
Grails Launchpad - From Ground Zero to OrbitGrails Launchpad - From Ground Zero to Orbit
Grails Launchpad - From Ground Zero to OrbitZachary Klein
 
Introduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.jsIntroduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.jsmonterail
 
The Many Ways to Build Modular JavaScript
The Many Ways to Build Modular JavaScriptThe Many Ways to Build Modular JavaScript
The Many Ways to Build Modular JavaScriptTim Perry
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Robert DeLuca
 
Grails Simple Login
Grails Simple LoginGrails Simple Login
Grails Simple Loginmoniguna
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and ReduxAli Sa'o
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScriptVitaly Baum
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJSKrishna Sunuwar
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developerEugene Zharkov
 
A (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project FilesA (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project FilesDavid Wengier
 
PWA 與 Service Worker
PWA 與 Service WorkerPWA 與 Service Worker
PWA 與 Service WorkerAnna Su
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginnersDivakar Gu
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 

Mais procurados (20)

Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
 
VMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with ClarityVMWorld 2017 Hackathon training: Getting Started with Clarity
VMWorld 2017 Hackathon training: Getting Started with Clarity
 
Grails Launchpad - From Ground Zero to Orbit
Grails Launchpad - From Ground Zero to OrbitGrails Launchpad - From Ground Zero to Orbit
Grails Launchpad - From Ground Zero to Orbit
 
Advanced redux
Advanced reduxAdvanced redux
Advanced redux
 
J Query Presentation of David
J Query Presentation of DavidJ Query Presentation of David
J Query Presentation of David
 
Introduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.jsIntroduction to modern front-end with Vue.js
Introduction to modern front-end with Vue.js
 
The Many Ways to Build Modular JavaScript
The Many Ways to Build Modular JavaScriptThe Many Ways to Build Modular JavaScript
The Many Ways to Build Modular JavaScript
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
Mini Curso de Django
Mini Curso de DjangoMini Curso de Django
Mini Curso de Django
 
Grails Simple Login
Grails Simple LoginGrails Simple Login
Grails Simple Login
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScript
 
Ajax3
Ajax3Ajax3
Ajax3
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJS
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developer
 
A (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project FilesA (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project Files
 
PWA 與 Service Worker
PWA 與 Service WorkerPWA 與 Service Worker
PWA 與 Service Worker
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 

Semelhante a A To-do Web App on Google App Engine

Introduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersIntroduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersAoteaStudios
 
Refresh Austin - Intro to Dexy
Refresh Austin - Intro to DexyRefresh Austin - Intro to Dexy
Refresh Austin - Intro to Dexyananelson
 
Task scheduling in laravel 8 tutorial
Task scheduling in laravel 8 tutorialTask scheduling in laravel 8 tutorial
Task scheduling in laravel 8 tutorialKaty Slemon
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
 
OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010ikailan
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsCédric Hüsler
 
Microsoft Offical Course 20410C_04
Microsoft Offical Course 20410C_04Microsoft Offical Course 20410C_04
Microsoft Offical Course 20410C_04gameaxt
 
Scott Guthrie at Dot Net Startup meetup
Scott Guthrie at Dot Net Startup meetupScott Guthrie at Dot Net Startup meetup
Scott Guthrie at Dot Net Startup meetupMarcelo Calbucci
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Nicolás Bouhid
 
Tips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applicationsTips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applicationsTim Cull
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin GörnerEuropean Innovation Academy
 
20141001 delapsley-oc-openstack-final
20141001 delapsley-oc-openstack-final20141001 delapsley-oc-openstack-final
20141001 delapsley-oc-openstack-finalDavid Lapsley
 
Cloudbase.io MoSync Reload Course
Cloudbase.io MoSync Reload CourseCloudbase.io MoSync Reload Course
Cloudbase.io MoSync Reload Coursecloudbase.io
 
Creating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlCreating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlIlia Idakiev
 
Aspnet mvc tutorial_01_cs
Aspnet mvc tutorial_01_csAspnet mvc tutorial_01_cs
Aspnet mvc tutorial_01_csAlfa Gama Omega
 
Serverless archtiectures
Serverless archtiecturesServerless archtiectures
Serverless archtiecturesIegor Fadieiev
 
Fun Teaching MongoDB New Tricks
Fun Teaching MongoDB New TricksFun Teaching MongoDB New Tricks
Fun Teaching MongoDB New TricksMongoDB
 
Javascript Application Architecture with Backbone.JS
Javascript Application Architecture with Backbone.JSJavascript Application Architecture with Backbone.JS
Javascript Application Architecture with Backbone.JSMin Ming Lo
 

Semelhante a A To-do Web App on Google App Engine (20)

D3_Tuto_GD
D3_Tuto_GDD3_Tuto_GD
D3_Tuto_GD
 
D3_Tuto_GD
D3_Tuto_GDD3_Tuto_GD
D3_Tuto_GD
 
Introduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersIntroduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developers
 
Refresh Austin - Intro to Dexy
Refresh Austin - Intro to DexyRefresh Austin - Intro to Dexy
Refresh Austin - Intro to Dexy
 
Task scheduling in laravel 8 tutorial
Task scheduling in laravel 8 tutorialTask scheduling in laravel 8 tutorial
Task scheduling in laravel 8 tutorial
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 
OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
 
Microsoft Offical Course 20410C_04
Microsoft Offical Course 20410C_04Microsoft Offical Course 20410C_04
Microsoft Offical Course 20410C_04
 
Scott Guthrie at Dot Net Startup meetup
Scott Guthrie at Dot Net Startup meetupScott Guthrie at Dot Net Startup meetup
Scott Guthrie at Dot Net Startup meetup
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
 
Tips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applicationsTips and tricks for building api heavy ruby on rails applications
Tips and tricks for building api heavy ruby on rails applications
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin Görner
 
20141001 delapsley-oc-openstack-final
20141001 delapsley-oc-openstack-final20141001 delapsley-oc-openstack-final
20141001 delapsley-oc-openstack-final
 
Cloudbase.io MoSync Reload Course
Cloudbase.io MoSync Reload CourseCloudbase.io MoSync Reload Course
Cloudbase.io MoSync Reload Course
 
Creating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlCreating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-html
 
Aspnet mvc tutorial_01_cs
Aspnet mvc tutorial_01_csAspnet mvc tutorial_01_cs
Aspnet mvc tutorial_01_cs
 
Serverless archtiectures
Serverless archtiecturesServerless archtiectures
Serverless archtiectures
 
Fun Teaching MongoDB New Tricks
Fun Teaching MongoDB New TricksFun Teaching MongoDB New Tricks
Fun Teaching MongoDB New Tricks
 
Javascript Application Architecture with Backbone.JS
Javascript Application Architecture with Backbone.JSJavascript Application Architecture with Backbone.JS
Javascript Application Architecture with Backbone.JS
 

Último

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 

Último (20)

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 

A To-do Web App on Google App Engine

  • 1. CS4HS Using Google App Engine Michael Parker (michael.g.parker@gmail.com)
  • 2. So what is it? What's it for? ● Building and running web applications Why use it? ● Handles serving web pages, efficiently storing and retrieving lots of data ● Allows authenticating users, sending email and IMs, downloading remote files ● Easy management; don't need to buy or administer servers ● Supports both Python and Java Get the SDK at https://developers.google. com/appengine
  • 3. Outline ● Some background + DEMO! ● Building the app ○ Defining the data ○ Writing the server-side code ● Deployment + Conclusion
  • 4. The Demo and Some Other Stuff Go to http://cs4hs-tasklist.appspot.com
  • 5. Start with a mock-up
  • 8. The mock-up: creating a task <h3>Add a new task:</h3> <form id="new_form" action="create" method="post"> Summary: <input type="text" name="summary" value="" /> Description: <textarea name="body" rows="5"></textarea> <input type="submit" value="Add Task" /> </form>
  • 9. The mock-up: showing/deleting tasks <h3>Task list for mgp@google.com:</h3> <form id="delete_form" action="delete" method="post"> <ul> <li> <input type="checkbox" name="task_id" value="task_id_1" /> <h4>make cs4hs slides</h4> <div>those will be the slides i'm presenting</div> </li> <li> <input type="checkbox" name="task_id" value="task_id_2" /> <h4>give presentation</h4> <div>hopefully to a thunderous applause</div> </li> </ul> <input type="submit" value="Delete Tasks" /> </form>
  • 10. Anatomy of a web application Reading data: 1 HTTP GET /index.html username=user@domain.com Web Server 2 Get tasks for user@domain.com /index.html handler 4 <html> ... <li><h3>title1</h3>body1</li> <li><h3>title2</h3>body2</li> ... </html> 3 /create.html handler /delete.html handler task1: (title1, body1) task2: (title2, body2) Storage
  • 11. Anatomy of a web application Modifying data (add, edit, delete): 2 1 HTTP POST /create.html username=user@domain.com title=title3, body=body3 Web Server /index.html handler Create task for user@domain.com: title=title3, body=body3 3 Get tasks for mgp@google.com 5 <html> ... <li><h3>title1</h3>body1</li> <li><h3>title2</h3>body2</li> <li><h3>title3</h3>body3</li> ... </html> /create.html handler /delete.html handler 4 task1: (title1, body1) task2: (title2, body2) task3: (title3, body3) Storage
  • 13. Defining your data Extend db.Model and define properties: class Task(db.Model): """A saved task.""" creator = db.UserProperty() summary = db.StringProperty() body = db.TextProperty()
  • 14. Inserting new data Class db.Model provides a put method: def NewTask(user, summary, body): """Creates a new task. Arguments: user: The user who is creating the task. summary: A summary of the task. body: The full description of the task. """ task = Task() task.creator = user task.summary = summary task.body = body task.put()
  • 15. Retrieving data Add identifiers so they can be deleted later: def GetTasks(user): """Returns all tasks created by the given user. Arguments: The user to return tasks for. Returns: A list of tasks created by the given user. """ query = db.Query(Task) query.filter('creator =', user) tasks = query.fetch(1000) for task in tasks: task.id = str(task.key()) return tasks
  • 17. Retrieving tasks class GetTasksHandler(webapp.RequestHandler): """Displays all tasks for the user, and a form to enter a new task. """ def get(self): if users.GetCurrentUser() is None: login_url = users.CreateLoginURL(self.request.uri) self.redirect(login_url) else: write_html(self.response)
  • 18. Retrieving tasks def write_html(response, template_values={}): """Writes the tasks for the user in HTML. Arguments: response: The connection to the user template_values: Any additional template values to render """ user = users.GetCurrentUser() user_tasks = tasks.GetTasks(user) template_values['user'] = user template_values['tasks'] = user_tasks rendered_page = template.render( _TEMPLATE_PATH, template_values) response.out.write(rendered_page)
  • 19. A look at template_values { "user": "mgp@google.com", "tasks": [ { "id": "task_id_1", "summary": "make cs4hs slides", "body": "those will be the slides i'm presenting", }, { "id": "task_id_2", "summary": "give presentation", "body": "hopefully to a thunderous applause", } ] }
  • 20. A look at the template <h3>Task list for {{ user }}:</h3> <form id="delete_form" action="delete" method="post"> <ul> {% for task in tasks %} <li> <input type="checkbox" name="task_id" value="{{ task.id }}" /> <h4>{{ task.summary }}</h4> <div>{{ task.body }}</div> </li> {% endfor %} </ul> ...
  • 21. The rendered output <h3>Task list for mgp@google.com:</h3> <form id="delete_form" action="delete" method="post"> <ul> <li> <input type="checkbox" name="task_id" value="task_id_1" /> <h4>make cs4hs slides</h4> <div>those will be the slides i'm presenting</div> </li> <li> <input type="checkbox" name="task_id" value="task_id_2" /> <h4>give presentation</h4> <div>hopefully to a thunderous applause</div> </li> </ul> ...
  • 23. Creating tasks class NewTaskHandler(webapp.RequestHandler): """Handler that creates a new task.""" def post(self): user = users.GetCurrentUser() summary = self.request.get('summary') body = self.request.get('body') tasks.NewTask(user, summary, body) self.redirect('/index.html')
  • 24. Creating tasks with error handling class NewTaskHandler(webapp.RequestHandler): """Handler that creates a new task.""" def post(self): user = users.GetCurrentUser() summary = self.request.get('summary', None) body = self.request.get('body', None) if not summary or not body: self.handle_error(summary, body) return tasks.NewTask(user, summary, body) self.redirect('/')
  • 25. Creating tasks ... def handle_error(self, summary, body): new_task_template_values = {} new_task_template_values['has_error'] = True if summary: new_task_template_values['summary'] = summary if body: new_task_template_values['body'] = body template_values = {} template_values['new'] = new_task_template_values write_html(self.response, template_values)
  • 26. A look at template_values { "user": "mgp@google.com", "tasks": [ { "id": "00001", "summary": "make cs4hs slides", "body": "those will be the slides i'm presenting", }, { "id": "00002", "summary": "give presentation", "body": "hopefully to a thunderous applause", } ], "new": { "has_error": True, "summary": ..., "body": ..., } }
  • 27. A look at the template <h3>Add a new task:</h3> <form id="new_form" action="new" method="post"> {% if new.has_error %} <div class="error">Please enter both a summary and description below</div> {% endif %} Summary: <input type="text" name="summary" value="{{ new.summary }}" /> Description: <textarea name="body" rows="5">{{ new.body }}</textarea> <input type="submit" value="Add Task" /> </form>
  • 29. Deployment ● Prerequisites: ○ Download the SDK ○ Get the code from https://github.com/mgp/cs4hs-tasklist ○ Import project into GoogleAppEngineLauncher ● Running it locally: ○ In GAELauncher, click Run, then Browse ○ Data is stored on your hard drive ○ Can edit the code without restarting the web server ● Deploying it to the web: ○ Register the application name at http://appengine.google. com ○ Change application value in app.yaml to app name ○ In GAELauncher, click Deploy ○ See it at http://app-name.appspot.com