Open Source Rails & Flex eCommerce Application

[Announcement] Rowan Hick Consulting, Canada and Ron Hanley of Fastmount LTD, New Zealand are pleased to annouce that their new Rails/Flex/MySQL eCommerce application will be released to the community under an Open Source license. The application, is a successor to a PHP/MySQL based application developed by Rowan Hick and James McGlinn of Nerdsinc Ltd New Zealand.

After nearly 2 years in production, with the advent of Rails, Flex, and the rapidly growing business needs of Fastmount, the current application no longer meets the business needs of Fastmount. We made the decision early this year to re-write a new application and have been developing requirements for the application as well as evaluating technologies.

The application is a business to business eCommerce system. Allowing a marine manufacturing company in New Zealand to service it’s agents, distributors and customers world wide. The existing application facilitates order management from creation through to shipping tracking, along with customer management and some reporting elements.

Why are we open sourcing ?

Flex component development mindset

Having just picked up Programming Flex 2 I was dismayed that components seem (almost) to be an afterthought. Yes they’re documented, with 2 chapters dedicated to them - but the importance of them is from an architecture perspective seems to be glossed over.

After keyboard sized imprints in my forehead for the past day coding. I’m going to say this, definitely develop your Flex applications with a component first approach (well I will anyway!) don’t bother with a cruddy component-less prototype. You will save far more time in the long run designing your app from the ground up with components in mind and skipping the ugly component-less prototype step. Why do you want to do this ?

DataGrid - handy hints

Okay the orders list. It’s a plain vanilla DataGrid component bound to the result from an HTTPService call to get an XML representation of an ActiveRecord orders collection. This all pretty easy to get up and running, but I ran into two immediate snags.

Requirement #1 - Multicurrency in the totals column. Our system deals with orders in currencies all over the world, so we have price types and associate each order with a price type. Fair enough. Now we don’t store price type symbol with the total (naturally) so how do we get it to appear in the same column in the the datagrid.

Option 1 (on the Rails side) would be to add some faux accessor and iterate over the orders populating it before we handed it to the to_xml function sending it to Rails (that’s not without it’s problems). OR

Option 2 (on the Flex side) we manipulate it over here. First off we create a little function that takes our current item (row) and the column we’re manipulating, then prepends the symbol and appends the code to the amount.

private function formatCurrency(item:Object, column:DataGridColumn):String
{
   var field:String = column.dataField;
   return item.price_type_dollar_sign+' '+item[field]+’ ‘+item.price_type_symbol;
}

Then in the mxml code for the datagrid

  <mx:DataGridColumn headerText="Total Amount" dataField="total_amount_payable" labelFunction="formatCurrency"/>

Requirement #2 Sorting a field in an order different to that displayed So we have an order status (Draft, Pending Review, Review, Payment Pending, In Manufacturing, Shipped etc). Great, now you put that straight into your datagrid, hit a column header to sort, and realise it’s doing an alpha sort on the status name. As you expect (but not as you wanted). Well again there’s two ways to accomplish this - one is to pass in custom sort function to figure out the order. OR

The other option, is to pipe down in your xml along with the order status name, a sort order numeric value , so Draft is 1 Shipped is 1000, everything in between gets a number etc. Then just as you do for the currency symbol, change the formatting of the column - so we bind our column to the order status sort_order value, but we display the order status name. When the datagrid sorts, it sorts on the bound value, not on the formatted value. Very nifty and simple. Just like this…

private function formatStatus(item:Object, column:DataGridColumn):String
{
    return item.order_status_name;
}
  <mx:DataGridColumn headerText="Status" dataField="order_status_id" labelFunction="formatStatus"/>

No nasty sort function, and does the trick.

That’s it for now… till next time.

Screenshot #1 - Orders list

Right here’s our first look at the prototype app. Nothing too dramatic but gives you an idea of where we’re headed with this.

orders_list2.jpg

As you can see we’ve got some fairly standard controls, a datagrid, combo boxes, and buttons. Tomorrow we’ll show how this is structured, and how I managed to get some fairly neat stuff with the datagrid working that demonstrates the polish already in Flex.

Possibilities become real.

A while back, at a previous company, our clients inundated us with feature requests. At one point at the infancy of this software’s life, the codeword for “thank you for your request, we’ll try to get it into the software” was called Possibilities. It always left the door open, however I’m sure the rate at things went through the door and never came back (well not until years later!) possibilities became a dreaded word…

Now however (my personal belief) is between Rails and Flex turning the seemingly impossible to implement round in no time at all. After a rocky road start to Flex, I’m now having the opportunity to develop a full blown B2B application in it. Replacing a PHP/HTML solution. Both exciting and nerve racking - last night a good 2 hours was spent tracking down how exactly to get something shown in the correct order.

I am well impressed, and looking forward to the future of possibilities with Flex 2, Apollo (and what Flex 3 may bring). To share my enthusiasm a good portion of this blog is going to be dedicated to documenting the rebuild of the previously mentioned B2B application.

Currently I have client buy in, after ~ 6 hours of knocking up simple interface showing off a very ‘windows like’ application within a web browser he’s sold on it, so it’s now the big re-write.

Here’s the starting point for it:

- A rails app with database migrations to take the v1 app’s database and migrate it into a rails friendly naming scheme.
- Basic objects replicating core functionality within Rails
- Two flex front ends, one for general order management, and the other a tailored interface specifically for manufacturing.

So far, here’s my pro’s and con’s list

Pro
+ It’s going to work once, anywhere. Flash bugs cross browser are fee and far between. (compare that with XHTML/CSS/JS)
+ More native application functionality (drag/drop, grids etc)
+ Less network traffic per session
+ More responsive application

Cons
- Write, compile, write, compile, write, compile (although Flex Builder/Flex compiler shell reduces the pain)
- A lot more code in building the interface
- Guess work figureing out how to do complex stuff
- Loosing some of Rails niceties (or duplication of things like validations)

Next up some screenshots….

Continue

About

Rowan is a Product Development Manager, specialising in architecting, developing and putting web applications into production - in particular Ruby on Rails based apps. He lives in Toronto, Canada but speaks in a funny accent as he's originally from New Zealand. He's been working in the software and web business for over a decade. This blog covers Web Application development and deployment in the real world, dealing with topics from business fundamentals to Ruby on Rails, Merb, PHP, Flex, MySQL, Apache and more.

Read more ...

 

 

View Rowan Hick's profile on LinkedIn

 

Subscribe to my RSS feed