Developing Robust Web Applications with Ember.js/

...

/

[WIP] Adding Products to Firebase Updated

[WIP] Adding Products to Firebase Updated

Learn to send data to the Firebase Realtime Database.

We'll cover the following...

After we set the adapter and serializer, our e-commerce application is ready to save and retrieve data in the Firebase Realtime Database. We will store the product images in Firebase Storage and the links to these pictures in Realtime Database.

First, we need to remove products from our routes coming from the dummy API. This is because they’ll break with our Firebase adapter and serializer.

Removing local store data

Let’s open the category, category/item, admin and admin/edit routes and remove all the code from the model() hooks:

category.js
item.js
admin.js
edit.js
//app/routes/category.js
import Route from '@ember/routing/route';
// import { products } from '../data/products';
export default class CategoryRoute extends Route {
  // async model(params) {
  //   const response  = await fetch('/api/products.json');
  //   const {data} = await response.json();
  //   return data.filter(({ category_id }) => category_id == params.id);
  // }
}
Updated files

Now to save products in Firebase we need to set up the admin/add route. First, let’s edit our add route template to set up the image input functionality instead of the image link.

Setting up the add route template

Let’s open the app/templates/admin/add.hbs and add the file input functionality:

Node.js
{{page-title "Add"}}
<div class="add">
    <form>
        <div class="form-group">
            <label for="exampleFormControlInput1">Title</label>
            {{input type="text" class="form-control" value=title placeholder = "Add Title..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Description</label>
            {{input type="text" class="form-control" value=desc placeholder = "Add Desc..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Price</label>
            {{input type="number" class="form-control" min = "1" step="any" value=price placeholder = "Add Price..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Category</label>
            <select class="form-select" aria-label="Default select example" id="category">
                <option selected value="">Select a category</option>
                <option value="men">Men</option>
                <option value="women">Women</option>
                <option value="kids">Kids</option>
                <option value="homeaccessories">Home Accessories</option>
            </select>
        </div>
        <br>
        {{!-- <div class="form-group">
            <label for="exampleFormControlInput1">Image Link</label>
            {{input type="text" class="form-control" value=imglink placeholder = "Add Image Link..."}}
        </div> --}}
        <div class="form-group">
            <label class="col-sm-2 control-label">Image</label>
            <div class="col-sm-10"> 
                <img id="output" height="200" width="200">
                {{x-file-input class="btn btn-primary" multiple=false name="files" action=(action "selectImage") accept="image/*" alt="Select Image"}}
            </div> 
        </div>  
        <br>
        <span class="spinner-border" id = "spinner" role="status"> </span>
        <span>{{this.progress_disp}}</span>
        <br>
        <br>
    </form>
    
    <button class="btn btn-success" type="submit" {{on 'click' this.addProduct}}>Submit</button> 
    <LinkTo class='btn btn-primary' @route="admin" >Close</LinkTo>
    
</div>
  • Lines 35-43: We created a div for our image input functionality:
    • Line # 39: We created an img tag to load the selected image.
    • Line # 40: We used the x-file-input component to input the image. x-file-input is used to input files by triggering the file selector. It can be installed as an Ember addon. We attached the selectImage action to it.
  • Line # 45: We used a bootstrap spinner to notify users when image uploading starts. We set its visibility to hidden in CSS.
  • Line # 46: We displayed the uploading progress to
...