Setting up Windows Mobile App development environment.

Windows 8 is released by Microsoft which had major changes to the UI experience to compete with the other major mobile platforms like Android and iOS. As with all Microsoft related stuff, Windows mobile app development environment can be set up only on the Windows machines.

Visual Studio

You need to download Visual Studio from the below link.

https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx

Visual Studio is the IDE supported by Microsoft for developing apps using Microsoft related technologies.



Once the Visual Studio is downloaded, double click on downloaded installer to start the installation process and follow the instructions to complete the installation of visual studio.

Once visual studio is installed, launch visual studio.

Windows Phone tools

Select File –> New –> Project.



In the New Project Wizard, select Installed –> Templates –> Windows 8 and the tools required for creating Windows mobile project are displayed.



If the tools are already installed, then the other project related fields like Name, Location etc. are enabled, else the below Message is displayed.



Click on ‘Install’ to download the Windows Phone related tools and SDK’s. Once the installer is downloaded, double click on the installer to download and installer the Windows phone related tools.

If the Visual studio is open, close it and click on Retry in the below screen to continue installation of Windows mobile development environment.



The installer displays the list of packages that will be installed. Just click on ‘Next’ to continue installation.



Click on ‘Update’ to install the selected features. It will take considerable time based on bandwidth available since the installer that has to download is almost 4 GB of data.

Windows Phone project

Once the installation is completed, launch the Visual Studio to create and run a sample windows app.

Select File –> New –> Project. And in the New Project wizard, select Installed –> Templates –> Visual Basic –> Windows –> Windows 8 –> Blank App(Windows Phone)



Provide the App Name and the Location where you want to create the project and click on ‘OK’.
Visual Studio creates the Windows Phone project.





Select the emulator on which you want to run the demo app you created.



This will start building the project and launching the emulator.







The Windows Phone emulator is not fast and so it will take some time before the emulator is started.



The windows phone emulator is launched and the demo app is launched on the emulator. The app doesn’t display any thing which is totally fine, since it is just a template app and we didn’t make any changes to display in the app.

Issues with Emulator

While launching the emulator, you may run into some issues like the below. You may see the below message even if the virtualization is enabled on the system.



To work around this problem, go to Control panel –> Programs and Features –> Turn Windows features On or Off.








Check if all the Hyper-V features highlighted above are enabled. If they are not enabled, enable them. If they are enabled already, disable them, restart the machine and enable them again and restart the machine.

Then you may see the below message, just click on ‘Retry’ if you see a similar message.



Then you may see the below window, which asks whether you want to connect the emulator to the internet. Click on Ýes’ to allow the emulator to connect to the internet. During this process the network of your system may be disconnected for a while before it reconnects automatically.



The above steps should help in resolving any issues with launching the emulator.

Apache Cordova Environment

To create a Cordova project using Visual studio, select File –> New –> Project

In the New Project wizard, search for Cordova and the New Project wizard displays the list of Cordova project templates available.



Select ‘Install Tools for Apache Cordova Update 1’ for JavaScript.



If the required Windows Mobile tools etc. are not downloaded along with the version of Visual Studio you downloaded, the below message will be displayed.



Click on Ínstall’ to download the required tools for developing mobile apps.

Click on ‘Next’ to download and install the required tools for developing Apache Cordova apps using Visual Studio.



Click on Úpdate’ to start the download and install the Apache Cordova tools for Visual Studio.



Installing Cordova tools for Visual Studio requires around 10 GB of disk space, so make sure your disk has required disk space. Also downloading 10 GB of information over the internet is going to take considerable time.



Select File –> New –> Project and in New Project wizard select Installed –> Templates –> JavaScript –> Apache Cordova Apps. Select ‘Blank App (Apache Cordova)’ and provide the project name and location and click on ‘OK’.



Visual Studio creates a new Cordova app project.



Select the mobile os you want to emulate(highlighted in red) and then select the device model you want to emulate(highlighted in green).



This will launch the mobile emulator.



And the below message will be displayed in the emulator and since it is just a template app, the message displayed is fine.



Open index.html in the www folder and change the message displayed in the index.html to any other message and relaunch the app in emulator.






The modified message should be displayed in the emulator.



We have set up the development environment for creating windows mobile apps and learnt how to run the windows phone emulators.

Apache Cordova Tutorials

This is a series on setting up the development environments for various mobile platforms and using the various cordova core API's for developing Apache cordova apps.


Installing NodeJs on Windows

Setting up Mozilla FirefoxOS development environment on Windows.

Setting up Mozilla FirefoxOS development environment on Mac

Setting up Mozilla FirefoxOS development environment on Ubuntu

Setting up Windows Mobile Development environment.

Installing NodeJs on Windows

 
NodeJs is an asynchronous event driven JavaScript framework designed to build scalable network applications. NodeJs is used to distribute Cordova and all the plugins related to Apache Cordova. 

Download the latest version of nodejs from nodejs website.

https://nodejs.org/



Once the download is completed, double click on the installer to start the installation process.



Click on ‘Next’ to start the Nodejs installation.



Accept the End-User License Agreement and click on ‘Next’ to continue the installation process.





Select the location at which you want to install the Nodejs.



Click on ‘Next’ to continue installation.



Click on Ínstall’ button to start installing nodejs.





Click on ‘Finish’ to complete the nodejs installation.



To verify the installation, open command prompt and run the below commands.
npm –v
node –v

These commands should display the nodejs version and npm versions. They may vary from the below screen based on the version of the nodejs installed.



We have installed nodejs on the windows machine and we will be using this to work with Cordova in the upcoming tutorials.

Setting up Mozilla FireFox OS development environment and Simulator on Mac.

FireFox OS is developed by Mozilla, the organization behind the Mozilla web browser. FireFox OS is a community driven project and the apps for this OS can be developed using HTML5 and Javascript.

You need Mozilla Firefox browser to develop and debug the firefox os Apps.

Install the latest version of Mozilla Firefox browser from the below link and install the browser.

https://www.mozilla.org/en-US/firefox/new/

Once Mozilla firefox is installed, launch the Mozilla browser and hit ‘Shift + F8’. This will launch the Web IDE. Alternatively you can launch Web IDE by Open Menu –> Developer –> Web IDE.





Once the Web IDE is launched, you can create a new app, open existing app, install new simulator or launch the existing simulators.



To install a new simulator, select ‘Select Runtime’ –> Install Simulator.



This will display the list of all the available FireFox OS simulators. If the simulator is already installed, a ‘uninstall’ button will be displayed against the simulator and if the simulator is not yet installed, a ‘install’ button will be displayed against the simulator.





Click on ‘Install’ button against the simulator you want to install to start the installation process.



Installation of FireFox OS simulator on Mac takes some time, so wait till the installation is complete.



Once the installation is complete, ‘Uninstall’ button will be displayed against the simulator installed.



Once the simulator is installed, click on ‘Select Rutime’ from the Firefox WebID and you can the see the installed version of the simulator under the ‘Simulators’ section.



In ‘Simulators’, select version of the Firefox OS you want to simulate. The simulator will be launched.



Now let us run a demo app in the simulator.
In Firefox WebIDE, click on ‘Open App’ and select ‘New App’.



Now you need to select a template for our demo app. Since this is our first app, we will select the ‘HelloWorld’ template.



Provide the project name. It can be anything you like, I just provided it as ‘MyFireFoxOSApp’. Click ‘OK’ after providing the Project Name.



Provide a location where the projection can be saved.



The project is created and displayed in the Firefox WebIDE.



Select the Firefox OS version you want to simulate on right side drop down in the 2^nd line of the Firefox WebIDE and click on symbol to launch the project in the simulator.



Once the app is launched on the simulator, the ‘Stop ‘button beside the ‘Start’ button will be enabled and the ‘Start’ button is changed to the ‘Install and Run.’



The app is launched in the simulator and the below screen is displayed. Since we haven’t really added any code and ran only the template, it is perfectly fine.



Click on stop button to stop the app running in the simulator.



Now let us make a small change to the code and see if the change is reflected in the simulator. On the FireFox Menu bar select ‘Device Preferences’



On the Device Preferences, In General section, Select ‘Show editor’ if it is not already selected. This will displayed the editor if it is not already displayed.



As you can see, the app project structure along with the editor is displayed after we changed the preferences above.



Now let us make a small change to the app. Select índex.html’ and the file content is displayed.
Change the ‘Hello World’ to ‘Hello Firefox OS’ and save the modifications.





Now Ínstall & Run‘ the app and modifications done are reflected in the app on the simulator.



The installation of Mozilla FireFox OS development environment is similar on the Windows, Linux or the Mac platforms as the Web IDE is integrated into Mozilla FireFox browser and so all the process will be similar. We have seen on how to set up FireFox OS development environment, including how to install the simulators and running simulators on Mac and also we created a sample application. The process for creating complex apps is also similar, but you need to have better understanding of the FireFox OS API’s.