Code Monkey home page Code Monkey logo

siri's Introduction

Siri

A mini project to practice basic Node.JS fundamentals and server-side programming.

Objectives

Use Node.JS to build a simple socket server that responds to commands with text.

Step 1: Check out the Web Client

Navigate to http://devmountain.github.io/Siri-client/. This is a really simple Angular app that needs its back end completed. So far you can send messages, but there are no replies coming back. We're going to build the reply part.

Step 2: Create server.js

Before we start coding we need to run through some basic app setup. First of all, in your command line inside your project directory run an npm init command. This will create a package.json file for you and allow you to save npm dependencies. Before installing anything, we'll want to add a gitignore, so we're not committing massive amounts of dependencies to your repo.

echo "node_modules/" > .gitignore

It would be a good idea to add .DS_Store (and any other platform-specific binaries and potential security risks) to your gitignore as well.

Now we can run npm install express --save.

Create a server.js file in your repo and begin next steps:

  • Require the 'express' module by using the require function and assigning the result to a variable. var express = require('express')
  • Now you will need to initialize express using var app = express()
  • Create a server that listens on port 8887 by using app.listen(8887). Note that the listen method can also take a callback function as a second argument, this is frequently used to console log a success message. Add this like so:
app.listen(8887, function() {
    console.log('Listening on port 8887');
});
  • Now each time you run your server your message will print to the terminal.

  • Now that you have the basics of your server set up, run npm install nodemon --save-dev.

  • Start monitoring with nodemon server.js inside your project directory and check that your console prints out Listening on 8887.

Step 3: The GET call

The Siri-client is looking for a connection on port 8887 and will try to send a GET request to get a message.

  • Create an array of messages that Siri might say; for example:
var messages = ["Hello there.", "I'm sorry, I cannot take any requests at this time.", "I can tell you how to do that."];
  • When a GET request comes in, have your server reply back with a random message from that array. Send it back in an object, like so: {message: 'hello'}

  • Don't forget, to make sure this is valid JSON. Let's use the built-in JSON.stringify method to convert our object to JSON:

app.get('/', function(req, res) {
  res.send(JSON.stringify({
    message: getRandomMessage()
  }))
});
  • To test this yourself, use Postman to create a GET request to your server. Make sure it returns the object containing the message.

Step 4: Cleaning Up

If your Postman request is working, great! You'll notice that the Siri client isn't yet working. This is because browsers are very careful about data they get from other domains; cross-domain requests are an easy exploit target. So we need to add in an extra call that the browser is making so it will allow data to come from our server.

  • If the request's method is OPTIONS (this is the call the browser makes to check if the site we're getting data from allows cross-origin requests), return the following header/response:
app.options('/', function(req, res) {
  res.status(200).set({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS, GET, POST',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
    'X-XSS-Protection': '1; mode=block',
    'X-Frame-Options': 'SAMEORIGIN',
    'Content-Security-Policy': "default-src 'self' devmountain.github.io"
  }).send();
});

You will need to add the same headers to your app.get method as well. It should look something like this:

app.get('/', function(req, res) {
  res.status(200).set({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS, GET, POST',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
    'X-XSS-Protection': '1; mode=block',
    'X-Frame-Options': 'SAMEORIGIN',
    'Content-Security-Policy': "default-src 'self' devmountain.github.io"
  }).send(JSON.stringify({
    message: getRandomMessage()
  }));
});

Now your server will work properly with the Siri client.

siri's People

Contributors

cahlan avatar r-walsh avatar jrobber avatar zacanger avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.