Skip to content

Setup Firebase database

Jump to bottom
kathbee edited this page Mar 8, 2018 · 5 revisions

Connect Firebase to app

  1. Go to https://console.firebase.google.com and login with a google account. Note that we were able to use the free version of Firebase, but depending on the number and size of your image data, you may have to upgrade to paid plans.

  2. Click on the Add a Project button, name your project, and create it.

  3. On the next page, click 'Add Firebase to your Android app'.

  4. The following dialog will pop up [Add Firebase to your Android app]

    • the Android package name is the applicationId in your app level build.gradle file in your Android Studio project
    • the App nickname can be whatever you choose.
    • the last field is necessary if you would like to allow users to sign-in with their Google accounts. This makes sign-in simpler for users and makes email validation simpler for the user. If you would like to enable these features, steps 5-9 will show how to acquire the Debug signing certificate SHA-1.

  5. In Android Studio, navigate to Build -> Generate Signed APK... . This will give you the following dialog:

  6. Click the create new... button and a second dialog will pop up: Here, you should specify a key store path, a password for your key store path, a key alias, and a password for the key. You will also have to enter at least one piece of information in the Certificate box at the bottom of the dialog. Click ok.

  7. Now you're back to the Generate Signed APK dialog, and we'll simply cancel out of this.

  8. Click on the Gradle Menu at the far right side of the Android Studio interface to expand it. Then click on Android, then Signing Report, then the Run option, as shown below.

  9. After the command finishes running, go to the Run Tab at the bottom of the screen and click on the icon highlighted below. You will then see at the top of the Run Tab SHA1 followed by your own key. Copy and paste this into the last field on the Firebase registration page.

  10. Now you will be able to download your own google-services.json file. Save it to the following location:

  11. The add Firebase SDK portion has already been done for you - this code is already in the WurmPaint app. Simply click through.

Enable authentication and analytics??

  1. To enable email authentication on Firebase, navigate to Authentication -> Sign-in method in your Firebase project console. Click on the Email/Password option under Providers and toggle the switch button to enable.
  2. To enable Google sign-in on Firebase, again navigate to Authentication -> Sign-in method in your Firebase project console. Click on Google under Providers and click enable. [There's some missing things here].
  3. [enable analytics?]

Add data to Firebase Storage

  1. You will need to rename your images to use the app out-of-the-box. It is also useful to batch your image data, as it will allow you to easily change which batches are available for app users to annotate, and allow you to easily make new data available for annotation. The storage scheme that we used and that is expected by the app is to store batches of images within folders that are named as dates, e.g. '2017-12-20'. The images themselves should be named numerically, e.g. '1.png', '2.png' without skipping integers. Right now, the '.png' format is necessary for out-of-the-box use. You may either keep track of your image name mapping in a way convenient to you, or if you plan on having a single batch of images and never changing them, you can save your mapping in the .json format and add it to your database (see below). We include a matlab code that will save the mapping in json format for you if you choose this route. [are we restricted to square images??]
  2. Now that you have your images organized, go to your project's Firebase console and navigate to the Storage tab. Create a folder called 'img'. This will be where all your original images to be annotated will be stored.
  3. Navigate into your 'img' folder and upload your dated folders containing images.

Setup Firebase Database initial nodes

Now that your data is on Firebase, we will setup the database, which will contain info about annotated images. This is the database structure we used: [screencapture of database structure].

  1. Navigate to the Database tab and select the Realtime Database.
  2. If you chose to save your image name mapping as a json file, this should be imported into your database structure before you do anything else, as importing a json file will erase any existing database you have. Click on the three vertical dots and select Import JSON. Navigate to your mapping file and upload it.
  3. Now we will add one top-level node called 'master-upload'. The name is again important here for the code to work out-of-the-box. This node will tell the app what image-containing folders in your Firebase storage to pull images from, and also how many images are in that folder. This makes it simpler for the app to a) fetch images without errors and b) choose random images from within a range. Add like so: [screen capture]. This node entry indicates that within the folder '2017-12-20' there are 531 images, named from '1.png' to '531.png' consecutively.
  4. The other top-level nodes you see in the database depicted above are generated automatically once users have uploaded images.
Clone this wiki locally