diff --git a/README.md b/README.md index 27d775d..f38c055 100755 --- a/README.md +++ b/README.md @@ -26,7 +26,11 @@ These examples include access to a public demo database for the purpose of demon ## Getting started in under 5 minutes -I'd also like to recommend reading [*Supercharge your Framer prototype with Firebase, pt.1*](https://medium.com/@marc_krenn/framerfirebase1-e7d13a939cf4) on Medium, if you haven't already. + + Install with Framer Modules + +OR | Step | Instruction | | :---: | :--- | @@ -39,6 +43,7 @@ I'd also like to recommend reading [*Supercharge your Framer prototype with Fire | **6** | Back in Framer, add `firebase = new Firebase` and set the required [Class Properties](https://github.com/marckrenn/framer-Firebase#1-properties) | | **7** | Save, load and sync data using the available [Class Methods](https://github.com/marckrenn/framer-Firebase#2-methods). Also, check out the [Demo Projects](https://github.com/marckrenn/framer-Firebase#demo-projects). | +I'd also like to recommend reading [*Supercharge your Framer prototype with Firebase, pt.1*](https://medium.com/@marc_krenn/framerfirebase1-e7d13a939cf4) on Medium, if you haven't already. ### Tips diff --git a/example.coffee b/example.coffee new file mode 100644 index 0000000..90ba442 --- /dev/null +++ b/example.coffee @@ -0,0 +1,35 @@ + + +# Please deactivate Auto Refresh and reload manually using CMD+R! + + +# The required information is located at https://firebase.google.com → Console → YourProject → ... +demoDB = new Firebase + projectID: "framer-demo" # ... Database → first part of URL + secret: "K2ZJjo4RXG5nlHEWgjgwBzNkeVJCz9YZAQF8dk9g" # ... Project Settings → Service Accounts → Database Secrets → Show (mouse-over) + + + +# Layers + +new BackgroundLayer + +slider = new SliderComponent +slider.center() + +slider.knob.backgroundColor = "grey" +slider.knob.draggable.momentum = false + + + +# Events + Firebase + +slider.knob.onDragEnd -> + demoDB.put("/sliderValue",slider.value) # `put´ writes data to Firebase, + # see http://bit.ly/firebasePut + +demoDB.onChange "/sliderValue", (value) -> # Retreives data onLoad and when it was changed + # see http://bit.ly/firebaseOnChange + slider.animateToValue(value) unless slider.knob.isDragging + + diff --git a/firebase.png b/firebase.png new file mode 100644 index 0000000..526aab9 Binary files /dev/null and b/firebase.png differ diff --git a/module.json b/module.json new file mode 100644 index 0000000..bfa9aa4 --- /dev/null +++ b/module.json @@ -0,0 +1,11 @@ +{ + "name": "Firebase", + "description": "Allows to load, save and sync data effortlessly between multiple sessions and devices.", + "author": "Marc Krenn", + + "require": "{Firebase} = require 'firebase''", + "install": "firebase.coffee", + "example": "example.coffee", + + "thumb": "firebase.png" +} \ No newline at end of file