|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
|
|
<!-- For syntax highlighting -->
|
|
|
<link rel="stylesheet" href="../../../../lib/css/zenburn.css">
|
|
|
<link rel="stylesheet" href="../../../../lib/css/prism.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../../../../css/reveal.css">
|
|
|
<link rel="stylesheet" href="../../../../css/theme/ga-title.css" id="theme">
|
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="lib/js/html5shiv.js"></script>
|
|
|
<![endif]-->
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/python-ga/proxima-nova/fonts.css" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body class="language-javascript">
|
|
|
|
|
|
<div class="reveal">
|
|
|
|
|
|
<!-- Any section element inside of this container is displayed as a slide -->
|
|
|
<div class="slides">
|
|
|
|
|
|
|
|
|
<!--
|
|
|
---
|
|
|
title: Python Basics: Intro to Python Web Development
|
|
|
type: lesson
|
|
|
duration: “:60”
|
|
|
creator: Anna Zucher + Susi Remondi
|
|
|
---
|
|
|
-->
|
|
|
<section id="section" class="level2 separator">
|
|
|
<h2><img src="https://s3.amazonaws.com/python-ga/images/GA_Cog_Medium_White_RGB.png" /></h2>
|
|
|
<h1>
|
|
|
Intro to Flask
|
|
|
</h1>
|
|
|
<!--
|
|
|
|
|
|
## Overview
|
|
|
We're introducing Flask. After a brief introduction, we jump into a We Do that walks students through running a basic Flask app. Near the end, there's a slide on the history of Flask.
|
|
|
|
|
|
## Important Notes or Prerequisites
|
|
|
- Make sure you have Flask installed!
|
|
|
|
|
|
## Learning Objectives
|
|
|
In this lesson, students will:
|
|
|
- Write a basic Flask application.
|
|
|
|
|
|
## Duration
|
|
|
30 minutes
|
|
|
|
|
|
#### Notes on timing:
|
|
|
- This seems like a long time, but spend time on each slide going through variations of what can be written, whether it's a variable name or the return. Be sure everyone has a basic Flask app at the end.
|
|
|
|
|
|
---
|
|
|
|
|
|
## Suggested Agenda
|
|
|
|
|
|
| Time | Activity | Purpose |
|
|
|
| --- | --- | --- |
|
|
|
| 0:00 - 0:02 | Welcome |
|
|
|
| 0:02 - 0:07 | Flask Introduction |
|
|
|
| 0:07 - 0:25 | Building a Flask App |
|
|
|
| 0:25 - 0:28 | History |
|
|
|
| 0:28 - 0:30 | Summary |
|
|
|
|
|
|
|
|
|
## Differentiation and Extensions
|
|
|
- Feel free to come up with a few different things for the Flask app to display — more complex code between the `index` declaration and the `return`. Give advanced students more challenges to bring in dictionaries, lists, or loops.
|
|
|
|
|
|
|
|
|
Materials needed:
|
|
|
- Projector
|
|
|
- Slides
|
|
|
- Python 3
|
|
|
- Flask
|
|
|
|
|
|
-->
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="learning-objectives" class="level2">
|
|
|
<h2>Learning Objectives:</h2>
|
|
|
<p><em>After this lesson, you will be able to:</em></p>
|
|
|
<ul>
|
|
|
<li>Write a basic Flask application.</li>
|
|
|
</ul>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="discussion-commonalities" class="level2">
|
|
|
<h2>Discussion: Commonalities</h2>
|
|
|
<p>What do you think these websites have in common?</p>
|
|
|
<ul>
|
|
|
<li><a href="http://www.pinterest.com">Pinterest</a></li>
|
|
|
<li><a href="http://www.instagram.com">Instagram</a></li>
|
|
|
<li><a href="http://linkedin.com/">LinkedIn</a></li>
|
|
|
</ul>
|
|
|
<p>They’re each:</p>
|
|
|
<ul>
|
|
|
<li>High on user interactivity.</li>
|
|
|
<li>Handling a large server load.</li>
|
|
|
</ul>
|
|
|
<p>What else?</p>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Try to lead them toward the idea of a Python web framework module.</li>
|
|
|
<li>A large server load means lots of images to download and lots of actions on the part of each user.</li>
|
|
|
<li>Show LinkedIn and Pinterest if the students aren’t familiar. Get them excited!</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="they-all-use-flask" class="level2">
|
|
|
<h2>They All Use <strong>Flask</strong></h2>
|
|
|
<p><embed src="https://qph.fs.quoracdn.net/main-qimg-cd83cf9ee7ad51b8af4d0c4d5220f534.webp" /></p>
|
|
|
<p>Some quick notes about Flask:</p>
|
|
|
<ul>
|
|
|
<li>It’s a Python micro web framework.</li>
|
|
|
<li>It can create and write the entire back-end in Python!</li>
|
|
|
<li>It can do small tasks (e.g., create a microblog or stand up a simple API).</li>
|
|
|
<li>It can do complex tasks (e.g., Pinterest’s API or create a Twitter clone).</li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>Flask is classified as a microframework because it does not require particular tools or libraries.</li>
|
|
|
<li>Open the lesson by describing what students are going to do (build a Flask app), and why this is so exciting (“We are using Flask to actually put your stuff on the internet!”).</li>
|
|
|
<li>Why do we use a lighter web framework like Flask?</li>
|
|
|
<li>Talk about how these sites work (lots of interaction and data) and why it is helpful to use Flask for these (get to focus on the interactivity/data and not just getting the thing up on to the internet and staying there).</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="flask-syntax" class="level2">
|
|
|
<h2>Flask Syntax</h2>
|
|
|
<p>How?</p>
|
|
|
<p>We just make a normal Python app.</p>
|
|
|
<p>It looks like:</p>
|
|
|
<div class="sourceCode" id="cb1"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co"># Import Flask class from flask library. (Note the upper/lowercase convention.)</span></a>
|
|
|
<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="im">from</span> flask <span class="im">import</span> Flask</a>
|
|
|
<a class="sourceLine" id="cb1-3" data-line-number="3"></a>
|
|
|
<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="co"># Initialize an instance of the Flask class.</span></a>
|
|
|
<a class="sourceLine" id="cb1-5" data-line-number="5"><span class="co"># This starts the website!</span></a>
|
|
|
<a class="sourceLine" id="cb1-6" data-line-number="6">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb1-7" data-line-number="7"></a>
|
|
|
<a class="sourceLine" id="cb1-8" data-line-number="8"><span class="co"># The default URL ends in / ("my-website.com/").</span></a>
|
|
|
<a class="sourceLine" id="cb1-9" data-line-number="9"><span class="co"># Could be instead "my-website.com/about" or anything - more on this later.</span></a>
|
|
|
<a class="sourceLine" id="cb1-10" data-line-number="10"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb1-11" data-line-number="11"></a>
|
|
|
<a class="sourceLine" id="cb1-12" data-line-number="12"><span class="co"># Function that returns the page: Display "Hello, World!"</span></a>
|
|
|
<a class="sourceLine" id="cb1-13" data-line-number="13"><span class="kw">def</span> index():</a>
|
|
|
<a class="sourceLine" id="cb1-14" data-line-number="14"> <span class="cf">return</span> <span class="st">'Hello, World!'</span></a>
|
|
|
<a class="sourceLine" id="cb1-15" data-line-number="15"></a>
|
|
|
<a class="sourceLine" id="cb1-16" data-line-number="16"><span class="co"># Run the app when the program starts!</span></a>
|
|
|
<a class="sourceLine" id="cb1-17" data-line-number="17"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb1-18" data-line-number="18"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Walk through this line by line.</li>
|
|
|
<li>The code includes comments for students’ reference, but be sure to still talk through it. There’s a lot more to say than what’s written!</li>
|
|
|
<li>Give URL examples — pull up websites.</li>
|
|
|
</ul>
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<p><em><Note: This is copied from the Flask docs.></em></p>
|
|
|
<ul>
|
|
|
<li>First we imported the Flask class.</li>
|
|
|
<li>Next, we create an instance of this class. We use <code>__name__</code> so that Flask knows where to look for templates, static files, and so on.</li>
|
|
|
<li>We then use the <code>route()</code> decorator to tell Flask what URL should trigger our function.</li>
|
|
|
<li>The function is given a name, which is also used to generate URLs for that particular function and returns the message we want to display in the user’s browser.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-lets-try" class="level2">
|
|
|
<h2>We Do: Let’s Try!</h2>
|
|
|
<p>We’ll run the Flask app like any other app.</p>
|
|
|
<ul>
|
|
|
<li>We need to install Flask!
|
|
|
<ul>
|
|
|
<li><code>pip install flask</code></li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
<p>Create a file called <code>my_website.py</code>.</p>
|
|
|
<p>Start with:</p>
|
|
|
<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="co"># Import Flask class from flask library.</span></a>
|
|
|
<a class="sourceLine" id="cb2-2" data-line-number="2"><span class="im">from</span> flask <span class="im">import</span> Flask</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>Flask (and lots of web frameworks) can be launched on the command line, giving developers more control and clarity into what is going on.</li>
|
|
|
<li>Set global variable (so Flask knows where our main application logic lives).</li>
|
|
|
</ul>
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Make sure everyone has done these steps!</li>
|
|
|
<li>If there are difficulties with <code>pip</code>, check <code>sudo</code>.</li>
|
|
|
<li>Demo these so students have the idea, then let them experiment on their own.</li>
|
|
|
<li>For more advanced students, write longer scripts in the <code>index()</code> function, or, if time, assign them the task.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-the-main-flask-app" class="level2">
|
|
|
<h2>We Do: The Main Flask App</h2>
|
|
|
<p>Let’s add:</p>
|
|
|
<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="co"># Initialize an instance of the Flask class.</span></a>
|
|
|
<a class="sourceLine" id="cb3-2" data-line-number="2"><span class="co"># This starts the website!</span></a>
|
|
|
<a class="sourceLine" id="cb3-3" data-line-number="3">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb3-4" data-line-number="4"></a>
|
|
|
<a class="sourceLine" id="cb3-5" data-line-number="5"><span class="co"># The default URL ends in / ("my-website.com/").</span></a>
|
|
|
<a class="sourceLine" id="cb3-6" data-line-number="6"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb3-7" data-line-number="7"></a>
|
|
|
<a class="sourceLine" id="cb3-8" data-line-number="8"><span class="co"># Function that returns the page: Display "Hello, World!"</span></a>
|
|
|
<a class="sourceLine" id="cb3-9" data-line-number="9"><span class="kw">def</span> index():</a>
|
|
|
<a class="sourceLine" id="cb3-10" data-line-number="10"> <span class="cf">return</span> <span class="st">'Hello, World!'</span></a>
|
|
|
<a class="sourceLine" id="cb3-11" data-line-number="11"></a>
|
|
|
<a class="sourceLine" id="cb3-12" data-line-number="12"><span class="co"># Run the app when the program starts!</span></a>
|
|
|
<a class="sourceLine" id="cb3-13" data-line-number="13"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb3-14" data-line-number="14"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Continuously walk through the code.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-flask-app-try-it" class="level2">
|
|
|
<h2>We Do: Flask App — Try it!</h2>
|
|
|
<p>Run the app like normal:</p>
|
|
|
<p><code>python my_website.py</code></p>
|
|
|
<p>Go to:</p>
|
|
|
<p><code>http://localhost:5000/</code></p>
|
|
|
<p>You made a web app!</p>
|
|
|
<p>Let’s change the string:</p>
|
|
|
<div class="sourceCode" id="cb4"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw">def</span> index():</a>
|
|
|
<a class="sourceLine" id="cb4-2" data-line-number="2"> <span class="co"># The "return" determines what's displayed.</span></a>
|
|
|
<a class="sourceLine" id="cb4-3" data-line-number="3"> <span class="cf">return</span> <span class="st">'Hello, World!'</span></a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Change around what’s returned in <code>index()</code>, so they can see that that’s what makes the display.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="i-do-displaying-the-app" class="level2">
|
|
|
<h2>I Do: Displaying the App</h2>
|
|
|
<p>It’s just Python — we can write any code.</p>
|
|
|
<ul>
|
|
|
<li>But <code>return</code> essentially just takes strings.</li>
|
|
|
</ul>
|
|
|
<div class="sourceCode" id="cb5"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb5-1" data-line-number="1"><span class="kw">def</span> index():</a>
|
|
|
<a class="sourceLine" id="cb5-2" data-line-number="2"> my_list <span class="op">=</span> [<span class="st">"Hey"</span>, <span class="st">"check"</span>, <span class="st">"this"</span>, <span class="st">"out"</span>]</a>
|
|
|
<a class="sourceLine" id="cb5-3" data-line-number="3"> <span class="cf">return</span> my_list[<span class="dv">0</span>] <span class="co"># Works!</span></a></code></pre></div>
|
|
|
<p>Conversely:</p>
|
|
|
<div class="sourceCode" id="cb6"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="kw">def</span> index():</a>
|
|
|
<a class="sourceLine" id="cb6-2" data-line-number="2"> my_list <span class="op">=</span> [<span class="st">"Hey"</span>, <span class="st">"check"</span>, <span class="st">"this"</span>, <span class="st">"out"</span>]</a>
|
|
|
<a class="sourceLine" id="cb6-3" data-line-number="3"> <span class="cf">return</span> my_list <span class="co"># WON'T WORK</span></a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong></p>
|
|
|
<ul>
|
|
|
<li>Change around what’s returned in <code>index()</code> in a more advanced way.</li>
|
|
|
<li>They can follow along if they’d like.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="we-do-flask-variations" class="level2">
|
|
|
<h2>We Do: Flask Variations</h2>
|
|
|
<p><code>app</code> and <code>index</code> are just naming conventions.</p>
|
|
|
<ul>
|
|
|
<li><code>def index():</code> could be <code>def monkey():</code>.</li>
|
|
|
<li><code>app</code> could be <code>guitar</code>.
|
|
|
<ul>
|
|
|
<li>Be sure to change it in all places!</li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
<p>But, naming variables sensibly is important!</p>
|
|
|
<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb7-1" data-line-number="1"><span class="im">from</span> flask <span class="im">import</span> Flask</a>
|
|
|
<a class="sourceLine" id="cb7-2" data-line-number="2"></a>
|
|
|
<a class="sourceLine" id="cb7-3" data-line-number="3">guitar <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb7-4" data-line-number="4"><span class="at">@guitar.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb7-5" data-line-number="5"></a>
|
|
|
<a class="sourceLine" id="cb7-6" data-line-number="6"><span class="kw">def</span> monkey():</a>
|
|
|
<a class="sourceLine" id="cb7-7" data-line-number="7"> <span class="cf">return</span> <span class="st">'Hello, World!'</span></a>
|
|
|
<a class="sourceLine" id="cb7-8" data-line-number="8"></a>
|
|
|
<a class="sourceLine" id="cb7-9" data-line-number="9"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb7-10" data-line-number="10"> guitar.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Show this.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="flask-history" class="level2">
|
|
|
<h2>Flask History</h2>
|
|
|
<p>Let’s back up. Where did Flask come from?</p>
|
|
|
<ul>
|
|
|
<li>Before 2010:
|
|
|
<ul>
|
|
|
<li>No easy method for Python websites.</li>
|
|
|
</ul></li>
|
|
|
<li>2010:
|
|
|
<ul>
|
|
|
<li>A few developers built Flask to fix this.</li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
<p>Flask is built on two libraries:</p>
|
|
|
<ul>
|
|
|
<li><em>Werkzeug</em>:
|
|
|
<ul>
|
|
|
<li>Interfaces with the web.</li>
|
|
|
<li>Helps handle request and connections.</li>
|
|
|
</ul></li>
|
|
|
<li><em>Jinja</em>:
|
|
|
<ul>
|
|
|
<li>We’ll be using this later!</li>
|
|
|
<li>We can write templates for all pages across our web app.</li>
|
|
|
</ul></li>
|
|
|
</ul>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tips:</strong> - Some students might not care about history, but go over it for those who do. - Don’t spend too much time on the libraries — we’re hitting Jinja later!</p>
|
|
|
<p><strong>Talking Points:</strong></p>
|
|
|
<ul>
|
|
|
<li>Around 2010, a group of open-source Python developers release the first version of Flask!.</li>
|
|
|
<li>Before this, there was no easy way to use Python on the internet/for web apps.</li>
|
|
|
<li>Flask is built using two libraries (already written bundles of code).</li>
|
|
|
</ul>
|
|
|
<ol type="1">
|
|
|
<li><em>Werkzeug</em> is a library to interface with the web. It helps to handle request and connections.</li>
|
|
|
<li><em>Jinja</em> is a templating engine, which lets us write an HTML file once and then apply that file to all of our site.</li>
|
|
|
</ol>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="summary-flask" class="level2">
|
|
|
<h2>Summary: Flask</h2>
|
|
|
<ul>
|
|
|
<li>A Python micro web framework</li>
|
|
|
<li>Developed in 2010</li>
|
|
|
</ul>
|
|
|
<p>Looks like this:</p>
|
|
|
<div class="sourceCode" id="cb8"><pre class="sourceCode python"><code class="sourceCode python"><a class="sourceLine" id="cb8-1" data-line-number="1"><span class="co"># Import Flask class from flask library.</span></a>
|
|
|
<a class="sourceLine" id="cb8-2" data-line-number="2"><span class="im">from</span> flask <span class="im">import</span> Flask</a>
|
|
|
<a class="sourceLine" id="cb8-3" data-line-number="3"></a>
|
|
|
<a class="sourceLine" id="cb8-4" data-line-number="4"><span class="co"># Initialize an instance of the Flask class.</span></a>
|
|
|
<a class="sourceLine" id="cb8-5" data-line-number="5">app <span class="op">=</span> Flask(<span class="va">__name__</span>)</a>
|
|
|
<a class="sourceLine" id="cb8-6" data-line-number="6"></a>
|
|
|
<a class="sourceLine" id="cb8-7" data-line-number="7"><span class="co"># The default URL ends in / ("my-website.com/").</span></a>
|
|
|
<a class="sourceLine" id="cb8-8" data-line-number="8"><span class="at">@app.route</span>(<span class="st">'/'</span>)</a>
|
|
|
<a class="sourceLine" id="cb8-9" data-line-number="9"></a>
|
|
|
<a class="sourceLine" id="cb8-10" data-line-number="10"><span class="co"># Function that returns the page: Display "Hello, World!"</span></a>
|
|
|
<a class="sourceLine" id="cb8-11" data-line-number="11"><span class="kw">def</span> index():</a>
|
|
|
<a class="sourceLine" id="cb8-12" data-line-number="12"> <span class="cf">return</span> <span class="st">'Hello, World!'</span></a>
|
|
|
<a class="sourceLine" id="cb8-13" data-line-number="13"></a>
|
|
|
<a class="sourceLine" id="cb8-14" data-line-number="14"><span class="co"># Run the app when the program starts!</span></a>
|
|
|
<a class="sourceLine" id="cb8-15" data-line-number="15"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">'__main__'</span>:</a>
|
|
|
<a class="sourceLine" id="cb8-16" data-line-number="16"> app.run(debug<span class="op">=</span><span class="va">True</span>)</a></code></pre></div>
|
|
|
<aside class="notes">
|
|
|
<p><strong>Teaching Tip:</strong></p>
|
|
|
<ul>
|
|
|
<li>Be sure everyone has a basic Flask app at the end and understands why.</li>
|
|
|
</ul>
|
|
|
</aside>
|
|
|
<hr />
|
|
|
</section>
|
|
|
<section id="additional-reading" class="level2">
|
|
|
<h2>Additional Reading</h2>
|
|
|
<ul>
|
|
|
<li><a href="http://flask.pocoo.org/docs/0.11/">Flask Documentation</a></li>
|
|
|
<li><a href="https://github.com/miguelgrinberg/flask-pycon2014">A Flask Tutorial to Follow Along With</a></li>
|
|
|
<li><a href="http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates">The Flask Mega-Tutorial</a></li>
|
|
|
<li><a href="http://simeonfranklin.com/blog/2012/jul/1/python-decorators-in-12-steps/">A Great Guide to Those Weird “Decorators”</a></li>
|
|
|
</ul>
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
<footer><span class='slide-number'></span></footer>
|
|
|
</div>
|
|
|
<script src="../../../../lib/js/head.min.js"></script>
|
|
|
<script src="../../../../js/reveal.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var dependencies = [
|
|
|
{ src: '../../../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
|
{ src: '../../../../plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
|
{ src: '../../../../plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
|
{ src: '../../../../plugin/prism/prism.js', async: true, callback: function() { /*hljs.initHighlightingOnLoad();*/ } },
|
|
|
{ src: '../../../../plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }
|
|
|
];
|
|
|
|
|
|
if (Reveal.getQueryHash().instructor === 1) {
|
|
|
dependencies.push({ src: '../../../../plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } });
|
|
|
}
|
|
|
// Full list of configuration options available here:
|
|
|
// https://github.com/hakimel/reveal.js#configuration
|
|
|
Reveal.initialize({
|
|
|
controls: true,
|
|
|
progress: true,
|
|
|
history: true,
|
|
|
center: false,
|
|
|
slideNumber: true,
|
|
|
|
|
|
// available themes are in /css/theme
|
|
|
theme: Reveal.getQueryHash().theme || 'default',
|
|
|
|
|
|
// default/cube/page/concave/zoom/linear/fade/none
|
|
|
transition: Reveal.getQueryHash().transition || 'slide',
|
|
|
|
|
|
// Optional libraries used to extend on reveal.js
|
|
|
dependencies: dependencies
|
|
|
});
|
|
|
|
|
|
if (Reveal.getQueryHash().instructor === 1) {
|
|
|
Reveal.configure(dependencies.push({ src: '../../../../plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }));
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Reveal.addEventListener('ready', function() {
|
|
|
if (Reveal.getCurrentSlide().classList.contains('separator-subhead')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-subhead.css');
|
|
|
} else if (Reveal.getCurrentSlide().classList.contains('separator')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-title.css')
|
|
|
} else {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga.css');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
Reveal.addEventListener('slidechanged', function(e) {
|
|
|
if (Reveal.getCurrentSlide().classList.contains('separator-subhead')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-subhead.css');
|
|
|
} else if (Reveal.getCurrentSlide().classList.contains('separator')) {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga-title.css')
|
|
|
} else {
|
|
|
document.getElementById('theme').setAttribute('href', '../../../../css/theme/ga.css');
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
