rdb-simpledb.restdb.io
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