Adding our flat file “database” into the mix

Let’s start by building off the same app that we created in Part 3 – the happypolack auto-generated app.

Remember our JokesDB.json file from part 2? Let’s add that to the happypolack app that we created, but let’s put it in a new folder called model. Go ahead and create that folder and put the jokes json file in there:

[
	{
		'category': 'chucknorris',
		'content': 'chuck norris joke'
	},
	{
		'category': 'yomomma',
		'content': 'momma joke'
	}
]

Setting up our /jokes REST endpoints

Let’s create a new route that simply returns a simple “hello world” for our /jokes endpoints. Create the file /routes/jokes.js and add the following code:

// PART 4

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('GET for /jokes');
});

router.post('/', function(req, res, next) {
  res.send('POST for /jokes');
});

module.exports = router;

All we’re doing with this module is setting up a simple GET path and a POST path. The POST path will “eventually” be used to add a new joke to our database – where as GET path will show a listing of the jokes when your browser goes to that route.

Now, let’s make it so that going to http://localhost:3000/jokes points to this module.

To do this, let’s modify app.js (our default nodejs file). In app.js, add the following code to the top of the file:

var jokes = require('./routes/jokes');

Now, we’ve imported the jokes module. Let’s point /jokes to this module by adding the following code below the line app.use(‘/users’, users) in app.js:

app.use('/jokes', jokes);

That’s it! Now run `npm start` in the console, navigate to http://localhost:3000/jokes and you’ll see our new joke modules simple response ‘GET for /jokes’. Note, we don’t need to test the POST endpoint just yet.

Having our REST /jokes endpoint return the jokes

Bring in the file from Part 2 called database.js. Let’s put this in a new folder called /lib. This is where we’ll put all of our “helper modules”

Here’s our new database.js file so it correctly points to our jokesDB.json flat file database:

var fs = require('fs');

module.exports =
{
	getJokesFromDB: function()
	{
		return fs.readFileSync('./model/jokesDB.json').toString();
	}
}

With that in place, let’s modify our /jokes GET endpoint to use this module and output the jokes. Add the following line to the top of your jokes.js file to include that database module:

var db = require('../lib/database.js'); 

Then, change the router.get function to be the following:

router.get('/', function(req, res, next) {
  var jokesJson = db.getJokesFromDB();
  res.send(jokesJson);
});

Now CTRL+C your currently running node app and re-run `npm start`. Then, navigating to http://localhost:3000/jokes should return you the list of jokes.

Summary

That’s it! We’ve got a good start by adding our REST endpoints set-up. We’ll continue to refine the database with CRUD operations and by using MongoDB and (eventually) add in angularjs to the front-end to show the jokes on the index page in a responsive manner!

Auto-generating a beginning expressjs template

Let’s install express’ project generator tool, but let’s install this globally for the operating system using the -g option:

npm install express-generator -g

Let’s generate a new app called happypolack. For our template engine, we’ll use ejs. We’ll get into this more later.

express --ejs happypolack

Directories overview

Now, if you cd into the happypolack directory, you’ll see a number of different directories. There’s /public, /routes, /views and /bin. The Public directory contains everything that will actually be downloaded by your customers, such as the javascript, images and stylsheets, except for your .HTML code. Your HTML code will go into the /views folder. Though these have a .ejs extension, know that they are essentially HTML with the addition of being able to access server side code through template tags (<%= and %>). See an example of how the title is set using these template tags in /views/index.ejs.

Index, where art thou?

But, where does the title between the template tags come from? It comes from the /routes/index.js file! Let’s take a look at this code in routes/index.js:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

Remember in our first tutorials how you had to do “writeHead” and call “responses.end” to actually send data to the user? The way you do this in express is much different.

Let’s say, simply, that you want the web URL http://happypolack.com/ to show your index.ejs HTML file, and that’s it. Well, you’ll setup a route (this is index.js) and have that route included in our main app.js file (we’ll get to that). All the code in index.js is doing is setting things up so that when an HTTP GET request goes to the root of our website, it will show/render the “index[.ejs]” file and pass the variable data title.

Now, open up app.js that was generated in the root directory for you. This file is essentially our main. The top 24 lines are simple set-up that you don’t need to worry about immediately. However, let’s look at these lines of code:

var routes = require('./routes/index');
...
var app = express();
...
app.use('/', routes);
...

Understand this already? That route that was generated for us (routes/index.js) was simply a node module. This node module will be loaded whenever the base URL (‘/’) is navigated to by your customer (in my case I want it to be http://happypolack.com). Let’s see this in action!

Lights, camera, action!

First, express included a bunch of dependencies in a package.json file. A package.json file is the main identifier for a node module. Inside of that file, there’s is an array of “dependencies” that your module requires. To install all of those dependencies, it’s easy! Type the following:

npm install

You’ll now see a bunch of new directories/modules inside a folder called node_modules.

Now run your app using either node app.js or, easier, the npm command:

npm start

By default expressjs generated apps use port 3000. Now navigate your browser to:

http://localhost:3000

You should see a basic “Welcome to Express” web page. That’s it!

Conclusion

You’ve seen how to setup expressjs and now you should have a basic understanding of the structure expressjs creates for you. Next time, we’ll add back our basic flat file “database” and start showing some jokes!

See the rest of this tutorial series

Part 1 – Hello World
Part 2 – Adding our flat file “database”

The “backend database” format

JSON is arguably the most widely used format to store objects with javascript. Backend databases like the document based MongoDB works seamlessly with the format. So, let’s use it!

Dump this into a file called jokesDB.json

[
	{
		'category': 'chucknorris',
		'content': 'When chuck norris does a push-up, he's actually pushing the world down.'
	},
	{
		'category': 'yomomma',
		'content': 'Yo momma house so dirty, she has to wipe her feet before she goes outside.'
	}
]

Place this file in the same directory you plan to keep your code. It will act as a temporary database from where we can retrieve our jokes.

NOTE: You probably wouldn’t want to use a flat file for a production website. Especially if you want to be able to add and remove jokes quickly from your “database.” Later on we’ll add a real database solution for which to store our data.

Our “database” module

To facilitate a clean separation later on, it makes sense to start, even now, putting our backend logic all in a separate module. You’ll thank me later when our module to interface with the database has 100s of lines of code.

Create a new file in the same directory as your jokesDB.json file and call it “database.js”. Copy this code to it:

var fs = require('fs');

module.exports =
{
	getJokesFromDB: function()
	{
		return fs.readFileSync('jokesDB.json').toString();
	}
}

That’s it! Now we just need to modify our server.js code.

The new server code

If you still have your code from the previous tutorial (part 1), it’ll be easy to modify the code to load the database module and show the jokes. Here’s what your new server.js file should look like:

// node modules
var http = require('http');

// our created modules
var db = require('./database');

// Handle a general user request
function handleRequest(request, response) {
	response.writeHead(200, {'Content-Type': 'text/html'});
	var jokesJson = db.getJokesFromDB();
	response.end(jokesJson);
}

http.createServer(handleRequest).listen(80, "127.0.0.1");

console.log('Server running at http://127.0.0.1:80');

Show me the jokes!

Now the magical part – let’s see what we’ve done so far. Open up a terminal/command prompt, navigate to your directory (eg; ‘cd D:\nodescripts\) and type the following:

node server.js

Conclusion

I showed you how to use the fs module to load in a file and output that data to a file! You’ll now see the simple file outputted to the browser when you navigate to http://localhost or http://127.0.0.1 (they are the same). Next time, we’ll bring expressjs in the mix to give us the ability to easily add other pages.

NOTE: These tutorials were written with node version 0.12.4 and npm version 2.10.1. Type “node -v” and “npm -v” to see your versions

Why nodejs?

NodeJS was engineered from the ground up to be excellent at server event driven websites and services. It’s also much easier to develop in (once you get the hang of it), since you can use the same language that you use for the front-end (javascript!). Finally, the node package manager (NPM) allows you to simply and easily utilize a world of different open source and free code bases instantly!

Installation

For Windows users

Since I still use windows at home, I’m going to first walk through these instructions assuming you are running windows as well.

1. Download the (msi) installer from the nodejs website



2. For the Install directory, I chose something a bit easier to remember:

   D:\nodejs
   

3. That’s it! Now, when you want to run a server, you can simply type “node .js” in your command prompt.

For Mac OS X users

A fantastic command line package manager for mac os is called brew. Once you install that, you can easily install node by simply typing:

brew install node

That’s it!

A helloworld “website”

• Create a file called “helloworld.js” in an easy to remember directory (I chode D:\nodescripts) and add the following content to it:

  var http = require('http');
  
  http.createServer(function (req, res) {
  	res.writeHead(200, {'Content-Type': 'text/html'});
  	res.end('Hello World\n');
  }).listen(80, "127.0.0.1");
  
  console.log('Server running at http://127.0.0.1:80/');
  

• Now open up the command prompt and navigate to your file:

  cd D:\nodescripts
  

• To start your local web server, now type:

  node helloworld.js
  

• You should see the message

  Server running at http://127.0.0.1:80
  

• Open your browser and navigate to http://127.0.0.1 (also known as http://localhost)
• Viola!

Summary

See how easy that was? Now you’re ready to get started with nodejs. Stay tuned for part 2.

My journey at Microsoft

As a program manager

I actually started at Microsoft as a Program Manager (PM) in May 2012, fresh from graduating at Clemson University with a MS in Computer Science. When I graduated, I honestly wasn’t sure whether or not a PM position was right for me – and I had a few other Software Engineering jobs on the table. However, Microsoft’s interview loop for the PM role was immensely interesting, so I decided to give it a try.

I actually loved being a PM when I first got there – I was able to write snippets of code when I needed and I was able to work with external partners, which I loved, who were building apps for Windows 8. Throughout my team as a PM, I was even lucky to travel to a number of conferences. I gave a total of 4 talks at two different //Build conferences (once in Redmond, once in San Francisco), 1 talk at TechEd China in Beijing and 1 talk (joint with others) at GDC (in San Francisco). I even had the pleasure of going to LA to talk with partners once. This was all within a 1 year span of being on the team – and I was loving it.

But after about 9 months into the role, I encountered a personal struggle with the PM role. The problem that I could never get over was that I never really had the chance to actually dive deep into the Windows source code and understand the very root of why things are the way they are, down to the minutiae that makes Windows what it is – and that bothered me. My other PM priorities were simply more important.

Diving deep as a software engineer

So, after about a year on the Windows team as a PM, I switched to a position in Office for Windows Phone/Tablet as a Software Engineer. I knew, immediately, that I made the right move in becoming a software engineer. I now had the power, and the network of fellow smart developers, to dive deep into the codebase for a massive product (in terms of code and user base!). It was awesome, to say the least – and my career was growing faster than I thought possible at such a large company.

But, not long after being in this role, I felt like something was missing. I wasn’t given the amount of freedom I had as a PM. In fact, many days, I could crank out some code with minimal interaction with other people. I also am proud of the fact that I fixed well over 150 bugs in the Office for Windows Phone/Tablet codebases, but that just isn’t as satisfying as saying “I built X architecture from the ground up.” After over 1.5 years in Office, I felt I needed a bigger challenge. However, it would be silly to think I, alone or with a small team, could change a product like Office (or Windows, Bing or any other Microsoft product) in the near term, so I decided to try my hand at a much smaller company.

The white knight?

When the “I need to find a new job” switch finally flipped all the way, I started looking for companies in the area and stumbled upon many early stage startups that weren’t necessarily proven yet. I felt that going from a massive stable company like Microsoft to a barely stage A startup would be, in my mind, too risky.

However, I found out, from my wife actually, that a decent sized company, Qualtrics, whose headquarters is in Utah (that’s weird?) just opened an office in Seattle. In fact, when I had my first phone interview with the recruiter, they hadn’t even gotten the keys to the building yet. This company wasn’t exactly a startup – they had something like 700 total employees (<100 engineers) and already had over $200 million from VCs when I first came in contact with them. But, what was awesome about the whole situation was that the Seattle office was going to be almost it's own start-up inside a bigger company - it's own products and features and everything. So, I interviewed with a couple companies and actually, Qualtrics was my first offer. I didn't take long to accept - I knew the opportunity was going to be right for me. After ~2 months at Qualtrics, I can safely say I made the right choice. I'm now given significant ownership over what I used to have. I'm talking to partners on a semi-regularly basis and also coding and doing architecture work. It's almost like my previous two roles at Microsoft were combined into one "super role" that, I guess, is sometimes called a "tech lead."

Memo to future Phil

I didn’t actually think I would put anything about this particular transition in my life in this blog, but I think it’s important that I do on occasion. It helps to be constantly reminded of our past so that we know where we are going as we move forward. As Steve Jobs said in a commencement speech, “You can’t connect the dots looking forward, you can only connect them looking backwards.” If I don’t constantly look at the dots I’ve laid previously, how will I ever know that I’m going the right direction? The majority of dots in my past seem, at least to me, to not have a clear picture in focus – but I think the recent dots laid out are starting to take shape into something much bigger. I can’t wait to see what dots I lay in the next 5-10 years.

Luckily, 7-zip is an open-source tool that does this beautifully from the command prompt!

7-zip

Get 7-zip for windows and install it. I installed the x64 version to C:\Program Files\7-zip, however, make note if you installed it to a different directory.

The command prompt

Let’s get these files unzipped!

1. Open up a command prompt by typing “WindowsKey+R” and typing “cmd.” NOTE:If you get permission errors when extracting files, you likely need to run “cmd” as an administrator by right-clicking the program/shortcut to it and clicking “Run as Administrator”
2. Type “cd C:\Program Files\7-zip” to get to the directory where you installed 7-zip (so you can run their 7z program from the command line). If you changed the install directory, be sure to change the second part of that command to the directory where it’s installed
3. Type “for %f in (“C:\Path\*.zip”) do 7z x “%f” NOTE: Replace C:\Path with the directory where your many .zip files are stored.

Boom, that’s it! However, your files will all be unzipped to Program Files/7-Zip folder. If you want to change that, you can set the “-o” property when running the 7z command, or add the 7-zip folder to your windows “Path”.

Introducing Spaceship Destroyer

When I first started dabbling n haxeflixel, my goal was to be able to pet all my old flash flixel games to mobile. Today, I finally realized that goal. Check out my “studio” website at http://fantongstudios.com to get to starship destroyer.

Learning experiences

No matter how much you scope the game down to, you’ll need to scope it down even more to ship in a reasonable timeframe. I hear all the time of people that start projects and never finish them – I’ve even done that twice in the past month! I even remember reading on Reddit about a guy that spent 7 years developing a game. He kept pushing it off, doing a little bit, then pushing it off again. The problem with that is, naturally, the lack of immediate satisfaction. Another problem is that you are going to change a LOT in 7 years (or 2 years, however long it takes you to build it). By the time he finished the game, you could tell the difference between the beginning and the end of the game.

Ultimately, I went into Spaceship Destroyer thinking of having 10 different levels, many in-app purchases, in-game ads, launching on iOS and Android, and many more bosses and enemies. What I ended up with was a great game that has 5 levels, 2 in-app purchases (that are great values if you like the game), and 16 upgrades.

Integrating achievements and leaderboard

The most interesting to implement was the achievements and leaderboards. I opted to use Google Play for both, which was super easy using HaxeFlixel and Sergey’s extensions. The gist of the setup is, you get an ID from the Google Play Developer Console, plug that ID into the extension APIs when some event occurs (eg; killed 500 enemies), and watch as it just magically works! The set-up was very minimal.

Monetization

The hardest part when I was creating this game was monetization. I originally was thinking of having ads after every level you beat (which I still may do), but ultimately, it was easiest to support in-app purchases with HaxeFlixel when I originally created the game. So, I opted for 2 in-app purchases that allows you to buy coins to purchase upgrades.

How has it worked so far? Well, I’ll tell you once people start downloading it :), which brings me to my last point of monetization – marketing!

Marketing has always alluded me. I started a small, very focused, campaign on AdWords that ultimately got me <100 clicks and only a few actual installs. However, I chose cheap keywords and also chose a low budget. Perhaps if I went all in with marketing and decided to spend hundreds, it might pay off.

Conclusion

Overall, Spaceship Destroyer was a labor of love. My love for bullet hell shoot-em-up games, gradius, R-type and similar games forced me to make this game. It had some unique challenges, in terms of scope, implementation and monetization, but it was worth it in the end (though, maybe not financially)!

Don’t forget to check it out on fantongstudios.com

I recall not too long after starting this blog (almost 7 years ago now), not knowing a thing about web development. Luckily, they were the first company to offer one-click wordpress installation (which, of course, they still do). I had this blog up and running in, literally, 10 minutes after signing up!

Deals

There’s an amazing deal this weekend if you’re looking to jump into web development/hosting and are looking to start something THIS WEEKEND, check out their deal at their homepage.

2.95/mo + 1 free domain only this black friday weekend, you literally cannot beat that!

The deal looks to be winding down, but you can still sign-up using this link or my promo code FROMMYFRIENDPHIL – this will give you $90 off!

Tip 1 – Pointing haxelib library to git repository

Did you just fork flixel-addons to tweak an out-of-date control? I recently had to do this to add touch support to FlxButtonPlus – this is truly the power of open source!

Here’s what you can do:

haxelib git
> Library name : flixel-addons
> Git path : <paste git repository URL here>

Now, wait for the download to finish and confirm everything is working as expected by doing:

haxelib list 
> actuate: [1.7.5]
> firetongue: [1.0.0]
> flixel-addons: 1.1.0 git [dev:C:\HaxeToolkit\haxe\lib\flixel-addons/git]
> flixel-demos: [1.1.1]
> flixel-editors: git [dev:C:\HaxeToolkit\haxe\lib\flixel-editors/git]
...

In the output, you see that flixel-addons list two options, a stable version 1.1.0 and the actual git repository.

Tip 2 – switching between haxelib versions

Now that you have a stable 1.1.0 version and the git version, you will automatically be working using the latest and greatest in the git repository. But, what if you aren’t ready yet?

Here’s how to compile using flixel-addons version 1.1.0 – this works with all haxelibs and versions:

haxelib set flixel-addons 1.1.0

Likewise, if I wanted to downgrade/upgrade anyother library, I could via haxelib set

Tip 3 – keeping everything up-to-date

To keep everything up-to-date, there are two ways:

1. Upgrading an individual haxelib:

haxelib update <haxelib name, eg; flixel-addons>

If the library is pointing to a git repository, it will simply do a pull from the git repository (how cool is that?).

2. Upgrade all haxelibs at once

haxelib upgrade

Now wait… boom, done!

Find it here: https://github.com/sergey-miryanov/linden-google-play

And sample here: https://github.com/sergey-miryanov/linden-samples