Posts

In the previous tutorial, we learned how to use Firebase and AngularJS to store and view data in Realtime database. In this tutorial, we’ll learn how to store, list, download and delete files in Firebase Cloud Storage using AngularJS

Cloud Storage

Cloud Storage is a storage service which stores files as ‘objects’. These objects are kept in containers called ‘buckets’. You can read, write and delete objects, save metadata and set security rules. It uses Google Cloud Storage at its backend.

Getting started

Firstly, we need to get Firebase initialization code. To do so, refer to the instructions in the previous tutorial here.

Select Storage from Develop section on the left-side and click Get Started. There will be a prompt about security rules. Click Got it.

Click Rules and change allow read/write permissions without requiring authentication. You can change these rules later.

In the upload function, we create a Firebase Storage reference for the selected file. $firebaseStorage is a service provided by AngularFire. It takes in this reference to generate a $firebaseStorage object.

To upload the selected file, the fileToUpload variable to passed to $put method of $firebaseStorage object. $put uploads the file and returns an upload task object. This object is used to track the upload progress and pause/resume or cancel the upload. We are using the $complete method of the upload task to execute some code after the upload is successful.

Firebase does not provide any API to get the list of all files at a specific location. To get this list, we save the details of the uploaded file to the database when the file upload is successful.
We can later access the Files location in the database get the download URLs for the uploaded files. The file details are saved in a random push key generated by native Firebase SDK API. This is explained in the previous Firebase tutorial here.

The details of the uploaded file are saved in the formData object created earlier. First, we set the name property using fileToUpload object. Then set the timestamp using firebase.database.ServerValue.TIMESTAMP. It is a Firebase feature where the value of the timestamp will be set automatically when the data is saved in database. Finally, we use the snapshot object returned by the $complete method to get the downloadURL of the uploaded file.

This function deletes the file from Cloud Storage and removes it from database.
We get a reference to the file in Cloud Storage. Then we create a $firebaseStorage object using this reference. Finally we use the $delete method of $firebaseStorage to delete this file.
When the file is deleted, we remove the file from files object and save the changes back to the database.

This tutorial is now over. There are many features which you can explore further in its documentation. You can improve this app by adding a progress bar, better error handling, file previews and more. Check out the documentation from references given below.

In this tutorial, we will create a basic contacts app using AngularJS and Firebase. We are going to assume that you have basic understanding about using AngularJS.

Introduction to Firebase

It is a mobile development platform by Google. It provides products such as database, storage, authentication, messaging, analytics and more. Developers can start working on their apps without writing server-side code. It provides APIs to handle things like database, authentication, etc. on front-end. It can easily scale from small to large apps as it is based on Google Cloud infrastructure. Firebase Realtime database stores data in a JSON tree structure. You can store key-value pairs and create nested levels of data, like how JSON data is structured. But it can’t store real arrays.

What is AngularFire?

Firebase provides a Javascript SDK which provides various APIs to work with. AngularFire is a helper library. It aims to remove boilerplate involved in creating AngularJS bindings for Firebase APIs. It provides extra features like 3-way data-binding and array handling which makes integration between AngularJS and Firebase easier. AngularFire does not replace the SDK, rather it supplements it. You can use AngularFire APIs or native APIs depending upon what makes your work easier.

Setting Up Realtime Database:

Now, go to Database under Develop section on the left-side. Click Get Started under Realtime Database.

Enable Start in test mode. To keep things simple for this tutorial, we are going to use test mode. It makes the database open to read and write publicly. Don’t worry, you can change these settings later on.

Now, open your newly created project on Firebase console. Click “Add Firebase to your web app” and copy the initialization code. Don’t copy the first script tag as we have already added it earlier in the index. Replace the initialization code in index.html with it.

Here we have used AngularJS Dependency Injection to use $scope, $state and $firebaseObject services. $scope is used to connect the views with the controller and access data on both sides. $state is used to redirect the user to different ‘states’ or links declared earlier in config.js. Finally $firebaseObject is an AngularFire service to get and save data in Firebase.

function addContactCtrl($scope, $state, $firebaseObject) {

To add, change or remove data in Firebase, we need to get a reference to a specific location in the database. For this tutorial, the contact details are stored in ‘Contacts’ key. So, the reference points to /Contacts.

wlet ref = firebase.database().ref('Contacts');

Firebase SDK provides a feature called push keys. These are randomly generated keys which can be used as unique keys to store data, without worrying about data getting overwritten by someone else.
AngularFire does not directly generate these keys. So we have to use a native Firebase method for this purpose. To generate a push key, add .push() to a reference. It returns an object containing the push key. This key is stored into the pushKey variable.

let pushKey = ref.push().key;

Here, we have added a child reference to the reference we already created. So if the push key generated was ‘abcd’, then the the new reference now points to /Contacts/abcd. $firebaseObject is an AngularFire function. It takes in a Firebase reference and returns a customized object which contains the data at the reference location and some helper methods.If some data is already stored at /Contacts/abcd, it is automatically downloaded in the returned object. $scope.formData is the variable used earlier in add.html to store the contact details of a new user. This data is now stored in the object returned by $firebaseObject.

$scope.formData = $firebaseObject(ref.child(pushKey));

This function runs on form submit. To save contact details in Firebase, $save method is called on a $firebaseObject. $save is an AngularFire method. Any data added to $scope.formData through ng-model will get saved directly in Firebase.
$save returns a promise. In its .then function, we use $state.go to redirect the user to the home page after a contact gets saved in firebase.

What is Datatables?

It is a jQuery plugin which is used to create tables which can be easily sorted, filtered and edited. It’s packed with features but we going to setup a very basic table using it’s Angular JS plugin ie, Angular-DataTables.

Here we have initialised datatables using the datatables=”ng” directive. It specifies that the data in the table is rendered using AngularJS.
In tbody, ng-repeat directive creates rows for every contact in $scope.contacts object.

And thus, the basic contacts app is now complete. You are free to improve it by adding more features like editing or deletion of contacts.

Conclusion:

And thus, the basic contacts app is now complete. We learned how to setup a database in Firebase. Then we added Firebase JavaScript SDK to the AngularJS project. We setup two pages, one to view contacts and other to add new contacts. Then we used AngularFire, a helper library, to easily store data in Firebase. Finally, we used Datatables, a plugin which helps in creating html tables.

We have just scratched the surface of what you can do with Firebase and AngularJS. You can add more features like edit/delete, authentication, backup and restore etc.

These days, the ways of developing an app have changed, as a result, it provides useful and user-centric apps to businesses and organizations for improving their business presence through a mobile app. These all changes are possible due to the presence of various cutting-edge tools, platforms, and frameworks. These all things have brought ease and convenience for developers and designers to create incredibly potential mobile apps.
The Ionic framework is one of the new entrances in the mobile app development platform. It has a front-end SDK built on AngularJS which is a top popular JavaScript library. Using this popular library Ionic application provides developers and companies a benefit of single development code across multiple mobile platforms. It has many other benefits like:

It provides very beautiful UI. It has many default JS and CSS components which are clean, simple and functional.

It focuses on native apps by running inside PhoneGap or Cordova to deploy an app natively.

It has a most powerful CLI which helps developers to create, built, test and deploy apps onto any platform with just one command.

A few days back we get a chance to develop an app with the ionic framework and the most interesting part was to use Magento2 REST API to retrieve data from the server. Developing an app with the ionic framework and Magento2 Rest API was new to us but yes, it was an amazing thing to learn. We developed the app and it was a great experience to integrate the two amazing platforms in a mobile app. This article will help to learn how to build a Magento2 mobile app using the ionic framework.

Here are some important points to be noticed before starting the development on the front-end.

This is the step which is followed by both the sides i.e. client side as well as server side. On the server side, we need to give permission for webservices and it is done by enabling Web API Security. For more information for server-side implementation please refer the link .

On the client side, you can make a direct call to some of the default Magento API like- product list, product details, product category etc. but for a customer-specific call like- customer authentication, cart, wishlist, checkout etc. needs to be called by passing authentication token in the header. To learn more about authentication token refer the blog.

This the most important step while making the call from javascript to Magento rest API.

CORS(Cross-Origin Resource Sharing) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. For CORS you need to add following headers at your server side .htaccess file:

Now, here is the detail explanation for developing a Magento2 mobile app using ionic framework

Steps to build Magento2 mobile app using ionic framework

1. Build Iconic project.

Now get ready to start your ionic app. Below are the steps to build an ionic app:

The Ionic framework uses node.js as its utility, so to start first install the node.js utility:

$ npm install -g ionic

Then, install the latest Cordova and Ionic command-line tools

npm install -g cordova ionic

Start a project by:

ionic start <your app name> blank

Here starter blank means a project with no UI. It will create a blank project. Some of the other named templates starters

tabs (Default)

side menu

maps

salesforce

complex-list

The above command will create an ionic project with various files including www folder. This folder is the actual folder where your app further implementation resides. The index.html is your app file which runs your app and contains all the js and CSS file declaration.

Now, rest things are to be done for front-end. Below a sample is described to show how to build a Magento2 mobile app using the ionic framework. In this sample, we will have the following functionality:

User signup

User Login

Product Listing from Magento2 website.

Step 2. Create your UI

Create an .html file for Login e.g. login.html in your template folder. Define your view in this layout as your requirement. For more details about defining a layout, you can refer here. TEMPLATES is where your view files go. Your project does have a main index.html file in the WWW directory, but your app likely contains many template views that are added dynamically. Unlike your CSS and JS files, TEMPLATE files do not need to be mentioned in your index.html file.

Step 4. Define a controller for the state:

controllers.js contains your Angular controllers for the states that require them. Define the logic here to control the state of your app. For example- In our sample, we defined LoginCtrl whichdefines the method which is to be called when user clicks on submit button.

Step 5. Define a service file:

services.js is not always included in the starters, but it contains the custom Angular services your app may use, such as the one that calls out to a 3rd party API to get the information your app uses. So, it the real file from where we call the API for authentication and product listing. For example:

Sample Code

Conclusion

Above we described the steps to develop a Magento2 mobile app using ionic framework. The process is not only easy and interesting but also make the user interface attractive. The Ionic framework entrance in the market has proved to be very helpful for both the developer as well as for the customer because it is focused mainly on the look and feel, and UI interaction of your app. Above is the small sample to demonstrate the basic steps to build a Magento2 mobile app using ionic framework. For more information, you can contact us through our website. Enjoy Coding… 🙂

Sitemap

About Us

We are a small agile company delivering world class products and software development services for startups and small businesses. We specialize in developing online communities,e-commerce websites, custom websites, mobile apps and performance. Over the years, we have served over 350+ customers through our products and services. Read More