martedì 13 gennaio 2015

How to use Bower to download libraries for your mobile Cordova apps.

Development of apps or web site requires of many libraries like jquery, etc.
You can use bower as package manager to download libraries and use on your project.
To install bower, nodejs is a prerequisite already installed on your environment:

npm install -g bower

That installs bower binary under your %USERPROFILE%\AppData\Roaming\npm,
at this point you can install packages with bower binary. So if you install latest jquery version for example and save in the manifest file bower.json that keeps tract of all packages available:

bower install jquery --save

On Windows you get the libraries in the package folder:
%USERPROFILE%\AppData\Roaming\npm\node_modules\bower_components\

The package jquery for example is downloaded into folder:
%USERPROFILE%\AppData\Roaming\npm\node_modules\bower_components\jquery

On your mobile project you can now copy into the libraries folder of your project the jquery javascript file and include it in the html

<script src="lib/bower_components/jquery/jquery.js"></script>

For official reference:
http://bower.io/docs/creating-packages/

venerdì 2 gennaio 2015

Build and run Android based on Cordova with Mac OS

If you want to build android on Mac OSX you first have to install the Android SDK then add it to the PATH variable.
Upgrade the SDK version to the latest possibile but also download the Android 4.4.2 (19 version with latest revision).

SDK: http://dl.google.com/android/android-sdk_r24.0.2-macosx.zip


1- With a command line on your cordova project run:
$ cordova platform add android
2- Create an android emulator
$ cd ~/.android/avd
$ android create avd -n my_android -t 2 --abi default/x86
2- Build the project
$ cd your_project
$ cordova build android
4- Open the GUI application Android SDK Manager:
$ android
5- Install the Intel HAXM hardware acceleration selecting and installing the package:

Intel x86 Emulator Acceleration (HAXM installer)

Then after dowloading this package open the dmg file on SDK/extras/Intel and install it

6- Start the emulator (this open the app)
$ cordova emulate android

If HAX is not installed or you want to run on a real device, connect to the Mac though USB cable, then locate the apk built before and install it on the device:

$ adb install your_project/platform/android/ant-build/CordovaApp-debug.apk
Then open the app on the device.

Setup Apache Cordova environment on Mac OSX

On Mac OSX get the prerequisite tools from these links and follow the steps similar to my previous post.

XCODE: https://developer.apple.com/xcode/downloads/
NodeJS: http://nodejs.org/dist/v0.10.35/node-v0.10.35.pkg
GIT: http://sourceforge.net/projects/git-osx-installer/files/

Install on the default directories the tools above and follow these simple steps:

1- Install cordova using sudo
$ sudo npm install -g cordova
2- Create the project
$ cordova create hello com.example.hello HelloWorld
3- Add the platform to build ios
$ cordova platform add ios
4- Build on iOS accepting the prompt of the XCode license (run this command another time if the build does not complete after you accept the license prompt)
$ cordova build ios
5- Open the XCode project file located under hello/platoforms/ios/HelloWorld.xcodeproj
a popup message should appear the first time you try to open a debuggable project like this.
Confirm the install:


6- Run the app in the xcode simulator pressing play:


If you want to run by command line install the ios simulator with npm:
$ sudo npm install -g ios-sim
$ cordova emulate ios