Slide deck pertaining to Tutorial 1 of the Araport Developer Workshop conducted at TACC, Austin TX on November 5, 2014. Presented by Vivek Krishnakumar

1. Tutorial 1: Your First Science App
Day 1: AIP Developer Workshop
November 5, 2014
Vivek Krishnakumar
J. Craig Venter Institute

2. What is a Science App?
- Written in HTML/CSS/JavaScript
- Uses standard frameworks
- Presented via web browser
- Query or Analyze, Present, Persist
- Developed by AIP and the community
- Deployed in AIP “app store”
- Install chosen apps in your Araport “dashboard”
- Uses AIP Data Architecture
- Data services: Local and remote query/retrieval
- Data integration and aggregation services
- Computation services

3. AIP Architecture

4. Objectives
- Expose boilerplate code templates
(scaffolding) which enable third-party
developers to:
- develop fully functional science apps
- work in their own local dev environment while
maintaining compatibility with the Araport site
- facilitate easy sharing of apps with the AIP
community

5. Development Stack
http://yeoman.io
- Yeoman workflow:
1. application scaffold (yo)
2. build system (grunt)
3. package manager (bower)
- Above stack is facilitated by npm (node
package manager)

6. npm
https://www.npmjs.org
- Bundled with nodejs (>0.6.3)
- Vast registry of modules: registry.npmjs.org
- Records module meta information in
packages.json (refer spec)
- Understands difference between dev only and
runtime dependencies
- Simple CLI tools
$ npm search <package>
$ npm install <package> [-g|--save]
$ npm update

7. yo
https://github.com/yeoman/yo
- Code generator
- Installed via npm
$ npm install –g yo
- Scaffolds out the new application
$ mkdir myapp && cd myapp
$ yo aip-science-app
- Writes out build configuration (grunt)
- Pulls in dependencies (npm, bower)

8. grunt
http://gruntjs.com
- Build, preview and testing tool
- Installed via npm
$ npm install –g grunt-cli
- Fulfills a variety of roles, some of which are:
- running a small local server (with live reload)
enabling rapid development (test runner)
- minifying or concatenating CSS and/or JS
- look for errors, run unit tests
- Configured through a Gruntfile (refer spec)

9. bower
http://bower.io
- Web component installer
- Installed via npm
$ npm install –g bower
- Manages dependencies so you don’t have to
- Tracks package manifest in bower.json (refer spec)
- Understands difference between dev only and runtime
dependencies
- Easy to use command line
$ bower search <package>
$ bower init
$ bower install <package> [--save]
$ bower install git://github.com/user/repo.git

10. Hands-on time!

11. Satisfying prerequisites
- Gain access to the Unix command line
- Issue the which command to check availability of
prereqs in shell environment (PATH)
$ which git
/usr/local/bin/git
$ which npm
/usr/local/bin/npm
$ which {yo,grunt,bower}
/usr/local/bin/yo
/usr/local/bin/grunt
/usr/local/bin/bower
- Install any missing dependencies by following
instructions outlined in Getting Started guide

12. Fork then clone the tutorial repo
- Visit the Arabidopsis-Information-Portal
GitHub organization page and access the
workshop-tutorial-app repo
- the repo into your personal GitHub
- Clone a local copy via the Unix command line:
$ cd ~/
$ mkdir –p git && cd git
$ git clone https://github.com/USERNAME/workshop-tutorial-
app
$ cd workshop-tutorial-app

13. Generate the app scaffold
- Find out the names of the available branches
$ git branch –r
origin/HEAD -> origin/master
origin/master
origin/tutorial/1
origin/tutorial/2
origin/tutorial/3
origin/tutorial/4
- Checkout the Tutorial 1 branch
$ git checkout tutorial/1
- Install the AIP app generator
$ npm install –g generator-aip-science-app
# npm command might require 'sudo' privileges
$ sudo !!
- Invoke the app generator to create scaffold
$ yo aip-science-app

14. Working with the App Generator
• Use the up/down arrow keys to switch
between available dependencies, space to
select/deselect
• Hit enter to continue
• Allow the install process complete

15. Examine the app scaffold
- Files and directories
created by app generator:
$ ls
Gruntfile.js
README.md
app
bower_components
bower.json
index.html
lib
node_modules
package.json
_ Contents of the app
directory:
– app/app.html
Describes the app view
– app/scripts/app.js
Defines the app logic
– app/styles/app.css
Enforces the app visual
styles

16. bower and npm configurations
bower.json  bower_components
{
"name": "workshop-tutorial-app",
"private": "true",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<name>": "<version>",
"<name>": "<folder>",
"<name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
packages.json  node_modules
{
"name": "workshop-tutorial-app",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-autoprefixer": "^1.0.0",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-qunit": "^0.5.2",
"grunt-contrib-watch": "~0.6.1",
"grunt-includes": "^0.4.5",
"grunt-inline": "^0.3.2",
"grunt-wiredep": "^1.9.0",
"jshint-stylish": "^0.4.0",
"load-grunt-tasks": "^0.6.0"
},
"engines": {
"node": ">= 0.10.0"
}
}

17. Start the test runner
$ grunt
# If you wish to stop the test runner,
use the following key combination
$ Ctrl + C

18. Test live reload capability
- Gruntfile.js defines files to be "watched".
For example: app.{html,js,css}
- Let’s test the livereload functionality
- Open up a text/code editor of your liking
- Choose a file for editing (app.html)
- Make modifications to the content and then save
- Switch over immediately to the web browser
- Watch the page reload with the updated content
- PROFIT!!!!

19. Create an OAuth2 API client
(optional)
• Click on the "Don’t have
an API Client? Click here!"
link
• This will prompt you with
a form requesting:
– App name
– Araport username
– Araport password
• Newly created client app
will be used to
authenticate against AIP,
giving access to our API
console

20. Peruse the live API docs
(optional)

21. Conclusion
- Learned about the AIP Science App framework
and development stack
- Created and examined the app scaffold
- Tested livereload functionality
- Let’s save changes to git repo
$ git add .
$ git commit –am "initial commit"

22. Thank you!

23. Chris Town, PI
Chris Nelson
PM
Jason Miller, Co-PI
Technical Lead
Erik Ferlanti
SE
Vivek Krishnakumar
BE
Svetlana Karamycheva
BE
Gos Micklem, co-PI Sergio Contrino
Eva Huala
Project lead, TAIR
Software Engineer
Bob Muller
Technical lead, TAIR
Matt Vaughn
co-PI
Steve Mock
Advanced Computing
Interfaces
Rion Dooley,
Web and Cloud
Services
Matt Hanlon, Web
and Mobile
Applications
Maria Kim
BE
Ben Rosen
BA
Walter Moreira,
API Developer
Joe Stubbs, API
Engineer
Lisa McDonald
Education and
Outreach Coordinator