- Cordova Development Issues
- Developing Cordova Applications
- Testing Cordova Applications
- Leveraging Cordova Debugging Capabilities
- Debugging and Testing Using External Tools
- Wrap-Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Developing Cordova Applications
Now it’s time to start working through the process of how to create Cordova applications. In this section I describe the process for coding a Cordova application. In later sections, I show you how to test and debug applications.
Working with a Single Mobile Device Platform
It’s possible that some developers will work with only a single mobile platform. If you are such a developer, all you have to do is open up a terminal window and issue the following commands (which are described in Chapter 4, “Using the Cordova Command-Line Interface”):
cordova create app_name cd app_name cordova platform add platform_name cordova prepare platform_name
In this example, app_name refers to the name of the application you are creating and platform_name refers to the mobile device platform you will be working with. So, if you were creating a BlackBerry application called lunch_menu, you would issue the following commands:
cordova create lunch_menu cd lunch_menu cordova platform add blackberry cordova prepare blackberry
You can also specify more information about your application by using the following:
cordova create lunch_menu com.cordovaprogramming.lunchmenu "Lunch Menu" cd lunch_menu cordova platform add blackberry cordova prepare blackberry
At this point, the command-line interface (CLI) would create the Cordova project folder shown in Figure 6.2, and all you need to do at this point is open your code editor of choice and start coding and testing your new Cordova application.
)
Figure 6.2 Cordova Application Project Folder Structure: BlackBerry Application
The BlackBerry platform project folder contains a copy of the web application files you need to work with.
Working with Multiple Mobile Device Platforms
Because Cordova is all about cross-platform mobile development, you’re probably going to want to target multiple mobile device platforms. In that case, if you were building an app for Android and iOS, for example, you would open a terminal window and do something like the following:
cordova create lunch_menu cd lunch_menu cordova platform add android ios
At this point, you’d have a new Cordova project structure with projects for both Android and iOS, as shown in Figure 6.3. As discussed in Chapter 4, there’s a separate folder called www contains the application’s core web content files, the content files that are shared across both the Android and iOS projects.
)
Figure 6.3 Cordova Application Project Folder Structure
In this scenario, you will work with the web content stored in the www folder, shown at the bottom of the folder structure in Figure 6.3. When you have the web application content in that folder ready for testing, you use the CLI to copy the code into the platforms sub-folders (android and ios), shown in the figure.
What I do while working on a Cordova project is keep my web content files open in an HTML editor such as Adobe Brackets (www.brackets.io) or Aptana Studio (www.aptana.com), then use the CLI to manage my mobile device platform projects for me. As I edit the files, I add the web content to the .html file and my application’s code to the application’s .js files. When I’m ready to test (and debug) the applications, I switch over to a terminal window that I keep open and pointed to the Cordova project’s root folder (the lunch_menu folder I created a while back) and issue some commands. If I want to switch to the Android IDE and test the Android application, I issue the following command:
cordova prepare android
Or, if I will be testing and debugging both the Android and iOS versions of the application, I issue the following command:
cordova prepare android ios
What this command does is copy all of the project files from the www folder into the appropriate folder for each specified mobile platform project, as shown in Figure 6.4. In this example, it copies the content files to the Android project’s assets/www folder and the iOS project’s www folder. The contents of the config.xml file should be applied to the platform-specific config.xml file located in the target directory.
)
Figure 6.4 Copying Web Content to the Platform Projects Folders
Now, any self-respecting mobile web project may have some icons, screen graphics, CSS, and/or JavaScript files that are unique to each target platform. Since each mobile device has its own theme and icon requirements, it’s likely that at a minimum of those will be required. In older versions of Cordova, you had to manage all of that manually; with the CLI, that’s all taken care of for you.
Notice the merges folder shown in Figure 6.3; Cordova uses that folder structure to provide you with a place to store the web application resources that are unique to each target platform. When you issue the Cordova prepare commands shown earlier, the CLI copies the custom content for each of the platforms into the appropriate web content folder for each platform’s project folder, as shown in Figure 6.5.
)
Figure 6.5 Copying Web Content and Platform-Specific Content to the Platform Projects Folders
As shown in the figure, custom content for the Android platform stored in the merges\android folder is copied into the Android platform project’s assets\www folder. Custom content for iOS applications is copied from merges\ios to the iOS project’s www folder.
With all of the application’s content copied into the appropriate project folders, you open the appropriate IDE (Eclipse for Android and Xcode for iOS) and begin the testing process. For information on how to import the Cordova projects to each IDE and use the platform’s debugging tools, refer to Chapters 7 through 10.