Lesson 1 - Project Creation & Setup

This lesson provides the steps to create a new PhoneGap project based on a starter app template and contains details about the resulting project structure. Before moving on you will add an icon library and test out the new app to ensure your environment is set up properly.

Project Creation

  1. Open a terminal window and run the phonegap create command below, specifying your desired folder location, package, name and the phonegap-template-vue-f7-split-panel for the --template parameter as shown below:

     phonegap create Stockpile com.phonegap.stockpile Stockpile --template phonegap-template-vue-f7-split-panel
    
    PhoneGap provides starter templates and layouts to help you get started building your apps quickly. The templates vary in the types of frameworks and configurations used, some more basic and some fully configured with a build process like Webpack. To create a new PhoneGap project with a template, you specify the --template parameter upon project creation. To locate the various templates available, go to npmjs.org and use the search term phonegap:template. See the project overview for more details about the templates and project structure.
  2. Next, navigate into the new Stockpile folder and run the npm install command to install the project dependencies:

     cd Stockpile
     npm install
    
    IMPORTANT: You will be updating the files and folders within the src folder specifically when going through the lessons in this guide. Do not confuse it with the www folder. That folder will be regenerated when the npm run build command is used. Refer to the project overview for more details.

Rename the App

  1. You're now ready to start editing the project to transform it into your own Stockpile app. Open the root Stockpile project folder in your favorite code editor.

  2. Begin by providing your app a new name. Open ~src/index.html and change the <title> tag value of MyApp to Stockpile.

     <title>Stockpile</title>
    
    TIP: If you're looking for a good code editor check out Visual Studio Code.

Add the Framework7 Icons Library

Framework7 provides just a couple commonly used icons in their default package (back arrow and menu bars), but they also offer a free icon font library to provide additional icons (and iOS specific icons) as you develop your apps. Follow the steps below to install the Framework7 Icons Font library.

  1. Install the framework7-icons package from npm:

     npm install framework7-icons --save
    
  2. Then open ~src/main.js and add an import for the new icons as shown below just above the routes import:

     // Import the Framework7 Icons
     import Framework7Icons from 'framework7-icons/css/framework7-icons.css';
    
     // Import Routes
     import Routes from './routes';
    
Note: This app only uses a couple of icons, but since this is a guide to building a mobile app, it's important to know there are icon font libraries available to you. There's also a free Material Icons library you can check out if you're interested in using material design specific icons. You could even include both icon font libraries with a conditional icon that used either the iOS or the Material design version. For more information about how to do this, and using icons with Framework7 in general, see the Framework7 docs. This app did not need that extensive of a solution, and in the interest of performance, just the Framework7 Icons library was included.

Run it!

Since this app was built based on webpack, it can be run in development mode or production mode. While building the app, it's easiest to run it in development mode and test it in the browser as long as possible to develop the majority of the functionality until device-specific testing is needed.

Development mode

Open your terminal and start the development server with the following npm command:

    npm run dev

The app will open up in your browser at localhost:8080 (or you can manually open it there). When the app is run in development mode in the browser, it should appear like the screenshots below, which is essentially the PhoneGap Default Split Panel app renamed at this point.

You can take advantage of the real-time compiling and hot reloading while running in dev mode to speed up your development time as you work through the lessons.

Production mode

Build in "production mode" when you're ready to start actually testing your app on a device or simulator. To build it for production mode, use the build run target:

     npm run build
Specific details about the differences between the dev and build mode can also be found here.

Once the build is complete, you can then run the normal phonegap and cordova commands to actually deploy the package to an ios or android target using:

     phonegap run ios
     phonegap run android

After the build command, you could also use the phonegap serve command to serve the app for use by the PhoneGap Developer App running on a device.

     phonegap serve
The last option with phonegap serve is particularly useful for debugging Progressive Web Apps.

Open the Chrome devtools and use the mobile emulation button to try out different device simulations. You'll need to reload the page when switching between iOS and Android to see the stylesheets applied.

ESLint tips

The Vue template this app is based on automatically defaults to the semistandard ESLint option, which is the JavaScript standard style extended to include semicolons. Take a few minutes to familiarize yourself with the rules if you're not familiar already, to help avoid compiler errors and speed up your development time while working through this guide.

Edit this page on GitHub