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