Build mobile apps with Onsen

1. Install Cordova package

$ sudo npm install -g cordova

For more details how to use Cordova tool, please refer to Cordova documentation.

2. Select template

Select one of the templates on the download page.

3. Add platform

You need to add the platform SDK to the project to run on the simulator or device.

$ cd /path/to/the/project
$ cordova platform add ios (or android)

4. Run on the simulator

The following command will run the application in the simulator.

$ cordova emulate

Reference

https://onsen.io/guide/getting_started.html

Read More

Build mobile apps with Framework7

How to Build Framework7 Project

1. Cd to project folder
2. Install npm (http://www.npmjs.com)
• npm install grunt
3. Install Grunt (http://www.gruntjs.com)

• npm install -g grunt-cli
  npm install grunt

4. Then call grunt compile
5. Copy the content of /build to htdocs of your webserver

FAQ

1. "You need to have Ruby and Sass installed and in your PATH for this task to work."

• Install Ruby: http://rubyinstaller.org/downloads/
• Install Sass (http://sass-lang.com/install)
• gem install sass 

Read More

Build mobile apps faster with Ionic

Install Ionic

First, install Node.js 4 (Node 5 does not work at the moment!). Then, install the latest Cordova and Ionic command-line tools.

$ npm install -g cordova ionic

Start a project

run cmd as Administrator

ionic start myApp tabs

View in Browser

$ cd myApp

$ ionic serve

Run it as iOS App

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

Run it as Android App
- require: Please install Android target: "android-23"

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

ionic cordova run

Ionic Project Structure

├── bower.json     // bower dependencies
├── config.xml     // cordova configuration
├── gulpfile.js    // gulp tasks
├── hooks          // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms      // iOS/Android specific builds will reside here
├── plugins        // where your cordova/ionic plugins will be installed
├── scss           // scss code, which will output to www/css/
└── www            // application - JS code and libs, CSS, images, etc.

Ionic Template in Visual Studio

1. Install Apache Cordova
2. In Visual Studio, choose File, New, Project From Existing Code.

Install Cordova
npm install -g cordova

Install SQL Lite DB
ionic plugin add cordova-sqlite-storage

Opted out of Telemetry
cordova telemetry

Ionic in Visual Studio Code

System Variables
- Gradle_home
- Android_home


1. 'ionic' is not recognized as an internal or external command

If you're on Windows 10 (and possibly Vista/8/8.1) you need to run cmd.exe as an administrator. Now when you run the commands below, your environment settings will be made.

npm install -g cordova ionic

2. No installed build tools found. Please install the Android build tools version 19.1.0 or higher.

3. Cannot set up guest memory 'android_arm': Invalid argument

Reduced RAM size to 512 MB and it works....

Reference

1. http://ionicframework.com/getting-started/
2. http://stackoverflow.com/questions/29331276/ionic-framework-ionic-is-not-recognized-as-an-internal-or-external-command
3. https://taco.visualstudio.com/en-us/docs/tutorial-ionic/
4. http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html
5. https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/migrate-to-vs2015?view=toolsforcordova-2015

Read More

10 Best Hybrid Mobile App UI Frameworks: HTML5, CSS and JS

Native developers love working with native code but that doesn't always go well with the business case or result in effective use of effort and time. We often see scenarios where developers end up building same mobile app for android, iOS, windows and other mobile platforms using native APIs and libraries of individual platform. 

Read More