(813)-421-4338

I am working on a few projects that require some simple charts. Historically I have been a big supporter of JasperReports and JFreeCharts (in fact I still am). However both those tools run server side to generate the reports and charts. Sometimes you just don’t need that level of complication. If your looking for something quick to just display a basic (or compound) chart over a table, then using a flash charting tool might be the answer. I use FusionCharts. They even have some rails examples (though I don’t like them it looks like a java programmer wrote them).

Pros

• Fast Development
• Client side chart generation (less load on the server)
• Animation and other pretty effects

Cons

• Client needs flash installed
• Only supports web pages (no exporting)
• More data transfer then just one image

Quick Notes
As stated above, you can go along way with the flash charts if your just looking for some really basic presentation. Get to complicated though, and your going to have to use a Reporting Engine. Converting a large number of reports from a web version to a reporting engine can be expensive, and in many cases, reporting engines can’t support all the features that your used to because of the exporting they need to do. If you choose to implement flash based charts make sure that it’s not a stop gap measure, when what you really need is a full suite.

Good News
Flash charts take xml. Rails (specially restful) can send the xml to the chart with little effort. All you really have to do is format the data for the chart. There are several solutions. You can override the models .to_xml method, you can use render :text=>prepaired_xml_string, or you can use an xml builder to do what you want. I chose the 2nd option (render :text). It’s easy to implement and lets you keep your view stuff at a controller level (I know, I know, but you have to put it somewhere). Here’s what I did

Implementation

1. Define a new format

   Mime::Type.register_alias "text/xml", :chart
   

2. In your controller add in a responds_to block for the chart type

         format.chart{
           chart = ""
           for m in @cmodels
             chart << "< set name='#{m.name}' value='#{m.value}' / >"
           end
           chart << ""
           render :text=>chart.to_s
         }
   

3. Then in the view, do your normal layout. But add in the chart. (I used a helper for this part)

   <% render_chart_html('/charts/FCF_MSLine.swf', '/modles', '', 'conversion_chart', 800, 400, false) do %><% end %>
    

Conclusion

That’s it. You now have a basic chart. In this example i put it on the index method, but there’s no reason you can’t place it on custom methods. I even recomend taking that controller cruft that generates the “xml” and placeing it in a helper.

I promise this won’t turn into an android blog, but I discovered something neat and I wanted to share it.

The goal for any mobile phone I use is to allow me to leave the office. Being a freelancer I work every day, but sometimes us developers want a social life. The real problem is when ever we go out, there’s a good chance that a client will call. Most of the time, they just need to ask a question or get some help, but every once in a while there is an emergency, that needs your attention right away. The ability to respond quickly in those circumstances can make a huge difference. No one wants to here, “I will get yo your site in 6 hours when I get home.”, when what they need is “Ok, its back up. I will look into what caused the problem A.S.A.P.

Keeping that level of customer service used to mean dragging my laptop everywhere I went. Sure SSHing to a server to fix a problem from your cell is nice, but what if you need to do something more then restarting a service. What if you need to cap deploy, or make a change then git push it.

While I had my blackberry, the solution I chose was to keep my laptop with me at all times, then I could tether when the need arose, fix the problem and be done. But this also limited where I could go.

With the G1 I can go where I please, their 3G network makes SSHing fast and with the instructions below I can even do dev from my G1. It’s of course no where near as swift as my laptop, but in those few emergency cases, it works and most importantly, I can leave my laptop at home.

Prep Work
Your going to need four things to complete this projects.

1. A larger SD Card (I used the 4GB version of this one, you will also need a way to see it on your PC)
2. A game (Here ya go)
3. A linux
4. A G1

Lets install some applications to get the Android side ready to go. Of course this is the swt I run with, you can use what you like.

• Time Tracker
• Task Manager for Root
• Skype (if you use skype)
• ConnectBot
• Linda File Manager
• Task Switcher
• Terminal Emulator
• Text Edit

Root Your Phone (Full Directions)

1. Downgrade to RC29
2. Gain root access using the telnetd trick
3. Upgrade to RC33

Prepair The SD Card

1. Change the partition type to FAT32 (some may not need this change). Make sure you change the device correctly. Also note that I am running this from my Linux box. You can format from your G1 as well.

   sudo fdisk /dev/mmcblk0

2. Format the card. You should do this to the card rather you had to change the partition type or not. It helps remove any junk put on by the manufacturer.

    sudo mkfs.vfat -F 32 /dev/mmcblk0p1 

Prepair the phone a little

1. Enable Wifi, it’s not really needed but it will make this a lot easier.
2. Plug into power source, again just to make life easy.
3. Install the applications above if you haven’t already. Most importantly the terminal editor.

Building the Debian Image

1. get the sd card mounted on the computer again
2. Make a 1GB disk image

   dd if=/dev/zero of=mobilerails.img bs=1024 count=1048576
    1048576+0 records in
    1048576+0 records out
    1073741824 bytes (1.1 GB) copied, 18.9066 s, 56.8 MB/
   

3. get debootstrap

   sudo apt-get install debootstrap

4. format the image

   mke2fs -F mobilerails.img

5. mount the image

   mkdir mobrails
   sudo mount -o loop mobilerails.img mobrails/
   

6. Build the boot strap

   sudo apt-get install debootstrap
   sudo debootstrap --verbose --arch armel --foreign lenny mobrails http://ftp.de.debian.org/debian
   

7. Play a game until that finishes
8. Unmount the image

   sudo umount mobrails
   

9. Create the following directory structure on the root of the sdcard
   • /mobilerails
   • /mobilerails/image
   • /mobilerails/share
   • /mobilerails/bin
10. copy the mobilerails.img to sdcard/mobilerails/image

Create the following files in /mobilerails/bin/

• create a new file on the sd card /mobilerails/bin/fsrw.sh

  mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system
  echo "Filesytem remounted as read/write"
  echo "Courtesy of http://www.androidfanatic.com"
  echo "Installer by Mark Walker (ghostwalker)"
  #Based on Saurik's remount.sh  - modified by Mark Walker of http://www.androidfanatic.com
  

• create a new file /mobilerails/bin/install.sh

  sh fsrw.sh
  clear
  cat fsrw.sh > /data/local/bin/fsrw.sh
  cat prepsys.sh > /data/local/bin/prepsys.sh
  cat stopsys.sh > /data/local/bin/stopsys.sh
  cat entersys.sh > /data/local/bin/entersys.sh
  cat firsttime.sh > /data/local/bin/firsttime.sh
  cd /sdcard/mobilerails
  chmod 4777 *
  cd /data/local/bin/
  chmod 4777 *
  echo " "
  echo "Make sure you run firsttime AFTER you run prepsys"
  echo " "
  

• create the file /mobilerails/bin/prepsys.sh

  clear
  mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system
  echo "Android Filesytem remounted as read/write"
  export kit=/sdcard/mobilerails
  export bin=/data/local/bin
  export mnt=/data/local/mnt
  export PATH=$bin:/usr/bin:/usr/sbin:/bin:$PATH
  export TERM=linux
  export HOME=/root
  modprobe ext2
  mknod /dev/loop2 b 7 0
  mount -o loop,noatime $kit/image/mobilerails.img $mnt
  mount -t devpts devpts $mnt/dev/pts
  mount -t proc proc $mnt/proc
  mount -t sysfs sysfs $mnt/sys
  mount $kit/share $mnt/share -o bind
  #no idea why we need this
  sysctl -w net.ipv4.ip_forward=1
  

• create sdcard/mobilerails/bin/entersys.sh

  export TERM=linux
  export mnt=/data/local/mnt
  chroot $mnt /bin/login
  

• create sdcard/mobilerails/bin/stopsys.sh

  busybox umount -f /data/local/mnt/dev/pts /data/local/mnt/proc /data/local/mnt/sys /data/local/mnt/share /data/local/mnt
  busybox losetup -d /dev/block/loop2
  

• create sdcard/mobilerails/bin/firsttime.sh

  export mnt=/data/local/mnt
  chroot $mnt /debootstrap/debootstrap --second-stage
  echo 'deb http://ftp.de.debian.org/debian lenny main' > $mnt/etc/apt/sources.list
  echo 'nameserver 4.2.2.2' > $mnt/etc/resolv.conf
  chroot $mnt passwd
  chroot $mnt /bin/bash
  

The actual Install

1. umount the sdcard and get it back over to the G1
2. open terminal
3. run some commands

   cd /sdcard/mobilerails/bin
   sh install.sh
   prepsys.sh
   #fix the link up errors
   cd /data/local/mnt
   mkdir share
   mkdir dev/pts
   cd /sdcard
   stopsys.sh
   

4. The last 10% of the debian install. You should now be su under the “normal” terminal. i.e. not inside debian.

   prepsys.sh
   firsttime.sh
   

5. play a game
6. When the bootstrapping is done enter a root password (just for the debain system)

Post Install System Configuration

Ok now we are at a bash prompt. We don’t want to do too much though, just get some stuff setup inside the image.

1. First we are going to need some swap space, but we want it to exist outside our image.

   dd if=/dev/zero of=/share/swap bs=1M count=256
   mkswap /share/swap
   

2. Just because your in a chroot deb environment doesn’t mean you won’t effect the android kernel. Lets get those two sharing

   rm -f /etc/mtab
   mount -t devpts devpts /dev/pts
   mount -t proc proc /proc
   mount -t sysfs sysfs /sys
   ln -s /proc/mounts /etc/mtab
   

3. Now we can mount our swap image

   swapon /share/swap

4. check and make sure we are sill sane

   mount
   free -m
   

5. Ok, now lets add a normal user

   adduser coteyr
   exit
   

6. Now we are back in our android environment, lets fix it so that swap is turned on and off ever time we stop and start the deb environment.

   vi /sdcard/mobilerails/bin/prepsys.sh

   #add
   chroot $mnt swapon /share/swap
   #somewhere twords the end
   

   vi /sdcard/mobilerails/bin/stopsys.sh
   

   #add
   export mnt=/data/local/mnt
   chroot $mnt swapoff /share/swap
   # at the very top
   

7. Reinstall the scripts

   cd  /sdcard/mobilerails/bin/
   sh install.sh
   

8. Stop the system

   stopsys.sh
   

9. Make sure that the swap file exists outside the image

   cd /sdcard/mobilerails/share
   ls
   

10. check that we have no left over mounts (that aren’t supposed to be there. umount them if you do)

    mount
    

11. Now, just to be really nice reboot the phone and make a backup of the mobilerails directory on your computer

Now for Rails

Ok phone is back up. Next we need to get a dev enviroment up and running.

1. Now lets get the sdcard back in the phone
2. start up the terminal
3. become root

   su

4. mount the debian system

   prepsys.sh

5. At this point the debian system is running along side the android system the android can’t really see debian and debian can’t really see the android (at least not without browsing by hand). We want to keep it this way, though there are other ways, but keeping our dev environment separate is safer. lets entersys.sh

   entersys.sh

6. login and then the fun starts
7. lets get us some sudo

   su
   apt-get update
   apt-get install sudo
   visudo
   

8. make your changes then exit(if you don’t know how to setup sudoers read the comments in that file)
9. lets leave root….

   exit

10. and start installing ruby at el.

    sudo apt-get install ruby irb rdoc git-core libopenssl-ruby
    

11. play your game again
12. lets install rubygems the right way*That would be an opinion*

    wget http://rubyforge.org/frs/download.php/45905/rubygems-1.3.1.tgz
    tar -xzf rubygems-1.3.1.tgz
    cd rubygems-1.3.1
    sudo ruby setup.rb
    #ri and rdoc take forever so just play a game
    sudo gem1.8 install rails --no-ri --no-rdoc
    

13. Next were going to want to generate some ssh keys for our git repo

    cd
    ssh-keygen
    

14. get them into your repo (I will leave this step up to you, everyone has diffrent methods)
15. Lets make our Projects directory and lets git a project

    cd
    mkdir Projects
    cd Projects
    git clone ssh://git@someserver.com/ReallyCoolProject
    cd ReallyCoolProject
    script/server
    

16. now we can go over to our browser and hit localhost:3000 (you installed task switcher right?)

Final Thoughts

Editing can be done from the terminal via vi or nano or you can use one of the editors from the android side. If you use the android side you should be able to see the debian system in /data/local/mnt/.

Few quick things to remember.

• The loop device is a bit fragel. Don’t yank out your sdcard wiout unmounting it first.
• Make frequent backups of the mobilerails directory. It will corupt if the phone crashes(or is turned off) and it is mounted.
• I wouldn’t run with the system prep-ed all the time because of the above problems.
• Keep your debian system and your android system separate unless your really sure you know what your doing.
• Protect your phone and sdcard, you just gave whoever stole your phone read and write access to your git repo
• The system wiill run slower when your running webrick. Kill it if you don’t need it for a while.
• Sqllite is fine, mysql would be fun (bad fun).
• Your G1 can see that swap space, be aware of that.
• Permissions wont copy across the two systems. Make sure that you remember that if you edit or create a file outside the debian system.
• Your not running a VM, it’s just a chrooted environment. That means any kernel level things will be seen by everyone. Try not to insmod or such inside the image, unless you really really know what your doing.
• If your tenminal exits, then you loose your chrooted environment. but you can just entersys.sh again.

Ok, so it’s time for me to plug a new product. My beloved blackberry recently broke. The scroll ball thingy popped out. At the same time my T-Mobile contract expired. I could have gotten a new blackberry, but to be honest, blackberries don’t fit in my open source world very well. So I took a look at the G1. It’s supposed to be the most open phone on the market. Lets just mix in a review, instead of pretending were not.

Design
Pretty good. It’s a bit thicker then my old blackberry, but that gives it a very solid feel. It’s not much heaver then my blackberry and a bit less then my ipod touch. I actually like the combo usb/headphone port. Keeps the places my pocket fuzz can cause down to one spot, and the extra dongle is not much different then the 2.5 to 3.5 converters most phones have to use. The keyboard feel natural to use to me (some don’t like it) and the “hump” at the end of the phone where the track ball and buttons are, don’t impede me in anyway, it actually gives me something to hold on to. I have yet to drop this phone. They keyboard is great for my big hands. I can type faster on it then I can on my blackberry until I start mixing in special letters, and that just takes time to find where there at now.

OS
Ok, Android is the OS on the phone. It’s pretty nice. Its based (at least on my phone) on 2.6.25 Linux kernel. Theres a Java stack that everything else runs on. Development is pretty easy as most of the OS and stack are open source (certain things aren’t, shame on you Google). The market contains apps for everything and, as far as I can tell, almost every part of the OS can be replaced, that includes the Google apps. Syncing is automatic with your Google account, and Google syncs with every OS out there as far as I can tell.

Problems
Well, battery on the 3g network is awful. Maybe 4-6 hours on a full charge with full usage. Maybe a day with normal usage. Thankfully you can turn that off (use edge for normal usage but if you need something fast just bump it back on). Also theres no on screen keyboard. It makes one handed operation pretty difficult. None of the solutions in the market work for me, though chompSMS has the right idea, I just don’t sms. I haven’t figured out how to make the notifications actually notify me. They make a sound but it’s too quite. I need something loud and annoying. A college of mine used to call my phone the angry cricket. I need that back.

T-Mobile
This is actually funny. If you take a look around the net you tend to get a sense of a careful balance between the open source Android community and the provider. You “may” void your warranty if your upgrade your phone your self, but Google has the git repo right out there where every one can get to it. It looks like T-moblie is trying to push there “buy are phone” mentality using the same old trick of restricting features, but the problem is that we have the source code and we “know” what the hardware can do. If a G2 comes out any time soon, theres no hardware reason why G1 users should not get those features. And we know it. Short version, we are in a wait and see. Google is really on to something with their open source phone, but if T-Mobile pushes too far the entire product line could fail. Android can already be run on a wide variety of hardware. Most people buy the G1 cause it’s easy. If someone were to market their own hardware platform, I don’t see why that would cause any problems for the OS.
To make matters more interesting. T-Mobile isn’t going to make any money from app or ring tone sales. The market provides every application that you could want, including applications for making ring tones from your MP3s right on your phone. We will see how long that lasts. Blackberries had the same openness at the start but over time T-Mobile (and other providers) found ways to narrow that down.

Overall
I’m keeping my G1. But I haven’t built any kind of loyalty to the G1 it’s self. Having a Linux mobile device is extremely nice. I can do whatever I need right from my phone. SSH is already installed along with a file manager, and a VNC client. The only thing I haven’t found yet is a word processor. It won’t replace my laptop on trips out of town, but it already has on trips that won’t keep me away from home over night. Heck, I have already done some emergency rails development on it.

Browser
Just so I can work it back in to this blog. The browser is using WebKit (Safari and Konqueror). With a decent design you can use almost any website from your phone, no changes needed on the side of the site. If your site is a bit lacking in the design department, then it might have issues. But I tried all of my clients’ sites and they all worked 100%. None of they were designed with the G1 in mind, though they all were developed using standards.

Another questions that I keep getting asked; What makes a good website design? There are several answers to this question. Mostly it depends on your target and your goal. For the sake of this post were going to look at 4 different targets. First, a “landing page”. Second, a sales site. Third, a social site. Forth a “utility” site. Don’t worry if your not sure what all that means I will take the time to explain it.

Landing page
These are the one hit wonders. One page to get your point across. It doesn’t matter if it’s to sell a product or service or to inform a group of people. This type of site has 1-2 pages and is only meant to be viewed once by each end user.

The main goals of this type of site is to get the point across. Keep it short sweet and to the point. Navigation is not an issue. Spend all the time you want on looks and form. It’s most important to get your point across. Use big letters, flashy images, flare, the works. Your making a billboard for the Internet. Treat it like one. Be tacky, think Las Vegas. Keep your main points big and easy to spot. Near the top of the page. Most people won’t bother to scroll down if you can’t get them hooked before they have to use the mouse. Keep in mind that the back button is easy to find.

Sale Site

These sites have multiple pages. You want to showcase your product or service and offer a way to collect monies. The site needs to be easy to use but also a little flashy. The site it’s self reflects the your product. Keep your feature list small, use moderate amounts of bold text, but don’t make it stand out too much. An example or picture of your product never hurt, if your offering a service, list the price right out front. Qualify your potential customers. They may want your product or service very badly, but if they can’t afford it your just wasting their time and yours. Try to devote one page to pricing if you have a complicated structure, another to features. It never hurts to compare your products or services to a competitor if you think you have a better offer. Keep money collection on a separate page. Make sure that your contact or support info is right out there where people can find it. If they have a question, and can’t find it, you just lost a sale.

Navigation on these pages should standout. You want people to “poke around” and explore your site. Links in the body of the text should be used often. Horizontal navigation is a good way to accomplish this, but don’t give up the good look of your site to do it. The more links the better. Remember you want the user to “find” the other pages, but you need to make sure there easy to find. Think of hiding easter eggs for a toddler. You don’t want to really hide them, they should be able to just stumble across them.

Social Site

These sites are sites that encourage user created content, networking, or communication. The most important rule with this type of site is to keep it absolutely simple. People are there to share a quick idea, most wont want to have to figure out how to do it.

Keep your links everywhere, a top bar navigation system really works best, but combine it with a side bar as well. Keep the “content area” wide open and big. People want to be creative, let them. The site should be both simple and flashy. Use as few images as possible. You never know what content you users are going to put up. Also make sure that you work some kind of help system into your layout. You will need to provide help on every page (or at least most of them).

Utility Site

These types of sites are used repeatedly by users. Think gmail or my project tracker. You log in every day, navigate around and preform a function. Because of the repeated use its important to follow a few rules that the other site types do not have.

First, navigation needs to be exceptionally easy. Users will learn how to get to the features they use the most, but if it takes them 20 minuets to do it they will find another product. Don’t use many effects or pretty images. It might look nice while making the sale, but could you Imagen a 3 second fade in and fade out on every email you try to read. Or every time you log in having to watch a 10 second visual effect. Keep it simple. Provide user feed back for every action, if actions take more then 2 seconds to complete normally, give them a spinner or progress bar. Something to let them know the site didn’t “freeze”. With this type of site it’s ok to be ugly. Mater of fact your users will thank you for your ugliness as long as the site is fast. Look at all the “green screen” applications out there. When they were replaced with fancy GUI versions, people had a fit, be cause they had to navigate with a mouse. “Tab Tab Tab f” Didn’t work any more. The end result was the GUI app allowed for tabs or they used a terminal emulator to get back to the old application.

General Rules

Here are rules that work for all sites. Don’t use flash for anything your site depends on. Even YouTube has most everything except the videos in standard html. Adobe (owners of flash) use it sparingly. Whatever you do don’t make a “flash site”. If your whole site is in flash, a lot of people wont see it. Use the entire screen. Lots of sites use the strip down the center (or off to one side). Don’t do that. Use the users entire screen. Keep in mind that users will have different size screens. Make sure your site hits all your target resolutions. Reduce the dependency on JavaScript. Some browsers won’t do very well with it. Don’t ditch it completely, just make sure your site can function without it. Use as few images as possible. In the day of mobile computing, users on their smart phones will be visiting your site. It should work, at least a little. And laptop users that tether or go to coffee shops with bad wifi won’t want to wait 45 mins just to see your login screen.

Those are the basic concepts behind any site. The real trick is combining them to preform a function. You might have a great web app, but without a sales page it’s not going to get very far.