JS Adventure: Creating a Desktop App - Part 1

Yes, you read the title right. We are going to create a desktop application (which is a windows desktop app for now) that will be coded with javascript, HTML and CSS but without additional frameworks and runtimes (like Adobe Air) from a "regular" windows PC. All you need is just internet explorer and we can proceed. I have done my research on this and that is why I am confident that we can build one. It may not be as powerful, fast and feature-rich against its contemporaries but this is a good way to learn more and share knowledge about javascript, HTML and CSS and at the end of it all, we will also have a nice product that is useful (at least for me).


In order to understand where I am coming from, let me tell you this story first:

About a year ago, I was asked by a former office mate (his name is Jerry) about the possibility of placing all his movie file collection in a web page and then one can also play them directly from the browser. He was talking about having javascript call out his media player and play the movie. I was a desktop software engineer at that time. I did have some knowledge about JS, CSS and HTML but not as much as I have now. And I was even thinking at that time that it was a ridiculous idea since I was thinking that each movie files will be hosted on a web server (or on his localhost) which can have a lot of overhead in terms of being downloaded and so on (I was quite confused at that time and I also did not take that idea seriously). I can't exactly remember my response to him and I forgot about that conversation until a few days ago.

A couple of my friends visit my place to watch some movies (movie marathon). I showed them my collection from my hard drive and they were like: "Dude, why didn't you catalogue your movies by a software? It will be displayed nicely together with meta information about the movie. That way, we can easily see which movie we would like to watch." I told them I don't have time to catalogue these hundreds of movie files since from what I know (and what they also know) is that you actually catalogue these movies one by one through that software and I have hundreds of them. And besides, I really don't like bloated softwares who packed a lot of features that I already have. The process of cataloguing each move file is also tedious. I don't know if they are automated, maybe they are but after I tried a couple of them, I was turned off by their complicated interfaces and bloated features. Then I thought, maybe I can create one which is simple and does just that: Display my movies in a more nice way and automatically catalogue them. After thinking about it a few times, I remembered what Jerry told me. This is exactly what he wanted but the movies should be displayed in a web page. At that moment, my gut tells me that JS (together with HTML and CSS) can do it. I don't really know why but I feel it could be done. Although I also realized at that moment that javascript needs to access the file system and we all know that is not possible using the browser and it should not be due to well-meant security reasons. No one wants any web page to access your file system, right? But, I also have ideas about ActiveX objects accessing your file system. And yes, ActiveX objects can be used using javascript. So, I did some research after that and I have realized that the possibility is great especially if we later transform this into an HTML Application. Yes, Microsoft's own way of building a desktop application out of JS, CSS and HTML. Now, I am positive it can be done.

So there you go folks. The possibility is there. All we need is an idea, a set of requirements, HTA and we can start building this application. Before I end this post, below is a rough set of requirements that this application should have:

• it should read a "configured path" (maybe from an INI file) and gather all the movie files recursively (any subfolder level is guaranteed to be read)
• each movie file should be contained in a folder whose name should be the movie title and year (okay, this is an assumption but since this is how I organized my movies, we will follow this assumption. We will try find a better way to break this assumption so our application will be flexible)
• the application will look up information about the movie using only its title and year (which should be sufficient). We can look up the information from IMDb (I hope they have an API for that but if none, we'll scrape information from them but I am pretty sure there should be a good API out there since this is like a common task)
• the application will then display each movies in a web page (nicely with poster images)
• the application will also allow us to do tasks like:
• view more information about the movie (the initial display should be basically title and year and poster image if available) and so we should be able to view more information about the movie through a modal dialog or something like that
• update the information in case the application did not correctly find the movie from the web. The application can ask for a movie and title (or maybe an external ID for that movie).
• update the poster image in case we don't like what was provided :)
• play the movie using the current OS' default media player

So, those are the basic requirements. In the next post, we will setup our development environment and maybe start coding a little bit.

Stay tuned!