QueTwo's Blog

thouoghts on telecommunications, programming, education and technology

CFML in the Cloud (Part 2)

This is the second part of a two part series on deploying your CFML applications to the cloud using Amazon Web Services’ Elastic Beanstalk.  Read the first part here.

Updating your application

  1. Since your app is running through your Elastic Beanstalk, making changes are not as easy as just FTPing a few files to the server.  You will have to make the changes the “Java” way.
  2. Make the changes, and preview them on your local Tomcat server.  Drop the changed CFML templates into that WebContent directory, and hit refresh in your browser.
  3. Once your changes are good on your local machine, right click on the project name, go to Run A -> On Server…
  4. Choose your AWS instance from the list, and click Next.
  5. Make sure your project is still selected to deploy and click Finish.
  6. Wait.  It will take up to 5 minutes to upload your changes to AWS.  It will then take another 5 minutes or so to merge your changes with the original project and restart Tomcat.  It will take some time, so grab a fresh drink.  You may get an error message saying that your instance took too long to start — that’s ok.  Give it a few minutes and refresh your browser to see the new version.

Setting up a Database

  1. Amazon Web Services has the ability to host regular databases as well!  You have two options:
    1. Create a new database using Amazon RDS.  This gives you much more flexibility and lets you choose between MySQL, Oracle, or Microsoft SQL.   You get one year free for one DB instance.  You can have as many tables and store as much data as you want.  You can also tell it to do automatic backups and snapshots of your DB.  This is slower for smaller queries (because it relies on TCP sockets across the network), but faster for more CPU intensive queries.
    2. Create a DB within your Elastic Beanstalk instance.  This adds no cost to your application, but limits your DB choices.  It also means that if you re-create / re-upload your application, your DB will be reset.  This is slightly faster for smaller queries, but slower for larger, more CPU intensive queries.
  2. Head over to the Amazon Management Console.  Login.
  3. If you are going with option 1, do the following :
    1. Head to the RDS section.
    2. Launch a new instance.  Choose your DB engine.
    3. Set the Instance class (this is how much CPU you will have dedicated to the DB.  t1.micro is the free one).  Choose how much space you plan to use (allocation space), and set a DB name, username and password.
    4. Go through the rest of the configuration settings and launch your DB.  It will take about 5 minutes to it to fully launch.  Once it is launched, it will give you the “endpoint”, which is the hostname of the DB.  Write this down, you will need it later.
    5. Head over to the “DB Security Groups” section.  We need to allow our server to access this DB through the firewall.
    6. Click on Default.  Under Connection Type, choose EC2 Security Group, Choose the weird looking “instance id” from the drop-down, and click Add.
    7. You may want to add your own computer to the list as well so you can manage the DB over the internet — Add your IP address by using the CIDR connection type (it will tell your computer’s IP address so you can add it properly).
    8. Your DB should be all setup.  You can connect to it from your computer using your favorite admin tool — use the endpoint as the hostname, and the login/password/db name to connect to it.
  4. If you are going with option 2, do the following :
    1. Head over to the Elastic Beanstalk section.
    2. Find your application, then the environment you launched.
    3. Click Edit Configuration under the enviroment.
    4. Go to the Database tab, and fill out the following form : 
    5. When you apply changes, it will create the DB and spin it up.  This will take a few minutes.  You will get the endpoint (hostname), the username and password when it is finished.
    6. Head to the RDS section within the AWS Management Console.
    7. Head over to the “DB Security Groups” section.  We need to allow our server to access this DB through the firewall.
    8. Click on Default.
    9. Add your own computer to the list as well so you can manage the DB over the internet — Add your IP address by using the CIDR connection type (it will tell your computer’s IP address so you can add it properly).
    10. Your DB should be all setup.  You can connect to it from your computer using your favorite admin tool — use the endpoint as the hostname, and the login/password/db name to connect to it.
  5. Go to the Railo or ACF administration interface, and add the DB.

Using the Administration Interface (Railo Specific)

  1. Chances are, you want to be able to keep your configuration settings in sync between your local computer and the AWS instance.  This is not hard, but it requires you copying some files around.  In all honesty, this is the trickest thing about running Railo in the cloud…
  2. Head over to http://localhost:8080/<projectname>/railo-context/admin/server.cfm
  3. Set a password.  The first time you go to this page, it will ask you to set one.
  4. Make your changes.  For example, setup your databases, etc.
  5. Click on the Web Administrator tab.  At least set a password.  This is the context-specific settings (you only have one context at this time, so you may want to set everything in the server admin).
  6. When finished, click back on Server Administration.  This will take you back to the dashboard.  Keep this open in the background.
  7. Back in ColdFusion Builder, create a set of new folders within the WebContent folder :
    1. WebContent\WEB-INF\lib\railo-server\context\
    2. WebContent\WEB-INF\railo\
  8. Go back to the Server dashboard.  Find the configuration file section.  Find this file on your file system, and copy it into your new \WebContent\WEB-INF\lib\rail0-server\context\  directory.  4-9-2013 9-13-51 PM
  9. Go back to the Web Administrator dashboard.  Find the configuration file section.  Find this file on your file system, and copy it into your new \WebContent\WEB-INF\railo\ directory.
  10. Any time you want to push Railo configuration file changes into the cloud, you need to repeat this process.
  11. Deploy these changes to your AWS instance by following the Updating your Application section.  Your online AWS instance will be updated in a few minutes.

Licensing Considerations (Railo vs. Adobe ColdFusion)

One thing to consider when deploying your CFML application out to the cloud is licensing.  In particular, if you are using Adobe ColdFusion there are some serious licensing implications.  NOTE:  I’m no lawyer — I only play one on TV.  Consult your legal weasel team before trusting what I say here. 

If you deploy Railo on the cloud, there is very little you have to worry about.  By being licensed under the GNU Lesser license, you are free to do pretty much what you want with it.  You can deploy, scale up, scale down, etc. without much worry.  I promise.  Oh, and the Railo team is pretty nice too ;)

If you plan on working with Adobe ColdFusion 9.x and below, know you are breaking license agreement by using AWS.  They calculate your license by the number of CPUs that you are running on.  There is no way to know that.  At all.  You could say that you are trying to be honest by having one license per instance — and I’m sure they would believe you, but you are “breaking the law.”    I’ve tested this setup with ACF 8.x, ACF 9.x and ACF 10.x (all developer editions of the WAR deployment, of course!) and had it work fine.  ACF 8.x is pretty slow on t1.micro, so be aware of that.

If you plan on working with Adobe ColdFusion  10.x, they do allow for ACF on the cloud.  You can run either 1 CF Standard  instance per license, or up to 10 CF Enterprise instances per license.  More information is available on the blog post written on the subject by the CF team.  Read the blog post carefully.  What it boils down to is if you are running a standard license, you CANNOT use the auto-scaling features of Elastic Beanstalk.  If you are running an enterprise license, you need to watch the number of licenses you are consuming at your max when scaling up, and the amount of CPU you plan on consuming.

Conclusion

I hope this tutorial helped you bring your apps to the cloud.  As I said earlier, I’ve been deploying many of my customers using this method with great success.  Please comment below if you have any questions or comments with the setup.  Enjoy!

CFML in the Cloud (Part 1)

Deploying CFML, or ColdFusion applications in the “cloud” is a lot easier than you might think. I recently deployed my 5th customer on Amazon Web Services using their Elastic Beanstalk product and once you get the hang of what is going on, it is pretty easy.

For those of you who have never heard of Amazon’s Elastic Beanstalk, it is a “cloud” product for developers.  Essentially, it allows you to take a bundle of source code and upload it to a brand new server.  You don’t have to setup the OS, configure a web server, worry about permissions, do backups or patches.  The Elastic Beanstalk will even scale your server for you if you get a lot of traffic in a short amount of time.  Best of all, Amazon gives developers 1 year worth of this service for free (you still have to pay for bandwidth and storage, but in most cases that is less than a dollar each month).  Since this is a hands-off approach you are limited as to what OS or runtime tweaks you can make…

What you will need in order to Deploy a ColdFusion app in the cloud:

  • An Amazon AWS account.  You will need to tie a phone number and credit card to your account in order to sign up.  You will get 1 year’s worth of service for free for one server.
  • A working copy of Eclipse.  I used the version that is bundled with ColdFusion Builder 2, but you can use any fairly modern version.
  • A Modern CFML Server that can deploy as a WAR file.  This includes Railo 3.2+, Adobe ColdFusion 8.x – 10.x (Enterprise edition only).  I’ll dive into licensing concerns later.  I’ve been using Railo 4.1.
  • The AWS toolkit for Eclipse.   More information about that is here.
  • Apache Tomcat.  I recommend Apache Tomcat 7.x.  You will want to grab the “Core .ZIP” file.
  • (Optional) Some sort of CFML editor.  Again, I used CFB2. CFEclipse should work equally well.

Setting up your local environment:

  1. Install Eclipse, if you don’t already have a working copy.  Install your CFML editor (or if you use ColdFusion Builder, simply use the Eclipse that comes with it).
  2. Make sure the following components are installed within Eclipse…  If you don’t see them on the list when you choose the correct repository, then they are already installed. If you are using CFB, you will need to go to Help -> Install New Software -> and choose the Indigo Repository from the Work With… drop-down :
    1. Under Web, XML, Java EE and OSGi Enterprise Development
      1. Eclipse Java EE Developer Tools
      2. JST Server Adapters
      3. JST Server Adapters Extensions
      4. JST Server UI
      5. WST Server Adapters
  3. If you installed any new components, restart Eclipse.
  4. Install the Amazon Web Services Eclipse Toolkit
    1. Go to the Help -> Install New Software…  Menu
    2. Click the Add… button next to the Work With drop-down.  This will allow you to add a new repository
    3. Add the AWS Eclipse Toolkit repository with a location of : http://aws.amazon.com/eclipse
    4. Select all the available modules, EXCEPT the following :
      1. SimpleDB Management  (This will require some modules that don’t install right)
      2. AWS SDK for Android (This will require the Android toolkit which we haven’t installed)
    5. Click install, and let Eclipse download, verify and install all the required components for AWS.  Make sure to restart Eclipse after you finish.
  5. Open the AWS Management Perspective (Click the little plus sign next to the ColdFusion icon in the toolbar).
  6. Click the down arrow on the right side of the AWS Explorer view.  Choose AWS account, then Configure AWS accounts.4-7-2013 11-30-20 PM
  7. Setup your account credentials, and give an account name.  These were provided to you during the initial setup, but there are also instructions on where to find it in the AWS management portal as well.
  8. Click Apply and OK.
  9. Take your copy of Tomcat you downloaded earlier, and unzip it somewhere where you can find it.  C:\Tomcat\ works great, but it doesn’t really matter.  You don’t need to install it, configure it or anything like that — the AWS toolkit will do this for you.

Setting up your new CFML project

  1. Switch back to the CFML perspective in Eclipse.
  2. In the Navigator, click on a blank area and choose New -> Project…   (NOT ColdFusion Project!)
  3. Choose AWS -> AWS Java Web Project
  4. Give the project a name, Select your AWS account you setup earlier, and choose Basic Java Web Project
  5. A new CF project will be created with three folders :
    1. build  — This will hold your AWS configuration.  No need to touch this.
    2. src — If you plan on adding any additional Java source-code, this is where you will do it.  Otherwise, nothing to see here.
    3. WebContent — this is your WebRoot.  It comes pre-loaded with a .JSP file, a styles folder, images folder and a WEB-INF folder.  Delete everything in this folder EXCEPT the WEB-INF.
  6. Download your CFML engine as a WAR file.  I recommend Railo, which has a .WAR file you can grab right from their website : http://www.getrailo.org/index.cfm/download/.   If you are using Adobe ColdFusion, you will need to grab and generate your .WAR file manually.
  7. Rename the .WAR file to .ZIP.  Open this ZIP file with your favorite unarchiver.
  8. Copy the contents of this ZIP file and place it in the WebContent folder.  If using the downloaded version of Railo, you will end up with some sample .CFML files and a WEB-INF directory.  Don’t touch anything in the WEB-INF or META-INF directories, but the rest of the files can be deleted.  Make sure to overwrite the web.xml file.
  9. You now have everything in place to start coding.

Testing and debugging your CFML application

  1. You will most likely want to test your application before you deploy to Amazon.  That is why we unzipped TomCat earlier!
  2. Right click on your project in the Project Explorer, go to Run As -> Run On Server…
  3. Choose “Manually define a new server”
  4. Choose Apache -> Tomcat v7.0 Server, and choose localhost as the hostname.  You will then want to choose “Configure Runtime Environments”
    4-9-2013 8-11-03 PM
  5. Add a new Tomcat environment, pointing to the Tomcat installation directory to where you unzipped Tomcat.
  6. Chose Next to add your new project to the server (other known as a resource).  Hit Finish.  Tomcat and Railo should now start.  You can watch it start by checking out the console view on the bottom of the screen.
  7. Within about a minute or so, you should see a new tab open up with the “Welcome to Railo” or “Welcome to CF” screen.  You server is now running.  You can check it out at http://localhost:8080/<projectname&gt;.
  8. As you place and save files in the WebContent directory, those files will be “published” to your local Tomcat server.  It sometimes takes a few seconds for them to be published.  You can always check the status by looking at the “Servers” view (this is a different Servers view that is just for CF server — this would be the Java one, which is usually hidden by default in CF Builder).
  9. Do note, this environment should be exactly the same as what is published out to Amazon Web Services — except it will be deployed in the Default context — which means that you won’t have the project name in the url. You will have something like  http://myproject.amazonwebservices.com/index.cfm   instead of  http://localhost:8080/myproject/index.cfm

Publishing to Amazon Web Services via Elastic Beanstalk

  1. So, you’ve got your environment setup, your project humming long locally, and you are ready to bring it to the web…  
  2. Right click on your project, go to Run As -> On Server.4-9-2013 8-20-45 PM
  3. Click on Manually Define a new Server, and choose “Amazon Web Services -> AWS Elastic Beanstalk for Tomcat 7″.  Click Next.
  4. Fill out the Elastic Beanstalk configuration form.  You will need to choose a region to launch the app at, an application name (this is used so you can identify your application), and an environment name (this becomes the prefix to the domain name that will be assigned to your application).  For this example, the domain assigned to the app was http://appDomainName.elasticbeanstalk.com.  Most likely you will point your own DNS entry to this.4-9-2013 8-25-46 PM
  5. Click Next.  This will allow you to choose which applications you want to deploy to the EC2 instance.  You will only have one, so hit Finish.
  6. Your application will be packaged as a WAR file, uploaded to S3, a new EC2 machine will be created, a firewall, load balancer and your app will be deployed.  This can take up to 10 minutes the first time.  If you get an error message stating the server took to long to launch, don’t worry…  It will launch.  It does take a while to start up the first time, trust me.
  7. After the app has launched, you should see an Elastic Beanstalk configuration screen.  This will allow you to tweak configuration settings, see the final URL, and much more.  Check it out.
  8. Modify the Start timeout setting under Timeouts to something large like 600 sec, so you don’t see any errors while deploying incremental updates.
  9. Congratulations!  Your CFML app is now on the web!

Check out Part 2 here.  I covered updating your application, integrating it with a database, using the administration interface and a discussion about licensing concerns.  

Making ColdFusion Sing

One of the coolest things about CFML is the fact that it was designed for rapid application development.  Even more so, as the language (and server platform) evolved, it quickly turned into one of those tools that knew how to talk to just about everything.  From FTP, to the Web, to SSH connection, to specialized JDNI connections, it is pretty darn simple to make ColdFusion the glue that holds disparate systems together.

Last month I was tasked with coming up with a tool to allow some of my PBX users to record announcements.  The current system they were used to involved them calling a phone number, entering in a special code and then recording their announcements.  It was easy because the phone already had a mic, speakers and everything else setup to the point where the user didn’t have to worry about all the related computer settings.  I tried to re-create a solution that was just as easy using the Flash Player (and ever a Java applet) — but it turns out that very few people have microphones hooked up to their computers — and those who do have no idea how to tune it so that the sound levels are descent.

I came up with a nifty idea.  I wrote a really quick CFML app to interact with Twilio (an online phone company that provides a really wicked API for dealing with live telephone calls).  Essentially, they post back form requests to you, and you pass back XML documents back to them.  They even have an API that can do recordings.

The only problem was the recordings they saved weren’t in a format that my PBX understood.  While they provided me mono, 16-bit PCM, 16k wave files, I needed 64-bit, 8k mono uLaw wave files.  To a normal computer, these look the same, but to these two different systems, they were radically different.

The solution?  I found a really cool Java application known as JAVE.  JAVE is a wrapper for ffmpeg, which is a very well known application that can work with audio and video files.  JAVE allows me to convert from one type of wave file to another, or even from an mp3 to a wave, or from a Windows Media file to an MP4 file.

Using it?  Like dealing with most Java classes, you drop it into your CFML’s LIB directory.  I tried it both with Adobe ColdFusion and Railo and it worked flawlessly.  Once you have the Java class (jave-1.0.2.jar) in the lib directory and re-start your CFML server, you are ready to start writing some code.  Here is what I came up with to convert between my two wave formats :

<cfscript>
 jave = createObject("java","it.sauronsoftware.jave.Encoder");
 incomingFile = createObject("java","java.io.File").init("C:\temp\incoming.wav");
 outgoingFile = createObject("java","java.io.File").init("C:\temp\outgoing.wav");

 audio = createObject("java","it.sauronsoftware.jave.AudioAttributes");
 audio.setCodec("pcm_mulaw");
 audio.setBitRate(64);
 audio.setChannels(1);
 audio.setSamplingRate(8000);

 attrib = createObject("java","it.sauronsoftware.jave.EncodingAttributes");
 attrib.setFormat("wav");
 attrib.setAudioAttributes(audio);

 jave.encode(incomingFile, outgoingFile, attrib);

</cfscript>

That’s pretty much it.  If you do a cfdump of the “jave.getAudioDecoders()”, “jave.getSupportedDecodingFormats()” you will get a good feeling of all the different file types you can convert between.

This is more of the type of magic we need to be talking about.  Sure, converting between file formats can seem dull, but being able to come up with a solution to do it quickly is what makes a language, and a platform useful.

State of ColdFusion Platform in 2012

It’s been a long, hard year for anybody who is an Adobe fan.  Especially so if you worked at all on any of Adobe’s “enterprise” products like Flex, ColdFusion, or LiveCycle.  With the disaster that big red threw on us last November, we learned that Flex was killed (then spun on to Apache, which is actually ending up to be awesome), ColdFusion was moved to India, LiveCycle was made “government only”, and Adobe was left to pursue new markets instead of ones they had put energy into before (like HTML5 and Gaming).  This post won’t be about Flex — I help with a monthly newsletter which can give you all the background on that project at the Spoon Foundation. The LiveCycle suite of products died because Adobe felt that anybody not associated with a Fortune 50 company could handle the power it offered.

Anyway, back to ColdFusion.  This is the product I’ve been associated with for the longest (since 1997?), and arguably the one that has made me the most money out of any Adobe technology.  Lets face the facts, ColdFusion, while not dead is in a downward spiral.  Today is not the day when I see new ColdFusion projects being started, and I certainly don’t see new faces in the ColdFusion community.  That’s a problem and a tall-tale sign that the platform is slipping into the “Dated” cycle of technology.  That’s not a bad thing (unless you are looking for a job), it will just be different.

To my surprise, there was an online panel titled “CFML 2012: State of the Platform” this past week.  In my searching of the web, I only found three references to it (two blog posts and a mailing list post).  I’m not sure what the panel exactly talked about (I couldn’t find any reference to it being recorded), but Judith Dinowitz did a blog post about it after.  I’m going to make some assumptions about the conversations based on the summaries since I didn’t attend live, but I do want to interject my 2 cents…

  • ColdFusion is past the point where it needs a “killer app”.  PHP has a few of these (WordPress, Drupal, etc).  Most people simply USE these applications — very few contribute to them.  They are not the reason why they have so many developers.  I have lots of customers who want WordPress on their domain — not because it is PHP.  Consequently, they don’t care that it is written in PHP, they just want that App.  Sure, now they have PHP on their site, but it does not really matter anymore — everybody has PHP available on their site.  ColdFusion already has what I think is a killer app — Mura from Blue River.  It’s the nicest thing that we got, and everybody who does anything with CF should give it a try.
  • Education is great, but it won’t save CFML.  We have years and years of books, blogs, magazines, etc. at people’s disposal that want to learn CF (some of these may be out of print, but you can still find plenty).  A site dedicated to learning CF in a week is cool, but it’s not the savior.  What is the incentive for people to even look at CFML as a language.  No jobs, no demand, nobody cool using it — everybody is just passing it up.  If I were looking to pick up a new language, would I honestly pick CF?  Nope.  Would a website that shows somebody how to use it be beneficial to those who need to learn it for their job?  Yup.
  • A stable platform from Adobe is what is mucking up the place.  Look, I’ve been an Adobe/Macromedia/Allaire CF fan for years and years.  CF10 was a huge disappointment.  Not only was it super buggy out the gate, but when the biggest feature (auto-updates) fails to work a few months after the release, and the fix to it is even harder to find — you know you have a problem.  In all honesty I’ve spent more time debugging weird issues in CF in the past 6 months than writing new features in my apps.  Weird issues like if you accidently point an ORM relationship the wrong way you have to restart the ORM engine in order for it to work again, or if you call .NET library through and the library tries to return a pointer that CF stops processing requests, cause me and others headaches.  The lack of attention to detail for the last 3 releases has been alarming and has caused weird bugs that then need to be reproduced for the end of time because many of the features were done by copy/paste coders rather than engineering the code from scratch.  Who the hell would want to touch a platform if all they see is work-arounds instead of new features?   Ask any system admin about installing CF and the laborious process that can be.

What would I do to change it if I had the community’s support?

  • Have the community switch their primary support to Railo. They care, and they fix bugs.  It’s free*, and when you want their support, they actually support their product.  Gert and their engineers care and they care about the community and the community’s future.  Because the barrier to entry is lower for Railo (and don’t give me the BS that you can develop real applications in CF and then buy it later on.  I’ll show you each application that I’ve written that needed to get around the three IP barrier just to do simple debugging), it will make it easier for people to try.  The trick is getting people to know about it and actually try it.
  • Marketing.  This is the big one.  Right now, we have very few cheerleaders left.  I don’t know very many Adobe employees that are really saying much about CF.  The usual subjects like Forta, Ray Camden made very little noise about CF10 being released when compared to the previous versions.  Heck, Adobe didn’t even do a road-show to the user groups and communities to tout the features of CF10 (they are planning one now — nearly 10 months after the release).   In addition to the dismal marketing effort by Adobe, the other CFML engines have not had much luck with their marketing campaigns.  It’s amazing how many active CFML developers I’ve talked to in the last year that never heard of Railo, let alone have used it.  They are all scared to try it — it’s different — and it’s not Big Red.  That is one thing that the remaining cheerleaders can do to help — help us get the word out of what is out there, how cool it is, and how ‘fun’ it is to use it.
  • More Marketing.  Close your eyes for a moment and think of a “typical” Delphi or Pascal programmer.  What kind of image pops in your head when I ask you to think of a COBOL programmer?  I bet they have beards, work in cubicles, wear ties and probably are closer to retirement than college.  Now think of a Ruby programmer or a Node.JS programmer.  I bet you thought of a hipster working out of a Starbucks or some cool Silicon Valley office overlooking the hills.  This is totally generalizes a whole swath of people (which I hate), but it makes a point.  ColdFusion programmers are not seen as “cool.”  ColdFusion is not seen as “Cool.”  It is not what the cool kids use, and it’s not what the startups use.  No idea how to fix this one.  This has nothing to do with the feature set of the language, how it performs under load or how fast it is to create an application for it.  In fact, it may be those things that CAUSE the “not cool” issue… I still see too many hipsters arguing about how to break JavaScript just so they can win the game of using less semicolons.  It might also have something to do with us constantly arguing with each other about which framework is cooler when the rest of the world is looking to do cool stuff.  Again, we are probably way past where we can fix this one.  Just don’t make me shave my beard.
  • Make CFML easy to use.  Not for us developers.  Make it easy for server admins to use.  There is nothing worse than trying to install CF9 onto Windows Server 2008 (CF9 came out /after/ 2008).  Between getting the server to even run, and run well, you need to go into IIS hell to get it to answer pages properly.  Install CF10 on RHEL with Apache?  Hope you have all weekend. The truth of the matter is installing Adobe’s CF is torturous if it is not your passion.  This is why we get so much resistance from IT people who don’t do development.  Sure, there are blog posts and some tech support documents scattered all over the place on how to do it, but for many people (some of them become decision makers), this is their first experience with the engine.  Railo is not free and clear in this one either — while what they offer is much better, it is still much harder than it needs to be (installing the connectors can be a real pain).   This could be solved by making configurators and wizards to help with the processes.  But the biggest thing is to make sure they work WELL.   What would be even better would be to offer a quick and easy way for developers to package up their apps, all the settings and allow us to make our own installers.  Adobe strictly prohibits this (they don’t OEM CF licenses), and the licenses from Railo seem to avoid the issue all together.  An extension of this idea would be to make the CFML engine packageable so that we could make our own WAR files and be able to just drop them into Tomcat or WebSphere.  You can /kinda/ do it today with a deep understanding of the engine and how Java works.

If you made it this far, well then you managed to make it through my mind-barf.  Am I giving up on CF?  I’ve pretty much given up on Adobe CF.  Unless they turn that ship around, and quick, I don’t see spending thousands of dollars on the frustrations they call a product.  Am I giving up on CFML?  No, but I see my time being spent on many other languages and products.  I’ve been getting better and better with Java, and ActionScript still has a lot of my attention.  Do I see myself dropping everything and picking up the language de-jour some day?  I have paying customers that expect me to get work done, so probably not.

I hope not to offend anybody — and please do leave your comments below.  An open discussion is one I want to see and contribute to.

Creating a one-time login for a mobile AIR Application

One of the aspects of Pointillism was that we wanted to minimize the amount of time that the user needed to worry about logins, passwords and signing up for the service.  This should be a pretty common goal for most mobile applications — the more you force the user to input that type of information into your app (or verify, re-verify, etc), the less chance they will use it.

We decided to base the app around the “ViewNavigatorApplication” model within Flex.  For the rest of the application, it made perfect sense as this type of app could easily be built around “screens” that were stacked as the user moved from one activity to another.  The problem was — if I wanted to force the user to login, I would either have to introduce some sort of “launching” screen that would contain the logic-check to see if the user had logged in prior, or I could not define the “firstView” property of the application tag and have some script in the Application tag decide.

My solution consisted of this — I defined the firstView to go right to the dashboard within the application (so, where a logged in user would go).  I then added a bit of code to the initialize event handler that could intercept the creation of the View and force it to go to the login screen ONLY IF the user had never logged in before.  This allowed the normal operation of launching the app after the user had logged in to go very quickly, yet still force the login in a seamless way.  This also meant that the user wasn’t subjected to multiple awkward transitions as the application decided if they were logged in or not.

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
 initialize="preAppInit()" firstView="org.pointi.views.MainScreen" .....>

 <fx:Script>
 <![CDATA[
import ....
public function preAppInit():void
 {
 var userInfo:CurrentUserManager = new CurrentUserManager();
if (!userInfo.isLoggedIn())
 {
 navigator.defaultPushTransition = null;
 navigator.replaceView(LoginScreen);
 }
 }

You will note that I set the default “push” transition because I wanted it to seem that the application launched right to the login screen, instead of having it flip to the screen (giving the impression that the user could hit the back button to go back to another screen).  Otherwise, the rest should be pretty self-explanatory.

Simple Caching Techniques in Adobe AIR

One of the aspects of the Pointillism mobile app that was recently released was that users were expected to use the game while in remote areas.  Remote areas often mean that data service is limited or just plain not available at all, and that can wreck havoc for game participants waiting for data to load.  There are two schools of thought in how to approach this problem.

One is to pre-load all the content that the game would or could ever use.  This means that you either package all the data / images with your app, or you force the user to download this data when they launch the app.  The advantage of this method is that the user can pretty much be completely offline after that point and still get the entire experience of the game.  The disadvantage of this, of course is that then you front-load ALL of your content.  If the user is on EDGE (or worse!), this would mean they would be downloading a LOT more data than they may need to in addition to making your app use more space on the end devices.

The other method is to setup some sort of caching strategy.  This requires the user to be online at least for the initial exploration of each section of your app, but after that, the data is stored on their device.  This can be problemsome if they are offline, of course, but depending on the game, this may not be an issue.  In a cached mode, the user will attempt to read from disc and return that data WHILE making the call to the service in order to pull down the latest data.  To the end user, this becomes transparent.  Updating cached data is also routine as all if you have to do is invalidate the cache to get that bit of new data.

In Pointillism, we worry about two types of data — lists of data (Collections, Arrays, Vectors, etc.), and user-submitted images.  Our goal is to cache both.

Luckily, Caching the images was super easy.  Dan Florio (PolyGeek) wrote a component known as the ImageGate which houses an Image component and a caching mechanism.  Using his component is as simple as substituting the <s:Image> in your MXML or ActionScript with his component, and boom — your images are cached as soon as they are viewed.  I did make a few tweaks to his component and posted it on my space over at Apache.  I substituted the Image component with a BitmapImage for speed, and added a small patch to cache the images in the proper location on iOS devices.

Caching lists of stuff was not much harder.  AIR has a built-in “write to disc” functionality known as SharedObjects.  SharedObjects started as an alternative to cookies in the browser, but within AIR allow us to store variables for long-term storage.  In my case, I choose to store data that came back from the server as a SharedObject every time we got some data back.  This turned out to be a good strategy as it allowed us to show old data immediately  and update it with current data once it came in.  Our data didn’t change /that/ often, so it might update at most every day or so.

One of our data manager’s constructor looked like this :

so = SharedObject.getLocal("org.pointi.cache");
 if (so.data.pointsList == null)
 {
 so.data.pointsList = new Array();
 so.flush();
 }

When we got our data back from our server, we did this :

so.data.pointsList[curHuntID] = event.result as ArrayCollection;
 so.flush();

And finally, when we wanted to read back the data, this is all we had to do (pointsList is the variable that was sent to our calling components):

ro.getPointList(huntID, userID); //call the remote function on the server
if (so.data.pointsList[huntID] != null)
 {
 pointsList = so.data.pointsList[huntID] as ArrayCollection;
 }

Pretty simple, eh?  We did similar setups for all of our data lists, and also implemented some caching for outgoing data (like when the user successfully checked into a location), so we could keep the server in sync with the client.

Adding a GPS-driven map to your Adobe AIR app

Over the next few blog posts I’m going to be writing about some of the cool little features I implemented in a recently released app I worked on — Pointillism.  It is pretty rare that I can talk about an app I’ve released, but the verbiage in this contract allows me to :)

On the admin interface of the app, the customer wanted to be able to add a “point” to the game.  A point is a destination that the end user is looking for in this virtual scavenger hunt.  In order to have the admins be able to visually see what their GPS was returning, we wanted to map the location, as well as the bounding area that they wanted people to be able to check in to.  While our admin interface was pretty basic, the functionality had to be there :

GPS and Map solution on iOS and Android

While most people would instantly reach for Google Maps, we decided to use ESRI’s mapping solution.  They offer a very accurate mapping solution that is consistent across all the platforms in addition to being very flexible   The one thing that Google Maps had a hard time providing us was the ability to draw the fence in a dynamic manner, built with realtime data that came from within our app.  It was important for us to be able to see the current location, and the valid locations where people could check into for that point.  The hardest thing was having the ESRI servers draw the circle (known as a buffer).  ESRI’s mapping platform is available for use FOR FREE, with very limited exceptions.  As a bonus, they have an entire SWC and already pre-built for Flex/AIR.

So, how was it done?  It was actually pretty simple :

    1. Add the SWC from ESRI’s website to your project.
    2. Add their mapping components to your MXML file.  We added the mapping layer and then a graphic layer (where the circle is drawn).  The mapping layer, we pointed to ESRI’s public mapping service.
      <esri:Map id="locMap" left="10" right="10" top="10" bottom="150" level="3" zoomSliderVisible="false"
       logoVisible="false" scaleBarVisible="false" mapNavigationEnabled="false">
       <esri:ArcGISTiledMapServiceLayer
       url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
       <esri:GraphicsLayer id="trackingLayer"/>
       </esri:Map>
    3. We added a few components to the MXML’s declaration section.  This included the defination of the “symbol” (the circle itself), and the Geometry Service (the thing that figured out how to draw the circle in the correct place).
       <fx:Declarations>
       <esri:SimpleFillSymbol id="sfs" color="0xFF0000" alpha="0.5">
       <esri:SimpleLineSymbol color="0x000000"/>
       </esri:SimpleFillSymbol>
       <esri:GeometryService id="myGeometryService"
       url="http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
       </fx:Declarations>
    4. Next, we had to write some code to update the map and draw the circle in the correct place.  This involves a few steps, including taking the GPS coordinates from our GPS device, and creating a new “MapPoint” which holds those coordinates.  A MapPoint is exactly that, a single point on the map.  The thing about ESRI’s service is that it knows a LOT of different map coordinate systems — so you need to make sure you choose one that makes sense.  In our case, our GPS is returning back data in WebMercator format (lat/lon) other known as Spatial Reference number 4326, so that is what we are going to use to project that point to center our map.  Finally, we will ask the Geometry Service to return a “buffer” of a series of points that represents a circle x feet around the center of our map.   When the buffer is returned from the web service, we draw it using our graphic we setup earlier and push it to Graphics Layer that is sitting on top of our map.  This all happens in a matter of seconds.
      protected function gotGPS(event:GeolocationEvent):void
       {
       var mp:MapPoint = new WebMercatorMapPoint(event.longitude, event.latitude);
      updateMapWithFence(mp);
       locMap.scale = 4000; //this is a magic number for the zoom level I wanted.
       locMap.centerAt(mp);
       lastPoint = mp;
       }
      protected function updateMapWithFence(mp:MapPoint):void
       {
       var bufferParameters:BufferParameters = new BufferParameters();
       bufferParameters.geometries = [ mp ];
       bufferParameters.distances = [ checkinDistance.value ];
      bufferParameters.unit = GeometryService.UNIT_FOOT;
       bufferParameters.bufferSpatialReference = new SpatialReference(4326);
       bufferParameters.outSpatialReference = locMap.spatialReference;
      myGeometryService.addEventListener(GeometryServiceEvent.BUFFER_COMPLETE, bufferCompleteHandler);
       myGeometryService.buffer(bufferParameters);
       }
      private function bufferCompleteHandler(event:GeometryServiceEvent):void
       {
       trackingLayer.clear();
       myGeometryService.removeEventListener(GeometryServiceEvent.BUFFER_COMPLETE, bufferCompleteHandler);
       for each (var geometry:Polygon in event.result)
       {
       var graphic:Graphic = new Graphic();
       graphic.geometry = geometry;
       graphic.symbol = sfs;
       trackingLayer.add(graphic);
       }
       }

And that is about it!  cross-platform mapping made pretty easy.  The cool thing about ESRI’s mapping solution is the power behind it.  They offer things such as the typical driving directions all the way though “How far can a user see if they stand on the ground at this point”.   Since the components are native to your AIR app, they are fast and behave like you expect it to, without the mess of having an HTML overlay in your app.

Geolocation issues with AIR on iOS (with a fix!)

The recent “GM” version of iOS 6 (this includes the production version that is now shipping on the iPhone 5) broke one of the APIs that Adobe AIR depends on for Geolocation.

If you have an app that was published with Adobe AIR 2.7 through AIR 3.4, your app will either get rejected if you are just submitting it to the store, or it may be broken if it is already in the store.  This is in addition to some other feature interaction issues that have also cropped up in iOS 6.

The bug is that the Geo Location (GPS) subsystem is never actually called — it fails silently, just as if the user denied the application to use the GPS.

Luckily, there is a work-around, but it does require a re-compile of your application.

  1. Make sure your app is running at least AIR 3.0.   AIR 3.4 is currently in production and it works great with this work-around.  AIR 3.5 is on the roadmap, and addresses some other iOS 6 issues (including the ability to address the full screen).
  2. Update the <name> tag within your descriptor XML document.  Wrap the actual name of your application in an extra <text: xml:lang=”en”> tag.  For example,
    <name>
     <text xml:lang="en">MyGPSApp</text>
    </name>
  3. Update the version number.
  4. Make sure your app is compatible with the new storage requirements in 2.23.  Details are available here : http://blogs.adobe.com/airodynamics/2012/03/05/app-compliance-with-apple-data-storage-guidelines/
  5. Compile, and wait.  Your app’s GPS should now work in iOS 3, 4 and 5.

Hope that helps some people out!  I know it was a big sticking point when I had some apps recently rejected because of this incompatibility.

Compiling the Apache Flex SDK with IntelliJ

I’ve only been using IntelliJ for a few weeks now, but I love it.  I see myself using this as my primary IDE for all things Apache Flex as time moves forward.

One question that has been asked quite frequently on the Apache Flex Dev mailing list is “How do I compile the Apache Flex SDK with IntelliJ?”  Well, since a picture is worth a thousand words, a video on the subject must be worth… umm.. (11 minute video, at 15 frames a second, times the value of pi… )  9,900,000 words!

Compiling Apache Flex SDK with IntellIJ

  1. Grab the Requirements :
    1. Java JDK 1.5, 1.6 or 1.7
    2. Adobe Open Source Flex SDK 4.6 (needed for the compiler at the time of writing)
    3. IntelliJ with ANT, Flex and Java plugins
  2. Create a new Project
  3. Create a new Java Module.  Name it anything you wish.
  4. Create a new Flex Module within that last Module.  It must be named “frameworks”
  5. Unzip the contents of the Open-Source Flex SDK into your Java Module EXCEPT the frameworks directory.
  6. Check the frameworks directory from the Apache SVN (https://svn.apache.org/repos/asf/incubator/flex/trunk) .  Make sure it ends up in the frameworks directory.
  7. Load up the ANT tab, and add the /frameworks/build_framework.xml  file.
  8. Hit the “Run” icon to start the compile.
  9. Drink a beer, or take a shower — depending on what the clock says.

After about 7 minutes or so (my computer compiles it all in 422 seconds on average), you should have a successful build, and a custom-compiled SDK!

NOTE:  The reason why we created two modules is so that you can create your own branch (or switch to somebody else’s branch) without having a whole lot of heart-ache.  All you would need to do is go to the framework module and change the branch you are checking out from.  This will allow you to create patches and submit them into JIRA against the current “patches” branch, instead of the trunk.

Microsoft Kinect and Adobe AIR

This past weekend I had the pleasure of working with the Michigan Historical Museum for their celebration of Michigan’s 175th Birthday.  I was asked to do a display involving the Microsoft Kinect, to showcase some of the possibilities of the technology.  I introduced the patrons to demos of my Kinect Space Invaders game in addition to the “dancing stick figures” demo.  Both demos were a huge hit, with the dancing stick figures drawing people in and the space invaders game showcasing a no-touch game that is highly interactive.

For both demos, I used the new as3NUI AIR Native Extension that is available here : http://www.as3nui.com/   Unlike my other Kinect projects I’ve worked with, this is the first that has taken advantage of the Microsoft Kinect SDK.  It was a huge relief to find out how easy it was for Microsoft’s SDK to install (the only thing that tripped me up was the .NET Runtime version that I didn’t have installed).  The ANE plugged right into it and fired up without issues, which was a huge relief considering how much of a pain in the rear that the PrimeSense NUI tooling to get setup.

Microsoft has finally released their 1.0 version of the Kinect for Windows SDK as of today (Feb 1st).  You can find out more about their SDK here : http://www.microsoft.com/en-us/kinectforwindows/.  Unlike the earlier, beta SDKs, they are finally allowing the Kinect to be used for commercial applications HOWEVER, you will need to buy and use one of their non-subsidized Kinect units for about $250.  No word yet if they will have re-furbished packaging like they do for the XBOX 360 Kinect units.  Developers can still use the XBOX Kinect for the time being, but Microsoft is highly encouraging for us to purchase the Kinect for Windows units vs. the XBOX ones.  It is still be be seen how driver compatibility is between the two units.

If you have any interest in checking out the Kinect Space Invaders game that I demoed this past weekend, you can install the Microsoft Kinect SDK (this was tested with Beta 2), plug in your Kinect, and install the demo from here.    I will eventually be publishing an updated version tested with the final SDK, but I will be waiting for the updated AS3NUI ANE that is being built to support the latest features of the SDK.

Follow

Get every new post delivered to your Inbox.

Join 28 other followers