Launching my second Firefox-Os App - GistHub

Yay! this is my second approved FIREFOX-OS(FOS) App- GistHub, after the basic Calculator app. It’s an app for firefox smartphones, which helps Github Users to access and manage their Gists instantly without opening the site in browser. It’s free to download from Firefox marketplace for firefox smartphones :)


The inspiration came from my boring travelling times. I urge an need to code while on the way and Gists are the best way to do so. Meanwhile, I was fond of Firefox OS, going to hit the market in just few months. And there it goes…

I came up with an idea to manage your gists and access other all under one hood.

Following things can be efficiently acheived:

View all github-gists

Edit a gist

Delete a particular gist

Create numbers of gists

Search any github users’ gists

Fork, Star, Unstar any number of gists

User Authentication

A User can Login into the app using his Github email-id/username along with the password. The engine used behing the authentication has been carried out using the IndexedDB API, a client-side storage of significant amounts of structured data and for high performance searches on the data using indexes.

Initialize Database

initializeDB: function initializeDB() {
var notes = '',
objectStore = this.database.transaction('notes').objectStore('notes'),
objectStore = this.database.transaction('notes').objectStore('notes');
objectStore.openCursor().onsuccess = function (event) {
var cursor =;
if (cursor) {
//... Already logged in, do stuff and redirect
location.href = 'view_gists.html';


Identification & Authentication using AJAX call

// function for saving the credentials after successful logging
saveCredentials: function saveCredentials (username, password, UserImage, UserLogin) {
var note = {'name': username,'pass': password,'image': UserImage,'login': UserLogin},
transaction = this.database.transaction(['notes'], 'readwrite'),
objectStore = transaction.objectStore('notes'),
request.onsuccess = function(event) {
location.href = 'view_gists.html';
// function to generate the BASIC Hash for authentication
generateTokenHash: function generateTokenHash(user, password) {
var tok = user + ':' + password,
hash = btoa(tok);
return 'Basic ' + hash;
// AJAX call to test authorization
loginNauth: function loginNauth(username,password) {
var obj = new Object();
obj = this;
url: '',
type: 'GET',
dataType: 'json',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', obj.generateTokenHash(username,password));
.success( function(e) {
/* successfully logged in, parse the data,
GET as JSON Object, and store for future refrences */
.error( function(e) {
alert('Authentication Failed !');


Viewing your Gists

As per the Github API v3, only the recent 30 Gists will be available for viewing. Bootstrap pagination helps in viewing the Gists in pages, each lisitng upto 8 Gists.

A Github User, after logging in, can now view the Description(if present) and the Contents of the Gist and, if required, a Gist can be successfully edited.

Creating a new Gist

Here it comes the basic idea for having this app. A user can create as many Gists as he wants. Providing Name and Description for a Gist is not mandatory and Github automatically assigns a default name for that. Content for the Gist is necessary and what it should be.

By default, all the Gists created will be public in nature. Once created, the Gist can also be deleted by switching over to Viewing tab and going for the Delete Option.

You can copy & paste the contents wherever needed.

Searching Gists & Other Operations

Most interestingly, you can view the Gists of any Github user by providing his valid username. Again just to remind, only recent 30 Gists will be available for the lisitng as per the Github API v3.

A User can:

View the details of the Gist(s) listed.

Fork the desired Gist(s).

Star the favourite Gist(s).

Unstar the Gist(s).

comments powered by Disqus