How to Build Your First Schema on Flamelink, a Headless CMS for Firebase?
Hello, people! How is it going?
In this article, I am going to share to you about Flamelink and how to build your first Schema on Flamelink. First thing first, let’s start with what is Flamelink itself.
Flamelink is a headless CMS (Content Management System) powered by Google’s Firebase. This CMS offers you a real time and easy way Firebase integration as their vision is to let the developer focus on building apps, while the content creator can easily adding; updating; and managing contents. Interesting, right? Especially for you who love or just currently start working with Firebase.
In Flamelink, you will find basic thing called Schema. Schema in simpliest way maybe works like Google Form, but with little bit complexity. Schema allows you to manage your own fields structure for your data just by drag and drop, without any single code. The data that you have been input through your Schema will be automatically appear in your Firebase and ready to be used in every platform you want to build in, also will be the same when you do another action like edit or delete data.
And now, we have touched the main point. How to build our first schema step by step on Flamelink? Here we go!
1. Get started to your Firebase console and add a project.
2. Go to flamelink.io and hit ‘GET STARTED’ button. You will be redirected to Flamelink’s dashboard.
3. Add your first project there and follow every single step carefully. In this section they have provided us with an easy to follow tutorial video about how to connect Flamelink to Firebase and else. So, no need to worries!
4. Log in to your project using your email’s password. You will be redirected to your project dashboard page. Here is mine.
5. Hit ‘NEW SCHEMA’ button and set the details on ‘SCHEMA DETAILS’.
After that, fill the ‘Schema Details’ form. To be noted, even though ‘Schema ID’ is generated from ‘Title’, you can change it as you want. ‘Schema ID’ also should be unique since it is used as reference for your data in a schema and it is not editable once you have saved it.
There are three types of schemas: single, collection, and form.
· Single
This type of schema is used for page that only have one content which is unique and different from another page, like in page of ‘FAQ’; ‘About Us’; ‘Terms and Conditions’; etc. So, it is one content, one schema.
And when you choose this type, there will be additional field called ‘Group Name’. You can gather some ‘Single’ schemas in one group name. To be noted, ‘Group Name’ is case sensitive so you need to be careful when you input it. If you already have a group name and want to use it for another single schema, be sure you input exactly with the same name and case. If you don’t have any ‘Group Name’ yet, it will be automatically created when you input the name on ‘Group Name’ field.
· Collection
‘Collection’ schema is the opposite of ‘Single’ schema. In this type, you can use one schema’s structure to input several contents like when you want to make a schema for blog post, news post, article post, etc.
· Form
And the last type, ‘Form’, is used for page which need to be filled by your app’s visitor like in comment section, etc.
6. Go to ‘ADD FIELDS’ tab and arrange your schema by drag and drop or double click on the fields as you needed and it will appear on the blank space beside fields tab. They also provide us with ‘Field Templates’ for common use such as schema for managing blog’s content.
7. Click on one of field that you’ve dropped and go to ‘EDIT FIELDS’ tab.
Then, fill your field’s attribute. ‘Field Key’ is automatically generated from ‘Field Name’ even though you can edit it as desire. But, unlike ‘Schema ID’, ‘Field Key’ is editable once you saved it.
8. Click on ‘SAVE’ button and your schema will appear in ‘Schema’ navigation page like in this image below.
9. If you want to input your content, go to ‘Content’ navigation page, then click on a schema that you want to use and make new entry by hitting ‘NEW ENTRY’ button.
Field name which appear on content page is according to field set up you have made before. In this case, I enable ‘Show field value in list view’ toggle on ‘EDIT FIELDS’ section for ‘Day’, ‘Your Story’, and ‘Photo’ field.
10. After you have successfully input your content, the data will appear on content page of the schema like this.
11. Last but not least, when you open your Firebase console, you will see your data automatically created in Firebase Database. In this case, I use Firebase Realtime Database and because I have image data so the image also will be automatically saved in Firebase Storage. Now, your data is ready to be used in your awesome apps!
That is the end of our tutorial, yayyy!!! I wish this tutorial is helpful for you.
If you have any further question about Flamelink, you can visit their Slack channel at https://flamelink.io/slack. They have responsive answer for you there!
Have a nice day! Take care~
Ayu Isnaini is a happy intern at Quality Assurance Division of GITS Indonesia who dreams to be a Women Tech Influencer. She has a quote that she want to share with you which says “If you can not find the light, be the light!”
This article is also can be read at https://gits.id/blog/how-to-build-your-first-schema-on-flamelink-a-headless-cms-for-firebase/
