Forem: Connor Schratz

Finishing up With Phaser 3

Connor Schratz — Mon, 21 Sep 2020 13:57:32 +0000

Welcome back to my Phaser 3 tutorial, this week we're going to look at how you can set up motion for the asteroids we created in part 2 of this tutorial and set up 'lasers' to be fired from the ship! If you're new to this tutorial check out part one here. Alright let's get started with the asteroids first.

Asteroids.js

In order to handle the movement of the asteroids, we'll create a new file in our scenes directory called asteroids.js. This file will handle all of the logic for the asteroids in the game. First we'll set up the file like so.

export default class Asteroid extends Phaser.Physics.Arcade.Sprite {
  constructor (scene, x, y) {
    super(scene, x, y, 'asteroid');

    this.speed = Phaser.Math.GetSpeed(100, 1);
    this.orbiting = false;
    this.direction = 0;
    this.factor = 1;
  }
}

This is the beginning of our asteroids file. Here's we're creating a new class that will be extends the Phaser 3 arcade sprite class. We'll define the constructor and add some additional properties that will come into play later. Let's take a look at the other methods in the asteroids class now.

launch(shipX, shipY) {
  this.orbiting = true;
  this.setActive(true);
  this.setVisible(true);
  let xOrigin = Phaser.Math.RND.between(0, 800);
  let yOrigin = 0;
  this.setPosition(xOrigin, yOrigin);
  if (shipY > xOrigin) {
    let m = (shipY - yOrigin) / (shipX - xOrigin);
    this.direction = Math.atan(m);
  }
  else {
    this.factor = -1;
    let m = (shipY - yOrigin) / (xOrigin - shipX);
    this.direction = Math.atan(m);
  }
  this.angleRotation = Phaser.Math.RND.between(0.2, 0.9);
}

The launch method above will be responsible for launch an asteroid in the game scene. We'll set this up later to be run on an interval. A lot of the logic in the launch function is dependent on taking into account the current position of the ship to generate a travel vector for the new asteroid. For the sake of this blog, I won't go too deep into the math involved, but please reach out if you have any questions! Next we'll take a look at the update function that will traverse the asteroid across the screen during the game.

 update(time, delta) {
   this.x += this.factor * Math.cos(this.direction) * this.speed * delta;
   this.y += Math.cos(this.direction) * this.speed * delta;
   this.angle += this.angleRotation;

   if (this.x < -50 || this.y < -50 || this.x > 800 || this.y > 600) {
     this.setActive(false);
     this.setVisible(false);
     this.destroy();
   }
 }

Each time the update function is called the asteroid will generate a new x and y coordinate for itself as well as a new angle. This information will then be used by Phaser 3 to calculate the new location of the asteroid on the screen. Once again there's a bit of math involved for calculating these new coordinates but don't worry too much about it. Finally if the asteroid is beyond the deminsions of the game screen, setActive and setVisible will both be false and this.destroy() will be invoked to destroy the asteroid since its no longer on the screen.

Back to PlayScene.js

Alright now that we have our new asteroid class we'll need to actually use it within our PlayScene.js file. Let's take a look at how that will work.

// Be sure to import the Asteroid.js file into the play 
scene

create() {
  // New logic for handling the asteroids
  this.asteroidsGroup = this.physics.add.group();
  this.asteroidsArray = [];
  this.asteroidTimedEvent = this.time.addEvent({
    delay: 1000,
    callback: this.addAsteroid,
    callbackScope: this,
    loop: true,
  });
 }

Here we're creating a new asteroids group within our game scene and creating an asteroids array. We're also setting up a new timed evet to create a new asteroid every second. The callback within this event will be the function that is executed. So let's take a look at what this.addAsteroid is doing.

addAsteroid() {
  let asteroid = new Asteroid(this, 0, 0, 'asteroid', 0).setScale(0.02);
  this.asteroidsGroup.add(asteroid, true);
  this.asteroidsArray.push(asteroid);
}

Everytime addAsteroid is called we'll create a new asteroid that is generated from our Asteroid class. We'll also add the new asteroid to the asteroid group and array as well. Finally we'll update the update function (see what I did there?). Add this code block inside of the update funciton.

for (const asteroid of this.asteroidsArray) {
  if (!asteroid.isOrbiting()) {
    asteroid.launch(this.ship.x, this.ship.y);
  }
  asteroid.update(time, delta);
}

This loop will check the asteroids array and if any of the asteroids are not orbiting the asteroid will be launched into the game scene and the update function will be invoked so they move across the screen like actual asteroids!

Shoot.js

Alright now we've got asteroids moving across the screen so let's set up a way for the player to actually shoot them and destroy them! In order to do this we'll create a new file called shoot.js. In this file we'll handle all the logic for the 'laser' that the ship fires. For the sake of brevity, I'll include the entirety of shoot.js below.

import Phaser from 'phaser';

export default class Shoot extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'shoot');

    this.speed = Phaser.Math.GetSpeed(500, 1);
  }

  fire(x, y, direction) {
    this.setPosition(x, y);
    this.setActive(true);
    this.setVisible(true);

    this.direction = direction;
    this.rotation = this.direction;
  }

  update(time, delta) {
    this.x += Math.cos(this.direction) * this.speed * delta;
    this.y += Math.sin(this.direction) * this.speed * delta;

    if (this.x < -50 || this.y < -50 || this.x > 800 || this.y > 600) {
      this.setActive(false);
      this.setVisible(false);
      this.destroy();
    }
  }
}

Now that we have our shoot class we'll need to use it within the PlayScene.js file. Let's take a look at the changes necessary for that file now. First we'll need to add a new image for the 'laser' sprite that we'll be generating. I used just a basic blue blob, but you can use any image you'd like as long as it's a PNG file type. We'll load up this image in the preload function first.

preload() {
  this.load.image('shoot', shoot);
}

Next we'll update the create function to include the new image we loaded in within a new Phaser group as well as set up a collision handler for the laser and asteroid.

this.shootsGroup = this.physics.add.group({
  classType: Shoot,
  maxSize: 1,
  runChildUpdate: true,
});

this.physics.add.overlap(this.shootsGroup, this.asteroidsGroup, this.collision, null, this);

Now that the create function is updated, we'll move onto the update function. We'll add an additional control that will use the spacebar to fire the lasers.

if (this.cursors.space.isDown) {
  const shoot = this.shootsGroup.get();
  if (shoot) {
    shoot.fire(this.ship.x, this.ship.y, this.ship.rotation);
  }
}

Great now whenever the spacebar is pressed we'll create a new laser object in the game. Finally we'll need to define that function that handles the collision of the two game objects. This function will be called collision.

collision(laser, asteroid) {
  laser.destroy();
  asteroid.destroy();
}

The collision function will destroy both sprites once they collide with each other. Now we can successfully destroy asteroids in the game!

Conclusion

We've gone from a basic understanding of Phaser 3 to having a full functional game with the ability to shoot asteroids and destroy them. While this is a basic example there's a lot that can be expanded upon here. For more reading I recommend checking out the Phaser 3 documents, there's a lot of helpful information there that can help you create more robust and interactive games! I hope you enjoyed this series and I'll be back again soon for more Phaser 3 tutorials!

Getting Started with Phaser 3 pt. III

Connor Schratz — Mon, 14 Sep 2020 14:02:31 +0000

Introduction

Last week we discussed the process of adding static assets to our game, so we now have the ability to render game sprites and other objects to the game that users can see. We also covered how to add audio files to create sound within our new game. This week we're going to look at the process of adding controls to the game as well as taking those controller inputs and adding movement to the game sprites. If you missed last weeks tutorial, check it out here, if not let's get started!

Adding Movement

Just to give a bit of context, here's what the current PlayScene.js file looks like.

export default class PlayScene extends Phaser.Scene {
  constructor() {
    super('PlayScene');
  }

  preload() {
    this.load.image('background', './assets/img/background.png');
    this.load.image('ship', './assets/img/spaceship.png');
    this.load.image('asteroid', './assets/img/asteroid.png');
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(0, 400, 'background').setOrigin(0, 0).setScale(0.6);

    this.ship = this.physics.add.image(400, 300, 'ship').setScale(0.1);

    this.asteroid = this.physics.add.image(225, 550, 'asteroid').setScale(0.03);
    this.asteroid1 = this.physics.add.image(225, 250, 'asteroid').setScale(0.03);
    this.asteroid2 = this.physics.add.image(525, 250, 'asteroid').setScale(0.03);
 }
  update() {

  }
}

Now we'll look at the code that will enable us to move the ship around the screen and be able to control it with the arrow keys.

Add the following lines within the create function of the PlayScene.js file.

  this.ship.setDrag(0.99);
    this.ship.setMaxVelocity(150);
    this.ship.setCollideWorldBounds(true);

    this.cursors = this.input.keyboard.createCursorKeys();

There you go! We've set up the ship to have drag as it moves in the scene as well as set the max speed or velocity to 150. We're setting the ship to collide with the boundaries of the game view as well. Finally we setup this..cursors to be the keyboard input and specifically the Cursor Keys.

Next we'll modify the update function to take that input and move the ship sprite across the scene. First thing is that the update function will now take in time and delta as parameters. Next we'll add the following lines of code into the update function.

if (this.cursors.up.isDown) {    
  this.physics.velocityFromRotation(this.ship.rotation, 150, 
  this.ship.body.acceleration);
} else {
  this.ship.setAcceleration(0);
}

if (this.cursors.left.isDown) {
  this.ship.setAngularVelocity(-300);
} else if (this.cursors.right.isDown) {
  this.ship.setAngularVelocity(300);
} else {
   this.ship.setAngularVelocity(0);
}

I'll break down each line of this code block so we can see exactly what is happening on each key press event.

First if the up cursor is down, we first take the velocity from rotation of this.ship.rotation, supply the max velocity as stated before, and then provide the current acceleration. This takes into account any rotational velocity, and current acceleration from the ship and creates a new acceleration vector for the ship whenever the up key is pressed. Next if the left arrow key is down, the ship will rotate to the left and if the right arrow key is down, it will rotate the ship to the right. After those lines have been added, you'll be able to control the ship whenever you use the arrow keys on the game page. It's as simple as that!

Conclusion

Adding the ability to move your sprite around the game scene with the directional keys of the keyboard is a pretty simple process. You can set the speed of the sprite to be whatever you like and thus make your game character be as fast or as slow as you'd like. I hope this has helped provide a bit of perspective on how sprite movement can be controlled with Phaser 3!

Getting Started with Phaser 3 pt. II

Connor Schratz — Mon, 07 Sep 2020 06:05:17 +0000

Introduction

Last week I discussed the basics of setting up a Phaser 3 game with a Node.js and Express. Now that we have an understanding of how to get the game instance up and running on our server, let's take a look at how we can add images, sprites, audio, and other visuals to our game instance. This is where the real fun of Phaser 3 starts to shine! Phaser implements different views for the game and calls them scenes. We'll create 2 different scenes in this tutorial and load different assets for each scene. To start off we're going to handle the title scene.

Modifying the Game.js file

In order to add additional scenes into our Phaser game we'll need to make a few modification in the Game.js file. Here's what changed.



import PlayScene from './scenes/playScenes.js';
import TitleScene from './scenes/TitleScene.js';

const config = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  audio: {
    disableWebAudio: true
  },
  physics: {
    default: 'arcade',
    arcade: {
      fps: 60,
      gravity: {y : 0},
    }
  },
};

const game = new Phaser.Game(config);

game.scene.add('PlayScene', PlayScene);
game.scene.add('TitleScene', PreloadScene);

As you can see in the final 3 lines, we setup the game to have additional scenes and we're importing those scenes at the start of the file. So we'll go ahead and make three new Javascript files in a scenes folder within the public directory.

TitleScene.js

First let's go ahead an add a background image into our game scene on Phaser 3. In order to add a background we'll have to set up an assets folder within our public directory. Here's the image we'll use for the background:

Now that the image is added to the assets folder we can load it as a background image within the game. Let's take a look at the code responsible for doing that.



import Phaser from 'phaser';
import background from '../assets/img/Space.jpg';

class TitleScene extends Phaser.Scene {
  constructor() {
    super('TitleScene');
  }

  preload() {
    this.load.image('background', background);
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
  }

export default TitleScene;

Breaking down this code block, we can see that within the preload function we're loading the image background that we put into the assets folder earlier. Now in the create function we're adding an image to the actual scene when it is rendered. Below you'll see what it looks like.

Now that we have a basic background, let's add a way for our game to advance to the next scene. We can do this by adding a bit of text to the screen and making the text interactive. Add this line into the TitleScene.js file that we created above.



this.add.text(280, 350, `Your Game Name`, {
  fontSize: '32px',
  fill: '#FF0000',
  fontStyle: 'bold',
}); 
this.add.text(225, 400, `Click Here To Play!`, {
  fontSize: '32px',
  fill: '#FF0000',
  fontStyle: 'bold',
}).setInteractive( {useHandCursor: true}).on('pointerdown', () => this.scene.start('PlayScene'));

Now whenever a user clicks on that text block the scene will change to the PlayScene that we'll create later.

Looking pretty good so far, now for on last touch, we're going to add in some music for our game, because what fun is a game without a great soundtrack? In order to do this we'll have to modify the preload and create functions. I'll break down each one below.

preload()



this.load.image('speaker', './assets/img/speaker.png');
this.load.audio('loading', './assets/sounds/Ballistics.mp3');

create()



this.add.image(780, 580, 'speaker').setScale(.1).setInteractive({useHandCursor: true}).on('pointerdown', () => music.play());

const music = this.sound.add('loading', {
    mute: false,
    volume: 0.15,
    rate: 1,
    detune: 0,
    seek: 0,
    loop: true,
    delay: 0,
  });

The only thing we're not familiar with in these two code blocks is the music instance that is being created. In order to add music you must specify what audio file you want to play, here we're doing that by referencing the 'loading' audio that we included in the preload function, the object following that is where you can specify the settings of the audio, since we just want this to be our background music we're setting the loop property to true. Great! We've made the first scene of the game, I'll include a full snapshot of the code just in case anybody missed a line. Now onto the PlayScene!



class TitleScene extends Phaser.Scene {
  constructor() {
    super('TitleScene');
  }

  preload() {
    this.load.image('background', './assets/img/Space.jpg')
    this.load.image('speaker', './assets/img/speaker.png')
    this.load.audio('loading', './assets/sounds/Ballistics.mp3')
  }

  create() {
    this.cursors = this.input.keyboard.createCursorKeys();
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(780, 580, 'speaker').setScale(.1).setInteractive({useHandCursor: true}).on('pointerdown', () => music.play());
    this.add.text(280, 350, `Your Game Name`, {
      fontSize: '32px',
      fill: '#FF0000',
      fontStyle: 'bold',
    });
    this.add.text(225, 400, `Click Here To Play!`, {
      fontSize: '32px',
      fill: '#FF0000',
      fontStyle: 'bold',
    }).setInteractive( {useHandCursor: true}).on('pointerdown', () => this.scene.start('PlayScene'));

    const music = this.sound.add('loading', {
      mute: false,
      volume: 0.15,
      rate: 1,
      detune: 0,
      seek: 0,
      loop: true,
      delay: 0,
    })
  }
}

export default TitleScene

PlayScene.js

For the sake of brevity, I'm just going to include the setup of the PlayScene with the sprites for the game. Next week, we'll cover making the game interactive, so don't worry! Let's take a look at the basic setup for the PlayScene below.



export default class PlayScene extends Phaser.Scene {
  constructor() {
    super('PlayScene');
  }

  preload() {
    this.load.image('background', './assets/img/background.png');
    this.load.image('ship', './assets/img/spaceship.png');
    this.load.image('asteroid', './assets/img/asteroid.png');
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(0, 400, 'background').setOrigin(0, 0).setScale(0.6);

    this.ship = this.physics.add.image(400, 300, 'ship').setScale(0.1);

    this.asteroid = this.physics.add.image(225, 550, 'asteroid').setScale(0.03);
    this.asteroid1 = this.physics.add.image(225, 250, 'asteroid').setScale(0.03);
    this.asteroid2 = this.physics.add.image(525, 250, 'asteroid').setScale(0.03);
 }
  update() {

  }
}

So let's breakdown this code a bit, but most of it we should already be familiar with. In the preload we're loading in 3 images for our scene, the background we used for the TitleScene, a ship, and an asteroid. In the create funciton we're adding each of these images to the scene. In order to just get the star background in the scene, we'll load the background image twice in two separate locations (once at 0 on the y-axis and once at 400). From there we're creating the image for the ship we'll use. Now this is where it differs from before. Since eventually this ship will move around the screen we're adding the image as part of the physics engine of Phaser 3. It's just the same as before, but now in the next tutorial we'll be able to apply physics to the ship to get it moving around. Finally we're adding in 3 asteroids to the screen, all of which will be part of the physics engine of Phaser 3 as well. If done correctly, you should be looking at screen like this!

Conclusion

Just to wrap it all up, we've covered how to include images, audio, and additional scenes into our game. It's really easy to get creative and use whatever sprites or backgrounds you want in your game. Next week we'll take a look at adding movement to the sprites we've imported so far so that we can get this game up and running! See you all next week!

Getting Started with Phaser 3 and Node.js

Connor Schratz — Mon, 31 Aug 2020 13:38:18 +0000

Phaser 3 is a popular Javascript library for creating fun and interactive web-based games. The possibilities with Phaser are almost limitless and if you can think of it, odds are Phaser will be able to help you make that game-idea or level design a reality. Today we're going to look at the basic set up for creating a Phaser 3 project and what it takes to get your first web-based game up and running on your local machine.

Before you even start working with Phaser, you'll need to create a backend server that will be responsible for serving up the static files generated from your Phaser game. In order to do this, we are to implement a Node.js server using Express. Let's take a look at the process now. In your editor, create a file called Server.js



const express = require('express');
const app = express();

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(8080, () => {
  console.log('Server listening on http://localhost:8080');
});

The code above outlines the basic Node.js server, first we require Express, and from there we set up the server to serve our static files from the public folder. This will allow us to have access to all the static elements for our game. After that, we set up the server to listen on Port 8080 of our local machine, in order to test our server, let's create our index.html file within the public directory mentioned earlier. For now we'll just use a boiler plate HTML file, but we'll change this later down the road. Here's what the index.html file should look like.



<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Phaser - Demo</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Once you've created that file, save it and go into your terminal. From the root of your project directory, run 'node server.js'. You should see 'Server listening on http://localhost:8080' in your terminal. Now within your browser, navigate to localhost:8080. Once you're there you should see the words 'Hello World' on the top of the page, if so you've successfully created your server, now let's move onto getting Phaser 3 set up and running on the server.

The first step will be to set up our script tags within the index.html file. These script tags will allow us to access the Phaser 3 library and create our game instance. Here's what the index.html should look like:



<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Phaser - Asteroids</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.24.0/dist/phaser.min.js"></script>
    <script type= "module" src="game.js"></script>
  </head>
  <body>
  </body>
</html>

The latest release of Phaser 3 at the time of this article is version 3.24.0, so that's the one that we'll be using, also note how we're using the minified version, which will help to not slow down our webpage. Now that we have our script tags within the index.html file, we can finally get our hands dirty using Phaser. In order to get our game to actually show up in the browser, we have to set up the configuration for our game. The configuration for the game will go into a file called game.js, so let's go ahead a create that file and look at the contents of it.



import Phaser from 'phaser';

const config = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  audio: {
    disableWebAudio: true
  },
  physics: {
    default: 'arcade',
    arcade: {
      fps: 60,
      gravity: {y : 0},
    }
  },
};

const game = new Phaser.Game(config);

Alright, now we've got our game.js file all set up, let's breakdown what's happening in the game.js file. Here we're creating the configuration for our game. We supply the height and width of the game view in the browser and set the type to 'Phaser.AUTO'. Phaser.AUTO allow the browser to either run the game with WebGL or CANVAS, if the browser supports WebGL it will use that, but if not CANVAS will be the default. Next, we enable audio for the game within the audio property. Then we setup the physics for the game, we'll be using the 'arcade' physics for this game and we set the fps or Frames per Second to 60 and the gravity on the y axis to 0 (this is standard for normal gravity conditions in Phaser 3). Finally we make the game variable and assign it the value of a new Phaser.Game(config), which creates the new instance of our Phaser game using the configurations we outlined above. Now that we understand a little better what's going on, it's time to test it out in the browser. If we load up the browser we should see the a black box on the page, and if we check the console, we'll see that Phaser 3 has successfully been started. Here's what your browser should look like:

If you've made it this far in the tutorial, fantastic! In the next post we'll be taking a look at how you can add images, sounds, and text to your Phaser 3 game instance, so if you're interested in learning more about Phaser 3 stick around!

Deploying a Create-React-App to Google App Engine

Connor Schratz — Sun, 23 Aug 2020 18:08:14 +0000

The process of deploying a built application onto a live service can be intimidating for a lot of starting developers. This tutorial is going to walk-through the process of deploying a React application that was built with Create-React-App. Let's take a look at the steps required to accomplish this and how it's possible to combine both of these tools to create a great live application.

For this demo, we're going to use an application that I worked on as part of a team called National Park Pal, this is a full stack application that implements React on the front-end with a Nodes.js server using Express for the back-end. One of the best features of Create-React-App is that it takes care of the compiling of your static HTML files that will be served from your back-end server. So first let's set up our Google Cloud App Engine for deployment.

First, create a Google Cloud Platform account, thankfully Google provides new users with a $300 account credit to get your application up and running! After creating your account you'll be able to create a new project for your application. You can name your project whatever you'd like, but I recommend naming it what you plan on naming your website or application. It takes Google a minute to setup your project, but once it's finished you'll need to create your App Engine Instance. You'll be prompted to select a Region, Language, and Environment. For this demo, I went with US-Central Region, Node.js Language, and a Flexible Environment. Here's what that screen will look like for reference:

Once this step is complete, you're finished on the Google Cloud end, next we'll need to make some changes in our React App in order to successfully deploy.

An interesting part of the Create-React-App structure is that it allows your to create your front-end an host it locally while also creating a back-end and hosting that locally as well. This makes it useful for development because both your front-end and back-end are hosted on separate ports within your local device, but this becomes a major headache when you decide its time to deploy your application for the public. It's easiest to deploy your application on Google App Engine with your Node.js server and serving your static HTML files through express. Let's take a look at how you can accomplish this.

In order to setup your deployment version of your application, you'll need to make a few changes to the file structure in your React App. You'll want to create a separate back-end folder within the main directory of your project. From here you will need to move all of your back-end files into this folder. This will be the folder that will be deployed to the Google App Engine. Your file structure should be similar to the image below.

Fantastic, now we're onto the final few steps before we finally deploy the app. We'll need to add one additional line to our main server file to allow us to serve our files. Within that file after your require statements, add the following line to your code:

app.use(express.static(__dirname + '/public/build'));

Boom! Now we're really cooking! Create-React-App has a great built in feature that allows you to easily compile your React code into a build folder, we're going to be serving the static files from that build folder within our Node.js server through the line of code we added to our main server file above. Here's where it can get confusing so be sure to follow along. You'll want to run the following command in your terminal to compile your React code:

npm run build

Once you're build is finished compiling, the files will be stored in a folder called build.

Now back inside your back-end folder you'll want to create a new folder called public. Once you've created that folder, copy the ENTIRE build folder into the newly created public folder. Once that's complete all we have left to do is add an app.yaml file within the main directory of our back-end folder, which is required for the Google App Engine. For this example the structure of the app.yaml file is as follows:

runtime: nodejs
env: flex

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

Last, but certainly not least you'll want to run the following command in your terminal

gcloud app deploy

It can take quite awhile for your application to deploy for the first time. Just be patient and follow the directions within the terminal from Google. Once everything is finished, you'll be given the new URL for your application. Navigate to the URL in your browser and check out your freshly deployed app!

I hope this blog post has given you some insight on how Create-React-App and Google Cloud Platform can be used together to create and deploy a fantastic application. If you have anymore question feel free to ask, this can be a confusing process when you're first starting out, but after a few deployments you'll be feeling like a pro!

MongoDB and the Mongoose

Connor Schratz — Mon, 27 Jul 2020 06:23:24 +0000

There are a variety of great databases available to web developers. If you prefer a RDBMS such as MySQL, well that's just dandy and I commend you for using it! If you're not the biggest fan of MySQL, you might enjoy using MongoDB. MongoDB is considered a NoSQL database meaning it does not use relations to define the data within it. Instead MongoDB stores its data in a format similar to that of JSON, which makes it a lot easier to work with. Let's take a look at how you can create and interact with a MongoDB database.

Setting up MongoDB

First thing you need to do is install MongoDB. This post will cover the process on Ubuntu. First run this command in your terminal

> sudo apt-get install -y mongodb-org

Once that install completes, enter the following command into your terminal.

> sudo service mongodb

This will provide you with the following print out in the terminal.

> Usage: /etc/init.d/mongodb {start|stop|force-stop|restart|force-reload|status}

Those are the options that are available to the MongoDB service. In order to start your MongoDB database, just run the following command.

> sudo service mongodb start

You should expect to see the following printed to the terminal.

> Starting database mongodb

Once the database has started you can open the MongoDB terminal using the following command.

> mongo

You should be able to see the MongoDB terminal, once you made it here, you're done with the setup, now let's look at how to create and add data using Mongoose.

Mongoose

Mongoose is an object data modeling or ODM for MongoDB. It allows us to take care of creating, reading, updating, and deleting data within our MongoDB database. Using Mongoose makes managing the data in your database, really easy. Let's get Mongoose set up, and add some data to the database.

First you'll need to install Mongoose using npm or Node Packet Manager. Run the following command to set up Mongoose in your project.

npm install mongoose

Once Mongoose is installed you're ready to create your database. Let's take a look at that process.

const mongoose = require('mongoose');

const db = mongoose.connect('mongodb://localhost/mediumdb', { useNewUrlParser: true })
  .then(() => console.log('Connected to database'))
  .catch(err => console.error('Connection failed', err));

As you can see from this example, Mongoose is promise based, making it really great at handling incoming response from the database, no more pesky callbacks!

The next important step is to create a schema for your database, Mongoose makes this process extremely easy, let's create our schema.

const articleSchema = new mongoose.Schema({
  title: { type: String, unique: true },
  author: String
  pages: Number
});

const Article = mongoose.model('Article', articleSchema);

It's as easy as that, now we've created the schema for our database entries and created a model from it. Mongoose models have a lot of great built in methods that are easy to use. Let's look at how we'd create a new entry in the database using the Article model.

cosnt newArticle = new Article({
   title: 'Javascript 101', 
   author: 'Connor', 
   pages: 3
 });

newArticle.save();

There we go, now we've created a new entry in the database. It's important to remember that every new entry that is created this way, must also be saved using the .save() method, if you don't call that your entry won't be saved!

Now let's take a look at how we've query the database for our entry. It's rather easy!

Article.find()
  .then(articles => console.log(articles))
  .catch(err => console.log('Error: ', err));

Boom! Just like that we have access to all of the article entries in the database, the response from the database will look like this:

{ 
 _id: 79e8tebf696e5n89y92hf654u
 title: 'Javascript 101',
 author: 'Connor',
 pages: 3
}

Notice how MongoDB automatically gives each entry a unique _id, which is great for keeping track of entries in the database especially if it's one that contains user information. Mongoose also allow us the ability to delete specific entries in the database.

Article.findOneAndDelete({title: 'Javascript 101' }))
  .then(() => {
    console.log('Entry deleted!');
  })
  .catch((err) => {
    console.log('Error: ', err);
  });

Just like that, our Javascript 101 article entry is deleted and our database is now empty, but not to worry we can still add plenty of other articles to the database whenever we want.

Conclusion

MongoDB is great database option when you need to store data in a way that is very similar to Javascript objects. It allows us as programmers to use a syntax that we're very familiar with and thus decrease the likelihood of introducing bugs and errors into our code. I hope this article has provided some insight on how to get started with MongoDB and Mongoose, now get out there and put this knowledge to use in your own code!

Interacting with MySQL databases with Sequelize

Connor Schratz — Mon, 20 Jul 2020 01:37:02 +0000

Introduction to MySQL

MySQL is a relational database management system (RDBMS). Data in these types of databases are arranged into tables, which can reference other data stored in tables. This relation between data in separate tables helps to add structure to the data and gives origin to the name RDBMS. In most cases, these databases must be searched or queried using the specific syntax that the creators of the database set up. Luckily, for us, there are programs out there that allow us the freedom and flexibility to query these databases in a more Javascript like format, these types of programs are called ORMs or object-relational mapping. Sequilize is one of those programs. It handles the task of converting between objects in Javascript and the rows in a MySQL database. Let's take a look at the process of getting Sequelize set up and running on a project using a MySQL database.

Setting up a MySQL Database

Let's set up our MySQL database using the syntax provided to us by the database. Here we're creating a songs table with id, name, and artist values in the table.

CREATE DATABASE music;
USE music;
CREATE TABLE songs (
  id int(5) auto_increment primary key,
  name char(30),
  artist char(20)
);

insert into songs(name, artist)
        values ('Stairway To Heaven', 'Led Zeppelin');
insert into songs(name, artist)
        values ('Rain Song', 'Led Zeppelin');

insert into songs(name, artist)
        values ('Better Now', 'Post Malone');

insert into songs(name, artist)
        values ('Congratulations', 'Post Malone');

When we query our database we can select the entire table by using this query:

SELECT * FROM songs;

| id |               name |       artist |
|----|--------------------|--------------|
|  1 | Stairway To Heaven | Led Zeppelin |
|  2 |          Rain Song | Led Zeppelin |
|  3 |         Better Now |  Post Malone |
|  4 |    Congratulations |  Post Malone |

To select only the songs by Post Malone you could use this query:

SELECT name FROM songs
      WHERE artist = 'Post Malone';

|            name |
|-----------------|
|      Better Now |
| Congratulations |

Now that we have an understanding of how a basic database in MySQL functions, let's see how this process can be done using the Sequelize ORM!

Creating a Database with Sequelize

Let's take a look at how setting up a database with Sequelize differs from the process described above.

// Run in the terminal to install Sequelize 
// and the MySQL database
npm install --save sequelize
npm install mysql --save

Now we have everything set up to use Sequelize within the Javascript file to create our database and define the tables we want within in. Let's look at that process.

// Run in the Javascript file

const {sequilize} = require('sequelize');

const db = new Sequelize('music', 'root', '', {
  host: 'localhost',
  dialect: 'mysql',
});

const Songs = db.define('Songs', {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    primaryKey: true
  },
  song: {
    type: Sequelize.STRING,
  },
  artist: {
    type: Sequelize.STRING,
  }
});

After executing the lines of code above, we've done the exact same thing as earlier. We've created a music database using Sequelize and created a Songs table with the values of id, song, and artist. Now that we've created the database and table, let's add some data into the table like we did before. Notice how we use the 'await' keyword, this is because almost every Sequelize method is asynchronous!

const createData = async () => {
  const congratulations = await Songs.create({
    song: 'Congratulations',
    artist: 'Post Malone'
  }):

  const betterNow = await Songs.create({
    song: 'Better Now',
    artist: 'Post Malone'
  }):

  const stairWay = await Songs.create({
    song: 'Stairway to Heaven',
    artist: 'Led Zeppelin'
  }):

  const rainSong = await Songs.create({
    song: 'Rain Song',
    artist: 'Led Zeppelin'
  }):
}

Now that we've populated our data, we need to have a way to access the data we've inserted into our table, let's look at how that's done. Sequelize has a great method called findAll().

const getData = async () => {
  const getMyMusic = await Songs.findAll();
  console.log(getMyMusic); 
}

// Prints the following to the console

dataValues:
     { id: 1,
       name: 'Congratulations',
       artist: 'Post Malone',
       createdAt: 2020-07-19T20:20:06.450Z,
       updatedAt: 2020-07-19T20:20:06.450Z 
     },
     { id: 2,
       name: 'Better Now',
       artist: 'Post Malone',
       createdAt: 2020-07-19T20:20:06.450Z,
       updatedAt: 2020-07-19T20:20:06.450Z 
     },   
     { id: 3,
       name: 'Stairway to Heaven',
       artist: 'Led Zeppelin',
       createdAt: 2020-07-19T20:20:06.450Z,
       updatedAt: 2020-07-19T20:20:06.450Z 
     },
     { id: 4,
       name: 'Rain Song',
       artist: 'Led Zeppelin',
       createdAt: 2020-07-19T20:20:06.450Z,
       updatedAt: 2020-07-19T20:20:06.450Z 
     },

The ability to use an ORM while working with databases makes life a whole lot easier. Creating your database and defining the structure can all be done within your Javascript files and doesn't require you to use the MySQL interface. Sequelize can also be used to perform specific queries of your database just like the ones in MySQL. For more information, check out the Sequelize documentation. Also this article by Joseph Hu, really helped solidify my understanding of Sequelize as well, give it a read! I hope my article provided insight into both MySQL and Sequelize and how using an ORM can really speed up the process of creating and defining your database!

Becoming Friends with React JS

Connor Schratz — Mon, 13 Jul 2020 04:40:00 +0000

Frontend Frameworks

There are a variety of different frontend frameworks that can be used to develop your webpages and applications. There are countless options and its often confusing and difficult to decide on which framework is best for you. Most of the time it comes down to personal preference, but some of the most accessible ones are Backbone.js, Angular.js, and React.js. These three are the ones that I'm most familiar with and have spent time using. Each have their own advantages and disadvantages, but its always good to know a variety of different frameworks because you might not always have the liberty to decide which one you will be working with. Today we'll be taking a look at React and how to use it to implement a very basic Friends List in the web browser.

What is React.js?

React.js or just React, as its commonly referred to, is an open-source software that was developed by the folks at Facebook back in 2011. Originally utilized on Facebook and Instagram, it was released to the public in 2013. Since then it has gained a lot of support from individuals around the development community. Facebook and Instagram are some of the largest social media platforms to date, and the fact that they use React shows just how powerful this framework is. Instagram has 500 million active users and React handles all of that web traffic with ease (well most of the time). As of today, React is one of the most popular frontend frameworks and a really great one to get familiar with, so let's take a small peek at what React can do and how to go about using it!

How to use React

One of the most important aspects of React is the React Component. In React it is used to create the component aspects in the webpage or application. One of the great features of React is the utilization of ES6 syntax when creating new components. Every component created will extend from the React Component. Before we dive into how we can create a React component, let's setup the foundation of our Friends List.

const Friends = () => {
    return (
      <div>
      Friends List
      <FriendsList friends={['Ross', 'Rachel', 'Joey', 'Phoebe', 'Chandler', 'Monica']}/>
      </div>
    )
}

const FriendsList = (props) => {
  return (
      <ul>
        {props.friends.map(friend => <Friend friend={friend} key={friend}/>)}
      </ul>
  )
}

ReactDOM.render(<Friends />, document.getElementbyId('friends');

Here we've set up the basis for creating our Friend component. In the code above we created a function called Friends that will return an HTML outline that will be appended within the friends element of the webpage. The ReactDOM.render is a React method that inserts code into the element specified by the given Id. Note that within the 'div' tag we are referencing FriendsList and supplying it an array of friends. The FriendsList returns another HTML element that takes the friends array supplied in the Friends function and maps it, passing each friend into the Friend component. Notice how we are accessing the data through the props object and the key is friends, which was set when we were supplying the friends array.

React Component

Now that we have this setup, it is time to take a look at what the Friend component does within our webpage.

  class Friend extends React.Component {
    constructor(props) {
      super(props)
    }
    render() { 
      return <li>{this.props.friend}</li>
    }
  }

Whenever you create a React Component it is important to remember the ES6 syntax for creating classes, because this is the format that React follows. Here we use the class keyword and the extend keyword to create our component. In the above code we are returning a list item with the value of this.props.friend. This allows us to add each individual name that was in the friends array as a list item on the page. Note the use of the render function within the component, every React component has a render function and is automatically invoked. Whatever is defined within the render function will be added to the page on load. So now that we've seen the code, what is the actual output within the browser you might ask, let's take a look.

As you can see, we've got all of our friends printed right there in the browser! This is just a little glimpse into the functionality and power the React has. There's much more that can be done with this framework, if you're still curious, I suggest checking out their website Reactjs.org.
When using React there are some key thing to remember:

Use ES6 Syntax when creating new components
ReactDOM.render must be used to append your components to the page

When creating any component, you must use the class keyword as well as the extends keyword. Every component you create will be extended from the React.Component, don't forget this when creating your components! Also you must use ReactDOM.render() to display your components within your browser. If you've got those two things you're well on your way to creating awesome webpages and applications with React JS!

Inheritance and SubClasses Using ES6

Connor Schratz — Mon, 06 Jul 2020 04:00:05 +0000

Javascript Inheritance and SubClasses

In Javascript there are many different patterns to follow when going about object instantiation. Each of these patterns: functional, functional-shared, prototypal and pseudoclassical, follow specific syntax guidelines and the pattern one chooses impacts how object inheritance is handled. If you're unsure of how instantiation patterns work, here is a great article covering the topic. When EMCAScript 2015 or ES6 was released, they introduced the ability to create subclasses using the keywords extend and super, both of which, will be discussed later. When an object is a subclass of another object, it inherits the methods and properties of the 'parent' object and has access to those. Now let's discuss how pseudoclassical instantiation, subclassing and object inheritance works with ES6!

The class Keyword

When using ES6 instantiation the keyword 'class' is used to denote a new instance of an object and its constructor. Since we're using ES6 we can create object methods right within the class function, using less code and creating a more readable object. Below is the format that the ES6 pseudoclassical instantiation follows. Note the use of the 'class' keyword at the start of the function.

class Animal {
  constructor(name, favFood) {
    this.name = name;
    this.food = favFood;
  }
  identifier() {
    return `I am ${this.name}`;
  }
}

Now that we have our 'parent' class, we can start creating subclasses based off of the parent object. In order to create a subclass we need to use the keyword 'extends', which allows us to copy the parent class into the new subclass that's being created. This is where our new class will be inheriting everything from the parent class! While extends does most of the heavy lifting, there's still a bit of work that needs to be done on our end. While the methods will be copied with extends, we will still have to create the constructor function within the new class being created. Below you'll see the structure of our subclass using the extends keyword and creating the constructor function within.

class Dog extends Animal {
  constructor() {
  // What Goes In Here?
  };
}

The super Keyword

Now our new subclass is looking pretty good, but what do we do with the constructor function within it? We'll be invoking the super keyword, which references the parent class's constructor function. This allows us to recreate the same properties from the parent class in the subclass. Let's take a look at how that works down below.

class Dog extends Animal {
  constructor(name, favFood, sound) { 
    // passing the parameters of the parent class
    // plus the parameter sound
    super(name, favFood);
    this.sound = sound;
  }
}

Now that we've successfully created our subclass from the parent class, let's look at how we can add methods to the subclass as well as overwrite previous methods inherited from the parent class, while maintaining those within the parent class. This is one of the great uses of subclasses within Javascript!

class Dog extends Animal {
  constructor(name, favFood, sound) {
    super(name, favFood);
    this.sound = sound;
  }
  makeNoise() {
    // Adds a makeNoise method to our dog class!
    return `${this.sound} ${this.sound}`;
  }
}

// Creating a subclass called Cat from our Dog subclass
class Cat extends Dog {
  constructor(name, favFood, sound, action) {
    super(name, favFood, sound);
    this.action = action;
  }
    makeNoise() {
    // Overwriting the makeNoise function for the Cat subclass
      return `Meow!`
    }
    catThing() {
    // Adding a new catThing class that returns this.action
    // as a string
      return `${this.action}`;
    }
}

Look at all we've done so far! We have an Animal class that is the parent class, a Dog class that is a subclass of the Animal class, and a Cat class that is a subclass of the Dog class. Let's look at how each of these subclasses operate and inherit the methods and properties of their parent class!


const bat = new Animal('Dracula', 'blood');

console.log(bat.name); // Prints 'Dracula' to the console

const doggie = new Dog('Spot', 'bones', 'bark');

doggie.identifier(); // returns 'I am Spot' // We still have the 
// identifier method in our Dog subclass!

doggie.makeNoise(); // Returns 'bark bark' 
// Our makeNoise function in our Dog subclass 
// still works as intended even though we 
// overwrote it within the Cat subclass!

const kitty = new Cat('Sabrina', 'fish', 'meow', 'purrr');

kitty.makeNoise(); // Returns 'Meow!'

kitty.catThing(); // Return 'purrr'

As you can see in the code lines above as we create new subclasses from a parent class, each subclass inherits what the parent class has and then whatever methods or properties that you designate within the constructor function. Using the ES6 pattern for creating subclasses is a great option for a programmer, and I highly recommend getting comfortable with the syntax and process because it is very useful.

Conclusion

We've covered the process on creating classes and subclasses within Javascript using ES6. As you've seen this method of class creation allows you to easily copy properties and methods over from a parent class using the extends and super keywords. This method is extremely useful and allows you the freedom to modify subclasses of the parent depending on how you want them to operate. Using the ES6 syntax for creating subclasses saves lines of code and thus memory, which are both great benefits. ES6 is supported by all current browsers and using it while creating classes and subclasses is a great tool in your programmer's toolbox, so get out there and start putting it to use in your code!

P.S. Don't forget to use the 'new' keyword when creating new instances of your class and subclasses!

Stacks and Queues: A Javascript Explanation for Beginners

Connor Schratz — Mon, 29 Jun 2020 02:25:10 +0000

A Stack? A Queue? Data Structures? What?

In Javascript, there are countless ways to store data. We call these different data storage types, data structures. There are a variety of data structures available to us as programmers. Two data structures that are commonly used are stacks and queues. These two data structures are often discussed in conjunction since their behaviors are opposite the other. Let's dive in and take a look ateach of them and how they function!

Stacks

Stacks are very similar to arrays in Javascript except they follow a strict convention when adding or removing data within them. A stack follows the notion of First In Last Out (FILO) or Last In First Out (LIFO). A good way to visualize a stack is like a pile of dishes in the sink. In order to access the bottom dish, you will have to remove all the dishes on top of it before you can reach it.

Now that we have an understand of how stacks work, let's create our own constructor function for implementing a stack! Here we're creating the base of our stack function with a few variables that will help us implement other methods to our stack function later on.

const makeStack = function() {
  const stack = {};

  // Creates an object with numeric keys to store values
  const storage = {};
  // Creates a count to keep track of how many items we've added
  let count = 0;
  // Creates a stackHeight variable to track how 'high' the stack is
  let stackHeight = 0;
  // Creates a size variable to track how large the stack is
  let size = 0;
};

Now that we have our stack, we need a way to add items to it. Like we discovered before, stacks are very similar to arrays and they also have a push method attached to them. Let's look at how this method operates.

  stack.push = (value) => {
    // Creates a property in the storage object with 
    // the value of count and assigns it to the value
    // passed into the push method
    storage[count] = value;
    // Increments the count
    count++;
    // Increments the size
    size++;
    // Sets the stackHeight equal to the count minus one
    stackHeight = count - 1;
  };

Since we can add things to our stack, it might be useful if we can get those things back out of our stack when we want them. Just like how stacks have a push method, they also have a pop method similar to arrays. Let's take a look at how that's implemented.

  stack.pop = () => {
    // Checks to see if the size is greater than 0, if so
    // decrement, this check is to ensure that our size is
    // never a negative value. 
    if (size > 0) {
      size--;
    }
    // Creates a variable called last that is equal to 
    // the very last value that was added to the stack. 
    let last = storage[stackheight];
    // Deletes that key within the storage object, so
    // it is removed from our stack
    delete storage[stackheight];
    // Decrements the stack height since an item was removed
    stackheight--;
    // Returns last variable
    return last;
  };

Another useful method we might want for our stack is a size method, so we can see how many items are inside of our stack. Let's take a look at how easy it is to implement this method.

 stack.size = () => {
    // Since we created a variable earlier called size 
    // that tracks the size of the stack as we add and 
    // remove items, we can simply return the size
    return size;
  };

This implementation gives a functional stack that allows for the addition and removal of items following the notions of FILO and LILO and reporting the size of our stack. Now let's take a look at queues and how they operate in reverse to a stack.

Queues

Now that we have an understand of how stacks work, we can use that knowledge to understand how a queue operates. A queue is very similar to a stack except the conventions for adding or removing data are flipped. A queue follows the notion of First In First Out (FIFO) or Last In Last Out (LILO). The simplest example of a queue is a line at say a fast-food joint. The first person in the line gets served first and the last person will be served last. As more people join the line or "queue" those people will be served in the ordered they joined.

Now that we have an understand of how queues work, let's create our own constructor function for implementing a queue! Here we're creating the base of our queue function with a few variables that will help us implement other methods to our queue function later on.

const makeQueue = function() {
  const queue = {};

  // Creates an object with numeric keys to store values
  const storage = {};
  // Creates a count variable to keep track of how many times 
  // we've added to the queue
  let count = 0;
  // Creates a line variable to keep track of what item we're at 
  // in our 'line'
  let line = 0;
  // Creates a size variable to keep track of the size of our queue
  let size = 0;
};

Now that we have setup the basis for our queue, let's create a method that allows us to add items to the queue. We'll call this method enqueue. We'll simply be adding to the end of queue so nothing fancy here.

  queue.enqueue = (value) => {
    // Creates a property with the value of count and 
    // assigns it the value of whatever was passed into 
    // the enqueue function
    storage[count] = value;
    // Increment our count variable
    count++;
    // Increment our size variable
    size++;
  };

Since we're adding items to our queue, it might be useful to pull those items out of our queue when we want them. In order to do this we'll implement a method called dequeue, which will return the first item that was added to the queue.

  queue.dequeue = () => {
    // Checks to see if the size is greater than zero
    // since if we remove all items, we don't want our
    // queue to have a negative size
    if (size > 0) {
      size--;
    }
    // Set a variable called first equal to the value 
    // stored at the property of whatever the value of 
    // line is
    let first = storage[line];
    // Removes that property from the storage object
    delete storage[line];
    // Increments line for the next call of dequeue
    line++;
    // Returns the value of the first variable
    return first;
  };

Now we have a working queue that adds and removes items that were added into it. Similar to our stack function, let's add a method that allows us to see how many items are currently in the queue.

  queue.size = () => {
    // Returns the value of the size variable
    return size;
  };

Finally, we have a working queue that adds and removes items following the notion of FIFO & LILO. Now that we've gone through and implemented both a stack and a queue let's review one last time how they both function.

Conclusion

When discussing stacks and queues, it is important to remember how each one functions. It's easy to forget how items are added and removed from one or the other, but just keep in mind the rules.

Stacks: First In Last Out (FILO) & Last In First Out (LIFO)
Queues: First In First Out (FIFO) & Last In Last Out (LILO)

Now that we've seen how both stacks and queues work, what are some real examples of implementing these data structures into code.

Stacks:
- Forward and Backward within a browser
- Undo/Redo with Word documents
Queues:
- Amazon.com checkout
- A printer receiving files to print

That concludes my discussion of the differences between queues and stacks, they're super useful in programming as we saw from the examples above, so don't forget about them!