foreign
good afternoon and welcome back to the
education track here at pycon 23. for
this next session I'd like to introduce
Thea there is a high school teacher
maths
digital Technologies
um something else too wasn't there no
those two she works in Brisbane at the
Kelvin Grove College and from what I've
seen at Kelvin Grove they have a really
good digital Technologies program I know
Thea is passionate for women and being a
bit of a mentor with getting girls
coding very important
um and I'd like you to put your hands
together for a pipe and Esther of coding
thank you
all right
so however everyone I'm Thea katsukas
thesaurus a digital Technologies teacher
up in myanjin Brisbane and I work in a
large State College which I love I'm a
great believer in the power of State
schools but it does mean working within
the most restrictive internet filter
ever no student access to GitHub or any
code repositories project management
tools the Google Suite most cloud
services and it was only last year that
you could apply with principal
permission for the ability to download
python libraries the most dangerous
thing of all
um so I've taught digital Technologies
and Mathematics at all high school
levels and I'm lucky enough to have a
great deal of control over what I teach
so although Haskell was my first love
python quickly became the tool that I
turned to for my own projects and when I
became a teacher I found it was such a
fantastic language for Education there
are so many great python resources and
tutorials out there and I appreciate
that the syntax is close enough to
pseudo code that my year 12s can just
about use it on their external exams
I love that I'm able to use Python
across so many different contexts from
beginner text-based scripts to
Scientific and mathematical modeling AI
game development guis physical Computing
Robotics and web development and I think
that having that common language really
helps reduce the cognitive load on
students when you're throwing in SQL and
databases user interfaces usability and
design HTML and CSS and everything else
that we expect of our students
so in Queensland digital Technologies
curriculum is mandated from prep to year
eight however you only have to teach it
for a suggested semester once per band
of two to three years which means that a
student might do a bit of Digi Tech in
year one then again in year four maybe
some robotics in year six and then they
start high school and they have no idea
what digital Technologies is all about
at my school I work in the middle senior
space we get to access our year sevens
for a total of three weeks once a
semester in which time we train cram in
making an arcade game using arcade make
code which is a simple platform that has
the option for Block coding
and then from then on it's an elective
so in year eight and nine students can
choose to do digital Technologies for a
semester we look at things like computer
hardware and networks we do some basic
programming with robots at the moment
we're trialing micro melons which are
these little robots with a bunch of
sensors that are programmed in Python
and they have a virtual simulator that
helps alleviate the problem of not
having one robot for every student
we do a unit on building a text-based
chat bot in Python making use of some of
the free Rock Resources so thank you for
that
in year 9 we introduce students to web
development creating static websites in
HTML and CSS about an artificial
intelligence project that students can
then submit to the Microsoft imagine cup
we take students through design thinking
process finding problems designing
applications with users in mind we start
to introduce databases and SQL doing
some work around data security and
privacy
then in year 10
we get a whole bunch of new students
who've never done it again
and we start with Game Dev to try and
get them hooked we've been going with
Godot lately which uses a language
that's really similar to python but
after this morning's talk maybe I'll
consider pie game zero
and we start to build on that SQL
knowledge and get into physical
Computing with Raspberry Pi's
at the very end of the year we start to
introduce web applications and apis
building simple web apps that get data
from space apis in Json and then display
it on a website
and in year 11 we officially start the
senior subject which in Queensland is
called digital Solutions the syllabus
assumes that students have done digital
tech only up until year eight so it
starts right back at the beginning
learning to code but we have such a
short time frame to teach it that it
ends up actually being quite challenging
for those students who are new to the
subject
and an interesting Quirk of the
Queensland syllabus is that it requires
students to be creating user interfaces
right from the start
as we saw in the earlier talk about Pi
game this is a big ask
I've been using pi simple GUI it's a
library that's basically a nicer version
of TK enter But students get a bit
frustrated with it so we get them into
web applications combining python with
HTML and SQL which we continue all the
way until the end of year 12.
so at every stage we get students
joining the class who've never really
programmed before along with students
who've been doing it all along or as a
hobby in their spare time so it's really
challenging designing lessons that work
with beginners but don't bore
experienced students
let's talk web apps I didn't touch web
development at Uni or in my previous job
as a junior developer but I did do a bit
of HTML and CSS back in my Neopets and
my space days but that was mainly
copying other people's Styles rather
than creating my own and it wasn't until
I went to a Django girls Workshop in
2015 when pycon was up in Brisbane that
I was introduced to web applications
websites with a back end that you could
program
but I found Django quite overwhelming to
be honest and although I was able to
copy the tutorial I didn't understand
most of what I was writing
but a few years later I became a teacher
and when the New Queensland senior
syllabus was released there was
encouragement to use a web development
context for at least one of the units so
I looked to python for options
I found that a lot of the full stack
Frameworks like Django while obviously
robust and fully featured were a bit too
complex for my liking
my students don't need an admin panel or
to use a professional database server I
needed them writing raw SQL not using an
object relational model or orm that
converts the data relationships into
object-oriented classes and methods I
didn't need all batteries included I
just wanted something lightweight and
easy to learn so that my students could
create something amazing in just a few
weeks
like Jack said earlier I wanted minimal
boilerplate or cruft
so I turned to flask flask is a micro
framework it has no database abstraction
layer no inbuilt form validation and
very minimal boilerplate code this on
the screen is all you need to start a
flask server and display a web page that
says hello world
in jetbrains annual python developer
survey flask came in as the top web
framework used with 41 of the vote
and what really helped is I found this
fantastic series of blog posts by Miguel
grinberg called the flask Mega tutorial
and I highly recommend these as a
beginner project for a teacher to learn
the basics of flask
however it does have some downsides
namely that he uses an orm called SQL
Alchemy instead of the raw SQL which is
what I need to assess my students on
so to run a flask application you open a
terminal navigate to the project folder
and type flask run
so
from there I developed a template for a
basic student flask project and today
what I want to do
is take you through this template and
explain what you need to do to get
started on your own flask projects and
I'll show you some examples of student
projects that we've done and cool
libraries that we've combined with flask
so this is a basic structure of a flask
project
inside our root directory we have the
app folder
now you don't need to call it app but
every example online calls it app it's
the default application name and it
allows you to use the shortcut to make
it just flask run when you run the app
so I like to keep it as app
inside app we have our static folder
that contains any of the CSS and
JavaScript files images videos any
static content that we want to display
on our page
then we have the templates folder so
templates flask looks for HTML pages in
a folder called templates so it's
important that it's named correctly
so let's go through the actual python
files we've got init.pi db.pi roots.pi
and config.pi
so what is init.pi
I chose When developing this template to
split the code up into init.pi and
put all of basically the code that's
necessary to get flask running but that
students don't necessarily have to be
able to write and understand so it
initializes the flask app the database
if you're using one and the login
manager if you're dealing with user
logins so that pretty much stays the
same for every project
then we've got DB dot Pi it's another
file that students will use but not
necessarily have to understand it
defines all of the functions for
creating a database from a schema.sql
file and for connecting to and
disconnecting from the database
we've got config.pi which contains
configure configuration options like the
name of the database
I also get students to put their school
username and password there if we're
working with apis and need to connect
through the school proxy because that
way they can keep that file secret out
of any code repositories if they're
using them and they don't need to
include it in their assignment
submission
the last thing we have is rootstop high
that's the meat of the program where
students will be writing all of the
Python code
so what goes in Roots well if we look at
a structure of a URL we start with the
protocol then the domain and then the
individual paths so these paths are what
we Define in our rootstop PI file
to define a root you can see I've got
some code here we use The app.root
Decorator and then we list the root so
you can see this first one is just slash
so it's basically the home page and then
I've got a further page that is slash
test so if you went to your website
slash test it would deliver
the code that's under that decorator
so once you get into more complex
applications you can use variables
Within These path names but to be honest
I haven't had to teach that for any of
the assessment I've given so far so just
having those simple routes it has been
enough
but I have found that if you use
something like you know when you're
teaching slash test then in the
assignment everyone will just use slash
test even though it doesn't make sense
to the context of their assessment
so here we see the typical flow of code
you create a route that renders an HTML
page in this example I'm rendering
index.html
which inherits from base.html so this
ability to inherit from a template so to
put you know all of your base code and
then have different pages that inherit
from that is through a library called
ginger that comes pre-built with flask
it allows you to do things like Define a
HTML page that's just for the footer or
for the navbar and then you can insert
that into your different pages but to be
honest after reflection I think it's a
bit too much for students they don't
tend to understand what we're doing with
the templates so I think I might remove
that in my next version of the template
but Ginger is useful for other things it
allows us to insert variables from our
rootstop PI file and also do a bit of
code
so here you can see oh it can do things
like FL statements and for loops and the
syntax is very similar to python
so you can see here
I've got a list of indicators it's a
variable called indicators and I'm
looping through it for each indicator
code in indicators
and then I'm creating a drop down menu
that's a the select and the different
options of the options in my drop down
and the value of that is going to be
that indicator code
and I'm also as the text that will
appear I'm inserting a variable with
those double curly brackets and
accessing a particular index of a list
using the square bracket notation just
like you do in Python and this all comes
pre-installed when you get flask
so then we deal with databases so to
create a database of your own you can
Define the create table statements using
standard SQL in a schema document
the default database language is sqlite
the upside to this is that it's a very
easy version of SQL to learn there are
only like five data types and there's no
crazy functions
the downside is that it doesn't deal
well with making changes to your
database structure it's almost always
easiest to just delete your database and
recreate it when you're working with
student projects
of course if you're working so if you
type in flask init.db then it will
initialize the database it will um
create a new database according to that
schema with whatever name you've chosen
in your config file
and of course if you're working with a
pre-existing database you can just skip
this place the database into your root
directory and not bother with a with a
schema document
so how do we interact with databases
well you can see here at the top with my
import statements I'm importing from
app.db that was that
db.pi file that we had back in our
app folder and it has a function called
getdb which gets the database so you can
see I'm calling that function I'm
setting it equal to a variable that I'm
just going to call DB
um
for Simplicity
and then going to execute an SQL
statement select all from category
and then I'm going to fetch all of the
results you can either fetch one result
which is basically select all from
category limit one or you can fetch all
of the results
and I'm saving that in
a results variable
and then I'm closing the database and
I'm passing that results into my
categories.html web page so it's really
easy to pass variables from
rootstop Pi into our HTML Pages through
Ginger it um we sorry and then we can
refer to it using Ginger so we just put
those results into the HTML page
and we can also use variables in
so in this example
I'm getting the country code from an
HTML form
so how do I do that at the top of my
route where I've defined the path I've
said that the methods that are allowed
are get and post so the default is just
get is allowed and if you don't say that
you can do Post requests you'll get a
forbidden error
and because I'm using this same route to
both display the form
and display the output which in this
case happens to be is going to be a
graph
I have an IFL statement that checks
whether the user has done a post request
whether they have picked a country in
the form or else it just sets it to a
default of Australia
and what's cool is it then it's then
going to take that country variable and
it's going to insert it into the SQL
statement using a question mark so you
can see in my SQL at the end of the line
I've got and country code equals
question mark and then when I execute
the statement I'm going to say I'm going
to execute that SQL statement and I'm
going to pass in country
as the variable
so you can have multiple question marks
as well and then instead of just country
it would be country comma and then
whatever other variables you want to
insert in the same order that the
question marks are in
it has to be a tuple which means that
it's kind of weird if you have just one
variable you have to put a comma after
the word country that's the thing that
always trips up students
and this method of inserting variables
rather than just doing country code
equals and then plus country this method
protects against SQL injections which is
always a nice thing for my students to
be able to write about in their
evaluation of the security of the system
like they have to do in year 12.
of course you don't just have to query
databases you can also insert new values
if you
after you execute the SQL statement with
the insert you just then need to commit
those changes
so let's look at some fun libraries
that I have used with flask in the last
couple of years
we've used plotly for making beautiful
graphs requests for doing API requests
flask login for building login systems
authentication systems and cryptography
as well
so this term my year 11s did a project
using an existing database from the
world bank
so I went and pulled CSV files that were
on the World Bank website that collect
data about every country in the world
with all these indicators across you
know social education governance really
interesting stuff
and I put them into an sqlite normalized
database relational database and their
task was to turn data into wisdom so
they had to search the database to find
something that they were interested in
we've got some really
um some really interesting student ideas
like looking at various indicators for
countries before and after there had
been Civil Wars or looking at Country at
all the indicators is that were around
women and what that looked like in in
different different parts of the world
so students used HTML forms to get user
input
they inserted it into an SQL statement
and they graphed the results
using plotly and this was displayed on
the web page
so what is the code for something like
this look like
this is a slightly smaller example
because I couldn't fit it on the screen
but this was a student who was creating
a map
so they had this great big SQL statement
joining tables multiple where statements
and they executed the SQL statement and
then loaded it into a pandas data frame
which basically all you're doing is
putting in the results and then saying
what you want the different columns to
be called
and then creating this graph so this one
was PX dot coreopliff it's a type of map
graph but you can you know if you wanted
to make it a line graph you would just
change it to px.line if you wanted it to
be a bar graph PX dot bar and then you
put that data frame into the function
and you say what you want some of the um
variables to be so if you're looking at
a line graph it might be what do you
want the X and Y axis to be in this case
because it's a map I wanted the
locations to be the country codes
because it turns out
um just putting in the country codes
that were in the World Bank database
works perfectly with the plotly map so
they could actually generate maps of the
world colored
um
with the different values for this life
expectancy
um
statement which was quite cool
then it does it just a little line of
code to turn it into a Json object which
you pass into your HTML page and then a
little bit of code a little bit of
JavaScript just a few lines that then
graphs it on the page
here's another project we did a year 12
project from last year a mock
application for an industrial Warehouse
that needed to keep its workers working
in safe temperatures so students
attached a temperature and humidity
sensor to an Arduino and then output the
results as a Json object that got read
by a Python program and put into a
database and then they created a web
application using flask that read the
most current temperature results from
the database along with the temperature
from a bureau of meteorology API for
external temperature and then it changed
the user interface to an alert if the
internal or external temperature was too
high
students created also created a page in
which users could change what that
safety threshold was
so we used the requests Library here you
can see I have my
um
requesting my URL for the Bureau of
meteorology API which they don't want us
to use but it's really cool
and then I'm doing a get request
and I had to put in proxy information
because we're behind a school proxy and
then loading it into a Json file
another project we did was around
security creating a sign up and login
page and then hiding certain information
behind a login so the context for this
one was the Australian Defense Force for
storing data about how many military
personnel they had in each City and the
city data came from an API and then the
military data was entered by users and
encrypted in the database
so we used the flask login library to do
things like
you know create
safe logins and we use the cryptography
library to encrypt things as well
so basic unit structure of how I teach
flask it is assuming that basic
knowledge of python we go databases and
SQL then intro to flask getting it all
working creating a basic route intro to
HTML and CSS
then combining flask and HTML putting
variables in combining with the
databases and then doing user input
so this is my information GitHub
currently has that base template if
that's something you're interested in
and I'm also working on committing some
sample projects using those different
libraries as well
and that's me thank you
thank you so much Thea here is your
little cup and your uh thank you card
um and so uh I think that was amazing do
we have any questions in the audience
yes
so how have you gone with on
um with students understanding
cryptography the library and also
cryptography as in what it's actually
doing
is a it's in the syllabus as in the year
12 senior syllabus
um starting with you know um Caesar
Cipher and going up to kind of more
modern cryptography things we really
just use the function
in the cryptography Library dot encrypt
and we don't really get into the
specifics of how that particular Crypt
cryptography method is using and same
with with the logins with hashing
passwords there's just a function
generate password hash
and same for checking password hashes as
well that we use so we don't get into
the nitty-gritty of how the cryptography
Library works but we do talk about
cryptography different cryptographic
algorithms a little bit of a theory
behind it
foreign
I suppose it's a question about how do
you teach uh SQL
um how you introduce it to students and
uh I'm guessing you're using vs code
have you experimented with ways of
highlighting Syntax for SQL because I
find that just
the red string and the error messages
are not super helpful quite often yes so
I actually don't use Visual Studio code
I just used it because it was pretty for
this I use pycharm just because it makes
it really easy to install python
libraries behind a school proxy the way
I teach SQL uh
I don't
I do it separately through a GUI at the
start I use DB browser for sqlite and
there are some really good resources
SQL bolt has really good
um
lessons for for practicing and teaching
SQL
yeah I I guess it's hard to explain how
you teach something
yeah I have
steps I mean students have kind of most
of them have done a little bit in year
nine a little bit in year 10 and so by
the time
um you know they're kind of repeating it
and you know SQL is very
does what it says it's very English
friendly I think
yes yes yes I do SQL by itself and then
we jump into
SQL plus python yeah
good question
just still on SQL you were talking about
um not just minimum minimal data types
are objects supported can they put have
a database for images
uh yes you can put blobs
I think is the data type they call it
yeah
[Laughter]