A gentle introduction to coding (programming) for complete beginners. Starting from then basics - electrical wires - proceeding through variables, data structures, loops, functions, and exploring libraries for visualisation and specialist tools. Finally we use flask to make a very simple twitter clone web application.
3. The Journey
The “1s and 0s”
languages
tech overview
“Hello World!” working with
data
repetitive work reusable
blocks
graphics
using libraries
data science?
digital
services?
4. Deep Inside Tech is .... Numbers
Computers do stuff with numbers:
add, multiply, subtract, divide, shift, chop, invert, ….
That’s it!
There is no other magic.
10. The 1s and 0s
This is a computer …. (kinda)
on / off
switch
lightbulb
battery
11. The 1s and 0s
on / off
switch
lightbulb
battery
input output
12. The 1s and 0s
This one is a bit more useful.
on / off
switches
lightbulb
battery
0
0
0
13. The 1s and 0s
on / off
switches
lightbulb
battery
1
0
0
14. The 1s and 0s
on / off
switches
lightbulb
battery
1
1
1
15. The 1s and 0s
on / off
switches
lightbulb
battery
Computation:
Only when both inputs are on
Turn on the output light
1
1
1
16. The 1s and 0s
on / off
switches
lightbulb
battery
Computation:
Only when both inputs are on
Turn on the output light
1
1
1
Recipe:
IF
temperature is low
AND it’s after 8pm
THEN
Turn on the heating
58. Reaching Too Far Out!
9 3 4 8 1 5
0 1 2 3 4 5
a[0] = 9
a[3] = 8
a =
index
a [6] doesn’t exist!
a[5] = 5
59. Classic Coder Errors
Forgetting lists start at … 0 .. not 1
Software Bug!
Going beyond the end of a list is a major
method of security hacking!
Buffer Overflow!
60. Computers Love Repetitive Work!
Computers don’t mind doing lots of
repetitive number calculations.
Working through a list is useful start ...
69. Our First Function
def volume(w, l, h):
v = w * l * h
return v
create a new
function
… give it a name ... … takes these inputs
...
… does this work ...
… finally returns an
answer ...
70. Our First Function - Block Volume
v = w * l * h
w
h
l
v
functioninputs output
71. Functions - Try it!
reusable code
reused here!
.. and again here!
72. Functions - Try it!
reusable code
reused here!
.. and again here!
Hurrah!
You’ve just created some
reusable code!
77. Google is a Coder’s Best Friend!
Google is really really good at helping coders ...
explains that string
reversal we saw
78. Libraries of Reusable Code
It’s how coding is done at scale, with lots of coders.
And how Open Source projects often share cool useful stuff.
Linux
79. Let’s Use Somebody Else’s Work
Libraries - extend your Python’s powers with
somebody else’s code
my Python
my functions
somebody else’s module
somebody else’s module
somebody else’s module
somebody else’s module
importing
libraries
80. Python Documentation is Good
Have a look at the Python docs for the math
library
https://docs.python.org/3/library/math.html
(just an example, you could look at other Python libraries yourself)
86. Python Arrays
Array
9 3 4 8 1 5
4 2 5 0 0 1
2 7 3 1 4 0
0 1 2 3 4 5
a[2,0] = 2
a[1,3] = 0
a =
indexvariable name
2
1
0
index
array [ row, column ]
in fact you can have many dimensions ...array [dim1, dim2, dim3 …]
87. We need HELP!!
Numpy to the Rescue!
Numpy is a very popular and useful library.
It’s used loads in data science.
Numpy does arrays really rather well...
89. Numpy Arrays
a = np.array (
[ ]
)
arrays are enclosed by
square brackets
90. Numpy Arrays
a = np.array (
[ [1, 2, 3],
[4, 5, 6],
[7, 8, 9] ]
)
3 by 3
array of numbers
row by row
91. Numpy Arrays - Try It!
import numpy library
but we’ll call it np from
now on
create the 3 by 3 array
and print it out to be sure
accessing elements with
indices
taking row and column
slices
92. Array Functions - All At Once!
you can do stuff to an
array as a whole!
vs doing it to each element at a time
powerful
so can write concise clean code
efficient
for working on large data
93. Array Functions - Try it!
multiply every element by 10
find the mean (average)
sine function …
(trigonometry from school)
sum over all elements
98. .. and there’s loads of libraries
Lots of example online:
http://scipy-lectures.github.io/intro/matplotlib/matplotlib.html
http://matplotlib.org/basemap/users/examples.html
Have an explore yourself!
104. Let’s Make a Web Application
How do these work?
What’s under the hood?
What are the main moving parts?
105. Anatomy of (many) Web Applications
user
browser
internet
web application
106. Anatomy of (many) Web Applications
web application server
front end builder
logic
data storage
107. Anatomy of (many) Web Applications
web application server
front end builder
logic
data storage
visual design
business
process
glue and
coordination
customer
records
108. Talking to a Web Application
browser
web application
GET /contact
OK … stuff ...
talking in a
language called
HTTP
109. Demo - Let’s Talk to a Web Server
connect to web server
request a page
response code; OK
content of response
this is what the browser
uses to compose the page
110. Flask - A Small Python Web Framework
GET /contact
OK … stuff ...
handlers
route URLs to handlers
111. Flask - Let’s Try It!
import flask library
so we can use it
run the web server
.. until you kill it
registering URL handlers -
the URL and code to run
create a flask object -
this contains all the machinery like
routing requests
113. Add a Pinch of HTML
a string which contains HTML
code
if we return it, the browser will
decode and display it
head and body
“hello” and horizontal rule
114. Add a Pinch of HTML
<h2>Hello</h2>
<hr>
<title>My Hello Page</title>
115. Twitter Clone - The Logic
URL is /
form to submit new
tweet
list of
previous tweets
URL is /submit
add tweet to list
redirect back to /
submit
116. Twitter Clone - Python Code
import Flask
list of tweets
html code template
the XXXX will be replaced later
main home page shows tweets
submit page with form
redirect back to home page
117. Twitter Clone - copy and paste this code if you need to
# import flask
import flask
# python list of tweets
tweets = ["First tweet - Hello, World!"]
# html for page
html_template = """
<!DOCTYPE html>
<html>
<head>
<title>My Tweet App</title>
<style>
body {background-color: linen; }
body {font-family: Sans-Serif;}
</style>
</head>
<body>
<h2>Submit a Tweet</h2>
<form action="submit" method="post">
<textarea name="content" cols="50" rows="4"></textarea>
<input type="submit" value="submit my tweet">
</form>
<h2>Previous Tweets</h2>
XXXX
</body>
</html>
"""
#create the application object
app = flask.Flask(__name__)
@app.route('/')
def home_page():
# replace XXXX with tweets
html = html_template.replace('XXXX', '<hr><p>'.join(tweets))
return html
@app.route('/submit', methods = ['POST'])
def submit():
tweet = flask.request.form['content']
tweets.append(tweet)
return flask.redirect('/')
app.run()
120. Spy Challenge!
1. Write a function to encrypt a
message.
2. Write a function to decrypt a
message.
* use Google to help
121. Encrypt and Decrypt
Encrypt:
● lowercase the text message
● rotate up the letters by the number given by the key
(if you go past “z”, wrap around to “a”)
Decrypt: - just the opposite
● rotate down the letters by the number given by the key
126. In just 4 sessions we’ve …
The “1s and 0s”
languages
tech overview
“Hello World!” working with
data
repetitive work reusable
blocks
graphics
using libraries
data science?
digital
services?