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
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
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 $ npm install [-g|--save] $ npm update
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)
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)
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 $ bower init $ bower install [--save] $ bower install git://github.com/user/repo.git
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
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
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
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
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!!!!
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
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"
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
vivekkrish
hollycummins
logiteca7
heronshoes
yusukebe
gotok365
ufoo68
beberlei
coe401_
makenowjust
yui_knk
pangmoo
manfredsteyer
michaelherold
chrislema
philhawksworth
rasmusluckow
mojombo
jennybc
kneath
shpigford
keithpitt
akosma
jonyablonski
productmarketing