Skip to content

Hello Contacts Example

Jump to bottom Edit New page
smurthas edited this page Jul 26, 2011 · 15 revisions

The easiest way to get going is to copy and paste the code in Locker/Apps/skeleton into a new directory for your connector. Let's pretend there isn't yet a Hello Contacts app (we'll use "HelloContactsExample" as the name so nothing bad happens):

cd Apps
mkdir HelloContactsExample
cd HelloContactsExample
cp -r ../skeleton/* .

The first thing we'll want to do is change the name of the .connector manifest file:

mv skeleton.app HelloContactsExample.app

Now let's edit that file. The only things that MUST be changed is the handle field.

{
    "title":"Hello Contacts Example",
    "action":"Just barely view my contacts",
    "desc":"More of an example than anything userful",
    "run":"node app.js",
    "status":"unstable",
    "handle":"hellocontactsexample"
}

For this app, we don't need to make any changes to the skeleton app.js file since we are only going to server static files and to AJAX calls against the locker.

Let's make some changes to static/index.html:

<html>
<head>
    <title>Hello Contacts!</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div id="container">
        <header>
            <h1>Hello Contacts!</h1>
            This is example of how easy it is to load your contacts using HTML and jQuery.
        </header>
        <div id="main" role="main">
            <div id="count"></div>
            <ul>
                <li>Loading....</li>
            </ul>
        </div>
    </div>

    <script src="/static/js/jquery-1.6.1.min.js"></script>
    <script src="js/hello-contacts-example.js" type="text/javascript"> </script>

</body>
</html>

Now we need to change the name of the skeleton.js file:

mv static/js/skeleton.js static/js/hello-contacts-example.js

Now let's update that hello-contact-example.js file. Let's add a new function to handle the contacts returned by the API:

function handleContacts(contacts, useJSON) {
    // find the unordered list in our document to append to
    var contactsList = $("#main ul");

    // clear the list
    contactsList.html('');

    // populate the list with our contacts
    if (contacts.length == 0) contactsList.append("<li>Sorry, no contacts found!</li>");
    for (var i in contacts) {
        var contact = contacts[i];
        var contactHTML;
        if (useJSON) {
            contactHTML = "<pre>"+ JSON.stringify(contact, null, 2) +"</pre>";
        } else {
            // get the contact name, but use the first email address if no name exists
            contactHTML = contact.name || contact.emails[0].value;
        }
        liHTML = '<li id="' + contact._id + '" class="contact">' + 
                 '<span class="basic-data">'+contactHTML+'</span></div>';
        contactsList.append(liHTML);
    }
}

and then let's update the callback from the getContacts function to call out new handleContacts function:

/* jQuery syntactic sugar for onDomReady */
$(function() {
    getContacts(0, 9000, function(contacts) {
        handleContacts(contacts, true);
    });
});

Done!

Now we're ready to run.

(NOTE: You need some contacts data in your locker, so if you haven't already, you will need to set up and sync the Twitter, Facebook, 4sq, Google Contacts or GitHub connector first!)

cd ../..
node lockerd.js
  • Then open up the dashboard at http://localhost:8042 and navigate to the Services section.
  • Click the "[show unstable]" link in the top right hand corner. "Hello Contacts Example" should now be listed as an installable app.
  • Click the Install App button.

You've made your first app!

Add a custom footer
Add a custom sidebar
Clone this wiki locally