I'm a web-lovin, webapp maker kinda guy


It’s been awhile since I posted something I’ve done. I’ve been doing amazing things at Apple Inc, which has kept me busy. Awhile back, I did begin a project to help me learn all of HTML5 features. I decided to make a Jeremy Lin app that incorporates all of the new and cool HTML5 features. I also wanted this app/website to be responsive. This app should work and look nice on all devices – desktop, smartphone, tablet. Here is my excerpt from the Google Play store,

This is the Jeremy Lin Linsanity Video Game. You decide which play to make and watch your stats increase. Watch hundreds with highlight clips of Jeremy Lin’s NBA career. This app also includes Jeremy Lin’s twitter feed, real-time stats, youtube highlight clips, the Houston Rocket’s schedule, fan photos, news, biography, etc.

Play the Jeremy Lin video game from your desktop, smartphone, or tablet here

Download the Jeremy Lin video game from the Google Play store

List of technologies used in this App
jQuery Mobile – the framework to lay out the pages and dialog box
CSS3 – renders the elements to fit into the various devices
HTML5 Video – no plugins required to view the Jeremy Lin videos and is supported on most platforms with the latest browsers
jPlayerPlaylist – a playlist plugin to watch html 5 videos
Canvas – plots the shots taken by Lin onto the basketball court
Localstorage – keeps track of the player’s stats and saves the stats even after the browser is closed
jQueryTweet plugin – displays the twitter feed from Jeremy Lin’s twitter page
Google News – rss feed of the latest news on Jeremy Lin
jQueryWowSlider – plugin to display the sliding images of JLin fans.
Youtube – video site to watch JLin videos

Have you ever wanted to learn how to invest in stocks? If yes, you’ll need to learn chinese 🙂

So a couple months ago, a former work colleague and friend asked me to start the development of a website for him. He’s taken a successful English-based website and created a website for Chinese-speaking investors. His website is now live at www.5168options.com

His website is basically a free and paid membership-based content management system. Users who pay for the membership are given access to highly informative and frequently updated content. He needed a quick, yet working mock-up of the site to present to his inner circle.

I created his website using Dreamweaver as the developer environment. I included the Facebook login integration into the site for a more user-friendly experience. The paid transactions are done with Paypal’s e-commerce Merchant Services. The language translation between Chinese Simplified to Chinese Traditional was done with Google’s Website Translator. ASP and Access database stores the user login data and memberships. And the stock ticker is simply a javascript snippet.

update: due to time contraints I have relieved myself from the day-to-day maintenance of the site.

This is a test

Everything you need for the delicious Vietnamese noodle soup, Phở, is in this app.   Quickly get a list of all the Pho restaurants near you and plot them all on a map. Or enter in a city name to get all the Pho places in that city. Also included is a recipe to make your own Pho. View the photo gallery of all the Pho toppings you usually get in a restaurant – brisket, steak, fatty brisket, tai, chin, gau, pho ga, etc.  Finally, an app my parents would use.

For Google Android users, download the app in the Google Play store here and install for free,

https://play.google.com/store/apps/details?id=com.anthonyhoang.phoapp

For Apple iPhone users, use the Safari browser to access the web app here,

http://ahhdesig.w01.wh-2.com/PhoApp/

This app was developed using Sencha Touch 2.0.   Sencha Touch 2.0 is a javascript framework using HTML5/javascript technologies.  The data is taken from Yelp’s Webservice API.  I added Google’s geolocation APIs to plot the restaurants on the map.  The images for the Pho toppings were taken with my Canon t2i and photoshopped by me.

update: There are some pros and cons to using Sencha Touch over other mobile-specific frameworks like jQueryMobile.  I’m currently working on another smartphone app using jQuery Mobile and will have it available soon.

Task list mobile app on the iPhone, iPad, Safari, Chrome.

Realization is ready to enter the smart phone app world.  Luckily, I’ve been experimenting with it for a while already.  The company now needs to put the task list module of our web-based project management application on the all smartphone devices; iPhones, iPads, Androids, Blackberries, etc.

To get this started, I created a working prototype of our task list with Sencha Touch. Sencha Touch is an HTML5 framework, which makes it possible to use the same code to work on all mobile devices with a webkit browser. This prototype works on the iPhone, iPad, Google Chrome, Android and Safari. The app looks and feels more like a native app than a mobile website.

This app accesses a webservice API.  I created the webservice API with ASP.Net (asmx file). The webservice returns data in json format and then takes this json data and puts the it in a store to display the list.

*update: I see great potential using Sencha Touch as the programming framework of choice when creating mobile apps for all the mobile devices.

Our new dashboard feature was presented at our annual conference, Project Flow 2011, to rave reviews! Project managers and executives who use our web-based software once had to scour through several charts and reports to see the information they need for the day. However, with the new dashboard design, most of the essential information can be seen on one screen.

The charts are generated using a 3rd Party add-on called ChartFX.Net from SoftwareFX. I used jQuery to populate the widgets with data. jQuery was also used to display enlarged widgets in a modal dialog box. All the widgets were generated with ASP.Net code.

*update: The dashboard feature was officially released to clients on Dec 13, 2012.

Find the Differences game for smartphone devices

I’m ecstatic to announce my mobile app game works on both my Android and my iPad!!! It’s a somewhat educational “Find the Differences” game.  Spot all the differences between the two photos before time runs out, in this case – before the crab bites the mermaid, and you’ll get a brief summary, fun facts and tourist information about the beach displayed.  This is the “Beaches” edition with photographs of various beaches over the United States.

I developed my game using Flash with Actionscript code. Using the exact same code, I’m able to make the same app work on both Google Android devices and iOS devices. To do this, there were some changes required to the dimension of the app and images but the Actionscript code remains the same. I snapped all the beach photos myself with a Canon t2i camera and used photoshop to created the differences in the images.

Free Download: https://play.google.com/store/apps/details?id=air.FindDifferencesBeaches

*update: As of Jul 2013, there has been 70,000+ downloads of my game from the Android Market.

Android app using flash

Creating a smartphone app is exciting and rewarding. Not only do I get to be creative, I can also share it with people around the globe; put it right in their hands! Umm, if they own a smartphone, that is. haha  Anyway, I decided my first foray into the mobile app world would be an app with which I could display my photography.

This app was developed using the latest version Adobe Flash Professional v5.5. This version comes with the Android app packager as well as the iOS packager. Essentially, this means the same Flash app can be packaged as a native application for either the Google Android Market AND Apple’s AppStore. For my app, I implemented all the cool things a phone can do… swiping through each photo in the gallery, two-finger zoom in and out, saving the photos directly to your phone, watching videos, and using your phone’s email client to contact me.

Link to my app on the Android Market – (link to my app on the Apple AppStore coming soon)

*update: As of Dec 2011, there has been 5000+ downloads of my app! (without ever marketing it).