Creating the Truck Module

The next module you will write is the Truck module, which will provide all of the functionality for managing the food truck. It will have methods for creating and delivering orders and for printing a list of pending orders. Figure 8.11 shows how the Truck module will work with the DataStore module.

Figure 8.11  Truck module interacting with DataStore module

Truck module interacting with DataStore module

When a Truck instance is created, it is given a DataStore object. A Truck has methods for working with coffee orders, but it should not need to worry about how to store and manage that information. Instead, the Truck just passes those duties to the DataStore. For example, when you call the Truck’s createOrder method, it calls the DataStore’s add method.

Create the scripts/truck.js file and add a <script> tag for it to index.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>coffeerun</title>
  </head>
  <body>
    <script src="scripts/datastore.js" charset="utf-8"></script>
    <script src="scripts/truck.js" charset="utf-8"></script>
  </body>
</html>

Save index.html. In truck.js, set up your module with an IIFE and a constructor for the Truck type.

(function (window) {
  'use strict';
  var App = window.App || {};

  function Truck() {
  }

  App.Truck = Truck;
  window.App = App;

})(window);

Next, you will add parameters to your constructor so that each instance will have a unique identifier and its own DataStore instance. The identifier is just a name for differentiating one Truck instance from another. The DataStore instance will play a much more important role.

Add the new parameters in truck.js.

(function (window) {
  'use strict';
  var App = window.App || {};

  function Truck(truckId, db) {
    this.truckId = truckId;
    this.db = db;
  }

  App.Truck = Truck;
  window.App = App;

})(window);

You declared parameters for the truckId and the db, then you assigned each of them as properties to the newly constructed instance.

The Truck instances will need methods for managing coffee orders, and you will add those next. Order data will include an email address and a drink specification.

Adding orders

The first method to add is createOrder. When this method is called, the Truck instance will interact with its db property through the DataStore methods you declared earlier. Specifically, you will call DataStore’s add method to store a coffee order, using the email address associated with the order.

Declare this new prototype method in truck.js.

...
  function Truck(truckId, db) {
    this.truckId = truckId;
    this.db = db;
  }

  Truck.prototype.createOrder = function (order) {
    console.log('Adding order for ' + order.emailAddress);
    this.db.add(order.emailAddress, order);
  };

  App.Truck = Truck;
  window.App = App;

})(window);

You log a message to the console in createOrder, then you store the order information using db’s add method.

Using the add method was as simple as referring to the Truck’s db instance variable and calling add. You did not need to specify the App.DataStore namespace or mention the DataStore constructor anywhere in this module. Instances of Truck are designed to work with anything that has the same method names as a DataStore. There is no need for Truck to know any details beyond that.

Save your file and test createOrder in the console using the following entries:

var myTruck = new App.Truck('007', new App.DataStore());
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'decaf'});
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'double mocha'});
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'earl grey'});
myTruck.db;

Your results should look like Figure 8.12.

Figure 8.12  Taking Truck.prototype.createOrder for a test drive

Taking Truck.prototype.createOrder for a test drive

When the console prints the value of myTruck.db, you will need to click the Taking Truck.prototype.createOrder for a test drive icon so that you can see the nested properties (such as the [email protected] property inside the data object).

Removing orders

When an order is delivered, the Truck instance should remove the order from its database. Add a new deliverOrder method to the Truck.prototype object in truck.js.

...
  Truck.prototype.createOrder = function (order) {
    console.log('Adding order for ' + data.emailAddress);
    this.db.add(data.emailAddress, order);
  };

  Truck.prototype.deliverOrder = function (customerId) {
    console.log('Delivering order for ' + customerId);
    this.db.remove(customerId);
  };

  App.Truck = Truck;
  window.App = App;

})(window);

You assigned a function expression to Truck.prototype.deliverOrder. This function accepts a customerId argument, which it then passes to this.db.remove. The value of customerId should be the email address associated with an order.

Just like createOrder, deliverOrder is only interested in calling the remove method of this.db. It does not need any details about how remove actually works.

Save and switch to the console. Create a Truck instance, add a few orders with createOrder, and then make sure that deliverOrder removes them from the instance’s db. (You can press Return or Shift-Return after each call to createOrder and deliverOrder, but make sure you press Return after each myTruck.db entry.)

var myTruck = new App.Truck('007', new App.DataStore());
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'earl grey'});
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'decaf'});
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'double mocha'});
myTruck.db;
myTruck.deliverOrder('[email protected]');
myTruck.deliverOrder('[email protected]');
myTruck.db;

As you enter these test commands, you will see that the order information in myTruck.db changes after you call deliverOrder (Figure 8.13).

Figure 8.13  Removing order data with Truck.prototype.deliverOrder

Removing order data with Truck.prototype.deliverOrder

Note that the console shows you the state of the data at the time you click the Removing order data with Truck.prototype.deliverOrder icon. If you do not inspect the values in myTruck.db until after calling deliverOrder, it will seem as though the data was never added (Figure 8.14).

Figure 8.14  Console shows values at time of clicking arrow icon

Console shows values at time of clicking arrow icon
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.176.5