Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.7 Serve, Emulate and Run

Hello everyone. This is Reggie Dawson. Welcome to the Building An App With Cordova course for Tuts+. In this video, we're going to learn how to preview and test out our apps. When developing an app, you need a way to determine how the app is going to behave on a device. Fortunately, Cordova includes multiple ways to test our app. The first way to test is with the Cordova serve command. At it's heart, every Cordova app is a webpage anyway, and as a result we can test out our app in a web browser. Open a command prompt and navigate to our sample one project. First we need to add the Android platform. Cordova platform at Android, this will add Android platform as a build target for this app. If you are working in another SDK, such as for IOS, then you would run the appropriate command for your platform. After that, we need to run. The Cordova prepare command copies our web content into the correct platform. By itself, it will copy to all platforms that have been added to a project. If we want to use a specific platform, we can add the platform name after the command. For example. After we've prepared our project, we're going to run. When we run this command, we get a message stating there is a server running at localhost:8000. If we navigate there in our web browser, we will see package metadata and a list of platforms and plugins. This isn't what we set up, what's going on? If we click on the Android platform link a pop up window will open up. We're going to click Cancel on the pop ups. And our app will start, but all we'll see is Connecting to a Device. The reason this is not working highlights the problem with Cordova serve. This app we designed, is based on Cordova APIs and as such is waiting for the device ready event. Unfortunately, since this is a web browser, Android hardware APIs are not available. And that is the problem previewing an app in the web browser. If it is a mobile platform, don't expect the plug ins to work properly in the browser. Now, if we cancel the preview and run, after running Cordova platform add browser we're gonna do a Cordova prepare and then we're going to run Cordova serve. And this time we will click on browser. When we do this, it works since this is the platform it was built for. As you can see, it tells us it is Cordova 4.0 and a Chrome device. Obviously, we need a way to test that it is closer to the actual experience we will have on our device. We also need a way to test our API's to make sure our code is working. To accomplish this, Cordova includes a decent emulator to allow you to run your app and test it. We don't have to run a prepare command for this as it prepares and builds the project before deploying to the emulator. The command we use is. This runs the default emulator for all platforms added to the project. We can also specify the platform by typing Cordova emulate Android. This will launch the Android emulator. But before we can run the emulator, we need configure an AVD to run our app. An AVD is a virtual device used by the emulator to mimic popular handsets. Type Android and press enter. This will launch the Android SDK Manager. If you don't already have it, install the Android 5.1.1 API 22 platform, as you may get an error when you try to run the emulator the first time without this Android version. After you select that, go to tools and choose Manage AVD. If we go to device definitions, we can see the various platforms available to us. We can create orclone a device here if we like, but instead we will click on Android Virtual Devices and choose create. Give the AVD a name and as far as the device, I'll just choose Nexus S. My target will be Android 6 API level 23. My CPU's going to be ARM, because I'm on an AMD processor, but if you're on Intel, choose Atom. The skin is going to be HVGA. We will set the front and back cameras to Emulated. And then we will add a SD card of 4GB. Also we have the option of snapshot or use host GPU. Snapshot persist the state of your emulator between sessions. Use host GPU offload some of the processing to your graphics card Both of these options are there to improve the speed of the emulator, especially the start up. If you have a decent video card it is worth it to check use host GPU. So that is what I will use. You can only use one or the other. After that click on OK, and close the AVD and SDK manager. Once we have done that run Cordova emulate Android. Of course I had to fast forward through the startup as it will take a long time. And that illustrates the biggest problem I have with emulator. When it finally starts, it works well, but who wants to wait five minutes to test their app? Fortunately, I have an alternative for you. There is an alternative emulator called the Ripple Emulator that works much better. In order to install, we can use npm. We run npm install -g ripple-emulator to install the emulator. After you have it installed, run ripple emulate. As opposed to the default emulator in Cordova, this emulator loads fast and works well. As you can see, it's not reporting the device correctly so it's safe to assume that not all APIs work correctly on Ripple. At any rate, we are going to test another way to be sure our app is working properly. The best way to test your app, is on the actual device that you are going to deploy to. The configuration varies by platform. For example, with Android we have to make sure that USB debugging is enabled. After that, we need to make sure the phone can connect to the PC with a USB cable, and if not, we will need to download and install drivers for our device. And once we have our device connected we can go to the command line and run. The Cordova run command executes our app on the appropriate device connected to our system. If you omitted the platform it would run to the project for each platform connected to our system provided these platforms have been added to our project. After we run the command, the app should be built and start running on your device. You now know how to test your apps and know everything you need to build an app. In the next video we will start on our project.

Back to the top