AIP Tutorial 1: Your First Science App - Araport Developer Workshop

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

Presented by Vivek Krishnakumar

Transcript

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 Eva Huala Project lead, TAIR Bob Muller Technical lead, TAIR Gos Micklem, co-PI Sergio Contrino Software Engineer 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