We’re going to code a PokeDex - a programme to look up ......We’re going to code a PokeDex - a programme to look up Pokemon data and display it for you! We’ll have a GUI (Graphical

We’re going to code a PokeDex - a programme to look up Pokemon data and display it for you! We’ll have a GUI (Graphical User Interface) and pull data from an internet API (Application Program Interface)!

Let’s get started! This is based on the PokeDex game from CodeClub but updated for VS Code and Paul Hallet’s PokeAPI V2.

1

© DigiLocal CIO all rights reserved

Open VS Code from the icon. We’re going to be using git for version control, so make sure you have completed Git Good and have a folder set up to work with git, and also that you have your github account details remembered.

Open your workspace in VS Code.

Make sure you are on the master branch.

2


Click on your working folder and start a new file called pokedex.py this will be our main game file.

We have used pygame for creating games, and the terminal for simple print statements. This time we’re going to use a library that let’s create professional windowing applications. The easiest is one called tkinter.

Create a new window by adding the line below

We should give our window a title.

It doesn’t look like it, but our window can already do quite a lot. We don’t even need a main game loop, it comes with it’s own. Add the line below to use it.

3


You should have a small window appear. You can close it using the ‘x’ in the top right hand corner.

This window will house our PokeDex. We’ll add labels, command buttons, and input windows to this main window.

Each ‘thing’ on the window is controlled by an event (just like in Scratch). So there is no game loop, nothing happens until there is an event to trigger it.

Commit your file to git, update your README.md file and push to github (if you’re using github).

Let’s add our first label.

Note: window.mainloop() is always the last line of this programme.

There are two parts to our label code. Line 6 defines the labee,which window it belongs to, and what text to display. Line 7 adds it to our window.

Our PokeDex window has automatically scaled to fit the text!

4 © DigiLocal CIO all rights reserved

Now we can add a data input window for the user to type in which pokemon they want the stats for.

Again, there are two parts. First we define our txt box as a text entry box, and it’s on our window. Then we pack it to the window.

Looking good! Of course, nothing will happen, we’ve not told our window what to do with this number. Let’s add a button to trigger the event of getting data.

Again, there are two parts (do you see the pattern?). And we should have a button now.

We still haven’t told the button what to do, that comes a little later..

5


Let’s add a couple more labels to display the data we will retrieve.

We should now have a basic display ready to fetch some data.

Commit your code with a suitable message, and push to github.

6


Before we drag data in, let’s customise our display so it’s our own.

This is going to require quite a bit of extra code, and some changes to our existing code, so let’s start a new branch called pokedex-customise

The little cloud means we’ve not synchronised our new branch with our remote origin. Don’t worry, that’s disappear when we make a commit.

We’ll start by changing the background. The green line shows the new code.

I’ve given my window a nice blue background, you could choose your own. Try different hex values after the # (any number between 0-f)

We can also change our labels..

This time, we configure the background colour (the same as our window), and the foreground colour (which is the text colour). Try out different combinations until you find one you like.

7


Do the same for your other labels.

At the moment, tkinter is using the default font and text size for all our labels. Let’s add some variables to store different options.

Now we can add an argument to our .config lines. An argument in coding is just another set of data, not a disagreement!

We can that line more readable by splitting it across lines after each comma (python will ignore those line breaks).

Let’s change the other labels.

8


Now our pokedex should be looking awesome!

When you have your window looking just right, commit, merge, delete, and push to github.

The data we’re using is stored on a remote server. We will access it through an API, which we’ll create next. Start by making a new branch.

If we were going to use our api with many programmes, it would be good practice to save it as a separate file. However, we’re only going to use it on pokedex so let’s keep it in our main file.

There are lots of libraries for getting data into python, two of the most popular for internet api’s are urllib and requests. We’ll use requests.

9


Start by defining our new function. The argument num will be the number of the pokemon in the database.

Now we can request our data. Notice that we convert our number into a string so it can be passed as a url.

Open Chrome and try typing that url in, with a random number, to see what data is coming back. It’s quite a lot!

The data is in what’s called JSON (JavaScript Object Notation). Which is lovely, but we need it in a python format. Fortunately that can be done in one line of python.

Now we can return our data.

Time to do something with our data. We need a new function to show the data.

Next we need to get the number the user typed into our input box.

Then we can get our data using our new api call.

10


Now we can update our label with the Pokemon name.

Lastly we need to update our button to call our new function.

If everything worked, let’s commit that code. We won’t merge just yet as we have some more stats to add.

11


There was a lot more data that came back from the api call than just the name of the pokemon. Let’s add labels for HP, Attack, Defense, and Speed.

Can you add the others?

Now we need to modify our api call to update the other labels with their data for Golbat (or whichever pokemon you chose).

The way the json file is structured, we can’t use names to find the relevant data. But we can use the position of the data in the list to find the base stat for each attribute.

12


Let’s add the other stats.

13


If everything is working, let’s commit that code.

14


We’re not quite finished. What happens if you put a number in that doesn’t have a pokemon, like 999?

Oh dear, that doesn’t look good!

We can do something about that. Knowing that the website will send back something that isn’t a valid json file, we can trap that with a try: except: loop.

First, in our api function. Once we have the pokemon number, let’s clear our input box so we can post an error message there if we need to.

This will delete anything in the txt input box starting at character 0 (the start) and then the following 99 characters. Since we’re only inputting numbers up to 718, this is a little excessive but you can’t be too safe!

Next we need our try: loop. This is to contain the code we hope will run.

15


We then indent all the code we hope will run normally.

Then we add our except, for any exceptions or things going wrong.

If that’s working, let’s commit it as well.

We’ll need some extra libraries to handle images.

We should also make a new function to fetch and manipulate the images into a form that tkinter can handle.

16


First we load the data from a new source.

Here’s that line split up a little so you can see it more clearly, but it needs to be entered as a single line.

Tkinter can’t load .png images directly. We need to do some conversion. We convert the image_bytes into a data stream that python can handle.

Then we use the python image library to open that data_stream.

Finally we convert the pil_image into one that tkinter can handle.

Now we can return the image from the function call.

OK, let’s put our new function into action! Add a new label to hold the image.

Notice that we don’t need to define any text for our label, or a foreground colour, since this is going to hold our image.

17


Back in our show_pokemon_data function we can now add our image call.

18


Now let’s make a final commit, merge the branch back into master, and push to github.

19


Documents

We’re going to code a PokeDex - a programme to look up ......We’re going to code a PokeDex - a programme to look up Pokemon data and display it for you! We’ll have a GUI (Graphical