Adv C186

Topic ENCRYPTION
Class Understanding the importance of encryption and applying the

Description same into digital communications is the key to user privacy.
Following the philosophy kids build a cross platform
application software for communication.
Class ADV-C186
Class time 55 mins

Goal ● Create an application to store the encrypted data in the
firebase database, using the encryption technique.
Resources ● Teacher Resources

Required 0 Use gmail login credentials
○ Earphone with mic
○ Notepad and Pen
● Student Resources
0 Use gmail login credentials
○ Earphone with mic (optional)
○ Notepad and Pen
Class structure Warm Up 5 Mins
Teacher-Led Activity 15 Mins
Student-Led Activity 35 Mins
Wrap Up 5 Mins
NOTE - BEFORE CONDUCTING THIS CLASS PLEASE GO THROUGH

TEACHER-REFERENCE-ACTIVITY-1. AND PERFORM THE TASK FIRST AT YOUR
END.
© 2020 - WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
1
Note: This document is the original copyright of WhiteHat Education Technology Private
Limited.
Start the video call from H2H
Class Steps Say Do
Step 1: In the previous class we learnt about Open Teacher-Activity-3-

Warm up various encryption algorithms and download the
(5 mins)
and we also saw how to encrypt and encrypt_decrypt.py file
decrypt a given message.
and run on the spyder
before class to check
everything is working fine
Please follow the follow

of the class -
- Explain the student

everything as per the
Q - Which function is used to encrypt document
the text and what parameters
does it take? - Let the student
A - encrypt() function is used start coding to build a
encryption and
to encrypt the text. This function
decryption application
takes 2 parameters:
Key - Using which the text is
encrypted
Value - The text which is to be
2
encrypted

Limited.
3
Q - Which function is used to
decrypt the text and what
parameters does it take?
A - decrypt() function is used to
encrypt the text. This function takes 2
parameters:
Key - Using which the text is
decrypted. This should be the same
as the key used for encrypting this
message
Value - The text which is to be
encrypted
Q - Which function is used to convert

bytes into hexadecimal value?
A - hex() function is used to
convert bytes to hexadecimal
value.
variable_name. hex()
Where variable_name is the

variable which holds a string of
4
bytes

Limited.
Now that you have answered the

questions and are clear with the
topics which we learnt in last class,
we will move to our next topic.
Teacher Initiates Screen Share
Step 2: In today’s class we will learn how to

Teacher-Led store the encrypted data in the
Activity firebase.
(15 mins)
5
We are creating a chat application where we will encrypt the user message and store it
in the database. And when we get the message from firebase database we will decrypt
the message and display it to the user
The encryption and decryption is used to maintain the privacy or secrecy of a message.
NOTE - ALL THE BELOW IMAGES ARE PRESENT IN TEACHER-ACTIVITY-1.
PLEASE OPEN TEACHER-ACTIVITY-1 WHILE EXPLAINING
Let me show you the demonstration of this application:

Limited.
6
This is the start screen or login screen of the application
Which contains the username , your code and your friend’s code
- Username will be your name
- Your code will be your code
- And your friend’s code, will be your friend’s code whole you want to chat with
So before the chat begins you should exchange your code with your friend.
The data in firebase is stored in key - value format.
Therefore these codes will be the key and the message you send will be the value.
Therefore to access the message sent by your friend we will require the key of your
friend who will be sending the messages.
7
Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
We will enter the key that I will be using to send data in “Your code” entry element and
the key that your friend will be using to send the data in “Your Friends code” entry
element.
This way we can get both our and the your friend’s data from firebase database and
display on our root window
Start
Enter the details and press ” button
“
When clicked S
ontart
“ ” button the login screen will be closed and the message window
will be opened
8
The textarea is to display the messages got from the firebase

And input field is to send the message which will be stored in the firebase
9
Here I had sent hello. Therefore my

name
: hello is displayed on the textarea.
We are able to get our friend’s sent message because we had the your friends code
that is321, using which we got the message from the firebase database
Data stored in firebase database

10
As you can see the data stored in the firebase database is not readable, that is the data
is stored in encrypted format. This keeps your data secured , even if the hacker tries to
access the database to get your messages he/she won’t be able to access the data as it
has been encrypted.
We all have used whatsApp , whatsapp does a similar thing, it encrypts the message
and stores it in their database to maintain the confidentiality of the messages sent.
In today's class we won’t be completing the entire application

We will just send the encrypted data which will be stored in the firebase database. The
application demo which we just saw is module one where we can send encoded
messages to firebase and get messages from firebase.
In the next module which is in upcoming classes we will also learn how to create a mini
version of whatsapp - where we send encoded messages from our python code and in
a thunkable mobile app receive the message, decode and show on the app.
NOTE - ALL THE BELOW IMAGES ARE PRESENT IN TEACHER-ACTIVITY-1 .

NOTE - STUDENT WILL BE PROVIDED WITH SOME PREWRITTEN CODE. ASK

STUDENT TO DOWNLOAD STUDENT-ACTIVITY-2 AND START CODING IN THAT
11
SAME FILE WHEN STUDENT ACTIVITY STARTS.
Predefined code:
12
The predefined code contains the complete GUI for this application
1. Code to create a basic GUI template for login window in tkinter
2. Function which will be called on click of the “Start” button which is placed on the
login window. On click of this button it will create another window that is the
message window on which the message from firebase database is displayed and
we can send encrypted messages to firebase database.
13
● Code to create a basic GUI template for message window in tkinter
● The message window has

○ Textarea to display all the messages got from the firebase
database.
○ Label “message” to prompt the user that the entry element beside it
will hold the message .
○ Entry element to get the user message.
○ Button to send the message to the firebase database entered in the
entry element.
○ Code to execute or run the message window
3.
Then code to create and place a label on the login window. The label to prompt
the user that the entry element beside it is where they are supposed to enter
their name.
4.
Then code to create and place an entry on the login window. The entry element
will get the user name.
5.
Then code to create and place a label on the login window. The label to prompt
the user that the entry element beside it is where they are supposed to their chat
code.
14
6. Then code to create and place an entry on the login window. The entry element
will get their chat code.

7. Then code to create and place a label on the login window. The label to prompt
the user that the entry element beside it is where they are supposed to enter
your friends code.
8. Then code to create and place an entry on the login window. The entry element
will get your friends chat code.
9. Then code to create and place buttons on the login window. This button will call
the enterRoom() function defined in step 2 which creates another tkinter window
that is message window with various other GUI elements
10.Then end statement which will execute the code and run our application
NOTE - ALL THE BELOW IMAGES ARE PRESENT IN TEACHER-ACTIVITY-1.
Student has to add the following marked code in the predefined code:
15
16
17
1. Import all the required libraries.

● As we will be storing data in firebase so we need a library which provides
us with a function using which we can store the data in the firebase
database. Therefore import the firebase modulefirebaselibrary.
from the
When you start your activity at that time I will show how to install firebase
library
18
● As we will be encrypting and decrypting the data in this application

therefore we will import encrypt, decrypt from simplecrypt library. Which
gives the functions to encrypt and decrypt the data. Therefore from
simplecrypt import encrypt, decrypt
2. Initialize the firebase. That is we will create a connection between the firebase
and python and store it in a variable. Using this variable we can store and get the
data from the firebase database.
To initialize or connect python with firebase Fwe irebaseApplication()

will use
function from the firebase module. Therefore use the firebase module name with
dot operator andFirebaseApplication() to access this function.
FirebaseApplication() function takes 2 parameters:
- Thedatabase link in which you will be storing the data and from which
you will be retrieving the data. You will get this link from your realtime
database in firebase
19
Copy this link and paste it in like this -
When you start your activity at that time I will guide you about how create
firebase database and get the firebase database link
- As we will be creating this application in test

- Authentication
mode(which I will guide you how to do later in the class) and we don’t
need any authentication so we will setNone
it as
20
3. Then we will declare all the variables required. We are defining these variables
outside the function as these variables will be used in other functions as well and
to access the variables in any of the functions, they have to be declared outside
the function.
● username - This variable will be used to hold the name of the user who is
sending the encrypted messages, we will define this variable outside the
function with an empty string .
● your_code - This variable will be used to hold the code of the user who is
sending the encrypted messages, we will define this variable outside the
function with an empty string.
● your_friends_code - This variable will be used to hold your friend’s code
who is sending the encrypted messages, we will define this variable
outside the function with an empty string.
● message_text - This variable holds the textarea of the message window.
As the message window is created on click of start button. That is,
textarea is created inside enterRoom()
the function which is called on the
click ofstart button.
21
But we also want to use this variable in other functions as well (that is
when we get the data we will be using this variable to display the
messages from the firebase database) therefore we will define this
variable outside the function with an empty string.
● message_entry - This variable holds the entry (input field) of the
message window. As the message window is created on click of start
button. That is, the entry element is created inside the enterRoom()
function which is called on the click of start button.
But we also want to use this variable in other functions as well (that is
when we send the data we will be using this variable to get the data
entered by the user) therefore we will define this variable outside the
function with an empty string.
Adding code in enterRoom() function

4. Now we will add some code in the enterRoom() function. Currently the enter
room function contains the code to create the message window and the
code required to create and place all the GUI components required on the
message window.
So we need to add code to get all the data entered by the user in the login
window. As we will be closing the login window the data entered(eg username,
your code , your friend’s code) won’t be accessible anymore. Therefore we will
store that data in variables
22
● Define all the variables using a global keyword so that we can use the
variables defined outside the function.
● Define username with global keyword which is defined outside the
function
● Defineyour_code
with global keyword which is defined outside the
function
23
● Defineyour_friends_code
with global keyword which is defined outside
the function
● Definemessage_entry
function
● Definemessage_text
function
● To getyour code from the entry element. We useget()

the function to get
the data entered from the input field. The entry element which yourtakes
code is stored in
your_code_entry variable.
And store this inside your_codevariable.
24
● Getyour friends code

from the entry element. We use get()
function
the
to get the data entered from the input field. The entry element which takes
friends_code_entry
your friends code is stored in variable.
your_friends_code
And store this inside variable.
● Getusername from the entry element. We use get()

function to get
the
the data entered from the input field. The entry element which gets
username is stored inusername_entry
the variable.
And store this inside username
the variable.
25
destroy() function closes the

● Now we have to close the login window.
specified window. We want to close the login window.
● Then we will add the command attribute to the Send

“ ” button and assign a
function to the command attribute. On click onstheend button we want to
call sendData() function which will encrypt and store the data in the
firebase database.
sendData() function
26
5. Now we will define the sendData function. The functionality of this button is to
encrypt the message and store it in the firebase database.
● Define sendData() function.
● Define username with global keyword which is defined outside the
function
● Define message_entry with global keyword which is defined outside the

function
● Define your_code with global keyword which is defined outside the

function
● Get the message entered by the user in the message entry element using
the get() function. Entry element where the user enters the message is
stored in the message_entry variable.
Q - Can you tell me the code to get the data from the entry element which
is stored in the message_entry variable?
A - message_entry.get() function is used to get the data entered in the
27
message_entry element
We will be concatenating the username with the message in the following
format before encrypting it
Username : message
Therefore we will concatenate the username which is stored in variable
username with “ : ” string and then concatenate the message from the
entry element and store it in a variable
We will be encrypting the username and message so that the viewer won’t
even know who is the sender of this message as well
Q - Which function from the simplecrypt library is used to encrypt the
message?
A - To encrypt the message we will use encrypt() function from
simplecrypt library
Q -How many parameters does encrypt() function take and what are those
parameters?
A - encrypt() function takes 2 parameters:
- Key - This key is used to encrypt the data. Remember to always

use the same key to encrypt and decrypt the data. If you ever used
one key for encryption and another key for decryption you won’t be
able to get the same data. This makes the encryption more strong.
28
As now even though the attacker/hacker knows the
algorithm(technique or procedure in which data is encrypted) used
for encryption they won’t be knowing the key used to encrypt the
data. Thus it will be difficult for the attacker to decrypt the data. In
this case we are using “AIM” as key you can use any string/word
but remember use the same string/word as key while decrypting the
data
- Message - The text which you would like to encrypt. The text that
we want to encrypt is stored in a message variable.
29
● Theencrypt() function encrypts the data in bytes. We want the encrypted
data in hexadecimal value. We are converting the encrypted bytes string
to hexadecimal because as we will be also be getting the message on
thunkable , and bytes data is not readable from thunkable thunkable can
read hexadecimal value.Therefore we are converting encrypted bytes
string to hexadecimal. Therefore to convert bytes to hexadecimal we will
hex() function and store hitex_string
be using the in variable. We stored
the encrypted bytes message in variable cipher code.
● Then we have to store this encrypted hexadecimal message in the

firebase database. We will use put()
function from the firebase
the
module. We will write the module name with dot operator and the function
name to access p ut() function. Remember every time you save new
the
data in the database. It does not create a new entry in the database
instead replaces the old data that is an old message in the database and
is replaced with the new message. That is why whenever you try to get
the message from the database you will only get the recent message and
not all the messages.
30
put() function takes -

- Path - path or url at which we want to store the data in the
database. We will be storing the data directly in the root
directory(folder). Which is denoted by “/”. Therefore we will pass “/”
as a parameter.
- Key - Using this key we can access the message stored inside the
firebase. As we are sending the data therefore here the key will be
your code that you have entered on the login window which is
stored inyour_code variable
- Value - This is the message which can be accessed using the key.
The encrypted hexadecimal message is stored hex_string
in
variable
● Then we will print the variable pwhich function on console. To

ut_date
view the structure in which the data has been stored in the firebase
database and get confirmation the data is been stored in firebase
31
Teacher Stops Screen Share
Now it is your turn.
● Ask Student to press ESC key to come back to panel

● Guide Student to start Screen Share
● Teacher gets into Fullscreen
Step 3: Guide the student how to When the student shares

Student-Led - Install python-firebase his/her screen teacher
Activity - Create firebase project and should guide the student
(10 mins) database for downloading the
- How to fix the firebase base library as per the
error instructions in
Teacher-Reference-Activi
ty-2
NOTE - The instructions for all the
above tasks is mentioned in
Teacher-Reference-Activity-2
Student-Activity-1- CODE
DIAGRAM
32
33
Now, it's your turn. Show me how you Student-Activity-2-
will create this application. PREDEFINED CODE
Start with downloading the code Student-Reference

from Student-Activity-2 . And start -Activity-2- CREATE
coding in the same file FIREBASE DATABASE
After you have completed coding,

start screen recording and record
the output using loom and submit
the video link on the student panel.
After the student has
completed coding, guide
the student to start
screen recording and
record the output using
loom as per
Teacher-Activity-Referen
ce-1, and submit the
video link on the student
panel.
Teacher Guides Student to Stop Screen Share
Step 4: You did great today as well. (Give at least 2 hats off)
Wrap-Up Great! You have two hats off. Press the Hats Off Icon for
(3 mins) Creatively Solving
Activities
Q - Which library is used to send the
data into the firebase
database? And what is the code to
import the library in our code?
34
A - from firebase import firebase Press the Hats Off Icon for
Great Question
Q - What is the function to send the

message into the firebase
Press the Hats Off Icon for
database? A - put() is used to “Strong Concentration..”
send the data into the firebase
database.
put() function takes 3 parameter
Path - directory inside which the data
is stored
Key - key using which we can access
the message
Message - message to be sent
Q - What is the code to close a tkinter If you don’t have time

to perform additional
window which is stored in the
activities, ask the
root variable? student to perform all
the additional
A - root.destory()
activities after class.
As root is the variable holding the Additional activities are
window and destroy() function closes VERY important for
the window kids, so that they are
ready for
35
the next module. And
some challenging
concepts are coming
ahead.
Also remind the student

to refer to the Student
Reference activity for
increasing their
knowledge. This should
also be done
For the solution of all the Additional Activity open Teacher-Activity-3 and
navigate to class number C186
Additional Activity 1 -
Run Student-Activity-3 from the panel
The TASK and HINTS are mentioned on the website itself.
36

37
Teacher Clicks
Activity Activity Name Links

Teacher Activity 1 CODE DIAGRAM https://curriculum.whitehatjr.com/ADV+Ass
et/CODE+DAIGRAM_C186.pdf
Teacher Activity 2 SOURCE CODE https://curriculum.whitehatjr.com/ADV+Ass

et/ADV-C186+-+C187-20201229T145522Z
-001.zip
Teacher Activity 3 ADDITIONAL https://mahdihat791.github.io/v2/additional
ACTIVITIES _activities_solution.html
SOLUTIONS
Teacher Reference RECORD SCREEN https://curriculum.whitehatjr.com/ADV+Ass

Activity 1 REFERENCE et/C145-+Guide+to+loom+recording.pdf
Teacher Reference CREATE FIREBASE https://curriculum.whitehatjr.com/ADV+Ass

Activity 2 DATABASE et/Create+firebase+database+for+python+
application.pdf
Student Activity 1 CODE DIAGRAM https://curriculum.whitehatjr.com/ADV+Ass
et/CODE+DAIGRAM_C186.pdf
Student Activity 2 PREDEFINED CODE https://curriculum.whitehatjr.com/ADV+Ass

et/ADV-C186-Student-20201229T150420Z
38
Limited.
-001.zip
Student Reference RECORD SCREEN https://curriculum.whitehatjr.com/ADV+Ass

Activity 1 REFERENCE et/C145-+Guide+to+loom+recording.pdf
Student Reference CREATE FIREBASE https://curriculum.whitehatjr.com/ADV+Ass

Activity 2 DATABASE et/Create+firebase+database+for+python+
application.pdf
Student Reference SIMPLE CRYPT https://pypi.org/project/simple-crypt/

Activity 3 LIBRARY
Student Reference FIREBASE PYTHON https://pypi.org/project/python-firebase/

Activity 4
39
Limited.
40

Adv C186

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Adv C186

Uploaded by

Copyright:

Available Formats

Topic ENCRYPTION

Class Understanding the importance of encryption and applying the

Class time 55 mins

Resources ● Teacher Resources

NOTE - BEFORE CONDUCTING THIS CLASS PLEASE GO THROUGH

© 2020 - WhiteHat Education Technology Private Limited.

Please don't share, download or copy this file without permission.

Start the video call from H2H

Class Steps Say Do

Step 1: In the previous class we learnt about Open Teacher-Activity-3-

Please follow the follow

- Explain the student

Please don't share, download or copy this file without permission.

© 2020 - WhiteHat Education Technology Private Limited.

Please don't share, download or copy this file without permission.

Q - Which function is used to convert

Where variable_name is the

Please don't share, download or copy this file without permission.

© 2020 - WhiteHat Education Technology Private Limited.

Now that you have answered the

Teacher Initiates Screen Share

Step 2: In today’s class we will learn how to

Please don't share, download or copy this file without permission.

NOTE - ALL THE BELOW IMAGES ARE PRESENT IN TEACHER-ACTIVITY-1.

PLEASE OPEN TEACHER-ACTIVITY-1 WHILE EXPLAINING

Let me show you the demonstration of this application:

Please don't share, download or copy this file without permission.

Please don't share, download or copy this file without permission.

Please don't share, download or copy this file without permission.

The textarea is to display the messages got from the firebase

Please don't share, download or copy this file without permission.

Here I had sent ​hello​. Therefore my

Data stored in firebase database

In today's class we won’t be completing the entire application

NOTE - ALL THE BELOW IMAGES ARE PRESENT IN TEACHER-ACTIVITY-1 .

NOTE - STUDENT WILL BE PROVIDED WITH SOME PREWRITTEN CODE. ASK

Please don't share, download or copy this file without permission.

© 2020 - WhiteHat Education Technology Private Limited.

Please don't share, download or copy this file without permission.

Please don't share, download or copy this file without permission.

● Code to create a basic GUI template for message window in tkinter

● The message window has

Please don't share, download or copy this file without permission.

© 2020 - WhiteHat Education Technology Private Limited.

NOTE - ALL THE BELOW IMAGES ARE PRESENT IN TEACHER-ACTIVITY-1.

PLEASE OPEN TEACHER-ACTIVITY-1 WHILE EXPLAINING

Please don't share, download or copy this file without permission.

Please don't share, download or copy this file without permission.

Please don't share, download or copy this file without permission.

1. Import all the required libraries.

Please don't share, download or copy this file without permission.

● As we will be encrypting and decrypting the data in this application

To initialize or connect python with firebase ​Fwe irebaseApplication()

Please don't share, download or copy this file without permission.

Copy this link and paste it in like this -

​- As we will be creating this application in test

Please don't share, download or copy this file without permission.

Please don't share, download or copy this file without permission.

Adding code in enterRoom() function

Please don't share, download or copy this file without permission.

© 2020 - WhiteHat Education Technology Private Limited.

Please don't share, download or copy this file without permission.

● To get​your code ​ from the entry element. We use​get()

Here I had sent hello. Therefore my

To initialize or connect python with firebase Fwe irebaseApplication()

- As we will be creating this application in test

● To getyour code from the entry element. We useget()

● Getyour friends code

● Getusername from the entry element. We use get()

destroy() function closes the

● Then we will add the command attribute to the Send

put() function takes -

● Then we will print the variable pwhich function on console. To