Archive for the ‘Web Apps’ Category

Extending the “twitterinfo” service

Friday, May 8th, 2009

The Original Question

I have a friend in Real Life (who is also on Twitter as @practicalkatie) who tweeted me a perfectly reasonable question the other day:

hey – where do you find out the date you joined twitter? everyone is twittering about their anniversary dates, but I can’t even find mine!

and I realized I really wasn’t sure myself. So I went pawing around at the Twitter API Documentation site, and I came up with the RESTful method users/show, which uses a GET with a userID or screen name as data payload and returns extended information in JSON or XML form. So of course I tried it out in curl:

curl http://twitter.com/users/show/practicalkatie.xml

and lo and behold, there was an element returned called "created_at" to read. So I sent her the curl command-line. Then I thought about it some more, and I realized that was kind of a dumb thing for me to have sent her: how do I know she has curl installed? So I made up a little piece of code to provide that user-lookup service: twitterinfo twitterinfo Webapp screen snapshot

Let Nothing Serve But One Purpose

As long as I was writing a Web-based user interface to a user info lookup sevice anyway, I figured I might as well use the opportunity to distribute the work (no API key or such to hide in the middleware) and let the client talk directly to Twitter. And hey, why not make it so it can "already be there" on a handheld device when it is needed? Why not move towards making it a WebApp? Let them load it once from the RIT server, and thereafter get it locally.

This, of course, is a security problem. Unless you are willing to be a little twisted in your code.

The Same-Origin Policy

Like the Applet security model, the JavaScript security model says it is only allowed to open sockets and make requests (and thus send data) back to where it originated. And this stuff was not going to be originating on the Twitter server, it was going to be originating at RIT.

And so I had an excuse to play with another idea: JSONP

jQuery Makes It Easy

JSONP works by injecting a callback function into the JavaScript acting on the DOM, after the page thinks it is done loading and coming from the remote server. Weird, huh? I really didn’t want to write that code right now, I just wanted to use that capability and refine it later by writing it myself. jQuery has some already-defined functionality to do just this, and I am basically lazy. So I used jQuery’s $.getJSON function. jQuery makes it easy to do this stuff; you simply pass the fully-made-up URI for the GET and a function prototype.

  $.getJSON( fullUri,
    function( data ) {
      processJsonResults( data );
  });

The fullUri parameter contains the request we saw in curl, with a minor twist to deal with naming the callback, and the data variable in the anonymous function used for the callback ends up containing the response. The only real problem is that there is squat for error-handling. Anything other than a successful request-response cycle is unthinkable to this little bugger… There are always trade-offs for initial laziness, and this is one of them: I’ll accept this first version being stoopid about users typing in non-existent user-names to look up, for the sake of not having to write this particular code myself.

The Data Display

I figured a simple list would do, there wasn’t much in the way of depth to the "extended" user data returned and simple displays are easy for user to understand quickly. I also figured the avatar-picture should actually show in the list, and that "Web Home" field should be clickable.

Mobile? Did I Hear Someone Say Mobile?

I figure it should be made to work on mobile devices as well, I mean I do run this little Center for the Handheld Web and it would be a bit embarrassing to not make it work okay on "reasonably smart" mobile devices . And by "reasonably smart", I mean handhelds with browsers supporting the basic Holy Trinity of XHTML, CSS, and JavaScript. So I made sure it worked small, I added a bit of meta-tag magic like this:

<meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />

and I added a little iPhone-specific JavaScript magic to make the address-bar roll up out of sight like this:


  document.getElementById("toolbar").style.visibility = "visible";
  window.scrollTo( 0, 1 ); // pan to the bottom, hides the location bar

and it was ready to go.

The structural markup was simple and should work on a small screen using gestures, the browser had been told not to mess with the fonts and such and to hide the address-bar, the sneaky JavaScript request/response code-injection was working, & the response-data node injection stuff was dealt with.

So What Next?

Simple things that do one thing nicely make me happy, but I can sometimes make things just a teenie bit "too simple". So I asked folks on Twitter what they would like to see as extended features for my little app. I figured there was no harm in asking, and the only responses I got involved seeing who someone was following and seeing who was following them. Followers and following, that is what folks wanted. And so that got me to thinking too, how about letting them "follow a trail"?

Wandering Through the Webs

Any list of followers or following users appears flat, but each entry in it is actually a node in a set of "interpenetrating webs of social affiliation" (as I have put it in other writing). Each person who follows me has in turn people who follow them and people who they follow. To each of us, we are at the root of a couple of webs. Looking at the larger picture, we are each embedded in interpenetrating webs (plural). If I get a list of the users following so-and-so, each of those entries should in turn be clickable so I can follow a path wanderting through the webs embodied in Twitter's persistence store.

Back to the API Docs

Of course, this meant I had to go back and look at the API documentation at Twitter. Was there any way for my WebApp to ask for user info on all the friends of someone with one call to the Twitter API? I wanted to be nice… sure enough, the REST API comes to the rescue with the method statuses/friends. So I tried that out in curl with

curl http://twitter.com/statuses/friends/jeffsonstein.xml

And it seems to work just fine. Perhaps I can add that functionality to the client and still not bang on the Twitter machines with too many API calls.

So That is Where We Are, Now

I have another week of classes, then exams to give and grade (ugh). Then I get to play with this some more. What do you think of it so far? Do you think I am going in the right direction with the follow-the-webs extension I am planning? Will it still be simple enough and work okay on a handheld device? Comments are very welcome.

Posted in Design, Logical Design, Mobile Devices, Web Apps, development, social networking, webs | No Comments »

REST Service Implementation using HTTP – Cross Domain Request

Sunday, March 29th, 2009

By Phavanhna Douangboupha, 03/29/09

The three main basic ideas of a REST process are to process a client request, to response to the request, and return a result/data in XML format according to the request.

Two techniques that can be used are getting parameters from client through a URL query string and the use of HTTP methods. The first technique is easier to implement compared to the second technique. The main disadvantages of the first technique include the size of the URL string, the maximum length of the URL string consisting of query parameters, and a possible negative side effect. The first limitation, the size of URL string, can be overcome by using POST method instead of GET method for a client request. However, POST and GET methods should be applied according to a specific task (see the blog on Creating REST Web Service for more detail). Consequently, the HTTP methods are a better solution for REST service.

I have already talked about how to implement a REST client using a URL query string from my previous post, now I will talk about how I implement a REST service for the cross server client request using HTTP methods.

For this exercise, a database server, a web host server and a web client server are assigned in different machines and hosted by different domains. The database server is hosted at STREAMER. The web host server is hosted by CHW domain and finally the demonstrated web client request comes from GIBSON domain (Figure 1 shows system architect for the REST cross domain service). STREAMER is a house to MySQL database which is hosted in a different domain from the web server.

System architect for REST cross domain service
System architect for REST cross domain service

Figure 1: System architect for REST cross domain service

GIBSON is used as a demonstration client to request data from another domain (CHW). The four main files implemented here are a normal HTML file (index.html), a JavaScript file (client_local.js), and two php using cURL libraries files (getclient_chw.php and postclient_chw.php). The Javascript file is used to implement Ajax to send a request and to receive responded data sent back by a server asynchronously. The data is displayed on the HTML file. The JavaScript file uses HTTP request object to send a request to either getclient_chw.php (”How Many Users?” in the database) or postclient_chw.php (”Add New User” to the database). getclient_chw.php and postclient_chw.php use cURL libraries to set up a HTTP request where getclient_chw.php uses the GET method to request to get data from a server and postclient_chw.php uses the POST method to request to post data to a server (please see table 1 for the correspondent HTTP methods to the database query). Both of the files make a request to process data with the web server on CHW. The client side has no relation to the database server on STREAMER and it only sends a HTTP request which will later be checked by the web server.

Use Gibson to act as a client to make REST request​ (Figure 2) - http://people.rit.edu/~pxd8840/restclient/index.html . As you click one of the two buttons – “How Many Users?” (HTTP GET) and “Add New User” (HTTP POST), you will see that the displayed results are updated asynchronously. These are done via Ajax using REST service to perform a cross-domain request instead of the <script> tag hack solution as mentioned from my previous post.

index.html, client requests on GIBSON

index.html, client requests on GIBSON

Figure 2: index.html, client requests on GIBSON

On the web host server (CHW), there are two main files – rest_database.php and ConnectDB.php. ConnectDB.php is an Object Oriented PHP class that contains methods to connect to the database and the required methods to process or retrieve data from STREAMER database server. The rest_database.php file also contains all the logic check method that received from a client. The rest_database.php file is used to check what kind of request being made if it is a HTTP GET request or a HTTP POST request. According to the request, it retrieves data from the database. Then it creates XML responses to the client.

Table 1: HTTP method, REST action, and SQL command for a client request

HTTP Request Method REST Action SQL database command Description
GET GET SELECT Search/Request for
data (getdata)
POST POST INSERT Add/Insert new data
(postdata)

List of files

Client Side

  • index.html
  • client_local.js
  • postclient_chw.php
  • getclient_chw.php

Server Side

  • rest_database_php
  • ConnectDB.php class code on the server side contains database connection and database process methods

References:

Links to other blogs in this project

Tags: , , , , , ,
Posted in Best Practices, Design, Mobile Devices, Physical Design, Web Apps, development | No Comments »

“Design for Mobile 2009″ Conference

Wednesday, March 4th, 2009

Presenting There

The Design for Mobile 2009 conference will take place from 20 – 22 April, in Lawrence Kansas, and I have been invited to give a session there. My presentation will be on the W3C “Mobile Web Applications Best Practices” document which we (the Mobile Web Best Practices Working Group (BPWG)) are putting together now.

This should be an interesting conference, with a real focus on design “news you can use”: case studies, best practices, and real-world “lessons learned”. My session will probably be about 25 minutes of talk, and about 25 minutes of discussion.

I hope you can attend, it should be interesting and enjoyable.

Tags: , , , , ,
Posted in Best Practices, Design, Mobile Devices, Web Apps, w3c | 1 Comment »