Creating a Cordova app is done using the Cordova create command on the command line. In this video, Tom Duffy discusses how to use the create command and demonstrates using it to create the Park It Cordova app.
- [Instructor] Creating Cordova apps is straightforward. All the work is done from the command line. In a terminal window, navigate to the directory where you maintain source code. If you are creating a Cordova app from a project created in NetBeans, navigate to the public HTML folder of your project. Use the CD command to navigate. I can never remember or get the commands correct to navigate to the public HTML folder, so I always just grab it from a finder window, then drag and drop it in.
The Cordova create command includes 4 arguments, one of which is required. It includes a project directory, a unique identifier, a display title, and configuration data. The project directory argument is a directory that will store your Cordova project. It should not exist prior to executing the Create command, as Cordova will create it for you. The project directory argument is the container directory for your Cordova app, and is required. All of the assets for your Cordova app, including platform specific app code, will be stored in the directory you specific.
The second argument is a reverse domain name identifier, that specifies a unique package identifier for your Cordova app. You may omit this argument, but you probably shouldn't for a couple reasons. First, the default value is io.cordova.hellocordova. Almost certainly, that value will have no meaning with regards to your app. The second reason you should include a unique identifier is that the arguments for the Create command are positional. If you leave the unique identifier off, you won't be able to use any subsequent arguments.
The display title argument is the default title of your app on the device. Like the unique identifier, you should provide an appropriate value, as the default value is hello cordova. The display title is store in config.xml, so you can change it, but also like the unique identifier, be aware that Cordova may have generated code, based on the value you provide. The third argument is a Jshon string whose key value pairs will be stored in config.Jshon. This argument won't be used here, and is outside the scope of the class.
The Create command also includes options in a fourth argument. Currently, there are 3 available options. Dash template allows you to use a custom template, specified locally in MPN or GitHub. Dash copy from allows you to specify a source code to copy from. Dash link to creates a symbolic link to the specified www directory without creating a copy. Like the config data argument, the options won't be used here, and are outside the scope of this course.
Once you've navigated to the source code folder, issue the Cordova Create command, and specify appropriate arguments. The command doesn't take much time to run, and congratulations, you just created your first Cordova app. The Create command creates the app skeleton for you with a specific structure. You can view that structure directly in NetBeans. Notice that the Park It Cordova folder has been created for you inside the site root. Some of the files to take note of are, config.xml, which allows you to customize the behavior of your project.
More on that in a future lesson. The hooks directory allows you to include scripts that customize CLI commands. While this can be useful for integrating a custom build system, or a version control, it won't be covered in this course. The platforms directory will contain all the source code and build scripts for the platforms that you support. You'll add platforms using the platform command later in the course. When you add platforms, Cordova copies files into the platform specific folders.
It's usually not a good idea to modify the code in the platform specific folders. Instead, modify the code that is used to build the platforms so that you only have to maintain it in a single place. The plug-ins folder is self-explanatory. It contains the code for plug-ins that you add to your project. You'll add plug-ins later in the course. The www folder is a folder that contains your app code. This is where you will store all of the web app resources your app requires.
If you are going to make any changes to your app, you should do it here. That way, changes made will be reflected in any platforms you add later. You can delete the files Cordova generates in the www folder, then copy the files from your web app into the www folder. You can do this in Windows Explorer, or Mac Finder, or you can use NetBeans to manage files for you. In the NetBeans project window, expand the www folder, and then select all of the files inside it.
Right click on those files, and choose Delete. NetBeans will ask you to confirm if you want to delete these files. Click Yes. Then, select all of the files in your web app, and drag and drop them into the www folder. You've just moved the files into the www directory. Cordova will copy any changes you make from here into platform specific folders. Since we are creating a platform neutral Cordova app, all of the editing of files will be done in this top level www directory.
- Understanding Cordova's value proposition
- Installing the Cordova CLI
- Accessing mobile device capabilities, including geolocation and data storage
- Using Android Studio and Xcode in conjunction with Cordova
- Creating platform-specific stylings to match native interfaces