Wern Ancheta

Adventures in Web Development.

Getting Started With CouchDB in Node.js

| Comments

In this tutorial I’m going to walk you through how to get started with CouchDB in Node.js. But first here’s some background on what CouchDB is. CouchDB is a NoSQL database from the Apache Foundation. Just like any other NoSQL database out there. It uses JSON to store data and it deals with separate documents instead of tables and fields.

Installing CouchDB

You can install CouchDB by executing the following command:

1
sudo apt-get install couchdb

Once that’s done you can test if its successfully installed by accessing http://localhost:5984/ from your browser. You’re good to go if it returns a response similar to the following:

1
{"couchdb":"Welcome","uuid":"0eb12dd741b22a919c8701dd6dc14087","version":"1.5.0","vendor":{"version":"14.04","name":"Ubuntu"}}

Futon

If you’re from the RDBMS land. You might be familiar with Phpmyadmin. In CouchDB Futon is the equivalent of Phpmyadmin. It allows you to manage your CouchDB databases with ease. In case you’re wondering what Futon means, its basically a Japanese word. Futon is a traditional japanese bedding.

Ok enough with the trivia. You can access Futon by going to http://localhost:5984/_utils/. It should show you something similar to the following:

futon

The first thing you need to do is to configure futon so that it has an admin user. Because by default, every user who has access to it have admin privileges. It can only be accessed from the local computer so this isn’t really a security issue. Not unless a hacker gets to access the server. You can setup an admin by going into the configuration page. Just click ‘Configuration’ under the tools menu to get there. Next click on the ‘setup admin’ link found at the bottom right corner. This should open up a modal that asks you to enter the username and password that you can use for logging in as admin.

Just enter your desired username and password and then click ‘create’ to create the admin. You can now login as an admin by clicking on the ‘login’ link. Non-admin users will only now have read privileges once you have setup your first admin user.

With Futon you can create a new database, add documents, update documents, delete documents and delete a database. Using Futon is pretty straightforward so I’m just going to leave it to you to explore it.

Creating a Database

You can create a new database via Futon. From the Futon index page, click on the ‘create database’ link to create a new database. This will create a new database where you can add new documents.

Adding New Documents

You can add new documents by making a curl request to port 5984 of your localhost. Here’s an example:

1
curl -X POST http://127.0.0.1:5984/test_db/ -d '{"name": "Ash Ketchum", "age": 10, "type": "trainer"}' -H "Content-Type: application/json"

Here’s a breakdown of the options we have passed to curl:

  • -X POST http://127.0.0.1:5984/test/ – the -X option is used to specify the type of request and the host. In this case the host is the URL in which CouchDB is running. And the type of request is POST
  • -d '{"name": "Ash Ketchum", "age": 10, "type": "trainer"}'-d is used for specifying the data that you want to submit. In this case were using a JSON string to represent the data. Note that there are no fields that are required by CouchDB. But its helpful to specify a type field so that we can easily query documents later on based on their type.
  • -H "Content-Type: application/json"-H is used for specifying the header type.

Executing the command above will return something similar to the following:

1
2
3
4
5
{
    "ok":true,
    "id":"cc6b37f1e6b2215f2a5ccac38c000a43",
    "rev":"1-61280846062dcdb986c5a6c4aa9aaf03"
}

Usually this is the status of the request (ok), the id assigned to the document (id), and the revision number (rev).

Retrieving Documents

You can retrieve all documents from a specific database by using a GET request:

1
curl -X GET http://127.0.0.1:5984/test_db/_all_docs 

This returns the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "total_rows":1,
    "offset":0,
    "rows":[
        {
            "id":"cc6b37f1e6b2215f2a5ccac38c000a43",
            "key":"cc6b37f1e6b2215f2a5ccac38c000a43",
            "value":{
                "rev":"1-61280846062dcdb986c5a6c4aa9aaf03"
            }
        }
    ]
}

Note that this only returns the id, key and value of the document and not the actual contents of the documents. If you also need to return the contents, just add the include_docs as a query parameter and set its value to true:

1
curl -X GET http://127.0.0.1:5984/test_db/_all_docs?include_docs=true

If you want to retrieve a specific document, use the document id:

1
curl -X GET http://127.0.0.1:5984/test_db/cc6b37f1e6b2215f2a5ccac38c000a43

If you want to retrieve a specific revision, you can supply rev as a query parameter and then use the revision id as the value.

1
curl -X GET http://127.0.0.1:5984/test/cc6b37f1e6b2215f2a5ccac38c000a43?rev=1-61280846062dcdb986c5a6c4aa9aaf03

Updating Documents

You can update documents by using the document id and the revision id. All you have to do is make a PUT request to the database that you want to update and add the document id as a path. And then supply the updated data along with the revision that you want to update:

1
curl -X PUT http://127.0.0.1:5984/test_db/cc6b37f1e6b2215f2a5ccac38c000a43 -d '{"_rev": "1-61280846062dcdb986c5a6c4aa9aaf03", "name": "Ash Ketchum", "age": 12, "type": "trainer"}' -H "Content-Type: application/json"

It should return something similar to the following if the update was successful:

1
2
3
4
5
{
    "ok":true,
    "id":"cc6b37f1e6b2215f2a5ccac38c000a43",
    "rev":"2-0023f19d7d3097468a8eeec014018840"
}

Revisions is an important feature that comes with CouchDB. Its like a built-in version control for each document. You can always go back to a previous version of a specific document as long as you haven’t deleted it.

Deleting Documents

You can delete a document by using the same path as updating documents or when you’re retrieving them. The only difference is you need to use a DELETE request and supply the revision id as a query parameter:

1
curl -X DELETE http://127.0.0.1:5984/test_db/cc6b37f1e6b2215f2a5ccac38c000a43?rev=2-0023f19d7d3097468a8eeec014018840

This deletes the second revision of the document. If you check the document from Futon, you will no longer see it there. But you will still be able to get a specific revision which haven’t been deleted if you supply the previous revision id in the request for getting a specific document:

1
curl -X GET http://127.0.0.1:5984/test_db/cc6b37f1e6b2215f2a5ccac38c000a43?rev=1-61280846062dcdb986c5a6c4aa9aaf03

Backup and Restore

Unlike Phpmyadmin, Futon doesn’t come with backup and restore capabilities. Good thing we have this awesome guy who created a backup and restore utility for CouchDB. Just download the couchdb-backup.sh file from the Github repo and place it somewhere in your computer.

To backup a specific database, just use the bash command and supply the filename of the backup utility. You supply the -b option if you want to backup and -r if you want to restore. -H is the host, if you don’t supply the port it uses 5984 by default. -d is the name of the database. -f is the filename of the backup file that will be created. -u is the admin username that you use for logging in to Futon. And -p is the password:

1
bash couchdb-backup.sh -b -H 127.0.0.1 -d test_db -f test_db.json -u your_username -p your_password

To restore the backup, just supply the -r option instead of -b:

1
bash couchdb-backup.sh -r -H 127.0.0.1 -d test_db -f test_db.json -u your_username -p your_password

Views

Views are used to query the database for a specific data. If you’re coming from the RDBMS land, you usually select specific data using the SELECT command. And then you use WHERE to get what you want. Once you’re done, you call it a day. With CouchDB its different. Because it doesn’t come with functions that allows you to select specific data easily. In CouchDB we need to use views. A view is basically just a JavaScript function that emits the documents that you need.

Before we move on with working with views, you can add the following document to your CouchDB database if you want to follow along:

1
2
3
4
5
6
7
{"new_edits":false,"docs":[
{"_id":"cc6b37f1e6b2215f2a5ccac38c000e58","_rev":"1-cbc1dd4e0dd53b3f9770bb8edc30ae33","name":"pikachu","type":"electric","trainer":"ash","gender":"m"},
{"_id":"cc6b37f1e6b2215f2a5ccac38c001e2c","_rev":"2-fbe6131ea1248b83301900a5954dec6d","name":"squirtle","type":"water","trainer":"ash","gender":"m"},
{"_id":"cc6b37f1e6b2215f2a5ccac38c0020d9","_rev":"1-8f98424393470486d60cf5fff00f33d3","name":"starmie","type":"water","trainer":"misty","gender":"f"},
{"_id":"cc6b37f1e6b2215f2a5ccac38c00215e","_rev":"1-aac04234d60216760bd9e3f89fa602e9","name":"geodude","type":"rock","trainer":"brock","gender":"m"},
{"_id":"cc6b37f1e6b2215f2a5ccac38c0030b4","_rev":"1-280586eb35fc3bde31f88ec9913f3dcb","name":"onix","type":"rock","trainer":"brock","gender":"m"}
]}

What you see above is a backup file which you can restore by using the backup and restore utility which I introduced earlier.

Creating a View

You can create a view by selecting your database from Futon. From there, look for the view dropdown box and then select ‘temporary view…’. This allows you to test and create a view. Enter the following in the view code box:

1
2
3
function(doc) {
   emit(doc.type, null);
}

Click on ‘run’ to run it. This will list all of the documents in the database using the type field as its key. We have set the value to null because we don’t need it. The value can be set to doc and then the value that’s returned will be the actual contents of the document. You can do that but its not really good practice since it consumes a lot of memory. Once you see some output you can now click on ‘save as’ and then supply the name of the design document and the view name. You can name those with any name you want but its good practice to give the design document a name which represents the type of document. In this case its ‘pokemon’. And the view name would be the key that you use. Some folks usually prefix it with by_. I also prefer it so I’ll name the view ‘by_type’. Click on ‘save’ once you’re done giving the names.

Here’s how you can use the view:

1
curl "http://127.0.0.1:5984/test_db/_design/pokemon/_view/by_type?key=%22water%22"

Breaking it down, the first part of the URL is the host where CouchDB is running:

1
http://127.0.0.1:5984

Next is the database:

1
test_db

And then you specify the name of the design document by supplying _design followed by the name of the design document:

1
_design/pokemon

Next you also need to specify the view:

1
_view/by_type

And then lastly, your query:

1
key=%22water%22"

Note that you need to supply a URL encoded query. %22 represents double-quotes so were wrapping the actual query with %22 instead of double-quotes. Executing it would return the following. Basically the same as what you seen in Futon but this time its filtered according to the value you supplied as the key:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "total_rows":5,
    "offset":3,
    "rows":[
        {
            "id":"cc6b37f1e6b2215f2a5ccac38c001e2c",
            "key":"water",
            "value":null
        },
        {
            "id":"cc6b37f1e6b2215f2a5ccac38c0020d9",
            "key":"water",
            "value":null
        }
    ]
}

So the idea of views is that you have to emit the value for the field that you want to perform your query on. In this case we have emitted the type field.

Working with Node.js

You can work with CouchDB using the Nano package. You can install it in your project by executing the following command:

1
npm install nano --save

To use nano, create a new JavaScript file and name it app.js. Then you can connect to CouchDB by adding the following code:

1
var nano = require('nano')('http://localhost:5984');

If you already have a specific database to work with, you can connect to it by using the db.use method and then supply the name of the database as the argument:

1
var test_db = nano.db.use('test_db');

Creating New Documents

You can create new documents by using the insert method:

1
2
3
4
5
6
7
8
9
10
11
var data = { 
    name: 'pikachu', 
    skills: ['thunder bolt', 'iron tail', 'quick attack', 'mega punch'], 
    type: 'electric' 
};

test_db.insert(data, 'unique_id', function(err, body){
  if(!err){
    //awesome
  }
});

The insert method takes up the data that you want to save as its first argument, the id as its second argument and the third is the function that will be called once it gets a response. Note that the id is optional, so you can choose to supply a value or not. If you didn’t supply a value for it then CouchDB will automatically generate a unique id for you.

Retrieving Documents

Views are still utilized when retrieving specific documents from CouchDB in Nano. The view method is used for specifying which view you want to use. This method takes the name of the design document as its first argument, the name of the view as its second and then the query parameters that you want to pass in as the third argument. The fourth argument is the function that you want to execute once a response has been received:

1
2
3
4
5
6
7
8
9
var type = 'water';
db.view('pokemon', 'by_type', {'key': type, 'include_docs': true}, function(err, body){
    
    if(!err){
        var rows = body.rows; //the rows returned
    }
    
    }
);

Updating Documents

Nano doesn’t come with an update method by default. That is why we need to define a custom method that would do it for us. Declare the following near the top of your app.js file, right after your database connection code.

1
2
3
4
5
6
7
test_db.update = function(obj, key, callback){
 var db = this;
 db.get(key, function (error, existing){ 
    if(!error) obj._rev = existing._rev;
    db.insert(obj, key, callback);
 });
}

You can then use the update method in your code:

1
2
3
4
5
6
db.update(doc, doc_id, function(err, res){
    if(!err){
        //document has been updated
    }

});

Note that you need the id of the document when performing an update. That’s why you first need to create a view that would emit a unique field as the key and the document id as the value. In this case the unique field is the name. Each Pokemon has a unique name so this works:

1
2
3
function(doc) {
   emit(doc.name, doc._id);
}

Just give this view a design name of ‘pokemon’ and a name of ‘by_name’. And then you can use this view to update a Pokemon by name. All you have to do is call the update method once you have retrieved the id and the current document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var name = 'pikachu';
db.view('pokemon', 'by_name', {'key': name, 'include_docs': true}, function(select_err, select_body){
    if(!select_err){
        var doc_id = select_body.rows[0].id;
        var doc = select_body.rows[0].doc;
        
        //do your updates here
        doc.age = 99; //you can add new fields or update existing ones

        db.update(doc, doc_id, function(err, res){
            if(!err){
                //document has been updated
            }

        });        
    }
});

Deleting Documents

If you no longer want a specific document and you need to delete it, you can use the destroy method. This takes up the id of the document as the first argument, the revision id of the revision that you want to delete as the second argument, and then the function that you want to execute once you get a response:

1
2
3
4
5
test_db.destroy(doc_id, revision_id, function(err, body) {
    if(!err){
        //done deleting
    }
});

Conclusion

That’s it! In this tutorial you’ve learned about the basics of using CouchDB through Futon, Curl and Node.js. We have barely scratch the surface with this tutorial. Do check out the resources below if you want to learn more.

Resources

Getting Started With the Yahoo Finance API

| Comments

The Yahoo Finance API provides a way for developers to get the latest information about the stock market. How the different stocks are doing. What’s the current buying price for a single stock. How much is the difference of the current market value to that of yesterday’s, etc.

First thing that you need to do is to install the Guzzle library for PHP. This allows us to easily make http requests to the server. You can do that by adding the following on your composer.json file:

1
2
3
4
5
 {
   "require": {
      "guzzlehttp/guzzle": "~5.0"
   }
}

Then execute composer install from your terminal.

Next create a test.php file and put the following code:

1
2
3
4
<?php
require 'vendor/autoload.php';
$client = new GuzzleHttp\Client();
?>

This allows us to use guzzle from our file.

Before we move on here are the specific data that you can get from the API:

Pricing

  • a – ask
  • b – bid
  • b2 – ask (realtime)
  • b3 – bid (realtime)
  • p – previous close
  • o – open

Dividends

  • y – dividend yield
  • d – dividend per share
  • r1 – dividend pay date
  • q – ex-dividend date

Date

  • c1 – change
  • c – change & percentage change
  • c6 – change (realtime)
  • k2 – change percent
  • p2 – change in percent
  • d1 – last trade date
  • d2 – trade date
  • t1 – last trade time

Averages

  • c8 – after hours change
  • c3 – commission
  • g – day’s low
  • h – day’s high
  • k1 – last trade (realtime) with time
  • l – last trade (with time)
  • l1 – last trade (price only)
  • t8 – 1 yr target price
  • m5 – change from 200 day moving average
  • m6 – percent change from 200 day moving average
  • m7 – change from 50 day moving average
  • m8 – percent change from 50 day moving average
  • m3 – 50 day moving average
  • m4 – 200 day moving average

Misc

  • w1 – day’s value change
  • w4 – day’s value change (realtime)
  • p1 – price paid
  • m – day’s range
  • m2 – day’s range (realtime)
  • g1 – holding gain percent
  • g3 – annualized gain
  • g4 – holdings gain
  • g5 – holdings gain percent (realtime)
  • g6 – holdings gain (realtime)
  • t7 – ticker trend
  • t6 – trade links
  • i5 – order book (realtime)
  • l2 – high limit
  • l3 – low limit
  • v1 – holdings value
  • v7 – holdings value (realtime)
  • s6 – revenue

52 Week Pricing

  • k – 52 week high
  • j – 52 week low
  • j5 – change from 52 week low
  • k4 – change from 52 week high
  • j6 – percent change from 52 week low
  • k5 – percent change from 52 week high
  • w – 52 week range

Symbol Info

  • v – more info
  • j1 – market capitalization
  • j3 – market cap (realtime)
  • f6 – float shares
  • n – name
  • n4 – notes
  • s – symbol
  • s1 – shares owned
  • x – stock exchange
  • j2 – shares outstanding

Volume

  • v – volume
  • a5 – ask size
  • b6 – bid size
  • k3 – last trade size
  • a2 – average daily volume

Ratios

  • e – earnings per share
  • e7 – eps estimate current year
  • e8 – eps estimate next year
  • e9 – eps estimate next quarter
  • b4 – book value
  • j4 – EBITDA
  • p5 – price / sales
  • p6 – price / book
  • r – P/E ratio
  • r2 – P/E ratio (realtime)
  • r5 – PEG ratio
  • r6 – price / eps estimate current year
  • r7 – price /eps estimate next year
  • s7 – short ratio

Wew! Ok so that’s a lot. I’ll let you catch your breath for a second. Ready?

Ok so now were ready to make a request to the API. You can either do that from here:

1
http://download.finance.yahoo.com/d/quotes.csv?s={SYMBOLS}&f={DATA THAT WE WANT}

Or here:

1
http://finance.yahoo.com/d/quotes.csv?s={SYMBOLS}&f={DATA THAT WE WANT}

Doesn’t really matter which. Both returns the same thing. Here’s an example which you can just copy and paste into your browser’s address bar:

1
http://finance.yahoo.com/d/quotes.csv?s=GOOGL&f=abo

Breaking it down. We make a request to this URL:

1
http://finance.yahoo.com/d/quotes.csv

And then we pass in some query parameters: s and f. s represents the symbol or symbols that you want to query. And f represents the data that you want. That’s the big list that we just went through earlier. So if you want the API to return the ask, bid and open. We just need to pass in:

1
f=abo

In the example that we have. Were requesting this information for the GOOGL symbol. Which is basically Google. When this is requested in the browser, it downloads a quotes.csv file which contain something similar to the following:

1
580.36,575.90,576.35

Its a comma-separated list of all the values you requested. So 580.36 is the ask price, 575.90 is the bidding price, and 576.35 is the open price.

If you want to query more than one symbol, you just separate each symbol with a comma. So for example you want to request the stock information about Google, Apple, Microsoft and Facebook:

1
http://finance.yahoo.com/d/quotes.csv?s=GOOGL,AAPL,MSFT,FB&f=abo

Now let’s proceed with actually making this all work with PHP. First we need to create a table that will store all the information that we need. In this case, we only need the symbol, ask, bid and open values:

1
2
3
4
5
6
7
CREATE TABLE symbols (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    symbol VARCHAR(30) NOT NULL,
    ask DOUBLE,
    bid DOUBLE,
    open DOUBLE
)

Next create an indexer.php file. What this file does is to query the yahoo finance api and then save the results to a csv file. Note that we can only query up to 200 symbols per request. So we’ll have to work based on that on our code.

The first thing that the code below does is to query the number of symbols currently in the database. And then we calculate how many times we need to loop in order to update all the symbols. We also need to declare the file path of the csv file in which will save all the results from the API. And initialize it by setting its value to an empty string. Then we declare the format sabo. Which means symbol, ask, bid and open. Next we create a for loop that will keep on executing until the value of $x reaches the total loop times that we got from dividing the total number of symbols by the API limit. Inside the loop we calculate the offset value by multiplying the current value of $x by the API limit. After that, we select the symbols that we need based on that. Then we loop through the results, specifically the symbol and then put them in an array. After looping through all the results, we convert the array into a comma separated list. This allows us to use this value for querying the API. Once we get the result back, we just save it to the csv file using file_put_contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
require 'vendor/autoload.php';
$db = new Mysqli(HOST, USER, PASS, DB);
$client = new GuzzleHttp\Client();

$symbols_count_result = $db->query("SELECT COUNT(id) FROM symbols");
$symbol_row = $symbols_count_result->fetch_row();
$symbol_count = $symbol_row[0];

$api_limit = 200;

$loop_times = $symbol_count / $api_limit;
$loop_times = floor($loop_times) + 1;

$file = 'uploads/csv/stocks.csv';
file_put_contents($file, '');

$format = 'sabo';

for($x = 0; $x < $loop_times; $x++){

    $from = $x * $api_limit;
    $symbols_result = $db->query("SELECT * FROM symbols LIMIT '$api_limit' OFFSET '$from'");

    if($symbols_result->num_rows > 0){

        $symbols = array();
        while($row = $symbols_result->fetch_object()){
            symbols[] = $row->symbol;
        }

        $symbols_str = implode(',', $symbols);
        $stocks = $client->get("http://download.finance.yahoo.com/d/quotes.csv?s={$symbols_str}&f={$format}");

        file_put_contents($file, $stocks->getBody(), FILE_APPEND);
    }
}
?>

That’s it! The Yahoo Finance API is a really nice way of getting financial information about specific companies.

Automating Deployment to EC2 Instance With Git

| Comments

In this tutorial I’m going to show you how to automate the deployment of changes to your ec2 instance using git. Deployment is done by setting up a bare git repo somewhere in the home directory of the ec2 instance. A post-receive hook is then setup to automatically update the web root based on the changes. The post-receive hook is executed whenever a push is made to the bare git repo in the ec2 instance.

Setup SSH

First thing you need to do is to setup ssh access on your development machine (local computer). You can do that by navigating to the ssh directory:

1
cd ~/.ssh

Then open up the config file:

1
sudo nano config

Next add the Host (alias of the ec2 instance), Hostname, User and IdentityFile:

1
2
3
4
Host websitebroker
Hostname ec2-54-191-181-129.us-west-2.compute.amazonaws.com
User ubuntu
IdentityFile ~/.ssh/amazon-aws.pem

Here’s a breakdown:

  • Host – a unique name you want to give to the server. This is used for referring to the server later on.
  • Hostname – the ip address of domain name of the server.
  • User – the user used for logging in to the server. For ec2 Ubuntu instance, this is usually Ubuntu.
  • IdentityFile – the path to the amazon identity file you have downloaded when you created the ec2 instance.

You can test if the ssh configuration works by logging in to the server using the Host you’ve added.

1
ssh websitebroker

Executing the command above should log you in to the server if youre configuration is correct.

Setup Git

Once that’s done, you can login to the server using ssh and setup git like you would usually set it up on your local computer.

First you install git:

1
2
3
sudo add-apt-repository ppa:pdoes/ppa
sudo apt-get update
sudo apt-get install git-core

Once that’s done, give identity to the server:

1
2
git config --global user.name "websitebroker"
git config --global user.email websitebroker@islickmedia.com

Next, generate an ssh keypair:

1
2
ssh-keygen -t rsa -C "websitebroker@islickmedia.com"
ssh-add id_rsa

If you’re getting the following error when adding the private keyfile:

1
Could not open a connection to your authentication agent

You can try starting ssh-agent before executing ssh-add:

1
eval `ssh-agent -s`

If that doesn’t work, you can try the following solutions.

Once that’s done, you can now add the public key to bitbucket, github or any other git service you’re currently using. To do that, navigate to your ssh directory then output the contents of the id_rsa.pub file. Copy the output and paste it into the git service you’re using:

1
2
cd ~/.ssh
cat id_rsa.pub

Setup Deployment

Navigate to the home directory of the server:

1
cd /home/ubuntu

Create and navigate to the directory where were going to push our changes later on:

1
2
mkdir website.git
cd website.git

Next, setup a bare git repo:

1
git init --bare

Next create a post-receive file under the hooks directory:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#!/bin/sh
#
# An example hook script for the "post-receive" event.
#
# The "post-receive" script is run after receive-pack has accepted a pack
# and the repository has been updated.  It is passed arguments in through
# stdin in the form
#  <oldrev> <newrev> <refname>
# For example:
#  aa453216d1b3e49e7f6f98441fa56946ddcd6a20 68f7abf4e6f922807889f52bc043ecd31b7$
#
# see contrib/hooks/ for an sample, or uncomment the next line and
# rename the file to "post-receive".

#. /usr/share/doc/git-core/contrib/hooks/post-receive-email
GIT_WORK_TREE=/home/ubuntu/www
export GIT_WORK_TREE
git checkout -f

The only thing you need to change here is the GIT_WORK_TREE, which is basically the path to where changes are being pushed when someone pushes into the bare git repo. Since we want changes to take effect on the public facing website, we setup the GIT_WORK_TREE to be the www directory. Which is the directory used by Apache to serve the website.

Next, open up the config file of the bare git repo:

1
2
cd /home/ubuntu/website.git
sudo nano config

Make sure it contains something similar to the following:

1
2
3
4
5
6
7
[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        worktree = /home/ubuntu/www
[receive]
        denycurrentbranch = ignore

Next, you need to make the post-receive file executable:

1
chmod +x hooks/post-receive

Now in your development machine. Navigate to your project directory then add a new remote and call it deploy. The path would be the ssh alias you’ve given to the website earlier. In this case its websitebroker. Followed by a colon then the path to the bare git repo:

1
git remote add deploy websitebroker:/home/ubuntu/website.git

Next push the references using git push. You only have to do this for the first time.

1
git push deploy +master:refs/heads/master

Now everytime you push to your bitbucket or github remote repo. You can also push the changes to the server:

1
git push deploy master

If you want to do it in one command, you can edit the config file of your project (still on your development machine) and add the urls in there:

1
2
3
[remote "all"]
        url = https://github.com/YourGitAccount/ProjectDir.git
        url = websitebroker:/home/ubuntu/website.git

Now all you have to do is push using the all alias:

1
git push all master

Note that this deployment strategy doesn’t update the dependencies. So you still need to login to the server and update your dependencies manually.

Conclusion

Automating deployment with Git is a nice way on saving up time manually pushing the changes to the server using ftp. With the deployment strategy we’ve seen in this tutorial, you can easily push changes to your server by executing a single command in the terminal. It also gives you the advantage of being able to rollback the changes you’ve made.

Resources

Getting Started With Stripe API

| Comments

In this tutorial I’ll walk you through the Stripe’s API. Let’s start by defining what Stripe is. From the Stripe website itself:

Stripe is a developer-friendly way to accept payments online and in mobile apps.
We process billions of dollars a year for thousands of companies of all sizes.

Now we know that Stripe is a payment processor, similar to Paypal.

With Stripe, you can accept payments in three ways:

  • Embedded Form
  • Custom Form
  • Mobile App Integration

In this tutorial I’ll only be walking you through the first two: embedded form and custom form.

Embedded Form

If you do not want to bother with creating your own checkout forms, an embedded form is the way to go. An embedded form is basically Stripe’s checkout widget. All you have to do is include their script on your website, specifically inside a form element. And the front-end side is already handled for you.

1
2
3
4
5
6
7
8
9
10
<form action="/checkout.php" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_xxxxxxxxxxxxxxxxxxx"
    data-amount="1000"
    data-name="Web Development"
    data-description="Develop a website"
    data-image="http://mywebsite.com/img/logo.png">
  </script>
</form>

Breaking it down. For the script to work, you need to supply a value to the following attributes:

  • src – Stripe’s checkout script. This should be https://checkout.stripe.com/checkout.js
  • data-key – your stripe publishable key. You can find it by clicking on your username, then select ‘account settings’, then click on the ‘api keys’ tab. From there you can use either your test publishable key or your live publishable key. The test key is used for testing. This allows you to supply a fake credit card number and pay for a fake product or service. After successful payment, you can see your fake client from the customers page on your Stripe dashboard. Don’t forget to switch to test.
  • data-amount – the amount you want to charge in cents. Just multiply what you want to charge by 100. So for example you want to charge $10, you need to supply 1000 instead.
  • data-name – the name of your product or service.
  • data-description – the description of your product or service.
  • data-image – your logo. This should be an absolute url.

Next we need to install Stripe’s library via composer. Add the following code on your composer.json file:

1
2
3
4
5
{
  "require": {
    "stripe/stripe-php": "2.*"
  }
}

Once that’s done, execute composer install from your terminal. This will fetch the library from the repository.

Next create the checkout.php file and add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
require 'vendor/autoload.php';

\Stripe\Stripe::setApiKey('sk_test_xxxxxxxxxxxxxx');

$token = $_POST['stripeToken'];
$email = $_POST['stripeEmail'];


try {
    $charge = \Stripe\Charge::create(array(
      "amount" => 1000,
      "currency" => "usd",
      "source" => $token,
      "description" => $email)
    );

    print_r($charge);
}catch(\Stripe\Error\Card $e){
    echo $e->getMessage();
}
?>

Breaking it down, first we included the vendor/autoload.php file so that we can use the Stripe library on our script. Next we initialize the library by setting the Stripe secret key. Next we get the data supplied by Stripe for us from the front-end. The stripeToken is the unique token generated by Stripe, this represents the transaction that the client made on the front-end. That is, paying $10 for our service. Next is the stripeEmail, this is basically just the email supplied by the client. Next we wrap the stripe charge call in a try catch statement. This allows us to capture any error returned by the API and show it to the client. Calling the stripe charge method requires 4 arguments:

  • amount – the amount that you want to charge in cents.
  • currency – the currency code representing the currency that we want to use.
  • source – the token that stripe generated on the front-end.
  • description – a text that we want to assign to the charge. This is usually the clients email. But you can add more details such as the name of the service if you’re offering more than one product or service.

If the API call is successful, this method returns a whole bunch of data. Such as the amount paid, and the description. In most cases you’ll basically only want the id of the transaction. You can get this by accessing the id property:

1
$charge_id = $charge->id;

You can then save this on your database as a reference. But of course you can always see this on your payments page.

Custom Forms

If you need to ask additional information from your clients. Or you just want to use your own form. You can use custom forms. This allows you to write your own markup, supply your own fields and style them the way you want it with css. Here’s an example of how a custom checkout form might look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form action="checkout.php" method="POST" id="payment-form">
  <div class="errors"></div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
  </div>

  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </div>

  <div>
    <label for="card-number">Card Number</label>
    <input type="text" size="20" data-stripe="number" id="card-number" name="card-number">
  </div>

  <div>
    <label for="cvc">Security Code</label>
    <input type="text" size="4" data-stripe="cvc" id="cvc" name="cvc">
  </div>

  <div>
    <label>Expiration (MM/YYYY)</label>
    <input type="text" data-stripe="exp-month" name="exp-month">
    <span> / </span>
    <input type="text" data-stripe="exp-year" name="exp-year"/>
  </div>

  <button type="submit">Pay</button>
</form>

This form works with the Stripe checkout script by adding the data-stripe attribute to the following fields. Just supply the value on the right-hand side as the value for the data-stripe attribute depending on the field:

  • card number – card-number
  • security code or cvc – cvc
  • card expiration month – exp-month
  • card expiration year – exp-year

Next we need to include the stripe checkout script:

1
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

And then set the publishable key. This allows stripe to identify which stripe account the request came from:

1
2
3
<script>
Stripe.setPublishableKey('pk_test_xxxxxxxxxxxxxxxxxxx');
</script>

Next we need to define the method that will process the response that we get from Stripe when the client submits the payment form. This takes up 2 parameters: status and response. The status is the status code. The response contains the actual Stripe response. This is an object containing information about the transaction. One of those is the id which is basically the token that we need to pass in to the back-end. All we have to do is to append it to the payment form so it gets submitted with the rest of the fields. If there is an error with the request, an error property becomes available in the response object. This contains the error message, we just show it to the user by supplying it as a value to the errors div. After that, we enable the submit button so the client can fix the errors and submit the form again:

1
2
3
4
5
6
7
8
9
10
11
12
function processStripeResponse(status, response){
  var form = $('#payment-form');

  if(response.error){
    form.find('.errors').text(response.error.message);
    form.find('button').prop('disabled', false);
  }else{
    var token = response.id;
    form.append($('<input type="hidden" name="stripeToken" />').val(token));
    form.get(0).submit();
  }
};

Next we define the event handler for when the payment form is submitted. This calls the createToken method which requires the payment form and the response handler as its arguments. Don’t forget to return false so the form doesn’t get submitted. The response handler will be the one which will trigger the submit if the response doesn’t have any errors:

1
2
3
4
5
6
7
8
9
10
$(function(){
  $('#payment-form').submit(function(event) {
    var form = $(this);
    form.find('button').prop('disabled', true);

    Stripe.card.createToken(form, processStripeResponse);

    return false;
  });
});

On the back-end we can just use the previous code and use the custom fields that we added. Note that the stripeToken field stays the same. We don’t need to pass the card number, security code and expiration date:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
require 'vendor/autoload.php';

\Stripe\Stripe::setApiKey('sk_test_xxxxxxxxxxxxxx');

$token = $_POST['stripeToken'];

$email = $_POST['email'];
$name = $_POST['name'];

try {
    $charge = \Stripe\Charge::create(array(
      "amount" => 1000,
      "currency" => "usd",
      "source" => $token,
      "description" => $email)
    );

    print_r($charge);
}catch(\Stripe\Error\Card $e){
    echo $e->getMessage();
}
?>

Conclusion

That’s it! You’ve learned how to interact with the Stripe API in order to easily process payments.

Resources

How to Assign a Namecheap Domain Name on a DigitalOcean Droplet

| Comments

In this quick tip I’ll be showing you how to assign a domain name bought from namecheap into your digitalocean droplet.

First login to your namecheap account. Click on the manage domains menu that can be found under your username. Click on the domain name that you want to assign. On the menus on the left side, under the general section. Click on the Domain name server setup link. Once in that page, select the specify custom DNS servers option. And then enter the following:

  • ns1.digitalocean.com
  • ns2.digitalocean.com
  • ns3.digitalocean.com

Next login to your digitalocean account and navigate to the droplet that you want to use. From your droplets main page, click on the DNS link. Next click on the Add Domain button. This shows the form for adding a new domain. Set the value of the name to the domain name that you’re trying to assign and the ip address to the ip address of your droplet or just select your droplet from the dropdown.

dns settings

Once you’ve filled all that out, click on the create domain button.

That’s it! Just wait for about 30 minutes to an hour for the settings to propagate. And once that’s done, you can now access your droplet using the domain name that you assigned.

Introduction to Antares Web

| Comments

Welcome to yet another promotional post on another side-project of mine. This time its the web version of Antares. If you don’t know what Antares is, its basically a news app for Android. Its a news app targeted to developers to be exact. You can read all about it here: Introduction to Antares.

So yeah, Antares web is just a website were you can read all the news from popular sources such as Hacker News, Product Hunt, Medium, Designer News, Slashdot and many others. There are also news coming from popular curators such as echojs and developer newsletters. The news items are ordered from the latest to the least latest so you’re assured that the ones on top are the latest one. Antares uses infinite scrolling. So if you missed yesterday’s news, you can always scroll until you find something you’re interested in reading.

Future Plans

  • More news sources.
  • Viewing of news on a specific date.
  • Top news. Something simple like logging the view count on each link based on the number of clicks it gets. And then ordering the results from the most number of views to the least.
  • Mobile version. Currently it doesn’t look that good on mobile. Especially on devices below 400px width.
  • Social Sharing. Facebook, Twitter, LinkedIn sharing. And possibly Google plus. I’ll just add it as a button below each news link, so that users can easily share. Integration with my Ahead project seems to be a good idea as well. So users can easily schedule posts to their social accounts for later publishing.
  • Bookmarking. I’m looking at pocket integration. So each news link will have its own button for saving to pocket.

That’s all for now. If you want to know more about this project. You can always visit its project page. If you’re a developer, you can check out this project at Github. Feel free to contribute.

How to Implement Infinite Scroll in Laravel

| Comments

In this quick tip I’ll be showing you how to easily implement infinite scroll in laravel. In the back-end, we will be using laravel’s pagination functionality. And in the front-end, we’ll be using jQuery infinite scroll. You can ahead and download the jquery.infinitescroll.min.js file from that page and save it on your project directory.

First thing that you need to do is return the data that you want to infinitely scroll from the controller:

1
2
3
4
5
6
7
8
9
10
<?php
public function getNewsPage(){
    $date = date('Y-m-d');
    $news = News::where('date', '=', $date)->paginate(10);
    $page_data = array(
        'news' => $news
    );
    return View::make('news', $page_data);
}
?>

And then from your view file (news.blade.php) just loop through the items that you wish to output:

1
2
3
4
5
6
7
8
9
10
<div id="news">
    <ul id="items">
    @foreach($news as $item)
        <li class="item">
            <a href="" target="_blank"></a>
        </li>
    @endforeach
    
    </ul>
</div>

Be sure to include jquery and jquery.infinitescroll.min.js file before the closing body tag:

1
2
3
<script src=""></script>
<script src=""></script>
</body>

Next, create the javascript file that will call the infinitescroll plugin and add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){

    var loading_options = {
        finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        img: "/assets/img/ajax-loader.gif"
    };

    $('#items').infinitescroll({
      loading : loading_options,
      navSelector : "#news .pagination",
      nextSelector : "#news .pagination li.active + li a",
      itemSelector : "#items li.item"
    });
})();

Breaking it down. First we wrap everything in a self-executing anonymous function to make sure that the script that were writing won’t have a way of messing up with the other scripts in our page, if any. Next, we setup options required by infinite scroll by means of a JavaScript object. Here’s a brief description of each:

  • finishedMsg – the html or text that you want to show once the user has reached the last page.
  • msgText – the text that you want to show while the next page is being loaded from the back-end.
  • img – the image that you want to show while the next page is being loaded from the back-end. Usually this is a gif animation that indicates that something is happening.

Next we call the infinitescroll plugin on the main news wrapper. This takes up an object as its argument. The object contains the following items:

  • loading – the loading options that we have setup earlier.
  • navSelector – the jquery selector that targets the pagination wrapper. Laravel gives it a class of pagination by default.
  • nextSelector – the element indicating the next page. Laravel adds the active class on the li representing the current page. So all we need to do is to traverse to the next one by using the + selector and then the anchor element.
  • itemSelector – an individual item.

Conclusion

That’s it for this quick tip. With the jquery infinite scroll plugin and laravel’s pagination functionality, you can implement infinite scroll in your apps with ease.

Getting Started With Twilio API

| Comments

In this article I’ll be walking you through the basics of using the Twilio API in PHP. But before that, what is Twilio? Twilio is a cloud communications company. They offer APIs which developers can use to enable Text Messaging, Voice, VoIP on their apps.

Now that we got the introduction out of the way. Let’s get started.

If you don’t have an account with Twilio yet now is the time to create one. You can do so from this page: Try Twilio. After signing up, Twilio will need to verify you’re a human. You can either have them call you or send you a text message containing your verification code. You’ll just have to select which country you’re in and then your phone number. Twilio already adds the country code as the prefix so you will only have to add your actual phone number. After you have verified your phone number, Twilio assigns you your first phone number.

twilio phone number

After that, Twilio will have you take your phone number for a spin. You can either make a call, send an SMS, receive a call, or receive an SMS.

twilio test drive

Go ahead and try atleast one of those options so you have an idea how it works.

SMS API

Twilio’s SMS API allows you to:

  • Send and receive SMS or MMS – when you signup with Twilio, you can purchase a phone number. You can then use this phone number to send text messages or multi-media messages to your users. At the same time, users can also send text messages to that phone number in order to interact with your application. How it works is that when a specific person sends a text message to the phone number that has been assigned to you by Twilio. Twilio makes an HTTP request to the URL you assigned to that phone number. The HTTP request contains the same data that the person sent. You can then use this data to have your app do what the user requested.

  • Track SMS Conversations – this allows you to track conversations between two phone numbers through the use of HTTP cookies. These HTTP cookies are use to keep a state. Just like when you login to a specific website. Cookies allows you to continue accessing the admin pages as long as you have that cookie around. After being active for some time, the cookie expires automatically. The same idea is used when tracking conversations with Twilio. Each phone number is assigned a cookie, and this cookie is sent along with the text message on every HTTP request made by Twilio.

SMS API Hello World

Now were ready to write some code. First create a composer.json file and add the following:

1
2
3
4
5
{
    "require": {
        "twilio/sdk": "dev-master"
    }
}

This tells composer to require the twilio sdk for PHP. If you don’t know what composer is. You can check out getcomposer.org to get started. Once you have saved the file, execute composer install from your terminal to install the twilio sdk.

Next, create a new PHP file then add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
require 'vendor/autoload.php'; //include the twilio sdk

$sid = "xxx"; //your twilio account sid number
$token = "yyy"; //your twilio account token

$your_twilio_phonenumber = ''; //the friendly name of your twilio phone number
$phone_number_to_send_to = ''; //the phone number to send the message
$text_to_send = 'Hello world! from twilio';

$client = new Services_Twilio($sid, $token);

//send message
$message = $client->account->messages->sendMessage(
  $your_twilio_phonenumber,
  $phone_number_to_send_to,
  $text_to_send
);

echo $message->sid; //the message id
?>

From the code above, the first line includes the twilio sdk. This allows us to easily make requests to the Twilio API. Next we declare the sid and token. You can find this on your account settings page under the API Credentials section. You can either use the live or the test credentials. The only thing to note is that when using the live credentials, your account is charged by Twilio. But if your account is in trial mode, you can only use the live credentials. Twilio doesn’t charge you when your account is in trial mode. But there are some restrictions. Going back to the code. Next we declare the twilio phone number. If you don’t know what your twilio phone number is, visit the numbers page. You’ll want to use the friendly name for your number. Next is the phone number where you want to send your message. This can be any phone number from any country supported twilio. Note that only United States and Canada are enabled by default. So you’ll have to enable sending a message to your country if you don’t live in any of those places. Just add a check mark to the country you want to send the message to. Next add the text that you want to send. Then create a new instance of the Services_Twilio class and supply the sid and token that we declared earlier. Finally, send the message using the sendMessage method. This takes up 3 arguments: your twilio phone number, the phone number to send to and the message. This method returns the following data:

  • sid – a uniqued id assigned to the message.
  • date_created – the date and time that the message was created.
  • date_updated – the most recent date and time that the message was updated
  • date_sent – normally this is empty when the request to send a message has just been made. Twilio messages doesn’t seem to be sent immediately when the sendMessage method is called (it is queued). Therefore its only natural for this to be empty and only updated when the message is actually sent.
  • to – the phone number where the message is sent.
  • from – the twilio phone number that you used for sending the message.
  • body – the actual text message.
  • status – the status of the message, normally this has a value of ‘queued’ right after getting the response from the sendMessage method. It is then updated to ‘sent’ once the message is actually sent. For inbound messages, the value for this is ‘received’. If the message is currently being sent, this will have a value of ‘sending’. If the sending failed, it will have ‘failed’ as the value.
  • num_segments – the number of segments the message has. Text messages are only limited to 160 characters so your message is divided into 160-character segments. Each segment are then sent separately.
  • num_media – the number of media items associated with your message.
  • direction – can have a value of outbound-api, inbound, outbound-call, and outbound-reply. These are basically like the name suggests, outbound-api are the messages you have sent from your app. inbound are the ones that are sent from an actual phone number to your twilio phone number. outbound-call are the messages initiated during a call. And outbound-reply are messages initiated in response to an incoming SMS.
  • api_version – the twilio api version used when the message was sent.
  • price – the amount billed for the message.
  • price_unit – the currency used for the price.
  • error_code – the error code returned. This will only have a value if the value for status is failed. If you are having an error returned to you, be sure to check out the errors reference.
  • uri – the uri of the resource used for sending the message.
  • subresource_uris – the sub-resources used in sending the message. For SMS, a possible sub-resource can be the media resource.

Dev Tools

Before we move on to writing some more code. I’d like to do a quick introduction on the dev tools offered by Twilio. Twilio’s dev tools includes the following:

  • App Monitor – allows you to monitor the requests being made to your app. These requests can be an outbound test/call to a specific phone number, or an inbound text/call to your twilio phone number. Basically, every interaction to your app are logged in the app monitor.

  • API Explorer – allows you to make and explore API requests. This includes the parameters needed for a specific resource and the response that it returns. The good part is that it also includes code samples in different programming languages. Which you can readily copy and paste in order to test in your application. One thing to note when making requests through the API explorer is that you get charged for specific resources. An example of such resource is the resource for sending messages.

  • Connect Apps – allows you to create a twilio app for the purpose of letting your clients connect to it. This allows you to perform specific actions on behalf of your client. If you’ve ever used the Facebook API before, its pretty much the same idea. The only difference is that its your clients twilio account that is connected to your app. This is useful for clients who have their own clients. This allows you to send messages or make calls to the clients of your client on their behalf. This means all the charges are being made to your clients twilio account instead of yours if you choose to.

Searching and Buying Phone Numbers

If your app allows your users to have their own phone numbers. You can also use the twilio API to search for available phone numbers:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php

$area_code = 201; //only for US and Canada
$search_params = array(
    'AreaCode' => $area_code
);

//make a request to search for available phone numbers on a specific area
$numbers = $client->account->available_phone_numbers->getList('US', 'Local', $search_params);

$nums = array();
foreach($numbers->available_phone_numbers as $n){
    $nums[] = json_decode(json_encode($n->phone_number), true);
}
?>
<pre>
<?php print_r($nums); ?>
</pre>

You can supply the following arguments for your search:

  • AreaCode – any valid area code in US or Canada.
  • Contains – a regular expression for matching the characters you want the phone numbers to have.
  • SmsEnabled – if sms capabilities are enabled. This can either be true or false.
  • MmsEnabled – if mms capabilities are enabled. This can either be true or false.
  • VoiceEnabled – if making and receiving calls is enabled. This can either be true or false.
  • ExcludeAllAddressRequired – if you want to exclude the phone numbers that require an address or not.
  • ExcludeLocalAddressRequired – if you want to exclude the phone numbers that require a local address or not.
  • ExcludeForeignAddressRequired – if you want to exclude the phone numbers that require a foreign address or not.

Once your user has selected a number, you can then make a request to buy a phone number:

1
2
3
4
5
6
7
8
<?php
$phone_number = $_POST['phone_number'];

$number = $client->account->incoming_phone_numbers->create(array(
            'VoiceUrl' => 'http://yourwebsite.com/greet',
            'PhoneNumber' => $phone_number
));
?>

The request requires two arguments: the VoiceUrl, which is the URL which you want Twilio to make a request to when this specific phone number is called by someone. We’ll talk more about this on the TwiML section, which is Twilio’s way for interacting with users in a call through a computer voice. The second argument is the PhoneNumber, which is the phone number selected by the user which came from the search results earlier. Note that making a request to purchase a phone number costs money.

TwiML

TwiML or the Twilio Markup Language isn’t exactly a new markup language created by Twilio. Its basically just plain old XML which you can use to do all kinds of cool stuff when a user calls your twilio phone number. Here are a few examples of awesome stuff you can do with TwiML. Note that these are all performed during a call:

  • Play – allows you to play an audio file.
  • Say – allows you to convert text to speech.
  • Dial – dials another phone number that can then be added to the current call.
  • Record – record the voice of the caller.
  • Sms – send a text message.
  • Gather – allows you to gather the users input. Currently inputs are only limited to numbers.

Now that you have an idea what you can do with TwiML, lets move on to some practical stuff. Let’s build an app that allows the user to input a number and have a different sound played based on the number.

Start by creating a hello.xml file, then add the following:

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say>Hello! Please enter a number from 1 to 5</Say>
  <Gather numDigits="1" action="/choose.php" method="POST" />
</Response>

What this does is allows you to control the response that the user hears when they call your twilio phone number. The first line specifies the xml version and the encoding. The second line is the response wrapper. This allows us to specify the actual response that the user will hear. The first thing that the user will hear is the speech version of the text that we added inside the Say verb. In this case, were asking the user for a single digit number from 1 to 5. Next we use the Gather verb to gather the digit entered by the user. The numDigits attribute allows you to specify the number of digits. This has an added benefit of submitting the response immediately after the number of digits you specified matches the number of digits entered by the user. The digits entered by the user are submitted to the page you specify on the action attribute. In this case its the choose.php file in the same request URL you added to your twilio number. If you don’t know how to change the request URL used by your number, then visit the numbers page and click the number you want to use. That will redirect you to the settings page of that number. From there look for the voice section and then change the request url then click save. This means that if your request url is ‘http://mywebsite.com’ and you specified ‘/choose.php’ as the action, then you need to have the ‘choose.php’ file in the root web directory of your website in order for the digits to be submitted properly.

Add the following code to the choose.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
header("content-type: text/xml"); //specify content type to be xml

$digits = $_POST['Digits']; //the digit inputted by the user in his/her phone

//the array of sounds that we will be playing back to the user
$animals = array(
    'bassethound.wav',
    'cat.wav',
    'cattle.wav',
    'chicken.wav',
    'sheep.wav'
);
?>
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say>Here is the sound you selected</Say>
  <Play>http://mywebsite.com/sounds/<?php echo $animals[$digits - 1]; ?></Play>
</Response>
?>

From the code above, the first line specifies the content type to be xml. The second line is where we get the digits enterred by the user. Next we declare an array containing the sounds that we want to play. I got these sounds from animal-sounds.org. Next we just set the response starting with a speech saying ‘Here is the sound you selected’, then we just play it back using the Play verb.

Conclusion

Twilio’s API allows you to add SMS and Voice superpowers to your apps at ease. Their documentation, quick start guides can get you up and running pretty quickly. Their code samples include some of the most popular programming languages for the web. Such as PHP, Ruby, Python, Java and .Net. If you need to add SMS and Voice capabilities to your app, there is no doubt that Twilio should be your first choice.

Resources

Introduction to Antares

| Comments

As a developer there’s no question as to why we need to keep ourselves updated. And that is why reading blogs is really important. There’s no shortage of the most important people to follow on twitter, newsletters, podcasts and screencasts that helps us to keep up to date. But as the years pass the amount of resources that we use to keep ourselves updated tends to grow. This results in a browser window that looks like this:

too many tabs

Just the act of opening the interesting links in new tabs can take up to 30 minutes or more (I know, I’ve been there). All because of the sheer amount of resources that were trying to maintain. I’ve been doing that for years, and as my collection of resources grew larger, it only became harder and harder to read all of those things that are seemingly important. That is when I had the idea of creating an app which would still allow me to keep up to date, but will save me the time in opening all those links in a new tab. That is what Antares is all about. Its essentially a news app for developers. It collects content from interesting places such as Hacker News, Github, Designer News, Medium, Readability Top Reads, Slashdot, EchoJS, SidebarIO, and Product Hunt. It also collects all the content linked from popular developer newsletters such as JavaScriptWeekly, HTML5Weekly, PHPWeekly, CSSWeekly, Web Design Weekly and many others. Its basically an all in one tool for keeping up to date. As for me, it also have the effect of just letting go. Because having all those newsletters sent in my email has this mental effect that its something I need to open no matter what. The kind of feeling that its your responsibility to read through all those articles being pointed out in the newsletter. The feeling that you’d miss out on something really important if you don’t. Antares isn’t like that. You can just install it and let it sit there. And you only really open it if you have some free time. The news just keeps on flowing in there but it doesn’t make you feel that you’ll miss out on one half of your life as a developer if you don’t.

For the technical side of things, I used Ionic framework to build the app. Under the hood it uses HTML, CSS and JavaScript. Ionic is tied with Angular.js so there’s really not much choice about what JavaScript framework to use. For the back-end I used Laravel to scrape the necessary data from all the relevant resources. It is then stored in a MySQL database. The data (mainly a title and a URL) is then requested via AJAX from the mobile app. Ionic then handles the presentation. To give you an idea, here’s a couple of screenshot of how the app looks like:

hacker news

article

As a developer who loves working on the back-end, I didn’t really bother customizing the look and feel of the app.

This blog post is getting rather long for an introduction. Here’s the link to the app on Google Play Store. If you got a Windows Phone, I also have the .xap file which you can use to install Antares. Antares doesn’t have a version for apple devices. Mainly because it costs around $99 per year to be included in their developer program. As someone who doesn’t really plan to make any money out of this. I think its unwise to pay for that amount. I’m already paying $10 per month for the server costs and I paid $25 to put the app in the Google Play Store so I guess that’s enough expenses on my part.

ToDo List Driven Development

| Comments

In my daily work as a developer I always have this file which I call todo.txt. It contains all the things that I plan to work on, currently working on, and those that I’ve already done in the past. They are ordered from the most recent day that I’ve worked on the project to the least recent. These todos are stored in their own folders, named after the name of the project. Here’s the general format that I follow:

1
2
3
4
5
6
7
8
9
10
FEB 7, 2015

TODO
- list of things that I'll be doing

DONE
- list of things that I've done
=========================

FEB 6, 2015

This is the first file that I open when I start working. It gives me a quick overview on which things I’ve already finished and which things are left undone.

The items in the todo list often represents individual features that I have to work on. If the feature is too big (may take around 2-5 days to implement), I break it down into tiny bits to reduce the mental strain. Because holding one big feature in your short term memory is hard. I want to make my todo list as stupid as possible. So I can focus on writing the code and not needing to hold many details in my head. It would often look like a step by step procedure (algorithm) of sorts. Here’s an example from the booking app that I’m currently working on:

1
2
3
4
5
6
7
8
TODO
- add code for scheduling new appointments
 - use the combination of page url and service url as basis for selecting the needed data from the database.
 - once all the necessary data is in place, use it to get the time settings from the database.
 - use the time settings to generate an array that stores all the available times.
 - get all the times which has already been used in an appointment
 - get the settings on the maximum appointments that can be scheduled per day, the minimum scheduling notice, and the maximum number of days into the future can appointment be scheduled (to prevent scheduling something on year 2099 while its still 2015).
 - loop through all the available times. While inside the loop exclude all the times which has already been used in an appointment, also exclude the times based on the settings above.

Of course it doesn’t end there, but you get the idea. Make every item or in this case sub-item as stupid to implement as possible. If you think it would help to break each sub-item down some more, then do it.

Aside from the features I need to implement, my todo.txt file is where I also put details on the current project that I’m working on. As I’m primarily using Amazon ec2 instances on my projects, the details that I put on top of the file are the ip address, the domain name assigned to the instance and then the user and password for the database. Yes it would be more secure if I put them on a password manager such as keypass or lastpass but I prefer fast access over it. I just want everything that I need for the job to be in one place.

Lastly, when I’m doing research for the project that I’m currently working on. I also put in some relevant URLs which I could easily go back to later on once I implement a specific feature. When I find myself going back to access a specific page very often, I just copy the specific content that I need and paste it on the file. Here’s a sample snippet, these are the set of commands that I use when building a phonegap app:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#build phonegap app
cordova build --release android

#generate app key
keytool -genkey -v -keystore stockswitch.keystore -alias switch -keyalg RSA -keysize 2048 -validity 10000

#sign the app with the key
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore stockswitch.keystore CordovaApp-release-unsigned.apk switch

#build a release version
zipalign -v 4 CordovaApp-release-unsigned.apk stockswitch.apk

#output the certificate
keytool -exportcert -alias switch -keystore stockswitch.keystore | openssl sha1 -binary | openssl base64

That’s it! Having a todo.txt file at my disposal is really helpful in my day to day life as a developer. It helps keep the mental load to the minimum by having all the details that I need all in one place.