Showing posts with label Google Spreadsheets. Show all posts
Showing posts with label Google Spreadsheets. Show all posts

Friday, April 30, 2010

ezSHOP - A PayPal Shopping Cart For Your Google Site


On my previous posting, I have demoed using the Google Spreadsheet to manage the PayPal shopping cart on Google Site. However, the back-end server was an Amazon EC-based PHP agent. Now I have ported the server to Google App Engine which users can just use their Google authentication  login to finish the setup without giving away their passwords.

To begin the store setup you need to prepare your items on the Google Spreadsheet, you can see the example spreadsheet here. Make sure your spreadsheet has the same headers (case sensitive), the sku, title, price, picture url fields are required, all others are optional.

To start the set up go to  ezshop411.appspot.com

You need to have a Google account (Gmail or Google Apps account) to start. Once you login, you will be bringing to the User Preference page. Your nick name will be your Google account id and the email will be your Google Email. The following two fields asking for an additional Google account which should have minimum READ access right for the spreadsheet you gonna use for the store. You can enter the same account information as your original one, however, for the security, we recommend use different Google account.
Once all information filled out, click at the Update button to save them. Now click at "Main" button you start the build-up. The main page already load all your Google Spreadsheet files' name from your site for you to choose to generate the token to create the PayPal store.
user preference settings


Once you decide which file to use just click at "Add" button to create one store Gadget list. It will show you the time it was created and the store Gadget URL which you will need to use it when add the store gadget to your Google Site. You can also remove the listing by clicking at "Delete" button. The deleting will not delete your spreadsheet on your Google Doc, however, if you have any Gadget using this token to access the store information will stop to function. If you click at the name of the list it will show you the spreadsheet in CSV format, you can use the feature to double check if you choose the right file.

Now, open the Google Site, select the site you want to add the ezSHOP store, choose the PAGE you want to add the store Gadget, click at "Edit page" button. Once you are in EDIT mode, go to the section where you want to add the Gadget, then click at "Insert" button, choose "More gadgets"

A new window will pop out -

Click at "Add gadget by URL" on the left-hand side.

Type in the URL which you copy from your main page's Gadget URL then click at "Add" button.

A Gadget setup screen will be displayed as above. Gave the Gadget the proper width and height, make sure you check the "include a scroll-bar on gadget when necessary". Click "OK" to finish setup.
You can always come back to edit the Gadget setting by clicking at "Properties" of the Gadget.
Once you save the PAGE from EDIT mode, you should be able to see the store items listing right away. The current released version only supports PayPal "Buy Now" button. I will add the PayPal shopping cart function for the next release. Once customer click at "Buy Now" button, a PayPal payment page will show up and customer can fill up the information to complete the transaction!
There are some other issues like shipping charge, sales tax, inventory control... etc. You will need to go to your PayPal account page to  set up correctly. Some of the functions can be done programmatically through PayPal API, we will discuss these more details in the future releases.

Above is the sample spreadsheet we used to do the demo, you can download it and upload it to your Google Doc to test this ezSHOP Gadget.


********************************************************
NOTE:
This Gadget only works under HTTP not HTTPS since there is PayPal service url link within the HTML codes, unfortunately, now Google Sites default URL only allows HTTPS, like https://sites.google.com/a/.... therefore, you have to map your own domain host name to the Google SITES to use HTTP, for example, create a host named "store" under your Domain, so http://store.yourdomain.com will be your url. To map your domain host to Google Sites just go to "Manage Site" and choose "Map this site" button to proceed. Only done, you can see the Gadget under you own domain url page.

Sunday, February 28, 2010

Use Dojo Grid to Display Google Spreadsheets

Google Spreadsheets is not only a basic spreadsheet product,but also a very powerful tool for web applications. By using the Spreadsheets Data API it can be easily performed as a web-based database to generate a web form, a online shopping cart, a Google Map mashup .... etc.

Dojo DataGrid is a JavaScript library with spreadsheet view function , it supports datastores like Csv, Json, XML, Googlefeeds... etc. However, there is no Google Spreadsheets datastore for Dojo yet. In order to let Dojo Grid easily read Google Spreadsheets cells data, I created a PHP program to generate the CSV file from Google Spreadsheet as a dojox.data.CsvStore.

The PHP Zend Gdata 1.10.0 library is used to talk to the Google Data API, it takes care the client login, file listing, spread sheet files and worksheet tokens retrieving and cells data feed. retrieve the spreadsheets file list and key tokens, once user decide which file to read,

The first part of the PHP is for client login :
<div style="color: blue;">
<span style="font-size: x-small;"><i>set_include_path(get_include_path() . PATH_SEPARATOR . '/var/www/html/ZendGdata-1.10.0/library');
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Http_Client');
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Spreadsheets');</i></span>
<span style="font-size: x-small;"><i>
$user = $_GET["id"];
$pass = $_GET["pass"];
if(isset($_GET["key"]))
$key = $_GET["key"];
else
$key="";</i></span></div>
To read the spreadsheets list :
<div style="color: blue;">
<span style="font-size: x-small;"><i>function promptForSpreadsheet1($gdClient)
{
    $feed =$gdClient->getSpreadsheetFeed();
    $i=0;
    $arr = array();
    foreach( $feed->entries as $entry) {
        $currKey = split('/', $entry->id->text);
        $token = $currKey[5];
        $arr[] = array("name" => $entry->title->text, "id" => $token);
        $i++;
    }
    $jsonStr = json_encode($arr);
    echo "{'identifier':'id','label':'name','items':$jsonStr}";
}</i></span></div>
To read the worksheets list of select spreadsheet :
<span style="color: blue; font-size: x-small;"><i>function getFormWorksheet($gdClient)
{
    global $key, $wkid;
    $query = new Zend_Gdata_Spreadsheets_DocumentQuery();
    $query->setSpreadsheetKey($key);
    $feed = $gdClient->getWorksheetFeed($query);
     echo printFeed($feed);
     $input = getInput("\nSelection"); */
    $currWkshtId = split('/', $feed->entries[0]->id->text);
    $wkid = $currWkshtId[8];
}</i></span>
To read the header and row data and convert them into a CSV formatted file  :
<span style="color: blue; font-size: x-small;"><i>function cellsGetCsv()
{
    global $gdClient, $key, $wkid;
    $arr = array();
    $query = new Zend_Gdata_Spreadsheets_CellQuery();
    $query->setSpreadsheetKey($key);
    $query->setWorksheetId($wkid);
    $feed = $gdClient->getSpreadsheetCellFeedContents($query);
    $jsonStr = json_encode($feed);
    $pre_key="A";
    $columns=0;
    $rows=0;
    $header = array();
    foreach($feed as $key=>$entry){
        if (substr($key, -1) <> "1") {
            $columns = convertAlphabetToInt(substr($pre_key, 0, -1));
            $jsonStr = json_encode($header);
            break;
        }
        $header[] = $entry["value"];
        $pre_key=$key;
    }
    $lastkey = end(array_keys($feed));

    for ($k=1; $k<=strlen($lastkey); $k++){
        if ( is_numeric(substr($lastkey, strlen($lastkey)-$k, 1))==false){
            $rows=(int)substr($lastkey, strlen($lastkey)-$k+1);
        }
    }

    $head = "";
    $data = "";
    for ($i = 0; $i< $columns; $i++){
        $head .=  $header[$i] . ",";
    }
    $arr = array();
    for ($j=2; $j<=$rows; $j++){
        $line = '';
        for ($m=1; $m<=$columns; $m++){
            /*    $value = $feed[convertIntToAlphabet($m)+$j]->value; */
            if(isset($feed[convertIntToAlphabet($m). (string)$j]))
            $value = $feed[convertIntToAlphabet($m). (string)$j]["value"];
            else
            $value = "";

            if ((!isset($value)) OR ($value == "")) {
                $value = ",";
            } else {
                $value = str_replace('"', '""', $value);
                $value = '"' . $value . '"' . ",";
            }
            $line .= $value;
        }
        $data .= trim($line)."\n";
    }
    $data = str_replace("\r", "", $data);
    echo "$head\n$data";
}

function convertAlphabetToInt($alpha_string) {
    $int_wert=0;
    $potenzcounter=0;
    for ($i=strlen($alpha_string);$i>0;$i--) {
        $ordinalwert=(ord(substr($alpha_string,$i-1,1))-64);
        $int_wert+=$ordinalwert*pow(26,$potenzcounter);
        $potenzcounter++;
    }
    return $int_wert;
}

function convertIntToAlphabet($int_wert) {
    $alpha_string="";
    if($int_wert%26>=1) {
        $alpha_string=chr(($int_wert%26)+64).$alpha_string;
        $alpha_string=convertIntToAlphabet($int_wert/26).$alpha_string;
    }
    return $alpha_string;
}</i></span>
The demo program - MAP123.html which interacts with the PHP file (ssheet.php) thru Ajax will need your GMail(or Google Apps account) id and password -
 
If successfully login, then it will show the list of available spreadsheets for you to choose -
Once you decide the spreadsheet to use, click at "get spreadsheet" button to retrieve, however, since the program does not offer you the choice of worksheets (Google Spreadsheets supports multi-worksheet), it will always grab the first available worksheet from the spreadsheet.
A spreadsheet of exact layout of original Google Spreadsheet will be displayed on top of the page!

The bottom part of the program is to display the Google map with the locations(addresses) information on the spreadsheet.As long as there is a header called "ADDRESS" the Google Map will be triggered and display all addresses on the "ADDRESS" column. Click at any row, it will diplay the information windows for the selected row on the Google Map.

You can try the demo program here, or you can download the whole files here.