Marathon Registration System – JCI Malacca Charity Eco Run 2015

This is how we (the programmers) give back to the society, we helped a Non-Profit Organization, JCI Malacca City Entrepreneur in creating a website and online registration system for their upcoming marathon – JCI Malacca Charity Eco Run 2015.

The website is develop to be mobile-friendly.

You can see that the same website show up in difference appearance on different devices.
Mobile-Friendly-Webste-Developement

Mobile-Friendly-Webste-Developement

Please join this coming Marathon on Oct 2015, register at – www.JciMce.org

Advertisements

TIPS: How to add more than one email forwarding on Google Gmail

By default, Gmail allows us to add only one email forwarding. As for example below, we can only forward our general mail account to jason@mysoftinn.com (see the image below)
01-Add-Gmail-Forwarding

But that doesn’t meant we can’t forward our email to other accounts. Here’s how to add other email account to be forward using Gmail Filters

1. Switch to “Filters” tab.

2. Click “Create new filter”

3. Fill up the “Doesn’t Have” field.

Fill up the Doesn’t Have field with with random characters then set your desired email to be forwarded. Then, you are done 🙂

SendPaySlip Android Mobile App

Bizvise built this app that calculate the exact amount of money your company is paying in total (including Employer EPF + Socso contributions etc) based on the basic salary of your new hiring.

This is a tool for Malaysia business owner who wanted to know how much their company is going to pay in total based on the basic salary they plan to offer.

Here’s the download link. Please comment and feedback, we would love to hear from you.

 

Please comment and feedback, we would love to hear from you.

Lovit.my

Lovit.my produced in premium quality & beautiful cutting. Men & Women fashion clothing. In year 2013, we were hired to custom develop their first online store. This project is one of it’s kind because of the e-commerce purchase flow. Unlike other conventional store where user shop and then pay, they work out their own version of e-commerce flow – shop, order,send, customer test and then only pay; in short, they named it CheckPoint system.

The website is completed with delay. The delay is intentional to make sure the CheckPoint system get introduce to their users in phase. As of the date of writing, the complete CheckPoint system that we put in place is not fully release to public. Stay tune on their website as they open up more features phase by phase.

Elements and Programming Frameworks used in this project:

  • Custom Shopping Cart
  • OpenID login – login with Google, Facebook, Yahoo etc
  • ASP MVC & MSSQL
  • simpleCart
  • MOLPay Integration

Below is the print screen of the Online Fashion Store with Custom Shopping Cart for Lovit.my

Back-end site for admin to change the website page sliders, add products, add customer tag and also image tags etc.

This slideshow requires JavaScript.

vCare.com.my, community project

As part of our effort in giving back to society, we are in the midst of creating a web portal that help us find the nearest local Old Folks Home or Orphanage Centers. This portal will later be pass to a guardian that found us to help her in creating the site.

 

Here’s the print screen of the design and mockup. Stay tune!

 

How to develop Android Mobile App using KendoUI Mobile & PhoneGap

Been playing with KendoUI with many of our web projects and love it! Now, since everyone is talking about mobile app, we wanted to try if we can build a native Android app using PhoneGap with our beloved KendoUI as the UI components.

Instead of a being a complete step by step guide, this guide is actually complement to the official PhoneGap guide, we added extra info and notes that we discovered and think worth mentioning but missing in the guide.

Below is the list of installation steps we followed

 

Note* If you are Visual Studio 2013 users, this tutorial might no longer needed after the release of build-in tooling support for Apache Cordova after Visual Studio 2013 Update 3. For more information, visit http://blogs.msdn.com/b/visualstudio/archive/2014/08/04/apache-cordova-tooling-update-with-support-for-windows-7.aspx (Updated 2014.Aug.06)

 

1. Install Node.js

The popular server side javascript library is required, in case you haven’t install, here’s the download link – http://nodejs.org/

 

2. Install PhoneGap

Download and install PhoneGap from – http://phonegap.com/

 

3. Install Android SDK

Download and install Android SDK  from https://developer.android.com/sdk/index.html#download You will need this before you are able to run the Android Phone Simulator on your PC.

During the installation, you might be prompt to install JRE and JAVA SDK in case you don’t have it install on your PC. You can get both of them on http://www.oracle.com/technetwork/java/javase/downloads/index.html

NOTE:  Anyway, we found that developing on the simulator is painfully slow; hence, we recommend you to get an Android phone to deploy and test your app. Trust me, you will get way more productive that way than spending time waiting for the simulator to run

 

4. Configure and Setup the environment

Follow the instruction and settings posted on the official guide – http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html (Step 3B).

On top of the listed environment path, make sure that you create also

ANDROID_HOME: [*your android sdk path*]\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\platform-tools

Example:
ANDROID_HOME: E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\platform-tools

 

5. Test the environment settings

To test if the installation is successful, try running the PhoneGap command on your command prompt.

NOTE: Make sure you relaunch the cmd tool before testing the “phonegap run android” command.  In case it doesn’t work, try rebooting your PC; we found this step is required after the change of the environment path.

In case you run into path problem, which we do. Here’s some extra guide that you will guide your through until you resolve all the path problem.

Here’s a sample working path on my PC:
PATH: C:\Users\JeeShen\AppData\Roaming\npm;C:\Program Files\Java\jdk1.7.0_45\bin;E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin;E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\tools;E:\Installer\Dev\Android SDK\adt-bundle-windows-x86_64-20131030\adt-bundle-windows-x86_64-20131030\sdk\platform-tools

 

In case we missed any important steps, here are some of the reference links which we bookmark while solving the installation problems

 

The main challenge in on the installation part, once install, you can develop and mobile app project using KendoUI Mobile as usual. To run the created app, just run the phonegap run command on the project folder. The app will automatically be compile and package to android app and deploy to you connected Android phone. I manage to get my laptop setup and successfully ported our native Windows Phone App – GarageFinder to Android – Here’s the download link – https://play.google.com/store/apps/details?id=com.bizvise.garagefinder&hl=en

 

 

 

.NET Gadgeteer Hello BizVise Project – Part 4: Graphical User Interface GUI

This is the last blog post of my Hello BizVise Project blog series. In this blog post, I will show you how I connect the TouchScreen Display module (Display T43) to my FEZ Raptor mainboard. I will share the source code of the Glide GUI configuration to create a user interface for my application as well. Below are the steps taken:

1. All we need to do on the hardware side is to connect the TouchScreen connectors to FEZ Raptor mainboard according to the setting below.

  • T (Display) -> T (FEZ Raptor connector 14)
  • R (Display) -> R (FEZ Raptor connector 15)
  • B (Display) -> B (FEZ Raptor connector 16)
  • G (Display) -> G (FEZ Raptor connector 17)

WARNING: Make sure the power is off during the wiring.

FEZ Raptor with Touch LCD

2. Next, open our Visual Studio project and follow the video instructions below. Just as a summary of what I did in the video:

  • Setup Project.Gadgeteer Designer
  • Add Glide Library Reference
  • Generate XAML code using Glide Online Designer Tool
  • Read the created XAML and initialize the GUI window
  • Wired up event handling of the GUI controls – Toggle button and also Counter text block

I’m using Glide library to edit the GUI, you can find out more about my review about Glide GUI at – https://bizvise.com/2014/05/04/net-micro-framework-user-interface-development-framework-review/

NOTE: Here’s the video. Sorry for occasional mumbling, that’s me thinking, coding, video recording and narrating at the same time and I wasn’t good at that yet.

namespace HelloBizVise.NETMF
{
    public partial class Program
    {
        private bool isLEDON = true;
        private static GHI.Glide.Display.Window _mainWindow;
        private GHI.Glide.UI.Button _btnToggle;
        private GHI.Glide.UI.TextBlock _tbCounter;
        private int clickCounter = 0;

        void ProgramStarted()
        {
            Debug.Print("Program Started");

            ledStrip.TurnAllLedsOn();
            isLEDON = true;

            bToggle.ButtonPressed += bToggle_ButtonPressed;

            Glide.FitToScreen = true;
            _mainWindow = GlideLoader.LoadWindow(Resources.GetString(Resources.StringResources.MainWindow));

            _btnToggle = (GHI.Glide.UI.Button) _mainWindow.GetChildByName("btnToggle");
            _tbCounter = (GHI.Glide.UI.TextBlock) _mainWindow.GetChildByName("tbCounter");

            _btnToggle.TapEvent += _btnToggle_TapEvent;

            Glide.MainWindow = _mainWindow;
            GlideTouch.Initialize();
        }

        // GUI Toggle Button
        void _btnToggle_TapEvent(object sender)
        {
            ToggleLED();
        }

        // Hardware Push Button
        void bToggle_ButtonPressed(Button sender, Button.ButtonState state)
        {
            ToggleLED();
        }

        private void ToggleLED()
        {
            clickCounter += 1;
            if (isLEDON)
            {
                ledStrip.TurnAllLedsOff();
                isLEDON = false;
            }
            else
            {
                ledStrip.TurnAllLedsOn();
                isLEDON = true;
            }
            _tbCounter.Text = clickCounter.ToString();
            _mainWindow.Invalidate();
        }
    }
}

3. Well, here’s my recorded working Hello BizVise 🙂 Thanks for following my blog posts.

.NET Micro Framework User Interface Development Framework Review

Did an online research on the user interface development options available for .NET Micro Framework, doing this to evaluate the best option for me in order to proceed on my Hello BizVise project. Here’s what I learn. Basically, there are two main options that we can choose from in developing the User Interface of our .NET MF application.

A) .NET MF WPF (Windows Presentation Foundation)

.NET Micro Framework provides its own version of WPF, which is a scale down version of the desktop WPF library. This UI framework is provided out of the box in .NET MF SDK under the libraries Microsoft.SPOT.Presentation. Those who has experience working on WPF XAML will find this library familiar, it comes with all the important layout like GridPanel, StackPanel etc and those fundamental input controls like TextBox, Slider and it even includes the Grid control. 🙂

Having said that, there’s no XAML editor and any drag and drop designer tool provided out of the box. Hence, it’s less user friendly as compare to the desktop WPF XAML development. All the controls and layouts needed to be coded in C#, no WYSIWYG experience. You can find out more about the library at this link – http://msdn.microsoft.com/en-us/library/cc533011.aspx

B) Glide

Glide is an open source UI library and designer tool maintained by GHI Electronics. I highly recommend this library as it builds on top of the .NET MF WPF framework which it provides the drag and drop designer tool (missing in the core .NET MF WPF). Below are some of the important links to get started on Glide.

You may also ready this blog post on How I Use Glide in my Hello BizVise Project.

.NET Gadgeteer Hello BizVise Project – Part 3: Toggling LED strip of .NET Gadgeteer

Well, in this blog post I will try to hook up my Push Button and also the LED Strip that come with my FEZ Raptor Starter Kit. Will demonstrate how I fix the modules and write a simple code that runs on FEZ Raptor to toggle LEDs based on the push button input. Below are the steps taken, enjoy!

1. First, connect the Push Button module X connector to FEZ Raptor connector X (number 2). Then, connect the LED Strip Y connector to FEZ Raptor connector Y (number 1). You may refer the photo taken below for the wiring.

LED Strip Toggle and Push Button Connection on FEZ Raptor .NET Gadgeteer

2. Next, setup the Visual Studio project connection according to the physical connection done in Step 1. The video below shows how I did it.

3. Once we have the project setup correctly, next is to write the code that toggle the LED Strip based on the push button input. Below is the video guide and also code snippet (in case following video guide is not your cup of tea).

namespace HelloBizVise.NETMF
{
    public partial class Program
    {
        private bool isLEDON = true;

        void ProgramStarted()
        {
            Debug.Print("Program Started");

            ledStrip.TurnAllLedsOn();
            isLEDON = true;

            bToggle.ButtonPressed += bToggle_ButtonPressed;
        }

        void bToggle_ButtonPressed(Button sender, Button.ButtonState state)
        {
            if (isLEDON)
            {
                ledStrip.TurnAllLedsOff();
                isLEDON = false;
            }
            else
            {
                ledStrip.TurnAllLedsOn();
                isLEDON = true;
            }
        }
    }
}

If everything done correctly, we are ready to run the application on FEZ Raptop. Here’s what I get. 🙂

Toggline LED with push button on .NET Gadgeteer (Guide) - 2

Just as a preview of what coming up next 🙂 – Part 4 https://bizvise.com/2014/05/05/net-gadgeteer-hello-bizvise-project-part-4-graphical-user-interface-gui/

FEZ Raptor with Touch LCD

.NET Gadgeteer Hello BizVise Project – Part 2: Setting up Visual Studio IDE for NETMF Development

Continue from my previous blog post (Hello BizVise Project Part 1), this round I will work on the software side. This post covers the software setup and installation required to program and run my very first NETMF application.

NOTE: Please take note that NETMF SDK currently support up to Visual Studio 2012 (or any earlier version). 😦 Sad, gonna leave my VS2013 aside for a while. Fear not, yes, we can still install both VS2012 and VS2013 on the same machine.

1. Download and install the latest .NETMF SDK from http://netmf.codeplex.com/releases/view/118283

2. Download and install GHI Gadgeteer Package from GHI website. You can find the latest copy on https://www.ghielectronics.com/support/netmf/ For my case, since I’m using VS2012, I downloaded from this link – https://www.ghielectronics.com/support/netmf/sdk/11/netmf-and-gadgeteer-package-2014-r1

3. If everything goes well, you should be able to find the .NET Gadgeteer Project template from your Visual Studio New Project dialog.

Below is the print screen of what I see on my Visual Studio 2013, notice the .NET Gadgeteer Application option, after taking the installation in step 1 & step 2 above. In case you don’t know, go to New Project > Templates > Visual C# > Gadgeteer. A .NET Gadgeteer wizard will show up once you create the project. Choose your module, in my case, I choose FEZ Raptor (refer my previous post for more information about my FEZ Raptor).

Here’s the print screen of my Visual Studio project. Looks Good! Notice the Toolbox area? I believe it has the Drag and Drop working. Seriously, I might lose my job if it’s so easy to start – just kidding 😉 Developer rocks!

Visual-Studio-NET-Gadgeteer-Project


4. Instead of step by step blogging about the code I wrote, I figure out that it’s way easier for me to have just record it (my first try on NETMF). So here’s the video.

P/S: Sorry for occasional interruptions and unnecessary noise at the background (that’s me messing around on my table or my colleagues walking around) cause I do not have the resources to post edit the video, unless someone volunteer 😀

5. Here’s the steps taken to fix the “USB:Gadgeteer not found” problem. First off, launch the “FEZ Config app” > Ping > Check Device for Update.

Then, go to Firmware Updater tab > click Next to initiate the update. You will get a summary like your firmware of the Rapter are up to date if you done it correctly. Here’s the print screen in sequence.

Alright, will get into coding and teach my Raptor to do some task in my next blog post. Stay tune!