Cloud storage integration with Firebase

This tutorial explains how to integrate Firebase with Kuroco.
Through the integration with Firebase, Kuroco can upload, store, and use image or video files stored in Firebase.

Create a Firebase project

Create a Firebase project from the Firebase official website.
For this tutorial, we'll use the Free "Spark Plan" for the test implementation. Feel free to upgrade to the paid plan if necessary.

1. Apply for Firebase(Google Cloud Platform)

Go to the Firebase official website and click [Get Started].

Image (fetched from Gyazo)

2. Create a project

Click [Create a project] on the "Welcome to Firebase" screen.

Image (fetched from Gyazo)

3. Enter the project name and click Continue

Enter the project name, check [I accept the Firebase terms], and click [Continue].
Please note that the project name cannot be changed later.

Image (fetched from Gyazo)

4. Set up Google Analytics

Enable or disable Google Analytics.
If Google Analytics is enabled, the next screen will take you to the account settings page for Google Analytics. For this tutorial, select [Disable].

Image (fetched from Gyazo)

5. Click Continue after the project has been created

Click [Continue] on the project creation completion screen.

Image (fetched from Gyazo)

This completes the Firebase project setup.

Firebase settings / acquiring credentials

We will be focusing on the Firebase management screen for the following steps.

6. Access the [Project Settings]

Click [Project Settings] from the gear icon on the Firebase dashboard.

Image (fetched from Gyazo)

7. Download the private key

Under the [Service accounts] tab, click [Generate new private key].

Image (fetched from Gyazo)

Click [Generate key] in the pop-up and the file will be downloaded.

Save the downloaded file as it will be used later.

Image (fetched from Gyazo)

8. Set up to start using Firebase storage

Click [Storage] on the side menu, then click [Get started] on the Storage screen.

Image (fetched from Gyazo)

Click [Next].

Image (fetched from Gyazo)

Select a location that is most suitable for your organization.
In this example, "asia-northeast1" was selected for the Cloud Storage location.
After selecting the desired location, click [Finish].

9. Additional settings for Firebase app

Select [Project Overview] on the side menu to return to the project main page, and click the WEB type application [</>] icon.

Image (fetched from Gyazo)

Enter the app nickname and click [Register App].

Image (fetched from Gyazo)

The "Add Firebase SDK" screen will be displayed. Click [Continue to the console].

Image (fetched from Gyazo)

10. Get the FirebaseConfig

Click the gear icon next to "Project Overview" to access the [Project settings] screen.

Image (fetched from Gyazo)

Scroll down the page, under "Your apps" -> "SDK setup and configuration", select "Config".
The firebaseConfig will be displayed. Copy it, it will be used later.

Image (fetched from Gyazo)

Kuroco settings

We will be focusing on the Kuroco's management screen in the following steps.

11. Set up the credentials, obtained in steps 7 and 10 above, on the Firebase's setting screen

Click [External system cooperation]-> [Firebase] on the side menu of Kuroco's management screen.

Image (fetched from Gyazo)

Upload the file obtained in "7. Download the private key" to 'Credentials'.

Image (fetched from Gyazo)

Next, paste the FirebaseConfig obtained in "10. Get FirebaseConfig" in the 'App Config' field.

Image (fetched from Gyazo)

Click [Connect].

Image (fetched from Gyazo)

12. Enable Storage

Check [Enable] for "Storage" and click [Update].

Image (fetched from Gyazo)

This completes the integration with Firebase.

How to use in content definition

From Content Definitions on Kuroco's management screen, select [File on GSC] in the item settings.

Image (fetched from Gyazo)

The file upload field will be displayed on the content edit screen.

Image (fetched from Gyazo)

If a file is uploaded from here, it will be uploaded to Firebase Storage.

If you have any other questions, please contact us or check out Our Slack Community.