Build mobile apps with Cobalt

To work with your data in your Cobalt app you will have to use a storage for your currently modified data.

Cobalt provide an enhanced localStorage and a WebServices plugin to store your data offline, filter them, and so forth.

There is no PHP

You will have to use your own way to display content as HTML from your data (Have a look at HandlebarsJS, EmberJS or AngularJS).

You can also generate your HTML content from a server but you will loose the offline possibilities of a native app.

Get started

• Create your app quickly!

• npm install -g cobaltians
  cobaltians create myApp HelloWorld

Reference

https://github.com/cobaltians/cobalt/wiki

Read More

NPM - Syntax

Upgrade to the latest version by running

npm install -g npm

Read More

Build mobile apps with Mobile Angular UI

Installing required tools

npm install -g bower yo gulp generator-mobileangularui

sudo npm install -g phonegap

Scaffold the project

phonegap create weather
cd weather
yo mobileangularui

Read More

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

Mobile App Builder

http://mobile-frameworks-comparison-chart.com/


IDE

https://www.codenameone.com/
https://software.intel.com/en-us/intel-xdk

http://jquerymobile.com/
http://www.jqmbuilder.com/build/
http://m.jqmbuilder.com/
http://jqmdesigner.appspot.com/designer.html
https://01.org/rapid-interface-builder
http://nativedroid.godesign.ch/material/

http://despreneur.com/best-tools-to-build-your-app-prototype-in-a-day/
http://concept.ly/
-------
https://onsen.io
http://ionicframework.com/
http://mobileangularui.com/
http://cobaltians.org/
http://www.idangero.us/framework7/
---- http://thejackalofjavascript.com/framework7-phonegap-getting-started/
---- https://github.com/arvindr21/generator-framework7-phonegap

https://www.google.com/webdesigner/

http://toolkit.vinisketch.com/
https://onsen.io/
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/


http://www.pixate.com/

dribbble.com

https://invisionapp.com

http://www.justinmind.com/

https://paptap.com/

Mobile UI Patterns
http://inspired-ui.com/
https://ninjamock.com

Free App Template
http://spyrestudios.com/free-app-ui-kits-mobile-design/

Read More