Using CloudShout to build a SocialBrowse-like Service – Initial Setup (Part 2)

This is the second post in the series that demonstrates using CloudShout to develop an application that has some of the functionality of SocialBrowse. I’ve decided to call this project LinkShout, to mirror our other CloudShout apps TweetShout and FlickShout.

The first thing I did was some initial planning via paper and pencil. Sorted out details for database schemas and how the product should look. Around 45 minutes worth of time. Everything is simple, so no hard work there. Plus, SocialBrowse already laid out the functionality of the app, and thus biscuits from a can are a lot easier to make than from scratch, if you know what I mean. 🙂

So once that was done, I decided I’d try to accomplish the following two tasks:

  • all links on a page are appended with the “linkshout” share button
  • clicking that will open the share dialog

Set up a Test Environment

The first thing I need to do is set up a test blog. Here’s a simple page I threw up on my localhost. Nothing fancy, the image link is even broken. D’oh.

Now, I just add my app testing link to the page:



And now we have a test environment:

Create a new app at CloudShout

Now, back to our app. We need to do our initial setup at CloudShout. CloudShout stores all app information in it’s databases, only creating JS files at publish time. This is why we need to set up the test environment, it knows how to convert the apps from database text to JS objects. But an important step in that is our initial parameters for the application, which you specify when you first set up the application. Here are my initial params for LinkShout.

There are some not so obvious options above, the CloudShout Documentation should clear those up for you, for now I only want to point out “When to run”.

“When to run” is exactly that… when your app should activate. Your options are “Immediately”, “After Load” and “When Called”. Immediately will fire the app off as soon as the DOM is ready. After Load will wait for all external elements to load. When Called fires off the app when it is clicked on in the Hub.

Immediately is my selection, as I want to add “share” buttons to all links ASAP.

Programming the Application – Initial Setup

Now I use the ITK TextMate bundle to checkout and work on the app in a real editor (you can edit the app online if you’d like). The first thing we take care of is some initial details for our app. Here I initialize 3 variables that will hold information about the link. Then we call a function “convert_all_links” when our app is fired (defined in the “When to run” setting). Finally, we make sure the popup window is closable.


// VARS
this.link_url, this.link_title, this.link_id = ""

// BASIC FUNCTIONS
this.init = function(){
this.convert_all_links()
}

this.close = function(window_id){
itkp.close_float(window_id)
}

Programming the Application – What does it do initially?

Now let’s define our “convert_all_links” function. Basically, it should:

  • Find all links in the DOM
  • If it’s a text link (I don’t want to add the share icon by images)

    • Add a share icon after the link that knows:

      • The url
      • The title of the anchor tag if it has one, otherwise the inner HTML of the anchor tag
      • And when clicked, opens the share window

So here it is coded:


// INITIALIZATION FUNCTIONS
this.convert_all_links = function(){
// get all links
var links = document.getElementsByTagName("a")
// loop through them
for(var i = 0; i < links.length; i++){
// get our url and title
var url = links[i].href
var title = (links[i].getAttribute("title")) ? links[i].getAttribute("title") : links[i].innerHTML
// create a tag
var sup = document.createElement("sup")
// set it's innerHTML to the share icon (defined in the following function)
sup.innerHTML = this.share_icon(i, url, title)
// insert it into the DOM AFTER the link
links[i].parentNode.insertBefore(sup, links[i].nextSibling)
}
}

this.share_icon = function( id, url, title ){
// create the html for the image tag, including styles and an onclick event and return it
var a = ""
a += "<img "
a += " onclick='" + this.info.id + ".open_share_window(" + id + ", \"" + escape(url) + "\", \"" + escape(title) + "\")' "
a += " style='cursor:pointer;width:10px;height:10px' "
a += " src='http://localhost/linkshout/share_icon.png'"
a += ">"
return a
}

Back to our test page really quick. I need to pull in the app I am testing, so the link that we added that loads in CloudShout needs to be modified:



Needs to become:



Where app id is the applications identification (you can find this on any of your application development screens at CloudShout).

Ok, now our app should, as soon as the DOM is ready, search for all links and attach the share icon. Let’s see if that worked:

Programming the Application – Handling Requests to Share a Link

Now, when that icon is clicked, we need to open a share dialog so the user can change the title of the link if they wish and give it a description (really, it’s first comment).


// SHARE WINDOW FUNCTIONS
this.open_share_window = function(id, url, title){
// anytime a share link is clicked, set our vars to information about it.
this.link_url = url
this.link_title = title
this.link_id = id
// open the new float (yeah, this is all handled for you. easy huh? 🙂
itkp.new_float(this.info.id, this.info.id + "_" + id, "LinkShout", 350, 400, itkp.center_vertically(400), itkp.center_horizontally(350))
// and let's create our html for inside of our popup:
this.create_shout_elements()
}

Now, the next function is a little scary. It’s long, but it’s not complicated. All we are doing is calling an ITK helper function that creates DOM elements. We are passing it elements defined in a JSON format. We just need to do it a few times. You could build all your html in a variable (like we did with the icon image above) and set with an innerHTML, but this is another way of doing it.


this.create_shout_elements = function( id, url, title ){
var id = this.link_id
// create the "url" text
itku.create({
elm: "div",
parent_elm: this.info.id + "_" + id + "_content",
content: { type: "html", value: "URL:" },
atts: { id: this.info.id + "_" + id + "_url" },
styles: { position: "absolute", top: "105px", left: "3px", width: "50px", height: "34px", textAlign: "right" }
})
// create the "url" input field... disabled
itku.create({
elm: "div",
parent_elm: this.info.id + "_" + id + "_content",
content: { type: "html", value: "" },
atts: { id: this.info.id + "_" + id + "_url_input", className: "itkp_rc" },
styles: { position: "absolute", overflow: "hidden", top: "95px", left: "60px", width: "240px", height: "28px", padding: "-2px", backgroundColor: "#ffffff" }
})

// edited - create the other elements too, which is similar to the above.

// create the "share" button
itku.create({
elm: "div",
parent_elm: this.info.id + "_" + id + "_content",
content: { type: "html", value: itkp.button("Share", true, this.info.id + ".share_link()", 90) },
atts: { id: this.info.id + "_" + id + "_button" },
styles: { position: "absolute", overflow: "hidden", top: "295px", left: "60px", width: "91px", height: "27px" }
})
}

The last create call is what builds the button on screen. Notice the value of the content property is a call to the ITK button helper. When that button is clicked, it calls the function “share_link()”. Let’s look at that:


this.share_link = function(){
// grab their comment, we know everything else.
say = escape(itku.id(this.info.id + "_" + this.link_id + "_say_input").value)
// For now, let's just alert the values
alert("sharing: " + unescape(this.link_url) + "\ntitle: " + unescape(this.link_title) + "\nsay: " + unescape(say))
}

Ok, so here I’m just alerting the value I’m going to pass around to make sure it works. Let’s see:

  1. I clicked on the link to Apple
  2. The dialog opened with the link’s information. (There’s a little extra room at the top of the share dialog. I’ll use this area for branding later)
  3. I clicked the share button
  4. Alert triggers

Programming the Application – Wrap Up for Part 2

Pretty good. And my development time so far is 1.5 hours. Combined with my initial planning, I’m at 2.25 hours.

This looks like a good stopping point for now, so let’s recap what we’ve done:

  1. Did some initial Project planning (45 minutes)
  2. Created our app at CloudShout.com
  3. Created our Test Environment (10 minutes)
  4. Program functionality to: (1 hour 20 minutes)

    • Add share buttons to all links
    • Open a dialog with information about the link in preparation to share

What I’m planning to accomplish in the next segment is mostly communication. This will be exciting because we will see how easy it is to have apps, or people, or a combination of both, talking back and forth. My goals are to:

  1. Create the sidebar widget that actually lists all the shared links
  2. When I share a link, it should:

    • Save to a DB
    • Send to all people in my friends list
    • Display in their sidebar widget

Coming along good I think. Questions?

Advertisements