Skip to content

Setup Firebase database

Jump to bottom
kathbee edited this page Jun 25, 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. add a project create project
  3. On the next page, click 'Add Firebase to your Android app'. add Firebase to 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 application ID
    • 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... . A dialog will pop up
  6. Click the create new... button and a second dialog will pop up: new key store 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 right click signingReport, then the Run option, as shown below. run signing report
  9. After the command finishes running, go to the Run Tab at the bottom of the screen and scroll to see your SHA1. You will see SHA1 followed by your own key. Copy and paste this into the last field on the Firebase registration page. Note: do not share this key with others!
  10. Now you will be able to download your own google-services.json file. Move it to the location specified in the dialog on the Firebase registration page.
  11. The add Firebase SDK portion has already been done for you - this code is already in the WurmPaint app. Simply click through this step
  12. For now, we'll skip the last step, Run your app to verify installation.

Enable authentication

  1. To enable email authentication on Firebase, navigate to Authentication and click on the Set up sign-in method button in your Firebase project console. Click on the Email/Password option and toggle the switch button to enable.
  2. To enable Google sign-in on Firebase, click on Google and click enable. We've already added the SHA1 to do this, but you should also update the Project public-facing name. Enable Google Authentication

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.
  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:

database structure

  1. Navigate to the Database tab and select the Realtime Database. Note: for now, we'll leave the security rules as public. We'll fix that shortly!
  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: add master-upload node This node entry indicates that within the folder '2018-06-24' there are 3 images, named '1.png', '2.png' and '3.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