Working with databases, especially through ORMs, can present quite a learning curve. We'll start by incorporating one database model into an application to save favorite Pokemon.
If you're not familiar with Pokemon, Pokemon is a franchise/universe created by Satoshi Tajiri in 1995. It's a famous franchise in both the US and Japan. Fun facts:
- Pokemon is short for "Pocket Monsters"
- The Pokemon universe extends to games, trading cards, and TV
- The Pokemon Company is headquartered in Bellevue, WA.
We'll be using the PokeAPI, a Pokemon API that allows us to get a list of Pokemon.
- As a user (AAU) I want to create an account
- (AAU) I want to sign in
- (AAU) I want to log out
- (AAU) I want to browse all the available pokemon
- As a logged in user, I want to select my favorite Pokemon and add them to a list of favorites
- As a logged in user, once I add a Pokemon to my list of favorites, I want to be redirected to my favorites page.
Run npm i
to install dependencies
Setup server.js
with a basic express server
Use axios
to fetch pokemon data from the pokemon API at the home route /
- Display that data in
index.ejs
Your first step will be to create a SQL database for your application. Recall the process:
- Use
npm
to install the required modules for postgres and sequelize:pg
andsequelize
- Make sure your Postgres server is running (check for the elephant).
- Run
sequelize init
to initialize Sequelize. - Update your newly created
config/config.json
file as we did in class. This means changing the credentials, updating the SQL flavor, and changing the database name topokedex
. - Run
createdb pokedex
to create your database inside of Postgres
Our data model needs only one attribute: name
.
- Use the
sequelize model:create
command to make thepokemon
model. This creates both the model JS and the migration JS files. - Use the
sequelize db:migrate
command to apply the migrations. - Confirm that your
database
andmodel
are inside Postgres using theterminal
- Create a
dbTest.js
with the following code:
// Make sure to require your models in the files where they will be used.
const db = require('./models');
db.pokemon.create({
name: 'pikachu'
}).then(poke => {
console.log('Created: ', poke.name)
})
db.pokemon.findOne({
where: {
name: 'pikachu'
}
}).then(poke => {
console.log('Found: ', poke.name)
})
Test by running the file: node dbTest.js
.
You'll want to add functionality to the following routes by incorporating the pokemon
table you created.
GET /pokemon
- View:
views/pokemon/index.ejs
- Purpose: Retrieve the user's favorited Pokemon and displays them on the page
- What sequelize function will do this for us?
- View:
POST /pokemon
- The form for adding will be included on the main index page
- View: none (redirect to
/pokemon
) - Purpose: Creates a new Pokemon and redirects back to
/pokemon
- What is the sequelize function we use here?
Add a route GET /pokemon/:name
that renders a show
page with information about the Pokemon.
- You can get detailed information about a Pokemon by passing the Pokemon's name to PokeAPI. You can retrieve images, abilities, stats, and moves through the API.
- Example: http://pokeapi.co/api/v2/pokemon/bulbasaur/
Check out the result of the pokemon API calls (or see the doc page) for ideas on what data you could show. Show at least 4 pieces of data (e.g. attacks, habitat, etc.)
Similar to how in step 3 we created a pokemon
model, create a user
model with fields username
and password
Run the migrations and test the newly made model in your dbTest.js
- Create the join table using
sequelize model:create
- Update the
user
model to have a Many to Many relationship withpokemon
static associate(models) {
models.user.belongsToMany(models.pokemon, { through: 'users_pokemons'})
}
- Update the
pokemon
model to have a Many to Many relationship withuser
static associate(models) {
models.pokemon.belongsToMany(models.user, { through: 'users_pokemons'})
}
Add conditional rendering to your Navbar. If there's a user
logged in, render a Log Out button, and if there isn't, render Log in and Sign up buttons.
Views and Routes to create:
- GET /auth/login - Display a login form
- GET /auth/new - Display a signup form that posts to /auth
- POST /auth - Create a user
- Revisit the POST /pokemon route: When creating a pokemon, we must add the
user
relationshipres.locals.user.addPokemon(newPokemon)
- Revisit the GET /pokemon route: On the pokemon index page - show only the pokemon that belong to the logged in user!
- If there is no logged in user - redirect to the sign in page!
You might notice the API doesn't return all the data it has at once. It has a default limit of 20. That means if it has a list of 150 (or more) Pokemon it will only return 20 at a time, by default.
http://pokeapi.co/api/v2/pokemon/
The API has a way to get around this limit. You can pass a different limit in the query string. The limit allows you to ask the API to return more than it's default amount.
Remember, query strings are parameters passed in the URL after a question mark and separated with ampersands. They look like this:
http://mapwebsite.com/?lat=40.284&long=110.133&zoom=12
This is a URL. It consists of four parts:
- the protocol is
http://
- the domain is
mapwebsite.com
- the path is
/
(the root path) - the query string is
?lat=40.284&long=110.133
The query string is like a JavaScript object. There's keys and values. This query string has three keys and values:
Key | Value |
---|---|
lat | 40.284 |
long | 110.133 |
zoom | 12 |
The Pokemon API is configured to read all sorts of keys and values from
the query string. Perhaps the most useful one we'll use is limit
. Specifying
smaller or larger limits tells the server to send back more or less data.
Specify a limit of just one to see the first item in the list:
<http://pokeapi.co/api/v2/pokemon?limit=1>
Or, specify a limit of 151 to see all 151 pokemon!
<http://pokeapi.co/api/v2/pokemon?limit=151>
- Add the ability to DELETE Pokemon from the favorites list.
- Rethink the
pokemon
table. Instead of it being a list of favorites, have it be a list of pokemon the user owns. What columns should the table have?nickname
,level
, etc... How would this change the app?
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].