Prototyping with Framer Studio and random data from restdb.io

by Jon Erik Solheim

In this blogpost we'll demonstrate how you can use restdb.io as a Data Generator for your Framerjs prototype.

I am no expert in how to create prototypes in Framer Studio, and the example is probably amateurish. However, my main goal is to show you how easy it is to connect and work with restdb.io and Framer Studio, almost in real time.

For this example we are using a demo database rdb-simpledb.restdb.io

This database has a Data collection for Products and Contacts. We are going to create a prototype for a web page that lists products with text and photos.

If you are new to restdb.io, read the quick start guide https://restdb.io/docs/quick-start.

We have populated these Collections by using the Random Data generator.

The Product collection with the example random data is shown below.

The random data is generated easily by selecting the Test data tab, and picking a suitable data generator. There are over 70 generators to choose from.

The fun part is to create the Framer prototype and connect it to our database. The basic code for connecting and running a query against restdb.io is shown in the code snippet below (the complete code example is attached at the end):

# Get some data from restdb.io
apikey = "560bd47058e7ab1b2648f4e7"
query = {}
sort = "sort=serialno&dir=1"
max = 20
filter = ""
url = "https://rdb-simpledb.restdb.io/rest/product"
GETdata = "#{url}?apikey=#{apikey}&max=#{max}&#{sort}&filter=#{filter}&q="+JSON.stringify(query)

# load data from db
jsondata = JSON.parse Utils.domLoadDataSync GETdata

The final result in Framer Studio

The example code

# Create PageComponent
page = new PageComponent 
	width: Screen.width
	height: Screen.height
	scrollVertical: false
	borderRadius: 6	
	
heading = new Layer 
	superLayer: page.content
	width: page.width
	height: 90
	backgroundColor: "#000"
	opacity: 1
	x: 0
		
title = new Layer
	y: 5
	x: 15
	width: heading.width
	superLayer: heading
	html: "<h1>Random data <small>with restdb.io</small></h1>"
	backgroundColor: false
	color: "orange"

scroll = new ScrollComponent {y: heading.height,width:Screen.width,height: Screen.height-heading.height}
scroll.content.backgroundColor = "gray"    	
# Get some data from restdb.io
apikey = "560bd47058e7ab1b2648f4e7"
query = {}
sort = "sort=serialno&dir=-1"
max = 12
filter = ""
#query = {}
url = "https://rdb-simpledb.restdb.io/rest/product"
GETdata = "#{url}?apikey=#{apikey}&max=#{max}&#{sort}&filter=#{filter}&q="+JSON.stringify(query)

# load data from db
jsondata = JSON.parse Utils.domLoadDataSync GETdata

# helper function to load images
getImageById = (imgID) ->
	return "<img style='margin-right: 5px; height: 74px' align='left' src=\"https://rdb-simpledb.restdb.io/media/#{imgID}?s=t\">"
	
# helper function to format an item as html
getProductHtml = (product) ->
	images = ""
	
	for img in product.photos
		images += getImageById(img)
	contact = ""
	if product.contact
		contact = """
		Product contact: #{product.contact[0]['first-name']} 
		<small>#{product.contact[0]['email']}</small>
		<img valign="bottom" height="20" src="https://rdb-simpledb.restdb.io/media/#{product.contact[0].photo[0]}?s=t">
		"""
	
	"""
	<div style="margin: 20px; border-bottom: 2px solid white">
	<h3>#{product.name}</h3>
	Serial: <span class=\"label label-info\">#{product.serialno}</span>
	#{images}
	<p>#{product.description}
	</p>
	#{contact}
	</div>
	"""

i = 0
# loop throug the product items from database
for product in jsondata
	productlayer = new Layer
		y: i++ * 250
		width: Screen.width
		height: 250
		backgroundColor: "#eee"
		superLayer: scroll.content
		html: getProductHtml(product)
		draggable: 
			enabled: true

The API key used in this example is CORS enabled with * as allowed domain. Framer Studio is running as a Safari browser application and needs to have a valid CORS key to connect. This is done in the database settings API tab.

Blog