At Jive World this year, I gave several presentations on building apps. For a few of them, I built a couple of sample apps that would show off the API and what you could do with an app. The first one that I put together is called Jive Slides App, and it's a very simple application that uses a carousel to show images. A few people came up after my talk and asked if they could get more details on the app. I promised I'd blog about the app and talk about how I built it as long as they were not too critical of the code. (There are some parts that need serious refactoring. If you're interested, I'll add you to the project!)

https://developers.jivesoftware.com/assets/images/jive_devslanding_transparent.png

Getting the app installed

There are a couple of ways you can install the app. Which one you choose depends on your environment. If you are using one of Jive's sandboxes, e.g. https://sandbox.jiveon.com, then you should enter the following URL into the app loader: https://apphosting.jivesoftware.com/apps/dev/jiveslidesapp/app.xml

devloader.jpg

 

If you are using your own community, then you'll want to publish this app using the dev console. The reason you need to publish the app is because you'll want to use the collaborative features of this app. Underneath the covers, the mechanism we use is appdata. The implication of this is that everyone that you want to share with must use an app that has the same id. Because the dev console is targeted for individual users, each time an app URL is entered, it's given a unique GUID (or app Id). Publishing this to your local community will allow others to install this from the Jive Apps Market and preserve the ID. You can find out how to use the dev console to publish an app in the documentation on the developer community. You'll use the same URL as above. Feel free to make up any & all of the necessary information for the market listing!

 

How that app works

When you get the app installed, click on the icon in the quick launcher. You should see the app's canvas view. The carousel's controls will "slide" you between the images. You'll notice some buttons on the top of the image. These are where you can perform "social actions" on a specific slide, e.g. Like, Dislike, and Question. Since these are social actions, they're not really much good without selecting some friends.

canvasview.jpg

https://developers.jivesoftware.com/assets/images/jive_devslanding_transparent.png

 

Select some friends

On the left hand side of the app are two buttons, "Pick Your Friends" and "Select a Group!". Both of these will populate the left hand pane with a collection of people. Both of these buttons demonstrate the use of the request pickers in Jive. "Pick Your Friends" uses the "people picker", while "Select a Group!" will use the "place picker". Either way, you'll end up with a set of people that are displayed. Underneath, you'll see the slide number they are viewing and any social action they have on that slide. In the screen cap below, Jake is currently looking at slide 5 and has pressed, in his browser, the "Like" social action button.

jakeon5.jpg

 

 

Awesome! Can I use my own slides?

These images that make up the slides exported from a presentation software package like powerpoint or keynote, but really, any collection of images can be used. In fact, the entire collection of images is driven by a simple json file that points to a URL of a jpg, png, or any other file type that can be the source of an img tag. You can provide your own json file by going into the app settings.

changing the index file.jpg

If you want to try another file just for fun, check out this one: https://apphosting.jivesoftware.com/apps/dev/jiveslidessources/OtherSlideIndexFiles/randomimages.json

The original presentation index is here: https://apphosting.jivesoftware.com/apps/dev/jiveslidessources/JW12Apps101FINAL/slideshow.json

Note: Right now, we don't check that everyone is viewing the same set of slides (see What's next? below).

 

OK.... So, how does it work?

Essentially, there are three things going on here. The first is we load a file that gives us some images to scroll through using a carousel. When the user changes the image, we trap the carousel slide event. The second step is to build a json object that contains information about the current slide, including the number, and the social action. We then place that json structure in the application's data context.

 

Data Context is a feature in OpenSocial that provides dictionary (name/value pairs) storage for information that the application can use. You simply can get/put data sets into the data data context. To include the feature, simply require it in the app.xml

<Require feature="opensocial-data" />

When you want to add something to it, like the current slide information, it's a simple call like this:

opensocial.data.getDataContext().putDataSet("slideShowIndex", slides);

 

The cool thing about Data Context is that you can register listeners on the keys. This is similar to many frameworks, e.g. backbone. The key thing to remember about Data Context is that it works with some of the advanced aspects of the OpenSocial programming model, specifically, data pipelining. We'll cover data pipeling in a later article, but for now, just think of it as a strategy to pre-populate information into your app.

gadgets.util.registerOnLoadHandler(function() {

    //The controller kicks off the process. See SSC.slideShowController constructor

    osDataContext.registerListener('slideShowIndex', SSC.buildCarouselDivs);

    osDataContext.registerListener('friendsLoaded', SSC.startRetrievingFriendSlideInfo);

    osDataContext.registerListener('friendsSlideInfo', SSC.buildSlideInfoBadges);

    osDataContext.registerListener('viewerFriends', SSC.initializeFriendsList);

Note: Because this is a relatively simple app, one thing that I did, which a framework like backbone.js solves, is that the data & view is commingled together. Eventually, we'll either rewrite or refactor the app to be a bit cleaner. Regardless, the key point is that data context provides a mechanism for event driven programming of apps.

 

Once we have the information about the current slide, we store that in app data. App data is another part of the OpenSocial programming model that is, essentially, a store of persistent information that an application can use. The interesting thing about app data are the access control rules for who can read and write the data. Specifically, each person can write their own app data and can read everyone else's app data. This is a perfect use case for the simple slide viewer app. I write to app data what slide I'm on and whether I like or dislike it.

SSC.setCurrentSlideInfo = function(slideInfo) {

    osapi.appdata.update({userId: '@me', data: {"newSlideInfo":slideInfo}, escapeType: opensocial.EscapeType.NONE }

    ).execute(function() {

            console.log("app data updated" + slideInfo);

            console.log(slideInfo);

        });

};

In the function above, I'm setting my slide info in the key "newSlideInfo". The "@me" is shorthand for the current user. Specifically, Jive will substitute in your user ID whenever it encounters this moniker. the "EscapeType.NONE" tells Jive not to escape that's contained in the structure. Executing this function actually stores this information in Jive!

 

Now the fun part. When the app initializes, it sets itself up a polling cycle for every two seconds or so. What do we do every two seconds? Get the app data!

osapi.appdata.get({userId: userIds, keys: ['newSlideInfo'], escapeType: opensocial.EscapeType.NONE}).execute(SSC.refreshFriendSlideInfo);

When we retrieve the app data, we read the "newSlideInfo" key. This gives us structure back where each property is a user Id. The value of that property is that user's current slide information! Once we retrieve this information from the server, the easiest thing to do is put it into the app's data context. Why? Because we register listeners on the data context to fire when we put in the data we pulled down from Jive. The listeners that are registered will look up the user in the side panel and decorate the avatar with the current slide number and the social action.

 

What's next?

And that's it! We've been able to build a social application without requiring any backend server. We've used the Jive and the OpenSocial APIs to share data between users. What's next? Well, you tell me! This app is pretty basic. However, I've got some fun ideas if you are up for a bit of exploration and learning, like:

  • Sharing of slide index files so that you can give your friends the slides that you should all view.
  • Follow the leader: Designate one person as the "leader" all other viewers will follow his slide navigation.
  • Link jive discussions to a slide: Start a discussion based on a slide and pull in discussions and display the text.
  • "Chatty Kathy": Post an activity when you like a slide.
  • Make sure everyone that is sharing is viewing the same set of slides (based on the slide index file).

If you just want to get the source code, then you can grab it off of Jive's public git hub repository. However, it's more interesting if we build this out together. If you are interested, then I'll simply add you to the project in apphosting. (You'll need an account for Jive's Developer Services. I can then just say, "jiveapps sharing:add <your id here>".) This way, you can get some hands on experience building & working with the API!