YouTube Re-Player Anywhere, Google Docs Notifier and My Personal Homepage

Last month, I was basically fixing YMCA Volunteer Management System. Meanwhile, I was also doing my personal projects. Unlike previous vacations, I tried to finish three small applications within two weeks. Now, let me introduce them one by one.

YouTube Re-Player Anywhere (finished in 3 days)

Introduction

I started my YouTube Re-Player project since 2009. After the first version of YouTube Re-Player was successfully done in January 2009, many other versions of it had been developed. I tried to build it in several language, such as PHP, JavaScript, C#. Last December, I also deployed one of them on Windows Azure and won a prize from Microsoft.

The version which is on Windows Azure is called YouTube Re-Player at Cloud. It does not need a database because it only stores the video temporarily somewhere. After my Windows Azure account was terminated, I decided to build a similar version of it by using Java.

YouTube Re-Player Anywhere
YouTube Re-Player Anywhere

What is so special about YouTube Re-Player Anywhere? Basically, it is an improved version of YouTube Re-Player at Cloud. It solves some problems that I can’t do it in YouTube Re-Player at Cloud easily. In addition, it requires no installation. Unlike YouTube Re-Player (Desktop) which requires user to install .NET 3.5 Framework. In YouTube Re-Player Anywhere, user can just go to the URL and use the application.

I use Java Servlet in YouTube Re-Player Anywhere to store all the video links in session. Hence, as long as the session is not deleted, the videos will be available in the application.

YouTube Re-Player Anywhere Structure
YouTube Re-Player Anywhere Structure

In addition, since YouTube Re-Player (Desktop) was done using WPF, it cannot be run on non-Windows OS. Hence, YouTube Re-Player Anywhere is designed for those who are not using Windows. Also, as it is a web-based application, it can run on phone as long as the phone can access to the Internet. This is where the word “Anywhere” comes from.

Due to the fact that I can’t find a place to host it, currently it is not available to public yet.

What do I learn from doing this project?

The main purpose of doing several GCL Projects is to learn what I can’t learn in school and CVWO. In fact, I use the knowledge and skill that I learn from doing GCL Projects in my school projects and CVWO project. For example, I used the WPF skill that I learnt from doing YouTube Re-Player (Desktop) in my CS3215 project, OneSync. Hence, our team was one of the few teams that built a nice looking application in CS3215.

This time, I learnt quite a lot from doing YouTube Re-Player Anywhere also. First of all, I learnt how to build a Java Servlet application. Before that, I had no idea what Java Servlet is. Actually, it is just like a normal Java class that I wrote in CS1102S class, except the fact that I need to import some libraries and so on. Secondly, I also learnt how to parse XML in Java. Since the feeds retrieved from the YouTube server is in XML, so I have to parse it in order to get the required information such as video title, video description and video length.

I used only three days to learn Java Servlet and finish building this application. This enables me to continue doing my second GCL Project in this summer: Google Docs Notifier.

Google Docs Notifier (finished in 5 days)

Background

When I was writing the proposal for my CS3215 project, my friend, James, asked me whether I had a way to notify the users when their documents in Google Docs were updated. The reason he asked me the question is because in my original CS3215 proposal, Google Docs was chosen to be the online intermediate storage, instead of Dropbox. Hence, I read the Google Documents List Data API and started developing it.

In April, I finished the version 0.9 of Google Docs Notifier and presented it in my team’s lightning talk in CS3215. However, since I was developing OneSync with my friends at the same time, I did not spend too much time on it. Thus, I decided to complete it and added a few more features to it after I finished my exams.

The most interesting part is that I finished it when I was visiting Penang. =D

Motivation

Although Google Docs is popular now, there are still a lot of improvements needed for Google Docs. One of them is notifying the user when his file is edited and updated by his fiends. Currently, users will not know whether their files are updated until they log in to the Google Docs webpage to check or they check their email inbox.

To solve this problem, Google Docs Notifier is chosen as the project of GCL Project 2010. The goal of this project is to build a small application which notifies the user when his files are updated and shows all the recently updated files.

Introduction

Last month, the Google Docs Notifier 1.0 was successfully done. Now, the user can easily know the date and time that the document is modified. In addition, user can view the document by just double clicking on the document name in the program itself.

Google Docs Notifier Login Page
Google Docs Notifier Login Page
Listing All Recently Updated Documents in Google Docs
Listing All Recently Updated Documents in Google Docs

This is the first GCL Project which is available to the public and open source. You can view the project homepage at here: http://googledocsnotifier.googlecode.com/.

What do I learn from doing this project?

In January, Google announced that the user can now upload any file to Google Docs. However, it does not provide the API of doing that (the fact is that this feature is only available to Google Apps Premier domains). This is the main reason why our CS3215 team chose Dropbox as the online intermediate storage provider.

However, I learnt more about Google Documents List Data API, for example the XML format of the feeds, the information available from the API, how to use the information and so on.

My Personal Homepage (finished in 4 days)

Motivation

Every time I am asked for my personal website, I always give them my Facebook Account URL. It is not really a good idea because Facebook is just a social networking site. Hence, I decide to build a personal web page that introduces me.

Introduction

Building Silverlight Web Pages in Visual Studio 2010
Building Silverlight Web Pages in Visual Studio 2010

I built it using Silverlight. Yup, I know that there are a lot of people who don’t like Silverlight. However, I still think a Silverlight site is cool, especially it provides an easy way to do simple animation, for example, storyboard.

The site has four sections. You can view my CV, GCL projects done before and so on.

Future Work

Since there are a lot of computer users not installing Silverlight in their computer, I decide to have a normal HTML page for my website also.

Also, I am still finding a place to host this personal homepage.

What do I learn from doing this project?

Silverlight. Yes, the only thing I learnt is Silverlight. Since I am not allowed to take CS3216, so the only way that I can learn Silverlight is self-learning. In addition, I received a Silverlight reference book from Microsoft as a gift in January. Hence, I think I should spend time on learning Silverlight well. =)

Hello Cloud Computing: Deploying PHP + MySQL Web Application on Azure

Introduction
Deploying web application itself is already a very interesting experience. If you are good at computing, you can follow the steps below and try to make your own web application running on Windows Azure.

Before the start of the talk, you should know about Cloud Computing and Windows Azure. There is also an interesting article about this topic about the differences between cloud and other hosting services: Click here.

Phase 0: Getting Started
There are a few things that you need to install before you deploy your web application on Windows Azure. First of all, I’d like to remind you that all things below are done using the Microsoft Visual Web Developer 2008 Express with SP1. I am not sure whether there is a difference between using Web Developer and Eclipse.

After installing the Web Developer, you can use the Microsoft Web Platform Installer to easily install the necessary tools. The download link for Microsoft Web Platform Installer is http://www.microsoft.com/web/downloads/platform.aspx. At a minimum, install the following components:
1. Web Server –> ASP.NET
2. Web Server –> CGI
3. SQL —> SQL Server 2008 with Service Pack 1
4. Azure Tools —> Windows Azure Tools for Microsoft Visual Studio 2008 v1.0

Next, you have to make sure that WCF HTTP Activation is enabled for your PC. To check this, please go to the Programs and Features in the Control Panel and check the WCF HTTP Activation checkbox under Microsoft .NET Framework in Turn Windows features on or off page.

After doing all these, you now should be able to deploy your PHP or ASP web application to the Windows Azure. However, in order to allow your PHP application connects to the MySQL database on Windows Azure, you have to install more stuff as stated below.

First of all, you must have PHP binaries for IIS (not the one in WAMP), MySQL binaries (without installer) and PhpMyAdmin package in your local machine. The versions for these three components are 5.2.12, 5.1.41 and 3.2.1, respectively, in my computer. The download links of these three components are listed here:
PHP Binaries for IIS
MySQL Binaries (Without Installer)
PhpMyAdmin Package

Phase 1: Setup: Using the MySQL PHP Solution Accelerator
What is MySQL PHP Solution Accelerator? The Microsoft staff introduced it in the workshop. It is something to make the process of deploying PHP + MySQL application on Windows Azure become faster and easier.

The steps are listed below.
1. Click here to Install the MySQL PHP Solution Accelerator
2. Extract the PHP binaries for IIS to the “php” folder in the PhpMyAdminWebRole directory, i.e.
“..\AzureMySQLPHP_x86\PhpMyAdminWebRole\php”
3. Extract the MySQL binaries to the “mysql” folder in the MySQL_Worker Role directory, i.e.
“..\AzureMySQLPHP_x86\MySQL_WorkerRole”
4. Extract the PhpMyAdmin files to the directory “..\AzureMySQLPHP_x86\PhpMyAdminWebRole\PHPMyAdmin\”

Phase 2: Create Windows Azure Cloud Service

After putting all the files into the MySQL PHP Solution Accelerator, now you can start your Microsoft Visual Web Developer 2008 Express Edition. After that, you just need to follow the steps listed below.
1. Create a new “Windows Azure Cloud Service” solution in Visual Studio
2. Choose “Add” -> “Existing Project…” and open “MySql_WorkerRole.csproj” (Can be found in the
Solution Accelerator).
3. Again, choose “Add” -> “Existing Project…” and open “PhpMyAdminWebRole.csproj” (Also can be
found in the Solution Accelerator).

Phase 3: Configuring MySQL Worker Role
This is the difficult part. Here we only show you how to configure the work role to have only 1 instance.

First of all, you have to double click on the MySql_WorkerRole under Roles in the Solution Explorer window. Then there will be a new tab named MySql_WorkerRole [Role] appearing on the main window. There are several options available on the left site of the configuration page, choose Settings.

After that, for each item listed below, you have to first press ‘Add Setting’ button and then keying in the info (each of them is ordered in this format: Name, Type, Value).
– DiagnosticsConnectionString, ConnectionString, UseDevelopmentStorage=true
– DataConnectionString, ConnectionString, UseDevelopmentStorage=true
– TableStorageEndpoint, String, http://table.core.windows.net
– BlobStorageEndpoint, String, http://blob.core.windows.net
– ContainerName, String, mysqlphp11
– FullBackupHour, String, 06:00
– IncrementalBackupDuration, String, 10
– RecycleThreadSleepTime, String, 300
– EnableWindowsAzureDrive, String, False
– EnableBackup, String, False
Note: We will be using the Dev Fabric Storage in this walkthrough, feel free to use your cloud storage if any.

Please press Ctrl+S now. Next, we will move on to the next part in the configuration page, which is Endpoints. Same as previous one, for each item listed below, you have to first press ‘Add Endpoint’ button and then keying in the info (each of them is ordered in this format: Name, Type, Protocol).
– PeerEndpointIn, Internal, tcp
– MasterElectionService, Internal, tcp
– MySQL, Internal, tcp
– InstanceManagerEndpontIn, Internal, tcp

Now save it and move on to the last part of the MySQL Worker Role configuration, which is Local Storage. Same as what you did previously, for each item listed below, you have to first press ‘Add Local Storage’ button and then keying in the info (each of them is ordered in this format: Name, Size (MB)).
– MySQLStorage, 200
– MySQLDatastore, 1024
– BlobBackup, 500

Alright, now please save it before we see the PhpMyAdmin page showing on our screen.

Now, please open up the C# file MySQLAccess.cs in the “MySql_WorkerRole” project. Please add a line of code: private const string REL_PATH_TO_PHP_INI = “./../../PhpMyAdminWebRole/approot/php/php.ini”; inside the internal class MySQLClient. It is a relative path to your php.ini file.

After that, please modify the function Start(int id) so that it looks something like this:

public bool Start(int id)
{
    try
    {
        //Modified by Chun Lin:
        string baseDir = RoleEnvironment.GetLocalResource("MySQLStorage").RootPath.Replace('\\', '/');
        string dataDir = RoleEnvironment.GetLocalResource("MySQLDatastore").RootPath.Replace('\\', '/');
        string blobDir = RoleEnvironment.GetLocalResource("BlobBackup").RootPath.Replace('\\', '/');
        LogError("MySql Base directory: {0}", baseDir);
        LogError("MySql Data directory: {0}", dataDir);
        string command = Path.Combine(baseDir, @"bin\mysqld.exe");
        SetupBlobBackup(blobDir);
        if (!File.Exists(command))
        {
            SetupAzureMySql(baseDir);
            SetupAzureMySqlDataDir(dataDir);
        }
        MySqlConnection rootConn = GetConnection(_endpointName);
        if (IsRunning(_endpointName)) 
        {
            int currentId = GetMySqlServerId(); 
            if (currentId == id)
            {
                return true;
            }
            //TODO:make sure shutdown existing SQL
            command = Path.Combine(baseDir, @"bin\mysqladmin.exe");
            Process.Start(command, "-u root shutdown");
        }
        RoleInstanceEndpoint instance; 
        //Get the "MySQL" instance
        instance = RoleEnvironment.CurrentRoleInstance.InstanceEndpoints["MySQL"];
        //Get the port of the instance 
        string port = instance.IPEndpoint.Port.ToString();
        //Added by Chun Lin:
        Environment.SetEnvironmentVariable("MasterPort", port, EnvironmentVariableTarget.Process); 
        //Added by Chun Lin: Get the IP address of the instance
        string masterHost = instance.IPEndpoint.Address.ToString();
        Environment.SetEnvironmentVariable("MasterHost", masterHost, EnvironmentVariableTarget.Process); 
        string iniFile = Path.Combine(baseDir, "my.ini"); 
        File.Copy("my.ini", iniFile, true); 
        //update the my.ini file with mysql server details
        UpdateMyIni(iniFile, baseDir, dataDir, port, id.ToString()); 
        ProcessStartInfo startInfo = new ProcessStartInfo(command);
        startInfo.RedirectStandardOutput = true; 
        startInfo.WorkingDirectory = baseDir; 
        startInfo.UseShellExecute = false; 
        //Modified by Chun Lin: 
        startInfo.CreateNoWindow = false; 
        //Added by Chun Lin: 
        startInfo.Arguments = "--console"; 
        Process driver = new Process(); 
        driver.StartInfo = startInfo; 
        driver.Start();
        StreamReader sr = driver.StandardOutput; 
        string output = sr.ReadToEnd();
        while (!IsRunning(_endpointName)) 
        { 
            Thread.Sleep(TimeSpan.FromSeconds(10)); 
        } 
    } 
    catch (Exception ex) 
    {
         LogError("Error in MySqlAccess start(): {0}", ex.Message + ex.StackTrace);
         return false;
    } 
    return true;
}

Phase 4: Run PhpMyAdmin
Now, you can just press F5 to run it.

Sometimes, you will face a problem here: You cannot log in to the PhpMyAdmin site. What you need to do is just editing the config.inc.php file in the PHPMyAdmin root folder. If you cannot find it, please create it. You have to first check that $cfg[‘blowfish_secret’] is set (If not, you can enter anything there, for example $cfg[‘blowfish_secret’] = ‘Secret’; as shown below). Then, for user and password, you can leave them as ‘root’ and ”, respectively. Of course, to allow no password, you have to add this line: $cfg[‘Servers’][$i][‘AllowNoPassword’] = true;. The following code is just part of the code in config.inc.php. The rest of the code is not shown here because there is no modification needed for it.

/*
 * This is needed for cookie based authentication to encrypt password in
 * cookie
 */
$cfg['blowfish_secret'] = 'Secret'; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */
/*
 * Servers configuration
 */
$i = 0;
/*
 * First server
 */ 
$i++; 
/* Authentication type */
$cfg['Servers'][$i]['auth_type'] = 'cookie';
/* Server parameters */
$cfg['Servers'][$i]['host'] = '127.0.0.1';
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
/* Select mysqli if your server has it */
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '';
$cfg['Servers'][$i]['extension'] = 'mysql';
$cfg['Servers'][$i]['AllowNoPassword'] = true;

Alright, even after doing this step, there will still be some people getting this error when they try to log in to the PhpMyAdmin. The error says that “#2003 – The Server Is Not Responding”. It is possible that you MySQL Server is not running. Thus, please install it (Remember that the MySQL we downloaded before is “without installer”, hence you may need to download the installer this time). Finally, you need to configure your MySQL Server (Online help: Step-by-Step guide for Installing MySQL on Windows).

One of my favourite references: http://innovativesingapore.com/post/Deploying-PHP-MySQL-Wordpress-on-Azure.aspx

YouTube Re-Player (Desktop)

The Motivation
“How to repeat the YouTube music video without pressing the Replay button every time when it ends?” Two years ago, there were many people asking this question in some IT forums. The answer was usually “Just download it and play it using FLV player”. That time, downloading seemed like the only way to play YouTube music videos in loop. Then there were some people asking “Is it legal to download YouTube videos?”.

After attending a Google workshop last year, I easily solved this problem. In January 2009, I successfully built YouTube Re-Player (Localhost) 1.0, my first application that used YouTube API. It not only could automatically loop the YouTube music videos, but also allowed the user to keep one’s own favourite videos in the database so that one was able to view it again later.

When I was doing the YouTube Re-Player project, there were many people around the world doing the similar things. Nowadays, you can easily find applications like Muziic, YouTube Repeat and some browser add-ons which do exactly the same thing: Auto replay YouTube videos and/or store them in database. I am quite happy that I am not alone. There are many people trying to do this as well.

From Web Application to Desktop Application
In this winter vacation, I tried to challenge myself again. I not only deployed my YouTube Re-Player on Windows Azure, but also developed a desktop version of it, known as YouTube Re-Player (Desktop).

YouTube Re-Player (Desktop)
YouTube Re-Player (Desktop)

Parallel Video Downloading
YouTube Re-Player (Desktop) is a desktop application.

Parallel Video Downloading
Parallel Video Downloading

Before playing the YouTube video, the player first needs to download the video from YouTube site. Depends on the speed of the Internet connection, it will sometimes take quite a long time to finish downloading the video. Hence, in the YouTube Re-Player (Desktop), there are five Flash Object Holders which are responsible for downloading and showing the YouTube videos running in the background. Each of them will download different YouTube videos. So, the user can first view the video which has been downloaded while he is waiting for other videos to be downloaded.

Quick Launch Bar
Quick Launch Bar

Thus, when all videos are completely downloaded, user can watch them without downloading them again until the sixth video is requested from the YouTube site. This will save a lot of time on just waiting the video to be downloaded.

Aero Glass Background
For those who are using Windows Vista, they should be quite familiar with the term “Aero Glass”. Since YouTube Re-Player (Desktop) is a WPF application, the Aero Glass effect can be easily done using C#. This feature is only available in Windows Vista and above. For those users who are using Windows XP, they will see a background similar to the one in YouTube Re-Player (Localhost).

Conclusion
After YouTube Re-Player is successfully built in last semester, I received many useful and interesting feedback from my friends. I will try my best to implement those useful features in the future versions of YouTube Re-Player.

Since the YouTube Re-Player (Localhost) was coded in PHP and JavaScript, developing YouTube Re-Player (Desktop) in C# is a bit painful. There are things that can be easily done in PHP and JS previously cannot be easily coded in C#, for example the database connection. However, that problem can be easily solved after googling. Secondly, embedding YouTube video in WPF application is not that easy.

The next step of this project will be finding a better way to manage the videos stored in the database. Also, searching feature will also be added to the next version. Besides, after I found a way to deploy the PHP, PhpMyAdmin and MySQL on Windows Azure Development Fabric, I think that I should try to deploy the YouTube Re-Player (Localhost) 2.1 on cloud as well.

Hello Cloud Computing: Windows Azure and YouTube Re-Player at Cloud

After my YouTube Re-Player (Localhost) 2.0 was built in May 2009, my friends told me that they would like to play with it also. Hence, I hoped that I could find a place to host my app.

Last Wednesday, I was given a free Windows azure access token during the Windows Azure workshop organised by Microsoft. Hence, the first thing I did was trying to build my YouTube Re-Player on Windows Azure.

The Wow-wow Workshop
The Windows Azure workshop was held on last Wednesday at SMU. There were only about 30 students from NUS, NTU and SMU in the workshop. Thus, eventually, almost everyone of us was able to get a free access token.

During the workshop, we were taught how to build a hello world web application and later upload it to Windows Azure. Before getting started, I had to install quite many stuff on my computer, for example Visual Web Developer 2008 Express, Windows Azure Tools, SQL Server 2008, ASP.NET, CGI and so on. Luckily with the Microsoft provided the Microsoft Web Platform Installer, the installation was quite straight-forward.

Windows Azure Platform
Windows Azure Platform

YouTube Re-Player at Cloud
Because of the Windows Azure, I could finally find a place to host my YouTube Re-Player; however my free account on Windows Azure will be deleted after 31 December 2009 (This is because Windows Azure Platform will go into production on 1 January 2010).

Actually, I currently have two versions of YouTube Re-Player which are used to run on Windows Azure. The first version is called YouTube Re-Player at Cloud. It is now available online (Click here to access). The second version is called YouTube Re-Player (Cloud-S) which I will introduce it later.

Before I introduce YouTube Re-Player at Cloud, it is better if you know its senpai, i.e. YouTube Re-Player (Localhost) 1.0 and 2.0 (Click here to read more about these two applications).

YouTube Re-Player at Cloud doesn’t use any database. However, it still provides the main feature of the YouTube Re-Player series products: Playing a YouTube video unlimited times without pressing the Replay button. Although it has no database to keep the data, it still stores the history record of the viewed YouTube videos. Thus, every time the user plays a new YouTube music video, the name of the video will be added to the “Viewed Videos List” so that he is able to play the video again later.

YouTube Replayer at Cloud
YouTube Replayer at Cloud

YouTube Re-Player (Cloud-S)
Recently, Microsoft announced that PHP developers were able to build their PHP and MySQL applications on Windows Azure Platform also (More about this: Click here). So, after the YouTube Re-Player at Cloud was done on last Friday, I decided to move YouTube Re-Player (Localhost) 2.1 to cloud as well.

However, developing PHP and MySQL on Windows Azure Platform is painful. To build a simple PHP web application on Azure, I have to do is just adding some codes to the configuration files of Web and Web Role. Meanwhile, I also need to copy and paste the whole php folder (the one containing php.ini) into the solution. Then how about MySQL? This is the headache part. According to the Microsoft, there is a MySQL PHP Solution Accelerator to help solving this problem. However, I can’t even run it successfully. So, I am not able to run the MySQL as a Worker Role in cloud. What I can do is just migrating all my data from Sybase to MySQL and let the whole application running on the Windows Azure Simulation Environment. That’s why I call this application YouTube Re-Player (Cloud-S), where the “S” stands for “Simulation”.

YouTube Re-Player Cloud-S
YouTube Re-Player Cloud-S

All the new features in the YouTube Re-Player (Localhost) 2.1, such as showing video length of each video, are available in the YouTube Re-Player (Cloud-S) as well. The only difference between two of them is the database. Localhost version is using Sybase while Cloud-S version is using MySQL. In addition, there is also a problem when I run it on the simulation environment. Since all the content of my application is preloaded, sometimes it will suddenly stop in the middle way and then I have to refresh the whole page.

Only Available Until 31 December 2009
Well, my YouTube Re-Player at Cloud will only be available to public until 31 December 2009. So, please visit http://imbachunlin.cloudapp.net/ now to try it. =)