Codiqa is the fastest mobile prototyping tool around. Learn more
30 Flares 30 Flares ×

codiqa+firebase

Today we are happy to announce a few feature that lets you include external Javascript and CSS files in your Codiqa projects.

One great feature this enables is the ability to use a Backend-as-a-Service or BaaS product to add server-side functionality to your app in minutes. This means you can build your app from front-to-back on Codiqa without ever having to run your own server!

One feature we’ve had a ton of requests for is the ability to read RSS feeds into your Codiqa project. While this initially seems like a simple thing to do, it becomes much more complicated as you deal with processing the data from the blog feed which is often incorrectly formed, and caching the data so it loads quickly for your clients, among other concerns.

Enter: Firebase. Firebase is a hosted service that provides an easy to use backend “server” for storing and retrieving data that works in real-time with multiple users loading and updating data. The great thing is you don’t have to have a single server running in order to use it, they handle all that messy work for you!

Firebase recently released a service called FeedTheFire, which takes an RSS or blog feed and loads it into a Firebase data store. They handle all of the processing of the blog feeds which can get really complicated. I decided this was a great opportunity to show off our new external services feature in Codiqa.

I made a short video detailing the steps to set up a Firebase account, link your blog with FeedTheFire, and load it into Codiqa. Watch the video or follow along with the steps detailed below the video.

 

1. Create a Firebase Account

First, we need to set up a free Firebase account. Visit https://www.firebase.com/signup/ and create an account. When asked to create a new firebase, use something short and unique. For example, if your company is Acme and you want to make this for your blog, put in acme-blog.

2. Create a FeedTheFire Account

Next, visit http://feedthefire.in/ and click “Sign in with your email”

Screen Shot 2013-04-30 at 11.19.20 AM

 

Next, you’ll see a screen to add the RSS feed for your blog:

Screen Shot 2013-04-30 at 11.31.31 AM

 

The blog feed I used is from this blog, and the URL is http://blog.codiqa.com/feed/

Once you’ve found the feed, enter it and then enter the URL for your Firebase account. I put in “codiqa-feed-demo” so my Firebase URL is http://codiqa-feed-demo.firebaseio.com/

You can skip the Firebase secret. Hit Add Feed and your Feed will be processed into your Firebase account!

3. Add to Codiqa

The last step is to simply link your Codiqa project with Firebase.

To do this, create a new project, and drag in a List View. Click the List View and give it an id of “feed”:

Screen Shot 2013-04-30 at 11.38.12 AM

 

Also, go ahead and delete the first default button.

Now, we want to link up the Javascript file for Firebase so our app can grab data from Firebase. To do this, click the “Code” button on the bottom of the page, click the “JS” button, and click “External JS files…”:

Screen-Shot-2013-04-30-at-11.41.33-AM

 

Then, copy and paste this URL into the box: https://cdn.firebase.com/v0/firebase.js

Screen Shot 2013-04-30 at 11.48.47 AM

 

Hit “Add” and then Close. You’ve just linked in Firebase directly to Codiqa!

Now, to finish up, copy and paste the following code into the Javascript editor:

 

Make sure to change YOUR_FIREBASE_NAME to the one you created in step 1.

Now, toggle Test Mode, and the list should now show the feed of your blog!

Screen Shot 2013-04-30 at 10.50.44 AM

Any thoughts or comments on this tutorial? Having trouble? Leave a comment below!

Max

Hi, I'm Max, Co-founder of Codiqa, the easiest way to build jQuery Mobile prototypes. I'd love to talk with you: follow me!

More Posts

30 Flares Buffer 5 Twitter 17 Facebook 0 Google+ 6 LinkedIn 2 30 Flares ×
Share →
Buffer