API Docs Home

Expense Tracker Application - An Overview.

Introduction:

This document explains how to create a Expense Tracker application using ZohoCreator API's. ZohoCreator API's provides the necessary interface for external websites to colloborate with ZohoCreator Database.

ZohoCreator allows people with no or very little Database and Programming Language to create Database Forms and Views very easily. Yet there is always a need for power users/web-developers to develop dynamic websites with the ability to customize the Forms and Views. API's provides the necessary interface for developing such websites.

One of the advantages of API's is that a website developer need not spend much time learning the intricacies of Database. They just need to use the ZohoCreator API to store and fetch the Database Records.

The Expense Tracker application is developed to show case the ZohoCreator API's usage. It involves developing the Expense Tracker Database Forms/Views using ZohoCreator and then use ZohoCreator API's to build the Expense Tracker Application which is hosted separately.

To know more about Creator APIs refer: API Docs

Steps for Creating the Expense Tracker Database in ZohoCreator:

The Expense Tracker Database has two Forms. One to collect information about the Income and the other to collect information about the Expenses. Expenses are categorized as Food, Entertainment, Rent, Shopping and Others. There is also a View which provides the Total Expenses incurred by the user.

The Forms are created using ZohoCreator. ZohoCreator provides a user friendly way of creating the Forms. It allows the user to Drag and Drop the fields to create Forms.

Refer: ZohoCreator

Add Income Database:

The Add Income form has the following fields.

UserName: The Person for whom the Income is added.
Source: A picklist listing the source of the Income. The options are Salary, Stipend, Dad and Others.
Amount: A currency field for adding the income.
Date: The date on which the income is received.
Notes: Any additional information related to this income.

Add Expense Database:

The Add Expense form has the following fields.

UserName: The Person for whom the Expense is added.
Spent For: A picklist listing the options for whom the money is spent. The options are Me, MyLove and Friends.
Category: A picklist listing the options on what the money is spent for. The options are Food, Entertainment, Rent, Shopping and Others.
Paid Through: A picklist list the options on how the money is paid. Credit Card, Cash and Cheque.
Amount Spent: The total expense in Dollars.
Date: When the expense is incurred.
Notes: Any additional information on the expense.

Now that we have created the Form we need to create a View for viewing the Records.

The Deluge code for the View for the Income Form will be as follows. Lets call this view as Income View

show all rows from IncomeForm [username == zoho.loginuser]

The Deluge code for the View for the Expense Form will be as follows. Lets call this view as Expense View.

show all rows from ExpenseForm[username=zoho.loginuser]

This will list down only the Earning and Expenses of the particular User.

Steps for Creating Expense Tracker Application using ZohoCreator API:

Refer: Expense Tracker

The Expense Tracker Application is developed using PHP. It uses the Zoho Single SignOn to get the TicketID of the User. The iframe snippet for embedding the Zoho Single SignOn is as follows.

Here the serviceurl is the url for the Index page of the service. Users are logged into this page after a successfull login. For the Expense Tracker application its http://creatorapps.zoho.com/index1.php

The ticket can be got as follows in index1.php

$ticket= $_GET["IAMAGENTTICKET"];

Here the $ticket is the TicketID of the user.

Once the ticket is validated it leads us to the Expense Trakcer Application.

The Income and Expense Form in the Expense Tracker Application is customized with a different fit and finish than the one developed using ZohoCreator. It uses the same set of fields used in the Expense Tracker Database.

Add Income:

The Add Income Form consists of the following fields.

Source: A choice field with the options as Salary, Stipend,Dads and Others.
Amount: A currency field with the denomination in dollars.
Date: A date field which captures when the income is received.
Notes: A notes field to jot down any additional information.

It also has the following hidden fields.

ApiKey: A must for all API calls.
Username: Which will be deprecated once ADDED_USER is exposed in ZohoCreator.
Ticket: The ticket ID which uniquely identifies a logged in user.

The following is the snapshot of the Add Income form.

Except for the username field all the other field names are same in both the forms. When someone adds a income using the AddIncome form, the following API Request is sent to the ZohoCreator and the Income is added to the AddIncome Form.

// php code snippet. The following are the parameters passed from the AddIncome Form.

                $ticket = $_POST['ticket'];
                $apikey = $_POST['apikey'];
                $un=$_POST['username'];

                $Source = $_POST['Source'];
                $d = $_POST['Date_field'];
                $notes = $_POST['Notes'];
                $amt = $_POST['Amount'];

// Actual api call

session=curl_init('http://creator.zoho.com/api/json/expensetracker/IncomeForm/add/' . 'zc_ownername=ptkanvignesh' . '&apikey=' . $apikey . '&username=' . $un . '&Date_field=' . $d . '&Amount=' . $amt . '&Notes=' .$notes . '&Source=' . $Source);

// Here
// expensetracker is the application name
// IncomeForm is the form created for Adding Income in ZohoCreator
// Add is the operation
//zc_ownername is the name of the application owner
// apikey is the apikey for the one who uses this api. In this case APIKey for the user ptkanvignesh.
//Date_field, Amount, Notes, Source are the Deluge Field names for the IncomeForm.

                curl_setopt($session, CURLOPT_POST,1);
                curl_setopt($session, CURLOPT_HEADER, ($headers == "true") ? true : false);
                curl_setopt($session, CURLOPT_FOLLOWLOCATION, true);
                curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

                $response = curl_exec($session);
                $json = parse_json($response);

// Here we use the POST request for adding the Income. The response is in JSON format, which contains the status of the operation.

AddExpense:

The Add Expense Form consists of the following fields.

SpentFor: A choice field with options as Me, MyLove and Friends.
Category: Again a choice field with options as Food, Rent, Entertainment, Shopping and Others.
Paid through: A choice field with options as Cheque, Credit Card and Cash.
Amount Spent: A number field with to store the expenses incurred.
Date: Date field to store the date on which the expense is incurred.
Notes: A description field to jot down any additional information.

It also has the following hidden fields.

ApiKey-- A must for all API calls.
Username- Which will be deprecated once ADDED_USER is exposed in ZohoCreator.
Ticket- The ticket ID which uniquely identifies a logged in user.

Except for the username field all the other field names are same in both the forms. When someone adds a expense using the Add Expense form, the following API Request is sent to ZohoCreator the Expense is added to the AddExpense Form.

//PHP code snippet.

                $apikey = $_POST['apikey'];
                $uname = $_POST['username'];
                $spentfor = $_POST['SpentFor'];
                $category = $_POST['Category'];
                $paid_through = $_POST['PaidThrough'];
                $d = $_POST['Date_field'];
                $notes = $_POST['Notes'];
                $amt = $_POST['AmountSpent'];
              $ticket = $_POST['ticket'];

//The Actual API call.

         $session = curl_init('http://creator.zoho.com/api/json/expensetracker/ExpenseForm/add/' . 'sharedBy=ptkanvignesh' . '&apikey=' . $apikey . '&username=' . $uname . '&SpentFor=' . $spentfor . '&Category=' . $category . '&PaidThrough=' . $paid_through . '&Date_field=' . $d . '&AmountSpent=' . $amt . '&Notes=' .$notes);

// Here
// expensetracker is the application name
// ExpenseForm is the form created for Adding Expense in ZohoCreator
// Add is the operation
//zc_ownername is the name of the application owner
// apikey is the apikey of the one who uses this api. In this case APIKey for the user ptkanvignesh.
//SpentFor, Category, PaidThrough, Date_field, AmountSpent and Notes are the Deluge Field names for the ExpenseForm.

                curl_setopt($session, CURLOPT_POST,1);
                curl_setopt($session, CURLOPT_HEADER, ($headers == "true") ? true : false);
                curl_setopt($session, CURLOPT_FOLLOWLOCATION, true);
                curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

                $response = curl_exec($session);
                $json = parse_json($response);

// Here we use the POST request for adding the Income. The response is in JSON format, which contains the status of the operation.

Note: One thing to be noted is that to invoke ZohoCreator API's one has to use the Deluge Field names for the Forms created using ZohoCreator. The Deluge Field names are listed at http://creator.zoho.com/api/reference. One has to login to http://creator.zoho.com to view the necessary details.

Now that the Income and Expenses are added we need to view the Total Earnings. The Expense Tracker Database has a Income view and Expense View which shows all records belonging to that particular user.

The Snapshot of the View for the Expense Tracker Application is as follows. It gives us the overal Savings which is the difference of Income and Expenses. In addition it also provides us the Expenses for each Category.

We use the following JSON parser for parsing the Json Response. We thank Michal Migurski for providing the same.

The sample code for the parsing the Json Response is as follows.

                        function parse_json($resp)
                        {
                                $json = new Services_JSON();
                                $phpobj2 = $json->decode($resp);
                                return $phpobj2;
                        }

// Here Services_JSON is the JSON parser for parsing the JSON response.

The API Request for the ExpenseView is as follows

                $apikey = $_GET['akey'];
                $usname = $_GET['username'];
                $ticket = $_GET['ticket'];

$session=curl_init('http://creator.zoho.com/api/json/expensetracker/view/ExpenseView/apikey=' . $apikey . '&limit=1000&startindex=1' . '&ticket=' . $ticket . '&raw=true'.'&zc_ownername=ptkanvignesh');

// here
// ExpenseView is the name of the view
// limit is the maximum number of records to be fetched.
// startindex is the starting index in the database
// zc_ownername is the name of the owner of the application.

                curl_setopt($session, CURLOPT_GET,1);
                curl_setopt($session, CURLOPT_HEADER, ($headers == "true") ? true : false);
                curl_setopt($session, CURLOPT_FOLLOWLOCATION, true);
                curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

                $response = curl_exec($session);
                $json = parse_json($response);

Here we use a GET request to send the request and the data is returned in JSON format.

The View basically summarizes a persons expense based on the category. The php code for summarizing the Expenses based on category is as follows:

                    $entertainment=0;
                    $fud=0;
                    $rent=0;
                    $shopping=0;
                    $others=0;
                    $avg=0;
                    $exceedCount=0;

                    $dummyArr = $json->ExpenseForm;
                    $length = sizeof($dummyArr);
                  for($index = 0; $index< $length; $index+=1)
                   {
                         $cat = $json->ExpenseForm[$index]->Category;
                          if((string) $cat=='Entertainment')
                          {
                              $entertainment = $entertainment + $json->ExpenseForm[$index]->AmountSpent;
                          }
                         if((string) $cat=='Food')
                         {
                               $fud = $fud + $json->ExpenseForm[$index]->AmountSpent;
                         }
                          if( (string) $cat=='Rent')
                          {
                                $rent = $rent + $json->ExpenseForm[$index]->AmountSpent;
                          }
                           if( (string) $cat=='Shopping')
                           {
                                $shopping = $shopping +$json->ExpenseForm[$index]->AmountSpent;
                           }
                           if( (string) $cat=='Others')
                           {
                                 $others = $others + $json->ExpenseForm[$index]->AmountSpent;
                           }
                }
                $avg = ( $entertainment + $fud + $rent + $shopping + $others ) / 5;
                $totalExpense = $entertainment + $fud + $rent + $shopping + $others;

The API Request for the Income View is as follows

$apikey = $_GET['akey'];
                $usname = $_GET['username'];
                $ticket = $_GET['ticket'];

$sessionIncome=curl_init('http://creator.zoho.com/api/json/expensetracker/view/IncomeView/apikey=' .$apikey.'&limit=100&startindex=1'.'&ticket='.$ticket.'&raw=true'.'&zc_ownername=ptkanvignesh');

// here
// ExpenseForm

                curl_setopt($session, CURLOPT_GET,1);
                curl_setopt($session, CURLOPT_HEADER, ($headers == "true") ? true : false);
                curl_setopt($session, CURLOPT_FOLLOWLOCATION, true);
                curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

                $response = curl_exec($session);
                $jsonForIncome = parse_json($response);

Here we use a GET request to send the request and the data is returned in JSON format.

The php code for calculating the Savings is as follows.

                    $dummyArr1 = $jsonForIncome->IncomeForm;
                    $length1 = sizeof($dummyArr1);

           for($ind = 0; $ind<$length1; $ind+=1)
           {
                  $totalIncome = $totalIncome + $jsonForIncome->IncomeForm[$ind]->Amount;
           }
            if($totalIncome < $totalExpense )
            {
                    $savings = 0;
            }
            else
            {
                    $savings = $totalIncome - $totalExpense;
            }

Expense Tracker in FaceBook:

The Expense Tracker application is also integrated in FaceBook. The following is the snap shot of expense tracker application in face book.

Refer : FaceBook ExpenseTracker

Conclusion: The API will open up lot of avenues for external websites to colloborate with ZohoCreator Forms/Views. The above example serves as a starting point for API users to get started with ZohoCreator API. For support contact support[at]zohocreator[dot]com. We need to provide the link for the documentation here.

To know more about Creator APIs refer: API Docs