A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post covers the addition of ember-progress-bar in the badgeyay project. This progress bar shows real-time progress of the badge generation process.
Adding the functionality to badgeyay
Let us see how we implemented this functionality into the backend of the project.
Step 1 : Adding the package to package.json
Image link is the link to the user’s uploaded image on remote firebase server.
ember install ember-progress-bar
npm install ember-progress-bar –save
Step 2 : Adding the progressbar to the frontend
Once we have installed the progress bar, we need to display it onto the frontend of the project.
To do that we use the handlebars templating engine to render the progress bar.
Step 3 : Now we need to define states
We need to define the states that the progress bar will take up in realtime. And to do so, we make changes to the create-badges controller
showProgress : false,
Now we manage the states according to the functionality that has been done.
Finally, we have our basic progress bar ready for the users to view.
Screenshot of changes
- The Pull Request for the same : https://github.com/fossasia/badgeyay/pull/1284
- The Issue for the same : https://github.com/fossasia/badgeyay/issues/1283
- Read about Ember data : https://www.emberjs.com/api/data/classes/DS.Model.html
- Read about Handlebars : https://guides.emberjs.com/release/templates/handlebars-basics/