FramerJS-Firebase-Demo

Realtime chat app prototype using FramerJS and Firebase
Demo - here

Getting Started

1. Download Sketch (here) Mac Only
   
2. Download FramerJS Studio (here) Mac Only
   
3. Download Sketch resource file for this demo (here)
   
4. (Optional) Clone this project to check the source code
   

Import from Sketch

1. Open the Sketch resource file you downloaded
   
2. Open a new FramerJS project
   
3. Press ⌘ + ⇧ + i
   

Input Module for FramerJS (ajimix/Input-Framer)

Framer module to easily turn your designs inputs into real inputs.

Add it in your Framer Studio project

1. Download the project from github.
2. 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 (awt2542/ViewController-for-Framer)

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

1. Download the project from github.
2. 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 autoLink is that we need to control the display state of inputs

Supercharge with FireBase (marckrenn/framer-Firebase)

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

1. Download the project from github.
2. 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 (awt2542/textLayer-for-Framer)

Framer.js module that simplifies the process of adding text to your prototypes.

Add it in your Framer Studio project

1. Download the project from github.
2. 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: @silverchung28
Email: charles@eoniq.co

Credits

@ajimix (ajimix/Input-Framer)

@awt2542 (awt2542/ViewController-for-Framer, awt2542/textLayer-for-Framer)

@marckrenn (marckrenn/framer-Firebase)