Frank Bølviken

This and that about development

Category: Uncategorized

Famo.us on devices with Grunt and Cordova

The all mighthy famo.us people are building a wrapper for native apps as we speak I’m hearing. It’s supposed to be better then Cordova/Phonegap, but since I’m pretty familier with Cordova I thought of giving it a go and testing the juice.

What do you need?
1: Yeoman famo.us generator
2: Cordova installed and available on command line.

Lets do this!
First I created a project:

yo famous

Then I created a new Cordova project, and added the iOs platform with a plugin:

cordova create platforms com.frankbolviken.Geo Geo
cd platforms
cordova platform add ios
cordova plugin add org.apache.cordova.geolocation

Now there is a Cordova project defined, with iOs added as a platform with the addition of a geolocation plugin. As I inspected the platforms/www directory, I saw that there was a folder there. I deleted that, so that it only contained config.xml. Same for platforms/ios/www.

Basically I had now everything I needed to test this, but I wanted to do more! I wanted to optimize it so that I did not manually have to copy stuff to the platforms/www folder, and then initiating a build.

Whats next?
I wanted to be able to just to a simple command like ‘grunt native’, and It should build everything, copy the resources to platforms/www folder and initiate a Cordova build.

First step was to make sure that Grunt automagically copied the stuff needed to the platforms/www folder.
1: in grunt/copy.js I added the following lines after ‘dist’:

deploy: {
      files: [{
        expand: true,
        cwd: '<%= config.dist %>',
        dest: 'platforms/www',
        src: ['**/*']
      }]
  }

I then added a new task in Grunt, which build the project, and copied the required content:

 grunt.registerTask('native', [
    'build',
    'copy:deploy'
  ]);  

If I know executed ‘grunt native’ in the terminal, the source was built, and copied. Sweet!

Enter Exec
I wanted to also automatically create the Cordova build, so that the only thing I needed to do in XCode was to hit “play”.
Firstly, I installed the grunt-exec plugin:

npm install grunt-exec --save-dev

I then added a new file inside the grunt folder, called exec.js with the following content:

// Copies remaining files to places other tasks can use
module.exports = {
    native: {
        cmd: 'cordova build ios',
        cwd: 'platforms',
        stdout: true,
        stderr: true
    }
};

Lastly I added the exec:native target in the native task we created earlier, so that it looks like this:

  grunt.registerTask('native', [
    'build',
    'copy:deploy',
    'exec:native'
  ]);  

When I know executed ‘grunt native’, the application was build and copied to platforms/www, and the iOS project was build.
I opened up the project in XCode, hit “play”, and wolla.. Win!

Advertisements

Extjs: Build and Deploy CONTINUED

I have created a little repo in GitHub:
https://github.com/frankbolviken/sencha-plugin-gradle

This gradle (SUPER BASIC) plugin should simplify the process of building an production ready version of an ExtJS application, with automatic swapping of index-files, including of resources, and configuration project and company name in the build files. Unfortunatly I haven’t had the time to develop this further, so the features are for now really basic.

Extjs: Build and Deploy

So… I have this problem.

I’m trying to integrate Extjs with some kind of building tool, and using SDK tools to build and minify the app. I’m wondering if anyone out in the big world is using this approach? Or maybe you have fallen back into using something else to achieve this?

If you are reading this, and have any tips/suggestions, or you would just like to have a discussion on this subject, feel free to leave a comment or mail me at frank.bolviken(at)gmail.com

Cheers, 

Frank

Welcome

Thought I’d jump on the bandwagon and started blogging. Will focus on development and webdesign subjects.

Currently working in a big project which I have architectural responsibilities on the client side (ExtJS). Don’t be suprised if there will be a few posts about that. Other than that, if I come over anything interesting I will share that on this blog 🙂