Blackjack

Overview

This tutorial will be the guide for an intro to Web Development project building Blackjack to gain a basic understanding of the major building blocks of web applications: APIs, MySQL databases, Client Webpages, Cloud Servers and Github.

// TODO flow chart of the final project

// TODO screen shot of end project

Each project will utilize the following major pieces:

• The deckofcardsapi will be utilized to store deck state, as well as manage drawing cards and tracking player/dealer hands
• An AWS MySQL instance will be utilized to store data about a series of games, including current deckId for use in the external API, as well as keeping track of total wins/losses
• A client webpage will be constructed via HTML/CSS/JS
• An API will be built utilizing either Python or NodeJS, which will manage interaction between the client and MySQL/deckofcardsapi

There are two main paths to complete the API portion of this project: python and nodejs. If you have significant experience with python, feel free to use it as your API language, however otherwise we recommend you build a NodeJS server so that you don't have to gain familiarity in both Javascript and Python to complete this project.

Overview of the project specification

Each series of Blackjack games will be connected to a gameName. This name is what will allow us to keep track of how many wins/losses you have for that series, and will keep track of a deckId for the current game. This Id is what the deckofcards API uses as an identifier for its decks. This will allow us begin a game/series of games, close the browser, and continue right where we left off.

In a given browser session, the user will specify a gameName. This will send a request to our client API to either load an in progress game series, or create a new game series. Once we have loaded a game or created a new one, a user will have the option to either hit or stand. The user can continue to hit until their score reaches 21, at which point they win, or exceeds 21, in which case they lose. When they chose to stand, the dealer will draw cards until their score meets or exceeds 17, at which point a winner will be determined and a new game will be created.

There are four reasons in which the client webpage will interact with the client API:

• The client is requesting a file from the server
• A gameName is sent for a game series to be created or resumed
• A deckId and playerName is sent so that a card may be drawn to that player's hand
• A gameName and winnerName is sent so that a game can be completed and a new game begun

There are three reasons why we might interact with our MySQL database:

• We want to see if a gameName exists in our database already
• We want to insert a new game series into our database
• We want to update our database with a new deckId and increment gamesWon or gamesLost after the completion of a game

There are four reasons why we might interact with the deckofcards API:

• We want to generate a new, shuffled deck and retrieve a deckId
• We want to draw a card
• We want to add a drawn card to a player's hand (a 'pile' in the API's terminology)
• We want to retrieve a list of cards in a player's hand (a 'pile')

Though this seems like a lot, we will step through each piece an explain what is happening in detail to help simplify how everything works together.

Materials/Prerequisites

// TODO js bible i.e. async/await, callbacks, functions, interacting with DOM

// TODO python bible

We will be utilizing a variety of tools/technologies to accomplish this project.

If you are using Python, we expect you to have Python 3.x.x installed. You can check your python version with the command:

python --verision

If you are using NodeJs, we expect you to have installed a version of Node, which can be obtained here.

You should also have a Git repository that you can use. Feel free to use the one already established for your group, just locate everything in a subfolder (i.e. GroupRepo Blackjack).

At this point you should complete the MySQL database on AWS tutorial, which can be found here.

Process

Setting up our MySQL Table

Open up MySQL Workbench and open your already-established connection to your RDS instance. Once you're connected, in the left sidebar under Schemas ensure your database is highlighted, so that any query you execute will be against your database.

We want to create our games table. Recall this table needs to track several properties: gamesWon, gamesLost, deckId, and gameName. We must also include an id column, which is what will distinguish each row from each other and act as our Primary Key.

Sample Table:

id   gameName  deckId  gamesWon  gamesLost
------------------------------------------
1    game1     d643sj  12        9
2    myGame    y73nd1  2        0

In MySQL workbench, create a new SQL tab for executing queries (this should be one of the icons in the upper right hand corner). Paste the following code and click on the lightning bolt icon to create the games table:

CREATE TABLE games (
    id INT PRIMARY KEY AUTO_INCREMENT,
    gameName VARCHAR(50) NOT NULL UNIQUE,
    deckId VARCHAR(50),
    gamesWon INT DEFAULT 0,
    gamesLost INT DEFAULT 0
);

CREATE INDEX gameNameIndex ON games (gameName);

There are a few things to take note of here:

• AUTO_INCREMENT automatically increments the id column- this means we don't need to specify an id when adding a row to the table. It also means that if we delete a row of the table (say row 6) that index is gone forever- the next row will be created at row 7 even though only indexes 1-5 are the only indexes taken.
• VARCHAR(50) specifies that this column will contain a string of a maximum length of 50
• CREATE INDEX allows us to query against that column- now we can perform SQL searches using WHERE gameName = 'something'

Create another SQL tab and executing the following command should yield an empty table:

SELECT * FROM games;
-------------------------------------------
RESULT:
-------------------------------------------
id    gameName  deckId  gamesWon  gamesLost
NULL  NULL      NULL    NULL      NULL

Your database is all good to go now!

Setting up our project directory

In this step we'll set up our files/folders for the project. The main concern here is we want to isolate any files which should be accessible through the API's file server from our code files. This will help ensure the security of our source code.

Create the following directory structure:

Repository Root
|-public
  |- index.html
  |- index.css
  |- index.js
|- server.js/server.py
|- config.json

Any files we want our browser to be able to access, we will store exclusively in our public folder/subfolders, while our server code will remain outside that folder.

Our config.json is another best-practices thing we will do. In it we will store things like the root for our deckofcards API endpoint (to reduce the number of magic strings), as well as things we wish to keep secure (such as our MySQL connection information). In industry, we would probably tell git to ignore our config.json file and would manually upload it to the server, so that any secure information stored in it wouldn't be available to people who have visibility to your git repository, however that particular application is outside the scope of this tutorial.

Python API Server (Ignore if you set up the NodeJS API Server

TODO: do this

Authors

Ethan Shry, Winter 2018

Group Link

N/A

External References

N/A