FileMaker and Firebase Integration Part 1

Good Morning Everyone!

Today we will be starting a look at integrating another wonderful web API called Firebase!  Firebase Website

Screen Shot 2015-11-22 at 10.47.54 PM.png

Firebase in a nutshell is a back end JSON data server that can easily be synced between all different devices and environments (iOS, Android, Javascript, Browser, etc). There is plenty of security options, and plenty of documentation on it all along with great example programs using Firebase. So think of it like if you had some data you entered in your FileMaker database on your Mac desktop, if you pushed that data to Firebase, an app you have made or integrate with can easily get that same information in realtime without having to do any kind of server set up or PHP scripts.

Screen Shot 2015-11-22 at 1.46.12 PM.png

Signing up with Firebase is completely free and the limitations on your data is actually quite nice of them to allow. So go sign up and make your own Firebase app on the site and take note of your firebase URL it gives you.

Screen Shot 2015-11-22 at 1.46.37 PM.png

Firebase uses a Restful API which means we can communicate to it’s data through URL calls. Unfortunately, with how Insert From URL works we can only REQUEST data from Firebase with that script step since POSTing data requires a JSON body sent with the URL to Firebase. But do not fear, BaseElements is here to save us from frustration at Insert From URL. The wonderful FREE BaseElements plugin allows us to do the specific data sending to Firebase to allow us to also Insert, Update, Delete, etc to the Firebase data!

Link to BaseElements Plugin (Thank you Goya, you rock!)

Before you get started, make sure you visit the Firebase site and sign up for a free account so you can set up your own app and test with your own info as you go along. Also make sure you download the example FileMaker file HERE.

 

First:  You will want to open up the example FileMaker file I linked above. It should contain the BaseElements plugin in the file if you haven’t installed it yet. The first layout should just be a main layout that you can navigate to the different examples and also contains some links to certain web pages that can be helpful to following along.

 

Screen Shot 2015-11-22 at 11.10.17 PM.png

 

Second: We have the GET page. It should contain buttons that will request data from one of my Firebase apps called Rumchata. It should contain a few recipes that contain Rumchata. I also included one that just uses Insert From URL and the other will use the BaseElements plugin to request the data. At this point they are almost identical and the plugin really isn’t required. There is also a Custom set of buttons that will allow you to enter your own Firebase app URL to attempt requesting data from your own Firebase.

 

Screen Shot 2015-11-22 at 11.04.26 PM.png

 

Third: We have the PUT page. It contains similar options like the GET page but all of these will require using the BaseElements plugin. We first have the buttons that allow you to enter some recipe data and then we send the data to Firebase with a PUT.

Screen Shot 2015-11-22 at 11.05.23 PM.png

Then we also have the custom option where you can enter your Firebase URL and a key/value pair that you will PUT to your own Firebase app.

Screen Shot 2015-11-22 at 11.05.45 PM.png

These both use new script steps that are setting a JSON variable. So to do a PUT request (and POST), we use the base URL to the node you are adding data and the JSON variable you set with the key/value pair you set up.

Screen Shot 2015-11-22 at 11.06.52 PM.png

 

Fourth: We have the POST page. It contains options much like the PUT page, actually the PUT and POST options are very similar. The main difference is when you use a POST to Firebase, it generates a unique key as the parent of the data you send. So say you use the URL: https://rumchata.firebaseio.com/users_post.json  with a key: “username”, and value of “Nick”. In Firebase, the path to that user you added would be something like: https://rumchata.firebaseio.com/users_post/-INOQPH-aV_psbk3ZXEX/username

Screen Shot 2015-11-22 at 11.07.52 PM.png

This is useful for easily adding unique values into Firebase which then you can recall later.

So, look over the scripts, mess with any of it and try and get a feel for sending and receiving data through Firebase! Look through the API documentation a little and find some other functions you can incorporate with Filemaker.

Part 2 of the series will be parsing the data in Filemaker, updating information in Firebase and the start of using a WebViewer so we can create our own Chat client in Filemaker!

Please leave any comments, questions or suggestions on this or anything else you would like to go over! Follow me on twitter (@pudgyplatypus) to get any updates on Filemaker stuff or any of the silly games I make. Also check out MC Services’ website if you are in the market for Filemaker development or Mac consulting!

 

Nick

 

Advertisements

FileMaker 13 Example – Perform Script By Name…like a BOSS

Yes yes yes I know, Filemaker does not have a script step called Perform Script By Name…but do not fear, OpenURL is here!

If you have dealt with FileMaker scripting a lot I’m sure you have come across a time where you wish you could run a script by using a variable you had stored earlier in the script to only find that you had to choose the specific script when adding the script step for Perform Script.

So if you are a bit newer to scripting you may not really see what the big deal is about being able to dynamically Perform Script on a variable, so let’s see an example!

This example is just a local database I made on my desktop called “Perform Script By Name Example”.

Here is the regular way you could do a basic script:
Screen Shot 2014-07-14 at 12.56.33 PM

And here is the OpenURL dynamic way of doing the same script:
Screen Shot 2014-07-14 at 12.56.50 PM

So here is a quick basic view of what the fmp url schemes look like based on where you are running the OpenURL script step from:

FMP URL for local files: “fmp://$/databasename/script=scriptname”

FMP URL for shared database: “fmp://” & Get (HostIPAddress) & “/databasename/script=scriptname”

FMP URL for iOS device: “fmp://%24/databasename/script=scriptname”

Download the small example file I made to see it in FileMaker: https://dl.dropboxusercontent.com/u/96803504/Perform%20Script%20By%20Name%20Example.fmp12

Let me know if you have any questions or if you have used this in any new or interesting ways!

FileMaker 13 Example Series – Make Pretty Things with JQuery – Part 1

JQuery Knob In FileMaker

Interact-able JQuery Knob in FileMaker 13

Operation Make Pretty Things in FileMaker is GOOOO!

This is Part 1 of….X parts of using JQuery or any other fun way of adding more sparkle to your FileMaker databases.

My fascination with using webviewers to do cool things in FileMaker started when seeing Cris Ippolite’s FM Devcon presentation on using WebViewers for cool things like charting and seating arrangements. Right away I started searching everywhere for things that could work well in the WebViewer and be integrated in FileMaker to be useful to users. I started with doing charting (that will be another part with some cool functionality) that ended up becoming much more user friendly and developer friendly for creating more customized Charts in your FileMaker solution.

But I digress, this first part will be showing a simple example of using JQuery in a WebViewer to show “Knobs”. They are quite fancy shmancy looking and are even interact-able in FileMaker.

Download Example File Here

Example File in FileMaker 13

Example File in FileMaker 13

Positives for using this method:

1) Do not need internet access for the Javascript

2) It’s pretty!

3) Making your layouts look more “alive”

4) Very customizable

5) Instantly refreshing when values change

6) Can even use data from FileMaker

Negatives:

1) WebViewers act/look (even possibly not display) different on the PC version of FileMaker (*Shakes fist at Internet Explorer*)

2) Can NOT place anything over a WebViewer

3) Harder to troubleshoot if you do not know much HTML or web development

The main thing to recognize when looking at the example file are the stored fields for all the different Javascript/JQuery files that are needed for these to work in the WebViewer. Normally you can just make references to these javascript files in HTML that are stored on the server where your website is located but this has to be set up a little differently when being used in a WebViewer. We need to access the javascript directly which is why we have separate fields for the different javascript and CSS files that we just reference in a main field that is sort of like your own little HTML page that will be displayed in the WebViewer.

Example File Knobs Layout

Example File Knobs Layout

As a side note: PC does not play too well with Web Viewers in FileMaker. This is mostly based on it using IE as the framework for the Web Viewer. When first testing this example on a Windows machine the Web Viewer was not even showing the wonderfully beautiful Knob graphics at all! After some digging it looked like I needed to add a little extra code to the HTML to check for IE and use some specific Javascript for it to work. The only other little addition is another line of code to remove the random outline that the PC Web Viewer would show in FileMaker. Examples below.

Line of code that goes in the header for the Javascript to work on PC (requires the Excanvas Javascript field which is in the example):

“<!–[if IE 9]><script>”&Excanvas_JS&”</script><![endif]–>”

HTML for removing any kind of outlines in the Web Viewer on PC:

<body style=’border=0;margin=0;overflow:hidden’>

Well that is it for Part 1 of my (many? 2? 10?) part series for making pretty things in FileMaker 13. I have added the example file to this post for anyone to take a look at and mess around with. As a warning though, I would suggest against editing any of the Javascript fields unless you are well versed in Javascript. Feel free to leave any questions in the comments and I will be happy to help out!

Links (Also included in the example file):

MC Services Website 

JQuery

JQuery Knob

As a bonus, here are some examples of things that I will show in upcoming Parts to this series…

Using JQuery Knob you can make a live "Future" clock

Using JQuery Knob you can make a live “Future” clock

Gantt Chart in FileMaker 13

Gantt Chart in FileMaker 13

Show Custom Dialog ( The Beginning)

Introduction posts are hard…

Baby Platypus

Most awesome animal, ever

So I guess this is that blog post where I tell you that my name is Matt Nehring and like Nick I’m a senior Filemaker Developer at MC Services.  As with Nick I am certified in Filemaker 11 and 12.

I’m hoping that this blog will serve as a great outlet to get creative ideas and solutions that we come up with on a daily basis out there for others to learn from and use in their own solutions.  I’m told that teaching is the best way to learn something so in theory I may learn a trick or two just by writing about what I’m doing here.

I have an unhealthy obsession with Platypuses because they are one of the most fascinating creatures on this planet, if we can make this blog half as interesting as a Platypus I think we’ll be fine.

/end post

Perform Script(“Hello World”)

Wow writing the first sentence of a brand new blog is brain melting.

Hello everyone, my name is Nick Farnan and I’m a senior FileMaker developer (certified in FM 11 and FM 12). I currently work at MC Services (www.mcservices.com), a FBA company where I do FileMaker consulting for multiple clients. Along the way I hope to pick up some of our other developers to help contribute on this blog.

The goal for this blog is to get out some of our cool ideas, things that we may have tripped up on that others might need help with, and just general things we come across in our little FileMaker world.

So, Welcome!

(And now an awesome platypus as a gift to you!)

Image