The website: weissoft.com/practicelog looked pretty bad and may have been discouraging people from downloading the software. The new look is better:

I am not a web designer, so it is still lacking some polish. I used some of the css from the wordpress theme that this blog is using and the free icon that the application itself uses.

The web site allows you to login and see/edit your log. It is not as full featured as the windows application, but it provides a way for the users of the android app to access their log on a large screen and, more importantly, to export their data. Here is what the site looks like today:

This site uses the same color scheme as the main practice log page and jquery-ui buttons and dialogs:

If you haven’t used jQuery before, it is very, very nice. I strongly recommend it. There is a bit of a learning curve and it makes some callback functions look uglier. But the benefits are huge. Making that dialog would have taken me hours without jQuery. Here is the code to do the login dialog:

<div id=”login_dialog” title=”Login”>
<form name=”login”>
<table>
<tr><td>Username:</td><td><input type=”text” name=”username”/></td></tr>
<tr><td>Password:</td><td><input type=”password” name=”password”/></td></tr>
</table>
</form>
</div>

  $('#login_dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "Ok": function() {
        // Call the php to login
      $.post("../login.php", {
        username: document.login.username.value,
        password: document.login.password.value
        }, function(xml) {
...
        });
      },
      "Cancel": function() {
        $(this).dialog("close");
      }
    }
  });

And that includes the some of the code that actually logs the user in. jQuery also makes it easy to operate on a set of page elements or XML. The most difficult part of developing the web site was getting the table body to scroll without the table header scrolling too. I’ll make a separate blog entry for how I solved that problem since it took me a while to figure out. The majority of my time was spent picking colors and tweaking layout. Somehow html layout is very non-intuitive to me and it takes me a long time to get things looking the way I want. The export button prompts the user to download a .csv file of their data. This works by setting the location.href to a server side php. The php script sets the Content-Disposition header to the file and then writes the CSV data to the output stream. Here are the interesting lines of code:

  header("Content-Disposition: attachment; filename=practiceData.csv");
  $outStr = fopen("php://output", "w");
  while ( $row = mysql_fetch_assoc($result) )
  {
    $data = array($row['day'], $row['minutes'], $row['note']);
    fputcsv($outStr, $data);
  }
  fclose($outStr);

I also made a new version of the Android app. Navigating between days was non-intuitive and slow. The only way to change the displayed day was to swipe left/right on the main screen. That method still works, but I added a couple of buttons to make it more obvious. I also added the capability to click on a particular day displayed in the week view to change to that day. You can now swipe left/right on the week view to go back/forward 10 weeks and the days with notes are highlighted. I made the note section expand to fill the available space on larger devices and added a menu option that takes you to the website so that you can export your data.

Updating the android app was quick and mostly painless. I added the new .apk to the marketplace and was able to download the update to my phone after 10 minutes or so.

After using the program and app for a week and really enjoying the convenience, I have decided to  make it available to the public. In the unlikely scenario where this application becomes popular, I am worried that it may cause too much load on my web server. So I wanted to have some kind of potential revenue stream to offset this risk, but didn’t want to try to sell the software. So I have gone over to the dark side and added an ad to my Android App.

My first attempt to add the ad was a failure. I thought that I would use the Webkit GUI element to display an ad from my website. To that end I tried to setup Google AdWords but was rejected because the PracticeLog page had insufficient content. (At the time it wasn’t linked to the rest of my site). I know now that this isn’t the right way to put a Google ad in an Android App. The right way is AdMob. This is a free an painless system and they have an SDK that you add to the android app. (Note that you do have to be building the app with the latest version of the Android SDK to use AdMob.)

Putting the app onto the Android Marketplace was a bit of a pain. First you have to pay Google $25 for the privilege. This is a one-time fee to register as a developer, but it did make me hesitate, since I doubt I will ever make enough in ad revenue to pay for it. Then the app has to be digitally signed and you have to have perfectly sized screen shots and icons. This was all a hassle, especially through the slightly buggy VirtualBox VM.

Publishing the C# application was a little easier, the main hassle being adding it to various freeware sites. Fortunately, several of them accept .PAD files. This is a file that describes an application and the developer that the freeware sites can read to fill in their submission forms. It had been a long time since I had visited some of these sites, so I also took the time to let them know about the latest version of the MediaDB program.

So far I have 9 downloads and 7 users, 39 ad views, 0 ad clicks and so $0 in revenue. Of course it is still early and I am not really expecting this program to be very popular. Most people who are keeping a practice log are children who don’t have Android phones.

If it does become popular, I will add a “teacher” mode so that a teacher can have access to the practice logs of their students. The teacher could track their practice time and use the notes to assign tasks for the week.

You can get the C# application on my site: http://chadweisshaar.com/weissoft/practicelog and the Android app from the Marketplace.

I have created a simple user system:

1. When you create a new user, I store the username and email along with an encrypted password and generated GUID in my user table.
2. When a user logs in, the given password is encrypted and compared to the stored password. If correct, the GUID is returned.
3. The other tables are accessed by the users GUID.

The C# changes were fairly simple. I created a login/new-user dialog and left the local database code so that someone could use the program in a offline mode if they didn’t like the idea of logging into my website.

The Android app was a much bigger job. I was able to use all built-in GUI elements, but the life-cycle issues were much more serious than they were in my first Android application. I didn’t want the user to have to log in every time, so I store the users GUID in the application’s configuration data. I also needed to preserve both the timer’s start time and the entered but unsaved practice time when the application is killed. I learned how to prevent the screen rotation from happening and learned how to store the downloaded data from the web during a screen rotation.

Testing the app was a hassle because my phone loses its connection to eclipse after a few seconds. This is probably a problem with the virtual machine that I am using to do the development with. If I had it to do over, I would go ahead and install java and eclipse on my main machine.

I am still considering releasing this application and app, but would like to figure out the ad model for the android app.

Here is what the app looks like:

1. The list of pieces that I am practicing. This would be nice to keep up to date, but even with the “Same as Yesterday” button, I just don’t have the motivation to keep entering the data.
2. The stopwatch and countdown. I haven’t been practicing in the same room as the computer, so it is not handy to have to turn on the computer both before and after practice time. Instead I have been using a stopwatch on my phone, or just my watch to time the practice and then separately enter the time.

I would like to use my Android phone, which I usually have on me, to record the practice time. To do that, I am going to create a web database and php accessors so that I can load and update practice time from the phone or computer. While doing this conversion, I am going to make a few changes:

1. Remove the list of pieces practiced per day. It would make the database more complex and I never use the feature.
2. Make the database multi-user. This will allow me to publish the application and Android app. I am not sure if that will ever happen, but the software has been useful for me, so it might be appreciated by others too.

This will be the first time I have made a multi-user web database, so I am debating how to handle security. I want each user to only have access to their own data, but don’t want the overhead of encrypting all the data.

After my experience with the DurationAlarm application, I suspect that the Android app will take most of the time. But all of the GUI elements that I will need are built in.

I am happy with the software. I created countdown and stopwatch timer modes so that the program will time my practice and automatically update the log for today. I added the “Same as Yesterday” button since I practice a particular set of pieces for at least a week at a time.

I also put in a “10000 hours date” field. This is the date when I will have practiced 10000 hours. I have recently read Outliers by Malcolm Gladwell and am intrigued by the notion that, while talent matters, becoming an expert is mostly a matter of putting in the time practicing.

I will keep the paper log format and have a way to add a note and a list of pieces practiced to each day.

I am going to develop this in C# using their DataGridView and a SQLite back end database.