Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Building the App

Finally, in this lesson, I'll show you how to actually build the app with PhoneGap Build.

3.3 Building the App

Hello everyone, this is Reggie Dawson. Welcome to the Publishing Apps with Cordova course for Tuts+. Once we have our app configured how we want the next step is to build our app for release. If you look in my project you will see my www folder. I also have a KeyStore 5 Generator for this app. Contrary to the process used with the local build, all we need to sign our app is to generate the KeyStore. We can then sign our app directly in PhoneGap Build. If you haven't done so already, go to and sign up for the service. Again, with the free plan, we can have one private app. Once you sign in, you will see your apps, but we haven't built any yet. If we click on the open source tab, we have the option to paste in a link to a Git repo. This allows us to build a public app directly from the repo. If we click on the private tab, it gives us the option of pulling from a private GitHub repository or uploading a file. In order to upload our file, it has to be a zip file. Let's prepare our app. Windows has the capability to create a zip file built in. Go to our www folder and right click on it, then choose send and compress folder. [BLANK AUDIO] It's all right to keep the default name, after that we can upload our file. [BLANK AUDIO] Once we upload our app it is shown along with the metadata about the app we put in our config.xml file, such as the title and the description of the app. Our app has not been built yet. I want to explain the two options at the bottom first. Debugging allows us to debug our app while it is running on a device from Phone gap bill. We will talk more about debugging later in this video. The next option, Hydration is a feature that improves the compilation time of our app, as well as allowing updates to pushed directly to a device. When a new build of a app is uploaded, the users of your app will be prompted to update the app. Hydration can be added now or after an app has been built but due to the features it offers, we will add hydration as well as debugging to our app. Click on the ready to build button to start the build process. As you can see only IOS and Android are here as build targets since we limited this in our config.xml file. If I click on the name of the app, we can see our compiled files and their status. After our app has been built, the iOS app comes up with an error. If we click on the error, it will tell you the problem. And the problem is that we need to sign this app before compiling. The Android build went through without a problem. We also have some menu options, Builds, Plugins, Collaborators, and Settings. Plugins gives you information about the plugins installed in your app. Collaborators allows you to invite others to participate in developing your app as either a tester or developer. Developers have read write access to your account, so be careful who you give access to. Then in settings we have options to enable debugging or hydration. And we can also make this a public app and allow public sharing. Now, if we scroll down, we can see details from our config.xml file. And then finally, we have the danger zone which allows us to delete our app. Now, before we install and test our app, we need to sign our file. All we need is our keystore file, which I have generated already. If you need to learn how to create one of these keystore files, look at the videos in the last section. In order to assign our ad, click on the drop-down that says No Key Selected and choose Add Key. First we're gonna select our keystore file. And then we will supply a title. And the alias we set up when we generated our key store file. After that, click submit key. An error will appear but don't worry. Click on your user account and go to edit account. From there, click on the Sign in Keys tab and then click on the lock to unlock the key store. Supply the alias password for the certificate password, and the keystore password for the keystore password. And then click submit key again. Now after that let's go back to our apps. Now after that go back to your app and choose the unlock key store from your drop down menu. Once we have the key selected click on rebuild to rebuild the app. Now once the app has been rebuilt it should be signed, to be sure we can check the log. And as you can see our app has been signed. Now in order to install on our device we can download and install locally or use the QR code to install. All you need is a QR reader to scan and download your app. Once you have it downloaded, go ahead and install it. Now, you may have to set your phone to allow apps from unknown sources to install on your device. Once we have our app installed and running on our device, we can use the debug tab to test the app. I'm sorry, I forgot to enable hydration and debugging when I uploaded my app, but as you can see, we can set it up now. And finally there is another way that we can build our apps with phonegap bill. If you have phonegap installed locally, we can use the command line interface. Installing is easy enough, all you need is node.js installed and then run mpminstall -g phonegap. Before we start, I'm gonna delete my current app as this one will be a private app as well when we upload it. Remember we can only have one private app at a time. Now I could have made my existing app a public one, but I will just delete it as we're going to be uploading the same app. Once we have our project deleted, we can go to our project folder and build the phone gap remotely. Open a command prompt and navigate to the project folder, then run. PhoneGap remote log in. It will then prompt you for your user name and your password. After logging in, we have some options on what we can do. We can run PhoneGap remote build in the platform to push our app up to build and compile. Then we can use PhoneGap remote install on the platform to generate a QR code directly in the terminal to use to install our app. I'm gonna use a command that combines these steps, PhoneGap remote run android. This will build and return a QR code to install our app. From there, we can scan the app with our QR reader and install it directly from our terminal. And as you can see, our QR code has been returned to the terminal. And if we take a look on the web on our PhoneGap Build account, you will see that our app has been uploaded to PhoneGap Build, as well. You know how to use a local or Cloud based build to develop your apps. That's everything you need to know to build and package your apps for the respective app stores. I look forward to seeing what you come up with.

Back to the top