Bluyah Development Blog

One of the things I love about Bluyah is how quickly it can solve a variety of feature requests made of an application.  As an IT professional, I’m constantly weighing the time it will take to develop an application feature against the benefit that feature will provide to the end-users.  In some cases it comes down to simple math: will it cost our company more (in terms of a developer’s salary) than this feature will return (in terms of revenue)?  In other cases it’s much more subtle - especially when dealing with web properties that don’t have a straight-forward revenue model.

Case in point: Pif Magazine (www.pifmagazine.com).  

Pif Magazine has been online for nearly 15 years now.  It is one of the oldest, continually published literary journals on the Net.  It has published original works by well-known authors like Julia Slavin, Amy Hempel, and Poet Laureate  David Lehman.  It has also introduced countless unknown, previously unpublished authors and poets who have, because of their exposure in Pif, gone on to land contracts with traditional publishers.

In short, it’s an important venue with a very dedicated following.

One thing it is not, however, is technologically up-to-date.  The content management system used by the editorial staff is a highly customized version of PHP-Nuke 5.2 (codenamed: SIDney), which was deployed in the spring of 2001 and, save a few minor visual enhancements, has not been upgraded since.  It may sport a robust publication contracting system, but it lacks basic modern features. 

So when the editorial team recently asked me to add RSS capabilities to the site so they could syndicate the newly published articles, my first reaction was: “Well, there goes my weekend.”  Then, just as quickly I realized: “Hey - I can do this in Bluyah in about 3 minutes.”

Step 1: Getting the Data

This first step is always the most difficult.  Every application has it’s own database schema and SIDney is no different.  Only with SIDney, the schema is complicated by the fact that author information is (for historical reasons) stored in a separate database from article information.  In addition, the author’s email address is stored in a separate table from the author’s first and last name.  Just to complicate matters even more, the SIDney application allows editors to control things like title wrapping with special comment tags.  

To work around all of these inconveniences, I decided that the easiest way to gain access to all of the data bits I needed for an RSS feed would be to create a database view against the articles database and then point Bluyah at this view.

The view structure looks similar to this:

CREATE OR REPLACE SQL SECURITY INVOKER VIEW PIF_RSS_VIEW AS
SELECT
    CONCAT('http://www.pifmagazine.com/SID/',s.sid) AS link, 
    REPLACE("<!--titlebreak-->"," ") AS title,
    REPLACE(REPLACE(s.hometext,"\\'","'"),'\\"','') AS description, 
    s.pubdate,
    t.topictext, t.topicname,
    us.username as email,
    CONCAT(ui.fname,' ',ui.lname) AS author,
    ui.city, ui.state, ui.zipcode
FROM ARTICLE.stories s
    JOIN ARTICLE.topics t ON (s.topic=t.topicid)
    JOIN USER.user us ON (s.uid=us.uid)
    JOIN USER.userinfo ui ON (us.uid=ui.uid) 
ORDER BY s.pubdate DESC
LIMIT 20

Once the database view was defined and created, the rest was a snap.

Step 2: Connecting to the View

In Bluyah, I already had a Database Connection created for the Pif Magazine database.  I just needed to “discover” the newly created view and user it in a report.  To discover the view, I went to the Connect tab, found the already existing connection, then clicked on the “List DB Tables/Views” link in the Action column:
This will bring up a list of all tables and database views in your database.  Finding the newly created view, I clicked on the link “Use in New Report” in the Action column:

This brought me to the Report Create screen that you’re already familiar with from other posts.  Being that the view already contained the column names I wanted to see in my report, I simply clicked the Create Report button and went straight to the Export tab.

Step 3: Creating the RSS Export

I spent the most time on this screen trying to decide what to input into the free-form fields:

Everything on the left-hand side of the screen describes the feed itself, while everything on the right-hand side of the screen describes the individual listings in the feed.  As such, everything on the left-hand side of the screen will need to be provided by you when you create the RSS export.  Don’t worry - if you don’t like what you’ve input into the fields you can always come back later and update them.

For the most part, you can see that the database view I created contained field names very similar to what they would map to in the RSS Item screen.  I did this on purpose to speed deployment - but you could name your columns anything you want to and simply map them to the RSS Item attributes as appropriate on this screen.

Step 4: Embedding in the Website

Once the RSS Export was created, I pointed my browser at the URL Bluyah provided by clicking on the “Get Link” link in the Action column:

As you can see, the results are a standard RSS feed:

     https://richard.bluyah.com/export/rss/89387b6026e5012c6ef9002241319b39

Rather than use the IFRAME embed code provided by Bluyah (above) I decided I wanted a simple RSS icon hyperlinked to the feed instead.  If you checkout the homepage of Pif Magazine you’ll see the feed icon at the top-left of the screen.  

Final Thoughts

To me, the speed at which this feature was deployed to Pif is absolutely amazing.  Rather than spend 2-3 days writing an RSS feed generator into the code base (including testing and deployment), I spent a little over 10 minutes creating the database view, another 2 connecting to that view through Bluyah, creating the report and RSS export, and finally another 2 minutes embedding the RSS image with hyperlink to the RSS feed into the side-nav of the website.  All total, it was less than 15 minutes from “soup to nuts”.  In terms of development costs, the magazine just saved itself roughly $500 - and turned around the feature far quicker.  What could be better?

---

---

Pie charts are simple, elegant, and serve a distinct purpose: how does ‘this’ compare to ‘that’ when taken as a whole.

Right after 0.4.5 was launched, I became curious.  ’How many report exports have I created - and how popular are they?’ I wondered.  Fortunately, Bluyah tracks ‘views’ for each export type.   We are doing it for internal measurements, primarily, as it helps us determine where we need to invest our optimization time.   But after throwing together a quick report query, I realized that (1) this would be a great feature for users to have for their own accounts (more about this later), and (2) I was surprised by the results.  

Turns out the Marquee containing Mac World news posts that I added to the DiMax website last weekend is getting more eyeballs than anything else I’ve created so far.  (Truthfully - I would have expected the chart I put together comparing Max Unemployment Rates since 1948 to garner more interest - but maybe people aren’t yet ready to hear that news…)

What were you saying about Pie Charts?

Which brings me back to my point.  Just saying that as a sum Marquees are my most-served export type is all well and good.  But showing you how each type compares is even more effective:

---

---

We’ve been working on this feature for over a month now an can finally announce (with a slight lump in our throats - and a sigh of relief) that Bluyah support for Google Docs is finally live.

Great - but what does that do for me?

At it’s most-basic, Google Docs support will allow you to tap into the spreadsheets you’re already storing in Google Docs and do things with the data that you were never able to do before.  Take for example our “Pizza Places in Fremont” demo from late last month.   When I put together the Google Map showing the location of each pizza parlor, the data was being pulled from a MySQL database set up on a personal server.  It’s a great set-up to demonstrate a point - but a little impractical to manage on a day-to-day basis (considering that I’m doing all of the SQL inputs manually).

Now that Bluyah supports Google Docs that has all changed.  Let me explain.

 Spreadsheet, spreadsheet - who’s got a spreadsheet.

Let’s face it - spreadsheets are how the majority of American businesses track their business-critical metrics.  We may have the priciest, high-availability database farm in existence.  But when we need to quickly crunch some random numbers, we instinctively reach for our trusty spreadsheet.  

Professionally, I track everything from project estimates for clients to PTO balance forecasts for employees.  Personally, I have a spreadsheet to track the number of miles and calories burned each time I’m on the eliptical machine, a spreadsheet to track when each of my eldest son’s book reports are due -  I even have a spreadsheet to track applications I want our company to develop.  The point is: spreadsheets are ubiquitous.  We’re collectively brain-dumping a whole lot of information into them and now - with the help of Bluyah - we can get some of that information back out in a meaningful way.

What was that about pizza, again?

So back to my list of pizza parlors in Fremont.  The spreadsheet was already in existence.  I had created it a couple of months ago.  And it was already in Google Docs.  I’d post the link here - but the spreadsheet is ‘private’ (I’ll write more about how to make ‘public’ specific columns in a ‘private’ spreadsheet later….)

I had all of the information I wanted - I just wanted to access that information in a more intuitive way : via a map.  With Bluyah, because map exports are already part of the application I didn’t have to do anything special.  All I had to do was set up my spreadsheet in such a way that it could be reported upon - then build a map based upon my report.

Sounds hard - how long did that take you?

Being the kind of person I am, I decided to find out.  I was going to time myself.  From spreadsheet to live map - how long would that take?  (I wont’ keep you hanging - it took less than two minutes.  A minute and forty-seven seconds to be exact!).  Here’s how that approximate two minutes was spent:

1. Create a new Google Docs connector.  This means click on “Connect” in the top menu, then “New Google Docs Connection” in the sub-menu.  The connector only requires a memorable name (or label) for your connector, your google docs email address and password (you can read more about why Bluyah requires email and password for fetching content “on-demand” when exports are rendered - and how Bluyah protects and encrypts this data  - by reading the Bluyah Privacy Policy).
2. Once the connection was established, I clicked on “List Spreadsheets” in the ‘Action’ column of the newly created connector.
3. This task listed all of the spreadsheets I had available for reporting against in my Google Docs account.  I selected my “pizza places” spreadsheet and clicked the link “Use in New Report”.
4. Since my spreadsheet had all of the columns named as I’d want them already, I didn’t change any of the column names when creating the report.  Nor did I change the column ordering.  But I did change the report title.  I liked “Pizza Parlors” better.  Has a nicer ring to it.
5. Saving the report, I had the following:
    http://admin.bluyah.com/export/html/a45557e0de1b012b6ee4002241319b39
6. Veriftying that the data looked solid, I then clicked the “Exports” link in the newly created report’s ‘Action’ column, then clicked ‘New Map’ in the sub-menu at the top of the page.
7. Creating the map was the hardest part.  I couldn’t decide between an orange map marker or a red map marker.  Finally, after about thirty seconds of deliberation I settled on orange.  I then set the size of the map to 400 by 300.
8. Since my spreadsheet contained street addresses (and not latitude/longitude information) I clicked the “Plot by Geocode” link to bring up the screen that allows me to map my data colums to the necessary ’street’, ‘city’, ’state’ and ‘zip’ fields.  Since the fields in my spreadsheet were similarly named, however, these mapping fields were pre-selected for me.   I didn’t need to do anything more than validate that they were there.
9. After that the only thing left to do was for me to decide which fields I wanted to display in the pop-up bubble on the map when users clicked on the map marker.  For my purposes, the pizza place’s name and phone number were the most important - so I placed them at the top of the list.  I added the address on just as a reminder.
10. Saving the map I was left with this:

NOTE: It probably took you longer to read the above description than it did for me to actually create the map.  I think you’ll find the same is true for you.  Once you start using Bluyah and you see how easy it is to go from “problem” to “problem solved” you’ll find more and more data sources you’ll want to export into charts, maps and marquees.

Let us know what data you’ve been mapping lately.

---

---

With version 0.4.4 of the code base we introduced Enhanced Maps which allow you to easily control the marker color and the contents of the “bubble” that displays when you click on the marker.  

With these new features, creating robust, data-driven maps become an extremely easy thing to pull off.

Case in point:

The USGS publishes an RSS feed that contains data on all of the earthquakes that have occurred over the past 30 days.   We went from feed to map in about 3 minutes by doing the following:

 

• I created a new Atom/RSS connector.  The input screen only required I give it a memorable name and input the feed’s URL.
• Once saved I clicked on the “Report” link for the newly established connector.  This brings up the Report Edit screen:

 

 

• On this page I changed the ‘pubDate’ column to ‘Reported’ and changed the ’summary’ column name to read ‘Earthquake’.  You change the column name by clicking on the name itself.  I also hid a couple of columns I didn’t need by clicking the [x] box in the upper-right of the column header.  
• Once I had saved the report (you can see the report in tabular format here - or as a CSV file here), I then clicked on the ‘Export’ link at the top of the screen, then the ‘New Map’ link and selected the newly created Report name.  The map edit screen has a few more configuration possibilities:

• Because the data elements ‘lat’ and ‘long’ already existed in the RSS feed, they were automatically selected as the fields to be used by ‘Latitude’ and ‘Longitude’.  (If my data set had contained street addresses instead, I would have clicked the ‘Plot by Geocode’ link instead )
• I only wanted the ‘Reported’ and ‘Earthquake’ columns from my report to show in the bubble that displays when a user clicks on a map marker, so I dragged them from the ‘Available Data’ box beneath the map, onto the bubble, and ordered them appropriately.
• Saving the map resulted in this: 

Let us know your thoughts.  Or better yet ~ create a map of your own and send us the link.  We’d like to see what you’ve done.

[UPDATE] A screencast of this tutorial can now be found here.

---

---

Previously, in Basic Charts, we talked about getting some data out of a database and creating a very simple chart showing users per week in the Bluyah application.

With Version 0.4.2 of the application, enhanced charts have been introduced.  Here is that same data displayed as a 3D Column chart:

Some things that have changed - you can now:

• See the value of the column displayed in a “tooltip” by mousing over any part of the column. (try it!)
• Set chart background color
• Set chart axis text color
• Toggle legend on and off
• Toggle Report title on and off - as well as position it on the chart.
• Toggle the horizontal and vertical axis lines

More changes are in the works.  Feel free to send us your comments and/or suggestions.

---

---

Maps are increasingly becoming a valuable aid in helping users to visualize their data.  

Consider something as relatively simple as plotting out a map of your customers so you can better analyze where precious marketing dollars should be spent.  Before you can even begin to do this, you need to determine which mapping API you’re going to integrate with (Google may be more popular choice), register for a developer ‘key’, then start writing the application code to get your data out of your customer tracking system.  

This is all before you even begin to wade through fairly complex Javascript required to to get these data points plotted on a map.  And if your data is not already geocoded … well, there goes your weekend.

Or - you could use Bluyah and go from data source to the map you see below in less than 5 minutes:

[Editor's Note: With the introduction of Enhanced Maps in version 0.4.4, basic maps are no longer supported.  As such, the referenced map has been removed.]

Here we decided to plot the pizza parlors closest to our office (for those late-night coding sessions).  

Hope this helps.  As always, feel free to contact us with your questions and suggestions.

---

---