Create a mobile app for ANY website

Written by on Monday, October 28th 2013

Create a mobile app for ANY website
We always talk about the dozen of connectors GoodBarber provides you to publish your content in your app. To this day, there are more than 30!

But now, you may be wondering what a connector is? You might also be disappointed to see that your favorite platform isn't in our connector list.  We do our best to offer a native experience, synching content from the most popular solutions in the market, but there are thousands!

Today, I'd like to introduce you to our custom connector. This connector makes GoodBarber compliant with all existing services to publish content. Of course, the downside is that it involves work on your part... but, by the end of this post, you'll see that it's not that difficult.

Let's discover together how to create an app for your Joomla, Drupal, ezPublish, Spip ... or any other solution, even one created from scratch.

1 - What is a connector?

When we created GoodBarber, we wanted to avoid making a direct connection between your app and your website. We have already explained why in a Friday talk about synchronization. There are 3 main reasons behind this choice:

- better maintenance: many of you ask us to tweak GoodBarber to take into account some customization you made to your site. We always try to modify and implement the tweak to all the users that may need it. Managing those modifications on our servers is far more efficient. If we had a direct connection from your website to your app, each modification would have been made on every app, and would have required re-submissions.

- better performances: we want your app to be fast and to provide a seamless user experience. We have a special focus on response time, data compression and transmission over the network, etc.  Maybe you already familiar with the fact that our infrastructure is shared with WMaker, specialized in web hosting for more than 10 years now. With our 2 services combined, we serve more than 250 million requests per month.

- new connectors: some of our team members work on the synchronization engine. They keep an ear out for your requests, and they create new connectors when a majority of you request them.

The connector is here to "translate" the content of your website into a format used by your app to display it, natively.
Why not create yours?

2 - The custom connector: the one you create by yourself

If you don't find the right connector in our connector list, you can still create yours, by yourself!

Let's take an example. If you have a website made with Joomla, you can use the RSS connector. But, this connector will prevent you from accessing some very cool features in your app like posting comments, adding a search engine or activating pagination so that content can be pulled on demand from the app.

So the idea is to create your own content feed, and plug it into your GoodBarber app, using the custom connector. That way, you'll have total control over what you will publish into your app.

It's not very difficult to achieve, but it takes some developing skills.

3 - What can I do with the custom connector?

Basically, with the custom connector, you will be able to access all the features available with each type of content handled by GoodBarber: articles, photos, videos, maps, podcasts, events, comments, etc. 

Depending on your needs, you might have to create several content feeds:
- get last items
- get comments and post comments
- filter items by categories, tags ... it's up to you to decide
- search engine

4 - How to create a custom content feed?

Everything is explained in your backend. Go to Help Center > Developers > Content API

You will find the specifications to follow in order to create your own feed. Keep 2 important things in mind:
- all the feeds you are going to create will be JSON formatted, with the same structure
- depending on the content type, some attributes will differ

Let's dive into the technical stuff! Here is an example of the kind of feed your are going to create in order to display articles in your app. The easiest way to do it, is to create a feed that will display the last 24 articles of your website. But, it will be more or less the same when creating a feed for other articles (based on a tag for instance), or a feed that will contain the response of a search request.

{

   "generated_in" : "0.010000 s",

   "items" : [

       {

           "author" : "Author of the post",

           "commentsEnabled" : true,

           "commentsPostUrl" : "URL_API_COMMENTS",

           "commentsUrl" : "URL_FEED_COMMENTS",

           "content" : "...",

           "date" : "2013-10-23T21:57:00+02:00",

           "id" : 123456,

           "images" : [

               {

                   "id" : "image_123456",

                   "url" : "URL_ORIGINAL_IMAGE",

               }

           ],

           "largeThumbnail" : "URL_LARGE_THUMBNAIL",

           "nbComments" : 12,

           "smallThumbnail" : "URL_SMALL_THUMBNAIL",

           "subtype" : "custom",

           "summary" : "...",

           "tumbnail" : "URL_THUMBNAIL",

           "title" : "Title of the post",

           "type" : "article",

           "url" : "URL_POST",

       },

       ...

   ],

   "next_page" : "http://www.example.com/json.php?page=2",

   "stat" : "ok",

   "title" : "Example",

   "url" : "http://www.example.com"
}


At the root of the JSON dictionary, you will insert the feed's metadata. Here is their description.

Main structure of the JSON file:
Those keys will be found at the feed's root

 

Name

Type

Description

generated_in

String

Generation time of the response

items

Array of Items

Array of items to be returned

next_page

String

URL of the next_page to call (calculated with the page and per_pageargs)

stat

String

Status of the response ("ok" is everything is fine, "error" otherwise)

title

String

Title of the source

url

String

URL of the source


Then, all you have to do is to fill the items table with Article objects (which inherit from the Item type).
Here is the description of each attribute.

Keys of the general items dictionary
Those keys are the same for all items. If the example was about a photo custom feed, those attributes would also be used.

 

Name

Type

Description

id

String

Item unique identifier on its source

type

String

Item type

title

String

Item title

url

String

Item URL on its source

categories

Array of Strings

Categories associated with the item on the source

date

String (date)

Item publication date

author

String

Item author

subtype

String

Item subtype (generally describes the service type of the source)


Keys of the dictionary related to articles
As our exemple is about an article feed, we need to insert those keys for all the objects

 

Name

Type

Description

nbComments

Integer

Number of comments associated with the item on its source

commentsEnabled

Bool

Describes if the comments have to be enabled or not for this item

commentsUrl

String

URL to access the JSON feed of comments for this item

commentsPostUrl

String

URL that allows to post comments on this item

summary

String

Summary of the article (no HTML, text only)

content

String

Article content

smallThumbnail

String

Article thumbnail (small format)

thumbnail

String

Article thumbnail (medium format)

largeThumbnail

String

Article thumbnail (big format)

images

Array of Dict

List of images contained in the article

images/[]/id

String

Value of the id attribute of the <img> tags in article content

images/[]/url

String

Image URL


Have a look a few more detailed examples we provide, be accurate when you create your feed, and everything will be fine :) Feel free to contact the support team if you need assistance.

5 - Connect your custom feed to your GoodBarber app

Create a mobile app for ANY website
Now that your feed is ready, you need to go back to your backend to connect it to a section. Once you've reached this step, the worst part is over.

If you are already familiar with the GoodBarber backend, you know that when you add a section, you can choose from connectors to add content. Among the connectors, there is one called Custom. You'll find it in the following sections: articles, videos, photos, sounds, maps and events.

Create a mobile app for ANY website
Then, you can set different options for your custom feed: last articles of course, but also search engine, filters by categories, etc.

Save the section and have a look at the great work you produced!
 



avatar
Hello, as Dominique suggested, you need to create a custom feed by following the above mentioned tutorial (http://blog.goodbarber.com/Create-a-mobile-app-for-ANY-website_a267.html). This feed will then need to go into our "Custom" connector.
If you need further assistance in setting this up, our Support team is one click away in your GoodBarber backend, in the drop-down menu at the top right of your screen :)
I hope this helps!
http://blog.goodbarber.com
Yes, I have the same problem.

I want to import a custom post type (WP Job Manager) in Goodbarber. But via the Wordpress plugin it's not possible. If I use the Json API plugin, goodbarber can't find any content in the json feed while other json reader can.

It would be a lot easier for everyone if the Goodbarber Wordpress plugin also uses custom post types.
avatar
@Mike Dominique is referring to this article http://blog.goodbarber.com/Create-a-mobile-app-for-ANY-website_a267.html
http://blog.goodbarber.com
I have the same issue. There is no format on that link you gave http://blog.goodbarber.com. That is just a blog. I have the same issue as he does. Why can't your software successfully import a JSON feed from wordpress when other app programs can? If not that one, can you recommend a json plugin for wordpress that you will accept? Most of us are not programmers so we have to rely on these plugins to get a json feed from any CMS.
avatar
@Baci
This URL seems to be generated with the JSON API WordPress plugin. You won't be able to directly use it as a source of a custom connector.
You should instead build your own feed following the format mentioned in the article.
http://blog.goodbarber.com
I have a compound URL (http://mywebsite.com/?json=get_recent_posts&post_type=concert&meta_key=date&orderby=date&order=ASC) that will return the json I'd like to use. How might I set up the custom feed and filters? Do I need to have evnets in some form of json template?
avatar
@Alessandro
In this case, you can use an HTML5
Isn't a Youtube video, can be embed in some way?
avatar
@Alessandro
If it's a YouTube video, just use the iframe code in the content of your article.
http://blog.goodbarber.com
Hello, nice article! But how can i embed h264 video inside a news article? Thank you for help.

Enter your email address