prabhutech / sensocloud Goto Github PK

AT&T API service with bootstrap, angularjs, cordova and other goodies - lets you quickly set up a web & hybrid mobile app project

• Maybe you're already using AngularJS for mobile/web and you need consume AT&T API as a Service.
• Maybe you are a Sensoplex hardware developer who want to consume its data through cloud.
• Maybe you're at a hackathon, and you need to quickly launch a web or a mobile app that needs AT&T API service layer.

We wanted to simplify the process of setting up the dev environment for consuming AT&T API. This boilerplate is a quickstart for developing AngularJS based web & hybrid mobile apps consuming AT&T API Service. It comes with powerful build system to get you started in minutes. Let us know what we can improve.

This is a by-product of Closer, a product we built for Wearables Hackathon using AT&T and Sensoplex, open-sourcing it with the hope that some or all of it will be useful to someone.

• AngularJS wrapper for the AT&T API
• Bootstrap 3.0
• Grunt build system to help optimize and automate several aspects of your workflow
• Cordova to deploy your code as mobile application (iOS and Android)
• …and lots more

1. Install node - http://nodejs.org/
2. Install grunt v0.4.x - http://gruntjs.com/getting-started
3. Install bower npm install -g bower
4. Install coffee-script npm install -g coffee-script
5. Make sure you have compass installed (http://compass-style.org/install/)
6. Make sure you are running the latest version of Node (we can't assure you this is gonna work on older versions of Node)
7. Clone this repo git clone [email protected]:prabhutech/sensocloud.git
8. cd sesocloud
9. npm install
10. bower install
11. grunt server - builds and fires up the local node server on localhost:3000
12. Visit http://localhost.com:9000 to develop your site
13. To compress and optimize your application, run grunt build. It will concatenate, obfuscate, and minify your JavaScript, HTML, and CSS files and copy over the resulting assets into the www/ directory so the compressed version can be used with Cordova.

The included Grunt build system provides sensible defaults to help optimize and automate several aspects of your workflow when developing hybrid-mobile apps using AT&T API.

Install a new front-end library using bower install --save to update your bower.json file. If you want to add more new libraries supported by bower.io For example, to install font-awesome, you would do:

bower install font-awesome --save

This way, when the Grunt bower-install task is run it will automatically inject your front-end dependencies inside the bower:js block of your app/index.html file.

If a library you wish to include is not registered with Bower or you wish to manually manage third party libraries, simply include any CSS and JavaScript files you need inside your app/index.html usemin build:js or build:css blocks but outside the bower:js or bower:css blocks (since the Grunt task overwrites the Bower blocks' contents).

Running grunt serve enhances your workflow by allowing you to rapidly build apps without having to constantly re-run your platform simulator. Since we spin up a connect server with watch and livereload tasks, you can freely edit your CSS (or SCSS/SASS files if you chose to use Compass), HTML, and JavaScript files and changes will be quickly reflected in your browser.

Once you're ready to test your application in a simulator or device, run grunt cordova to copy all of your app/ assets into www/ and build updated platform/ files so they are ready to be emulated / run by Cordova.

To compress and optimize your application, run grunt build. It will concatenate, obfuscate, and minify your JavaScript, HTML, and CSS files and copy over the resulting assets into the www/ directory so the compressed version can be used with Cordova.

To make our lives a bit simpler, the cordova library has been packaged as a part of this generator and delegated via Grunt tasks. To invoke Cordova, simply run the command you would normally have, but replace cordova with grunt and spaces with : (the way Grunt chains task arguments).

For example, lets say you want to add iOS as a platform target for your app

grunt platform:add:ios

and emulate a platform target

grunt emulate:ios

or add a plugin by specifying either its full repository URL or namespace from the Plugins Registry

grunt plugin:add:https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
grunt plugin:add:org.apache.cordova.device
grunt plugin:add:org.apache.cordova.network-information

To help you hit the ground running, let's walk through an example workflow together.

We'll start by running our app in a browser so we can make a few changes.

grunt serve

Play around with livereload by changing some of the styles in app/styles/main.css or HTML in one of the files in app/templates/. When you're ready, lets go ahead and build the assets for Cordova to consume and also spot check that we didn't bork any code during the build process. We can do that with another handy Grunt task that runs the build process and then launches a connect server for use to preview the app with our built assets.

grunt serve:dist

If everything looks good the next step is to add a platform target and then emulate our app. In order for us to launch the iOS simulator from the command line, we'll have to install the ios-sim package. (If you forget to do this, Cordova will kindly remind you).

npm install -g ios-sim
grunt platform:add:ios
grunt emulate:ios

You may have realized that when the Grunt build process is run, it triggers the Cordova build system as well, so you end up with a beautifully packaged mobile app in a single command.

To lessen the pain of testing your application, this generator configures your project with a handful of libraries that will hopefully make testing your application, dare I say, more enjoyable.

The foundation of our testing solution is built using Karma which was created by the AngularJS team and is all around awesome. Inside of your generated karma.conf.js file you will find some basic configuration settings. Notice that we're using Mocha to structure our tests and pulling in Chai, a slick assertion library. You can easily drop Chai and replace Mocha with Jasmine depending on your preference.

Undo your modification and ensure that all tests are passing before continuing on.

Note Depending on which starter template you picked, your tests may start off failing.

If you made it this far then congratulations! You're now up and running with the gorgeous web & mobile application powered by AT&T API Service and AngularJS with grunt, an intelligent workflow and sophisticated build system - all facilitated by the addition of just a few commands!

Be Advised: Ripple is under active development so expect support for some plugins to be missing or broken.

Add a platform target then run grunt ripple to launch the emulator in your browser.

grunt platform:add:ios
grunt ripple

Now go edit a file and then refresh your browser to see your changes. (Currently experimenting with livereload for Ripple)

• The pioneers behind Yeoman for building an intelligent workflow management solution.
• The AngularJS Generator projects for inspiration.

MIT License