CS4HS Using Google App Engine. Michael Parker

Size: px

Start display at page:

Download "CS4HS Using Google App Engine. Michael Parker"

Aron Conley
6 years ago
Views:

1 CS4HS Using Google App Engine Michael Parker

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 and IMs, downloading remote files Easy management; don't need to buy or administer servers Supports both Python and Java Get the SDK at 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

5 Start with a mock-up

6 Identify your data (nouns)

7 Identify your actions (verbs)

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 <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 4 <html>... <li><h3>title1</h3>body1</li> <li><h3>title2</h3>body2</li>... </html> Web Server /index.html handler /create.html handler /delete.html handler 2 Get tasks for user@domain.com 3 task1: (title1, body1) task2: (title2, body2) Storage

11 Anatomy of a web application Modifying data (add, edit, delete): 1 HTTP POST /create.html username=user@domain.com title=title3, body=body3 5 <html>... <li><h3>title1</h3>body1</li> <li><h3>title2</h3>body2</li> <li><h3>title3</h3>body3</li>... </html> Web Server /index.html handler /create.html handler /delete.html handler Create task for user@domain.com: title=title3, body=body3 3 2 Get tasks for mgp@google.com 4 task1: (title1, body1) task2: (title2, body2) task3: (title3, body3) Storage

12 Defining and Manipulating Data

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

16 Writing the /index.html Handler

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 <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>...

22 Writing the /create.html Handler

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>

28 Deployment and Wrapping Up

29 Deployment Prerequisites: Download the SDK Get the code from 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 com Change application value in app.yaml to app name In GAELauncher, click Deploy See it at

30 Questions?

web.py Tutorial Tom Kelliher, CS 317 This tutorial is the tutorial from the web.py web site, with a few revisions for our local environment.

web.py Tutorial Tom Kelliher, CS 317 1 Acknowledgment This tutorial is the tutorial from the web.py web site, with a few revisions for our local environment. 2 Starting So you know Python and want to make