Building Hybrid Mobile Apps
Chapter 2 -Preparing Your Environment
Almost any modern desktop or laptop will suffice as a development platform to build mobile applications. There is one caveat if you wish to build, test, and deploy applications for Apple iOS devices. If you wish to target iOS devices you will need to have a Mac running OS X 10.10.X (Yosemite) with Xcode 6.X or later. Since many people will want to target iOS in addition to Android and Windows we will focus on creating setups that can target all mobile platforms.
There are two primary options to choose from: a single computer setup or a two computer setup. The single computer setup will by necessity require a mid 2009 or later Mac that has a core i3, i5, or i7 processor. The Mac will run Windows 8.1 or later will in a virtual machine.
The two computer setup will have a Windows 8.1 or later PC along with a Mac capable of running OS X Yosemite or later. It is recommended that the Windows PC in the two computer setup has at least an i3 or later processor. The i3 or later processor is needed in either setup to run some of virtual machines used to run various phone emulators. If you only have access to a Windows PC, you can target iOS by using a hosted Mac solution such as http://macincloud.com. There is no supported / legal solution to targeting iOS on a single Windows machine setup without such a hosted service.
Single Computer Setup Hardware Requirements
OS X 10.10X
480 GB or larger SSD
10.10.X or later
Two Computer Setup Hardware Requirements:
256 GB or larger SSD
Core 2 Duo
OS X 10.10.X
256 GB or larger SSD
i3 or later
OS X 10.10.X or later
In general the component that will make the most impact on your development will be the SSD. Software development and especially the Cordova / Visual Studio build process is extremely disk intensive. The SSD significantly speeds up the build process and the performance of emulators. You may be able to run most of the tools with some of the specs less than the minimum, but you may run into problems or extreme slowdowns.
Monitor and Graphics Setup
In general the graphics sub-system is not a huge impact on the development environment. However, we do recommend getting the best monitor setup your workspace and budget can handle. In particular, get a display with more than 1080p vertical resolution to allow for more code to be on the screen vertically. The 27” Apple cinema and Thunderbolt displays are excellent displays for software development with 2560×1440 native resolution. You can find similar 27” IPS displays with at least 2560 x 1440 resolution for about half the price of the Apple equivalents and they will work with both PCs and Macs.
Using multiple displays is also another common option, but you still want to have one display with more than 1080p vertical resolution for ease of browsing source code and running device emulators without worrying about scaling. In the two computer setup you will want to access the other machine through remote desktop software to avoid having to keep two sets of keyboards and mice.
There are several key pieces of software that are needed to complete your environment setup. If possible we pick software that is free to use and / or open source software.
- Visual Studio 2015 Community edition
- Xcode 6.4 or later
- NPM – node package manager
- MySQL 5.6 or later community edition
- For single computer setup use Virtualbox 4.3.X (Note: currently version 5.0 is not recommended since it has issues with Windows 10 and Genymotion)
- UPDATE: The release version of VS 2015 using ‘remotebuild’. for iOS builds
- vs-mda-remote this is the remote build agent for iOS (VS 22015 RC and earlier) (https://www.npmjs.com/package/vs-mda-remote)
- Paint.net for a Windows paint program to edit splash screens and icons
- Genymotion to add additional Android phone emulation capabilities (it uses VirtualBox underneath the covers)
- HeidiSQL to access MySQL databases
- Chrome Remote Desktop plugin or Microsoft Remote Desktop for Mac.
- weinre for DOM debugging on devices that do not support native debugging
- Google Chrome browser
- audacity for editing sound files
- NVM – node version manager to make switching between versions easier
Software Installation Notes
- When installing Visual Studio 2015 the easiest option is to select a custom installation and select all options to install. This will take a fair amount of time and over 20GB of disk space. Visual Studio will take care of installing all the necessary components, emulators, etc… for the building of Cordova mobile applications.
- When installing the remotebuild or vs-mda-remote software you may be prompted or instructed to install additional software on your Mac. You should install all the recommended libraries and software to be able to perform builds successfully.
- As of the writing of this article the Visual Studio install process will install a 32 bit version of the JDK. You should install a 64 bit version of the JDK and modify the JAVA_HOME environment variable to use it instead. If you do not do this various build tools (gradle) will fail with hard to diagnose errors.
- Currently there are issues with Mysql and Visual Studio with Cordova / Taco installed. The issue is with path modifications to the Mysql directories. This does not impact every install, the easiest way to tell is if you get Mysql errors when building a default Cordova project from Visual Studio. The easiest way to fix the issue is to download the Path Editor 2 program from here:
Your Mysql path statements should look similar to the following where the first Mysql entry points to the location on your system where mysql.exe resides.
- Compatibility issue with Xcode 7.1 and latest Cordova tools. If you try to create a product archive in Xcode for a Cordova project, it will fail complaining about a missing header. The header paths need to be changed before an archive can be built and uploaded to iTunes Connect for distribution.
‘Cordova/CDVViewController,h’ file not found
The workaround is documented here:
Basically change the header search path to include $(PLATFORM_NAME) as described here (comment from the jira):
Found the culprit. Because of new platforms like tvOS, there is an extra folder created for archive intermediates, namely, a folder with the name of the os.
Build Settings -> Header Search Paths :
Completed Single Computer Environment Example
- Late model Mac with OS Yosemite, 16GB ram, 480 GB SSD, i7 processor
- VirtualBox 4.3.X installed
- node.js installed
- NPM installed
- Xcode 6.4 installed
- remotebuild or vs-mda-remote installed
- Genymotion installed
- Windows 10 running in a virtual machine with following configuration:
- 2 processors
- 8 GB ram
- 125 GB disk space
- Visual Studio 2015 installed
- MySQL installed
- HeidiSQL installed
- paint.net installed
- audacity installed
- NPM installed
- weinre installed
- Chrome installed
- Preparing your environment
- Your first app
- Backend and databases
- Push notifications
- Location services
- Deployment to app stores
- Managing updates
- Monetizing your app
- Writing your own plugin