Raclette: a warm sprouted cheese rolling down the rails Actually a simple SproutCore app with a Rails backend. The SproutCore application and the Rails backend implement two very simple models: Activities have a title and 0..n Questions Questions have a prompt and belong to an Activity Development prerequisites: Mac OS X 10.5 or 10.6, xcode and git installed. We are using rvm to install Ruby 1.9.1 on Mac OS X: 1) Clone the raclette repository If you have commit access to the repository use the ssh url: git clone git@github.com:knowuh/raclette.git Otherwise use the read-only url: git clone git://github.com/knowuh/raclette.git 2) Install rvm Instructions: http://rvm.beginrescueend.com/rvm/install/ To install/update from the github repository (recommended): bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head ) If you already have rvm installed you can update to the most recent version from github like this: rvm update --head 3) Use rvm to install Ruby 1.9.1. rvm install 1.9.1 4) Create an rvm gemset for raclette named 'raclette' with the required gems. rvm use 1.9.1 rvm gemset create raclette rvm gemset use raclette rvm gemset import default.gems Now you can easily use rvm to switch to Ruby 1.9.1 and the specific gems needed for raclette with this command: rvm use 1.9.1@raclette 5) Start the Rails backend and the SproutCore development server in separate console windows * The following steps are automated in the start_server.rb ruby script Open a new console windowm, cd to the raclette dir and then: rvm use 1.9.1@raclette cd rails rake db:seed script/server -p 3001 Open a new console window, cd to the raclette dir and then: rvm use 1.9.1@raclette cd sproutcore sc-server Here are some useful urls to open: Raclette SproutCore app: http://0.0.0.0:4020/raclette Just the Raclette SproutCore tests: http://0.0.0.0:4020/raclette/en/current/tests.html Specific Raclette SproutCore rails data source fetch and retrieve tests: http://0.0.0.0:4020/raclette/en/current/tests/data_sources/rails_fetch_and_retrieve.html Specific Raclette SproutCore rails data source create tests: http://0.0.0.0:4020/raclette/en/current/tests/data_sources/rails_create.html Rails backend views showing Activities and Questions http://localhost:3001/rails/activities http://localhost:3001/rails/questions All the SproutCore tests http://0.0.0.0:4020/sproutcore/tests Here's how the app was initially setup: $ which sc-init /usr/bin/sc-init $ gem list | grep sprout sproutcore (1.0.1046) $ sc-init raclette ~ Created directory at raclette ~ Created file at raclette/Buildfile ~ Created file at raclette/README ~ Created directory at apps ~ Created directory at apps/raclette ~ Created file at apps/raclette/core.js ~ Created file at apps/raclette/main.js ~ Created directory at apps/raclette/resources ~ Created file at apps/raclette/resources/loading.rhtml ~ Created file at apps/raclette/resources/main_page.js Your new SproutCore project is ready! To get started, you can find your initial application in the "apps" directory. $ sc-gen model Raclette.Activity ~ Created directory at fixtures ~ Created file at fixtures/activity.js ~ Created directory at models ~ Created file at models/activity.js ~ Created directory at tests ~ Created directory at tests/models ~ Created file at tests/models/activity.js Your model is now ready to use! $ sc-gen controller Raclette.ActivityController ~ Created directory at controllers ~ Created file at controllers/activity.js ~ Created directory at tests/controllers ~ Created file at tests/controllers/activity.js Your controller is now ready to use! $ sc-server -v SproutCore v1.0.1046 Development Server Starting server at http://0.0.0.0:4020 in debug mode To quit sc-server, press Control-C Debugging in the browser Javascript console. Loading a model, changing and attribute and causing SC views to update: act = Raclette.store.find(Raclette.Activity,1) //(then modify an attribute) act.set('title', 'hello from the console three'); SC.run(function(){}); Configuring git to track a remote branch: mate ./.git/config [branch "master"] remote = <nickname> merge = <remote-ref> [remote "<nickname>"] url = <url> fetch = <refspec> Trying to find new records in the console: Raclette.Questions.FIXTURES; // confusing (contains 2 objects ??) Raclette.store.find(Raclette.Question).get('length'); //3 Raclette.store.find(Raclette.Question).toArray(); // array of 3 things Raclette.store.find(Raclette.Question).getEach('prompt'); // ["<your question>", "What color is the sky?", "What color is dirt?"] Handy console tip: To see changes, you may need to incorporate them into a runloop This change won't be visible until a DOM event occurs (like mousing over the window): Raclette.mainPage.mainPane.addQuestionButton.set('title', 'Changed!') But this change would be visible immediately: SC.run(function () { Raclette.mainPage.mainPane.addQuestionButton.set('title', 'Immediate!') }) See the code of a function in the console (* webkit tip only) If you want to see the code of a function in the console just enter the full name of the function > Raclette.questionsController.addObject function (object) { if (!this.get('canAddContent')) throw "%@ cannot add content".fmt(this); var content = this.get('content'); if (content.isSCArray) content.pushObject(object); else if (content.addObject) content.addObject(object); else throw "%@.content does not support addObject".fmt(this); return this; } ### How we initially set up Rails Step 1. rails (master)$ script/generate rspec_scaffold Activity title:string create app/models/ [etc.] create db/migrate/20100625174957_create_activities.rb route map.resources :activities Step 2. rails (master)$ script/generate rspec_scaffold Question prompt:text activity_id:integer exists app/models/ [etc.] exists db/migrate create db/migrate/20100625175103_create_questions.rb route map.resources :questions Step 3. rails (master)$ rake db:migrate (in /Users/rklancer/dev/raclette/rails) == CreateActivities: migrating =============================================== -- create_table(:activities) -> 0.0012s == CreateActivities: migrated (0.0013s) ====================================== == CreateQuestions: migrating ================================================ -- create_table(:questions) -> 0.0010s == CreateQuestions: migrated (0.0016s) ======================================= Step 4. rails (master)$ script/server => Booting WEBrick => Rails 2.3.8 application starting on http://0.0.0.0:3000 => Call with -d to detach => Ctrl-C to shutdown server [2010-06-25 14:09:31] INFO WEBrick 1.3.1 [2010-06-25 14:09:31] INFO ruby 1.9.1 (2010-01-10) [i386-darwin10.3.0] [2010-06-25 14:09:31] INFO WEBrick::HTTPServer#start: pid=44284 port=3000 Step 5. # hit http://localhost:3000/activities and http://localhost:3000/questions in a browser # and create an Activity and a Question. Open a new console. Then the following should work... rails (master)$ curl localhost:3000/rails/activities/1.json {"activity":{"title":"Running and jumping","guid":1,"questions":[{"guid":1}]}} rails (master)$ curl localhost:3000/rails/questions/1.json {"question":{"activity_id":1,"prompt":"Run as fast as you can and jump as high as you can. Repeat.","guid":1}} After adding two activities each of which has two questions the activities json looks like this: rails (master)$ curl localhost:3001/rails/activities.json Which when expanded to look nice looks like this: { "content": [ { "questions": [ "/rails/questions/1.json", "/rails/questions/2.json" ], "title":"Trailers of Cheese", "guid":"/rails/activities/1" }, { "questions": [ "/rails/questions/3.json", "/rails/questions/4.json" ], "title":"Squares of Cheese", "guid":"/rails/activities/2" } ] }