similar concept, for desktop applications:

android list targets
android update project -p . -t $target_id
android avd # starts an emulator
ant debug install
adb kill-server
adb start-server
adb devices # you should see a list of connected devices
npm install -g cordova ios-sim
cordova create dirname com.namespace.appname NameSpace
 
cordova platform add ios
cordova platform add android
 
cordova build ios
cordova emulate ios
 
cordova build android
cordova emulate android

plugins:

cordova plugin add org.apache.cordova.console
cordova plugin add org.apache.cordova.dialogs
 
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.file-transfer
#cordova plugin add org.apache.cordova.vibration
#cordova plugin add org.apache.cordova.statusbar
#cordova plugin add plugin.http.request
  • platforms/ build directory
  • www/ assets, l'app parte da index.html
  • config.xml runtime configurations
  • merges/ platform-specific files for customizations
git clone https://github.com/ccoenraets/cordova-tutorial

log filtering show only CordovaLog items "D" indicates Debug level or above "*:S" indicates to filter out all others adb will show the output from JavaScript console.log

adb logcat -s CordovaLog:D

remote debugging

accedere alla lista delle webview collegate, da chrome:

chrome://inspect/#devices

iOS attaching the Web Inspector from your Safari browser to the Web View in your iOS App (you will need at least iOS 6).

  • On your iPad use the Settings App to enable Web Inspector in the Advanced Settings for Safari
  • Connect your device to a Mac via USB (it will then appear under the Develop menu of Safari)
  • Start your App
  • On the Mac, from the Safari Develop menu, select the name of your device and the App
  • A Web Inspector window will open pointing to the selected webview

ispezionare i files di un emulatore:

~/Library/Developer/CoreSimulator/Devices

SQLite

download file

Notify

<script src="cordova.js"></script>
document.addEventListener('deviceready', function () {
  if (navigator.notification) { // Override default HTML alert with native dialog
      window.alert = function (message) {
          navigator.notification.alert(
              message,    // message
              null,       // callback
              "Workshop", // title
              'OK'        // buttonName
          );
      };
  }
}, false);

fastclick bug: 300ms click lag

<script src="lib/fastclick.js"></script>
FastClick.attach(document.body);

scroll 

overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;

CSS libs

Google material UI

use platform-independent UX

minimal web css frameworks

Icons

JS libs

V:

testing javascript/view:

Cloud Building

  • http://monaca.mobi/en/
  • PhoneGap Build
  • permette di compilare per iOS e Windows
  • Hydration: which enables the application to download updates to the HTML, CSS and JavaScript files whenever it launches
  • vedi anche "telerik Icenium AppBuilder"

performance

  1. test on device as early as possible
  2. compress js/css in one file minified to save memory
  3. css animations/transitions
  4. minimize js and css unused code
  5. use the fastclick hack(see touch event)
  6. disable unused phonegap features
  7. render all the UI in JS (SinglePageApp)
  8. minimaze/avoid network access
  9. cache static and dynamic data(File, LocalStorage, Database)
  10. limit resultsets returned by server
  11. crop images, dont scale via html
  12. reduce number of dom elements, minimize dom access, update elements offline

Ionic

ionic start myApp
ionic platform add android
ionic platform add ios
ionic serve
ionic build android
ionic emulate android
ionic run android