Phonegap - Build iOS apps with javascript and html.

Presentation to Riverside JS on building iOS apps with Phonegap.

Transcript

1. PHONEGAP Build iOS apps with javascript and html. Monday, December 5, 2011
2. INSTALL PHONEGAP • Follow instructions from http://phonegap.com/start • Install iOS SDK • Install PhoneGap Monday, December 5, 2011
3. • Launch xcode, Select New and New Project, Select PhoneGap-based Application Monday, December 5, 2011
4. • Uncheck use automatic reference counting Monday, December 5, 2011
5. • Drag the www folder into xcode 4. Monday, December 5, 2011
6. RUN THE SIMULATOR, AND NICE NICE Monday, December 5, 2011
7. Code with old fashioned js and html! Monday, December 5, 2011
8. ACCESSING THE PHONE All happens via phonegap.js file. The javascript provides hooks into the native device’s capabilities. Monday, December 5, 2011
9. EXAMPLE: PHOTO GALLERY navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] ); window.Helpers = getPicture: -> navigator.camera.getPicture( Helpers.pictureSuccess, Helpers.pictureFail, { quality: 50 destinationType: navigator.camera.DestinationType.FILE_URI sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY } ) pictureSuccess: (file_uri) -> Helpers.setSlideBackground(Helpers.currentSlide(), file_uri) pictureFail: (message) -> alert("There was an error!") setSlideBackground: ($slide, url) -> $slide.css("background-image", "url(#{url})") Monday, December 5, 2011
10. Need Development Environment! Spine.js w/ Capybara Monday, December 5, 2011
11. INSTALL SPINE.JS • Prerequisites • Install Node (brew install node) • Install NPM (curl http://npmjs.org/install.sh | sh) • npm install -g spine.app hem Monday, December 5, 2011
12. INSTALL SPINE.JS • cd into your PhonegapExample • spine app temp_app (This will setup all your spine stuff - which we will use to create the app.) • cp -r temp_app/* . • rm -r temp_app • npm install . • rm public/favicon.ico • hem server • visit: localhost:9294 (welcome to spine!) Monday, December 5, 2011
13. MOWR POWR WITH RUBY • touch Gemfile • paste gems • bundle • touch Guardfile • paste rule • update Procfile • bundle exec foreman start • remove getting started %script from public/ index.html and save. Add ‘hello world’ inside body. • Visit localhost:5000 | 5100 • Run simulator Monday, December 5, 2011
14. ACCEPTANCE TEST! • mkdir spec • touch spec/spec.opts • touch spec/spec_helper.rb • touch spec/acceptance/ index_spec.rb • bundle exec rspec spec/ acceptance/* require File.dirname(__FILE__) + '/../ spec_helper' describe "Index.html" do before(:each) do visit '/index.html' end before(:all) do Capybara.current_driver = :selenium end after(:all) do Capybara.use_default_driver end it "says ExampleApp" do page.has_css?("title:contains ('ExampleApp')").should be_true end end Monday, December 5, 2011
15. RESOURCES • https://github.com/scottmotte/PhonegapExample • http://docs.phonegap.com • http://spinejs.com/ • http://swipejs.com/ Monday, December 5, 2011