Awesome
FramerJS-Firebase-Demo
Realtime chat app prototype using FramerJS and Firebase<br /> Demo - <a href="http://share.framerjs.com/yfvlcjc617hh/" target="_blank">here</a><br />
Getting Started
- Download Sketch (<a href="https://www.sketchapp.com/" target="_blank">here</a>) Mac Only<br />
- Download FramerJS Studio (<a href="http://framerjs.com/" target="_blank">here</a>) Mac Only<br />
- Download Sketch resource file for this demo (<a href="https://www.dropbox.com/s/3nvobcd8oqbdu8z/WID2016_FramerJS_Resources.zip?dl=0" target="_blank">here</a>) <br />
- (Optional) Clone this project to check the source code<br />
Import from Sketch
- Open the Sketch resource file you downloaded<br />
- Open a new FramerJS project <br />
- Press ⌘ + ⇧ + i <br />
<br />
Input Module for FramerJS (<a href="https://github.com/ajimix" target="_blank">ajimix</a>/<a href="https://github.com/ajimix/Input-Framer" target="_blank">Input-Framer</a>)
Framer module to easily turn your designs inputs into real inputs.
Add it in your Framer Studio project
- Download the project from <a href="https://github.com/ajimix/Input-Framer/archive/master.zip" target="_blank">github</a>.
- Copy input.coffee and keyboard.png into modules/ folder.
Text input for name
InputModule = require "input"
# Textbox init
nameInput = new InputModule.Input
text: ""
placeholder: "Your name"
placeholderColor: "#aaa"
type: "text"
y: 750
x: 150
width: 450
height: 60
virtualKeyboard: false
parent: sketch.home_screen
nameInput.style =
color: "#fff"
fontFamily: "Helvetica Neue"
fontWeight: 200
fontSize: "42px"
lineHeight: "42px"
Initialize Go Button
sketch.goBtn.opacity = 0.5
nameInput.on "keyup", ->
sketch.goBtn.opacity = if @value.length > 0 then 1 else 0.5
View Controller for FramerJS (<a href="https://github.com/awt2542" target="_blank">awt2542</a>/<a href="https://github.com/awt2542/ViewController-for-Framer" target="_blank">ViewController-for-Framer</a>)
The ViewController module for Framer.js helps you create multi step user flows with pre-made transitions like "fade in", "zoom in" and "slide in". It consists of a Framer module and an optional Sketch plugin. Check out the intro article on Medium.
Add it in your Framer Studio project
- Download the project from <a href="https://github.com/awt2542/ViewController-for-Framer/archive/master.zip" target="_blank">github</a>.
- Copy ViewController.coffee into modules/ folder.
Initialize
ViewController = require 'ViewController'
Views = new ViewController
initialView: sketch.homeScreen
Note that this should be initalized before binding text input
TextInput Inside chatroom
chatInput = new InputModule.Input
text: ""
placeholder: "Your message"
placeholderColor: "#aaa"
type: "text"
y: 14
x: 28
width: 588
height: 48
virtualKeyboard: false
parent: sketch.chatroomBottomBar
chatInput.style =
fontFamily: "Helvetica Neue"
fontWeight: 300
fontSize: "23px"
lineHeight: "23px"
chatInput.visible = false
Go button eventlistener
sketch.goBtn.onTap ->
if nameInput.value.length > 0
Views.pushInRight(sketch.chatroomScreen)
chatInput.visible = true
nameInput.visible = false
Back button eventlistener
sketch.chatScreenBackButton.onTap ->
chatInput.visible = false
nameInput.visible = true
Views.back()
The reason for not using <a href="https://github.com/awt2542/ViewController-for-Framer#--autolink" target="_blank">autoLink</a> is that we need to control the display state of inputs
Supercharge with FireBase (<a href="https://github.com/marckrenn" target="_blank">marckrenn</a>/<a href="https://github.com/marckrenn/framer-Firebase" target="_blank">framer-Firebase</a>)
The Firebase module allows your Framer prototype to load, save and sync data effortlessly between multiple sessions and devices.
Add it in your Framer Studio project
- Download the project from <a href="https://github.com/marckrenn/framer-Firebase/archive/master.zip" target="_blank">github</a>.
- Copy firebase.coffee into modules/ folder.
Initialize
{Firebase} = require 'firebase'
firebase = new Firebase
projectID: "project-8070018445052938302"
secret: "TWDpxeHTLmcW84DFQY7X2YmI0UKZsmeZESTJDhFY"
server: "s-usc1c-nss-136.firebaseio.com"
sketch.sendBtn.onTap ->
firebase.post("/messages", {name: nameInput.value, message: chatInput.value, created_at: new Date()}, () -> chatInput.value = "")
Please do NOT use this demo database for other projects. Your data will be deleted.
Check your message here (For testing)
response = (messages) ->
messagesArray = _.toArray(messages)
print message for key, message of messages
firebase.get("/messages",response,{orderBy: "created_at", limitToFirst: 10})
Message View with textLayer-for-Framer (<a href="https://github.com/awt2542" target="_blank">awt2542</a>/<a href="https://github.com/awt2542/textLayer-for-Framer" target="_blank">textLayer-for-Framer</a>)
Framer.js module that simplifies the process of adding text to your prototypes.
Add it in your Framer Studio project
- Download the project from <a href="https://github.com/awt2542/textLayer-for-Framer/archive/master.zip" target="_blank">github</a>.
- Copy TextLayer.coffee into modules/ folder.
Initalize
{TextLayer} = require 'TextLayer'
Make message container scrollable
scroll = ScrollComponent.wrap(sketch.chatroomContent)
scroll.scrollHorizontal = false
scroll.contentInset =
top: 0
right: 0
bottom: 20
left: 0
Function to generate view
# Common function
getInMessageView = (y, message) ->
layer = sketch.inMessage.copy()
content = sketch.inMessageContent.convertToTextLayer()
content.fontFamily = "Helvetica"
content.fontWeight = 100
content.autoSize = true
content.parent = layer
content.text = message.message || ""
content.x = 119
content.y = Align.top
content.width = 571
content.color = "#333"
name = sketch.inMessageName.convertToTextLayer()
name.fontFamily = "Helvetica"
name.fontWeight = 100
name.autoSize = true
name.parent = layer
name.text = message.name || ""
name.x = (89 - name.width) / 2
name.y = Align.bottom()
name.color = "#999"
layer.x = 30
layer.y = y
layer.visible = true
sketch.chatroomContent.addSubLayer(layer)
return layer
Change go button eventlistener to listen to changes in "/messages"
inMessages = []
sketch.goBtn.onClick ->
if nameInput.value.length > 0
for inMessage in inMessages
inMessage.destroy()
Views.pushInRight(sketch.chatroomScreen)
chatInput.visible = true
nameInput.visible = false
chatroomHeight = 0
addInMessageView = (message) ->
layer = getInMessageView(chatroomHeight + 60, message)
chatroomHeight += layer.height + 60
scroll.scrollToLayer layer
inMessages.push layer
response = (data, method, path, breadcrumbs) ->
if data
if path == "/"
for key, message of data
addInMessageView(message)
else
addInMessageView(data)
firebase.onChange("/messages", response)
sketch.inMessage.visible = false
sketch.inMessageContent.visible = false
sketch.inMessageName.visible = false
Contact
Twitter: <a href="https://twitter.com/silverchung28" target="_blank">@silverchung28</a><br /> Email: charles@eoniq.co
<br />