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.
Open a terminal window and run the
phonegap createcommand below, specifying your desired folder location, package, name and the phonegap-template-vue-f7-split-panel for the
--templateparameter as shown below:
phonegap create Stockpile com.phonegap.stockpile Stockpile --template phonegap-template-vue-f7-split-panelPhoneGap 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
--templateparameter 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.
Next, navigate into the new Stockpile folder and run the
npm installcommand to install the project dependencies:
cd Stockpile npm installIMPORTANT: You will be updating the files and folders within the
srcfolder specifically when going through the lessons in this guide. Do not confuse it with the
wwwfolder. That folder will be regenerated when the
npm run buildcommand is used. Refer to the project overview for more details.
Rename the App
You're now ready to start editing the project to transform it into your own Stockpile app. Open the root
Stockpileproject folder in your favorite code editor.
Begin by providing your app a new name. Open
~src/index.htmland 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.
framework7-iconspackage from npm:
npm install framework7-icons --save
~src/main.jsand 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';
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.
Open your terminal and start the development server with the following
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.
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
buildmode can also be found here.
Once the build is complete, you can then run the normal
cordova commands to actually deploy the package to an ios or android target using:
phonegap run ios phonegap run android
phonegap serveis 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.
The Vue template this app is based on automatically defaults to the
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.