Eshpelin / mobile-app-template

Mobile App Template

Mobile App Template

Requirements:

• Xcode
• Android SDK
• Node.js v10+

Installation

To use this repository you will first need to create a PhoneGap application. You can do so by manually running the commands below in your terminal window, or run the shell script in ./build/scripts/install.sh which contains the same content.

Automatic Installation:

You can install the Mobile App Template via the command line with either curl or wget which will run this Shell Script.

via curl:

cd /path/to/project/folder
curl -o install.sh https://raw.githubusercontent.com/manifestinteractive/mobile-app-template/stable/build/scripts/install.sh
chmod 755 install.sh && ./install.sh

via wget:

cd /path/to/project/folder
wget -O install.sh https://raw.githubusercontent.com/manifestinteractive/mobile-app-template/stable/build/scripts/install.sh
chmod 755 install.sh && ./install.sh

NOTE:

You will need to modify ./src/js/settings.js to your projects specifications. Also, you will still need to make the changes listed below in the iOS Build Settings.

Manual Install:

If you would like to manually install this application, please follow the instructions in the Installation Script.

Open Mobile App in Browser:

To work on mobile-app-template locally for development:

cd /path/to/project/folder/mobile-app-template/www
npm install

To view mobile-app-template in the browser:

cd /path/to/project/folder/mobile-app-template/www
npm start

The mobile-app-template app will open in your default browser at http://127.0.0.1:8080

Project Structure:

The following is a description of the folders in this project, and how they are used. Our Application Stack is Bootstrap (HTML), Sass (CSS) & AngularJS (Javascript)

Application Source HTML, CSS (Sass) & Javascript Files:

• assets: Application Assets
  • css: Compile Project CSS Files ( !.gitignored )
  • img: Folder for Images used in app
  • js: Compile Project JS Files ( !.gitignored )
• src: Application Source Code
  • img: Image Assets ( Photoshop & Illustrator )
  • js: Main AngularJS project files
    • controllers: AngularJS Controllers
    • directives: AngularJS Directives
    • filters: AngularJS Filters
    • libs: Third Party Libraries needed for app
    • services: AngularJS Services
    • app.js: AngularJS Bootstrap File
    • config.js: AngularJS Config
    • config.routes.js: AngularJS Routes ( maps URL parameters to specific templates & controllers )
    • main.js: Main AngularJS App Controller
    • phonegap.js: Library to connect AngularJS to PhoneGap specific commands
  • scss: This folder contains Sass files used to manage the style of the application
• templates: AngularJS Template files and partials as configured by config.routes.js
• index.html: Development HTML file

Development Content used to automate development & testing:

• grunt: A directory containing individual Grunt tasks
• hooks: A directory containing PhoneGap Build Instructions
• bowser.json: Package file for Bower that gets used during npm install
• gruntfile.js: Main Grunt configuration file
• package.json: Package file for Node that gets used during npm install
• README.md: Developer Instructions
• CHANGELOG.md: Do not edit manually, generated automatically by running grunt changelog:release. Looks for commit messages with the keywords feature, fix & fixes.

Third Party Content ( !.gitignored ):

• bower_components: Third Party Libraries installed via bower.json during npm install
• node_modules: Third Party Libraries installed via package.json during npm install
• src/vendor: Third Party files copied over for Application Use

Grunt Terminal Commands:

You can use the following build commands via terminal ( make sure you are in /path/to/project/folder/mobile-app-template/www ):

Build for Distribution:

The following command will compile Sass Styles into a CSS and Concat JS files for Distribution.

This is the most common command you will want to use and is required to view any changed you made in a browser or simulator.

grunt build:dist

Build for iOS or Android:

The following commands will build either iOS or Android versions of the app to their respective ./platorms folder.

grunt build:app_ios

grunt build:app_android

Running iOS Simulator:

The following commands will first Build for Distribution and run iOS Simulation for the respective device.

grunt emulate:iphone_4s

grunt emulate:iphone_5

grunt emulate:iphone_5s

grunt emulate:iphone_6

grunt emulate:iphone_6_plus

grunt emulate:iphone_resizable

grunt emulate:ipad_2

grunt emulate:ipad_retina

grunt emulate:ipad_air

grunt emulate:ipad_resizable

Compile Sass files into CSS:

This will compile all the files in src/scss and generate the assets/css/app.css file

grunt sass:app

Create a Release:

grunt release

Create a Major Release:

The following will:

1. Increase the build's major number ( e.g. v 0.5.1 => v 1.0.0 )
2. Build & Package Distribution Files
3. Perform a git commit

grunt release-major

Create a Minor Release:

The following will:

1. Increase the build's minor number ( e.g. v 0.5.1 => v 0.6.0 )
2. Build & Package Distribution Files
3. Perform a git commit

grunt release-minor

Create a Release Patch:

The following will:

1. Increase the build's patch number ( e.g. v 0.5.1 => v 0.5.2 )
2. Build & Package Distribution Files
3. Perform a git commit

grunt release-patch

Create a Pre-Release:

The following will:

1. Build & Package Distribution Files
2. Perform a git commit

grunt prerelease

Building for iOS ( Possible Issues )

There are currently no known issues for iOS.

Building for Android ( Possible Issues )

If you are using Cordova 5.0 you may get an error when building for Android that looks like this:

LocalNotification.java:561: error: cannot find symbol webView.post(new Runnable(){

If this happens to you, see this posted solution.

if you get the error Duplicate files copied in APK META-INF/LICENSE.txt add the following to ./platforms/android/build.gradle directly after the root android {

packagingOptions {
    pickFirst 'META-INF/DEPENDENCIES'
    pickFirst 'META-INF/DEPENDENCIES.txt'
    pickFirst 'META-INF/LICENSE'
    pickFirst 'META-INF/LICENSE.txt'
    pickFirst 'META-INF/NOTICE'
    pickFirst 'META-INF/NOTICE.txt'
}

If you are unable to automatically sign the Android version, you may need to do it manually.

cd /path/to/project/folder/mobile-app-template
grunt build:dist
cordova build android --release
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore /path/to/myapp.keystore platforms/android/build/outputs/apk/android-release-unsigned.apk AppName
/path/to/android/sdk/build-tools/22.0.1/zipalign -v 4 platforms/android/build/outputs/apk/android-release-unsigned.apk platforms/android/build/outputs/apk/app-name-v0.1.0.apk