First Gen Pokedex Project

Scott Peraza
7 min readMar 18, 2021
(My level of excitement starting this project)

At Flatiron, we have been moving through things at a decent pace, it feels like just yesterday we started courses, and yet here came the next assignment…..our first CLI project.

As someone who has experience with javascript, and express, I thought to myself “This should be a piece of cake!”. Little did I know just how intensive this project would be at first, as I was learning how to interact with someone elses API rather than just create my own. It was a great learning experience however, as now having had a chance to work with a third party API, I have grown more comfortable with the concept of using them.

Now when it came to the project idea, we needed to find a well documented open source API. My initial thought was to find something with a huge following, that has also been around for a while so as to be open to public use, as I was certain a collection of fans would have formed to cataloug information about it. The first thing that popped to mind? POKEMON!

With a quick google search I found an amazing open source API with TONS of documentation. I set about creating user stories so that I had a general idea of what I wanted my application to do, namely to be able to pull up a list of pokemon, and select a pokemon to view more details about it such as its name, ID number, weight, etc.

Accessing the API was not too hard, however there were over 1,000 pokemon! On top of that, as the pokemon became newer, they had so many different varieties of the same pokemon with the same ID number. Yet at the same time, the api only let me access 20 pokemon. I set about trying to figure out how to access all 1,000 only to find that it was severly overwhelming for the user considering the pokemon could not be alphabetized due to how they would normally be listed within a pokedex. I realized that I had to specialize.

Upon further research, I found that the first gen pokemon consisted of only the first 151 pokemon, and edited the url limit to 0 offset, and a max limit of 151. Now we had some great usable data!

I parsed the Json into a ruby object so as to access the data, and went about pulling out the useful data, as the Json contained not just general information, but information about each move for every single version of pokemon that exists currently. Given I was working with first gen pokemon, I only pulled data relevant to pokemon red/blue, and used this to initialize pokemon objects.

With all this set up and responding how I expected, I moved on to setting up the environment file and CLI. Getting to interact with the program from the command line showed me that even 151 pokemon listed out was so many that it was just too much to have on the screen at one time. It would by pass my greeting, and all in all was unpleasant to scroll through. I was SHOCKED! I had no clue how I was going to fix this.

I started to google how to organize terminal output with wrapped columns. The closest thing I could find was outputting tables, and the way the tables were organized basically just made some boxes around my data, but did not wrap the numerous elements to shorten it. I decided I had to figure out how to make the listed out elements able to be flipped through like pages in a book.

20 was the number of elements that I felt was optimal to be displayed at one time. I figured what I had to do was take the array data passed into the CLI from my Pokemon.all class variable, and split it every 20 places to create arrays within arrays, and then iterate through those arrays to display each one. Accepting input that decided if the page should move forward or backwards.

I found a method “each_slice()” that would slice up the array every x elements, then put a “to_a” at the end to keep it an array. Awesome! I built additional functionality into my menu and list methods to track the current page, as well as give the ability to move forwards and backwards, seemed pretty simple. When I tested in in the CLI I found that each time a method was called that held my “current_page” variable…..the variable would be reset to 0! so I could only access the last page, first page, and second page. It seemed even just turning pages was a harder process than expected. I had to get my thinking cap on.

The solution came to me after a while of playing around with the program…..I had to keep one method running in a continuous loop as selections were being made, so that the “current_page” variable would stay on the page it should be on. This made looping the menu to be out of the question as the method would become insanely long, and violate the concept of separation of concerns…..enter PAGE_SWITCHER.

Metallica

The page_switcher method wrapped everything up nicely. I made a while loop that said while input was not equal to “stop” it would offer to go to the next page, or previous page. Relisting the pokemon, instructions for use, and greeting each time in order to make it seem as though the terminal was just refreshing with a new list rather than just tacing on additional output when ther terminal window was minimized. Once stop was typed it would pull up the selection menu as well! Meaning I could pull menu from the run command of the cli, as well as the list_pokemon method.

It also prompted me to pull the greeting from the run command into its own method, so as to reuse it throughout my program, and also follow separation of concerns a bit more closely. But it did create on problem…..

I could not just do each with index because with these new split arrays, every pokemons index would only ever be 1–20…..

I figured I could just pull the pokemons ID instance variable to number them, but this was not possible as display details is only run once a selection is made, and I figured it would make no sense to load all the details before then to just pull the ID for each……there had to be a better way.

I knew the pokemon passed to the list from the initial api call brought in their name and URL right off the bat. I also knew this URL contained their ID for the api’s use. I figured some regex would be able to help me out, but V2 was written in every URL, so if I tried to pull out all the numbers I would have one too many, and I could not just have it select all numbers except 2. So I gsubbed the “V2” from the url string as it came in, then used regex to pull the remaining numbers to be able to use those as their list number that is put next to the pokemons name!

The only things left to do were some light refactoring, such as making an isntructions variable in my page_switcher as I used the same text multiple times for each logic tree, and turning my move list into something more digestable. as each two word move such as “sword dance” was given from the API as “sword-dance”. Just using split(“-”) was not enough, becausewhen I would split them then go to print them using the indexs for each word, as such: print “ #{split_move[0]} #{split_move[1]},”

Any move that was only one word long would be left with a space after it, which did not look nice. So I made a quick logic tree to handle that situation, as well as a method to offer to search more pokemon, and my project was complete!

It was a fun journey, and allowed me to use new things I never had before, such as regex, as well as relive some nostalgia via working with pokemon. And turned into a project that I truly felt happy about!

--

--