Building a Flex-based dashboard with a PHP backend

Leave a comment

Today (June 1st) I got to give an online talk with Adobe on how to create a stunning analytics dashboard with Flex and PHP (recording here).  I’m a horrible graphic designer and so I don’t know how stunning it was, but from the technical perspective we covered a lot and it was a lot of fun to write.  Several of the attendees asked for code and so here is what I’ve written.  Like the webinar, it will take a little bit of time to get it working.  But the end result is that you’ll get a whole lot of stuff to think through.

What I did was take a Magento installation and create an observer that would send data to a message queue where it that data could be processed for either summary information or real-time notifications.  The dashboard contained graphs for traffic and product sales summaries and a notification list that would show new purchases as they were made.

To do this I used a lot of different programs, which you will need if you want to try it out.  You will need

  1. Magento
  2. ActiveMQ
  3. Zend Server (30 day trail available)
  4. MySQL
  5. Flash Builder for PHP (60 day trial available)

AS3Stomp is also used but I have included it in the workspace download.

Additionally, you will need to have two host names available on your machine.  I named mine magento.local and charting.local.  I set them in my hosts file (/etc/hosts or c:\windows\blah\blah\blah\hosts) but you could also use DNS as well if you needed to.  If you chose to run off of different host names you will need to change the gateway URL for the Charting project by editing the .flexProperties file and changing the serverRootURL property.

The first thing you need to do is download and install Zend Server.  You will need a license key to activate the Job Queue service.  Additionally you will need to add the directory in the project ChartingAPI, /library to your PHP include_path setting so that the logging and library classes can be included in your scripts.

You will then need to download and install Magento and then create a list of products.  Two or three should be enough.  If you want to easily integrate it with my code I would suggest that you create a blank PHP project and import the downloaded contents into the new project so that the project root is the document root for magento.local.  Do this before importing any of my project code.

Next, download and install ActiveMQ.  You will need to create three queues; saledata, sales and traffic.  You will also need to turn on Stomp support which you do by editing the activemq.xml file and adding the transport connector.

<transportConnectors>
<transportConnector name=”openwire” uri=”tcp://0.0.0.0:61616″/>
<transportConnector name=”stomp” uri=”stomp://localhost:61613″/>
</transportConnectors>

You may need to specify the JAVA_HOME directory in activemq.bat in the bin directory.

From there you can import my Magento extension into the Magento project.  Make sure that you import it into the root so that the code ends up in /app/code/local/Zend.  Additionally there should be a file called /app/etc/modules/Zend_Dashboard.xml.  This is there to inform Magento that you have a new extension that you want to use.  Once you have the code in place you will need to 1) Flush the Magento cache and 2) Enable the extension in the Magento settings (hint, it’s in one of the last sections).  With Magento, if you make a change and nothing seems to happen, it’s probably because the cache was not flushed.

To test the messaging configuration go to the ActiveMQ management page at http://localhost:8161.  Browse around the Magento site a little and check back to the queues page.  If you see messages waiting then your configuration is working.

Next up is to set up the  job queue.  In the ChartingAPI project there is a directory called public.  That should be the document root for the charting.local virtual host.  In the public directory is another folder called jobs.  In there are two scripts that will need to be run at least once.  Each of them requeues itself and so if you run it once via the URL (http://charting.local/jobs/process.traffic.php and process.sales.php).  Run them once and only once.  If you want to see what they do prior to injecting them into the job queue comment out the three lines of code starting with the object ZendJobQueue.

Now you should be ready to go with the Charting project.  If it is not able to compile due to a missing Stomp class you will need to reference the src folder in the project AS3Stomp.  After that is working right click in the Charting project on the Charting.mxml file in the src/(default package) directory and select Run As -> Mobile PHP Application.  That will kick off the charting application.  If there are problems you can select Debug As -> Mobile PHP Application and debug both the Charting application’s ActionScript or the PHP application’s service calls.

The link for the workspace zip is adobe.webinar.zip.

You can also see my slides on SlideShare.

I will leave you with that for the time being.  I intend to do another blog post on some of the reasons for doing things the way I did them along with some discussions about the architecture for the different integration points.  Additionally, I found that this webinar has highlighted a couple of pieces of needed documentation both for ActionScript and asynchronous community in PHP.  So, I have my work cut out for me for the next little while.  🙂

Leave a Reply

Your email address will not be published. Required fields are marked *