Posts

Easy file uploads with Firebase Cloud Storage and AngularJS

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

  1. Firstly, we need to get Firebase initialization code. To do so, refer to the instructions in the previous tutorial here.
  2. Select Storage from Develop section on the left-side and click Get Started. There will be a prompt about security rules. Click Got it.Security Prompt
     
  3. Click Rules and change allow read/write permissions without requiring authentication. You can change these rules later.
    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {
          allow read, write: if true;
        }
      }
    }
    
  4. Create index.html as follows and add the Firebase initialization code.
    <!DOCTYPE html>
    <html ng-app="app">
    
     <head>
    
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
     <title page-title></title>
    
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />
    
     <style>
     body{
         font-family:”Open Sans” , sans-serif
     }
     </style>
     </head>
     <body>
     <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Files</a>
            </div>
        </div>
     </nav>
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
     <script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
     <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/angular-datatables.min.js"></script>
    
    <script>
      // Initialize Firebase
       var config = {
        apiKey: ********************,
        authDomain: ********************,
        databaseURL:********************,
        projectId: **********************,
        storageBucket: **********************,
        messagingSenderId: **********************,
       };
       firebase.initializeApp(config);
    </script>
     <script src="scripts/app.js"></script>
     <script src="scripts/controllers.js"></script>
     </body>
     </html>
    
  5. Create app.js and import AngularFire and Datatables.
    angular.module(app, [
            'firebase',
            'datatables'
        ])
    

Uploading a file

File Upload in Cloud Storage
Step1: Add the file upload form to index.html
Here file input executes the onChange function when any file is selected. Upload function is called when the form submits.

 <div class="container">
   <div ng-controller="UploadCtrl">
    <form name="uploadForm" ng-submit="upload()">
      <h3>File Uploader</h3>
      <div class="input-group">
        <input onchange="angular.element(this).scope().onChange(this.files)" class="form-control" type="file" />
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">Upload</button>
        </div>
      </div>
    </form>
  </div>
</div>

 

Step2: Create controllers.js and add the following code:

function UploadCtrl($scope, $firebaseStorage, $firebaseObject) {

    let fileToUpload = null;
    $scope.onChange = function onChange(fileList) {
        fileToUpload = fileList[0];
    };
    $scope.upload = function() {
        if (fileToUpload) {
            let storageRef = firebase.storage().ref(fileToUpload.name);
            let storage = $firebaseStorage(storageRef);
            let uploadTask = storage.$put(fileToUpload);
            uploadTask.$complete((snapshot) => {
                let ref = firebase.database().ref("Files");
                let pushKey = ref.push().key;
                let formData = $firebaseObject(ref.child(pushKey));
                formData.name = fileToUpload.name;
                formData.timestamp = firebase.database.ServerValue.TIMESTAMP;
                formData.url = snapshot.downloadURL;
                formData.$save().then(() => {
                    angular.element("input[type='file']").val(null);
                    fileToUpload = null;
                })
            });
        }
    }
}

angular
    .module('app')
    .controller('UploadCtrl', UploadCtrl)

Explanation:

  1. onChange function sets the fileToUpload variable with the selected file.
    let fileToUpload = null;
    $scope.onChange = function onChange(fileList) {
            fileToUpload = fileList[0];
        };
    
  2. 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.
    $scope.upload = function() {
            if (fileToUpload) {
                let storageRef = firebase.storage().ref(fileToUpload.name);
                let storage = $firebaseStorage(storageRef);
    
  3. 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.
    let uploadTask = storage.$put(fileToUpload);
    uploadTask.$complete((snapshot) => {
    
  4. 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.

    let ref = firebase.database().ref("Files");
    let pushKey = ref.push().key;
    let formData = $firebaseObject(ref.child(pushKey));
    
  5. 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.
    formData.name = fileToUpload.name;
    formData.timestamp = firebase.database.ServerValue.TIMESTAMP;
    formData.url = snapshot.downloadURL;
    
  6. Here we use the $save method of formData object to save file details in the database. After the file is saved, we reset the file input and set fileToUpload back to null.
    formData.$save().then(() => {
                        angular.element("input[type='file']").val(null);
                        fileToUpload = null;
                    })
    

Listing uploaded files

Listing Files

Step1: Add this to index.html, after div for UploadCtrl.

  <div ng-controller="tableCtrl">
    <h3>Uploaded Files</h3>
    <table datatable="ng" class="table row-border table-striped table-hover compact display">
    <thead>
      <tr>
        <th>Upload Date</th>
        <th>Name</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key,value) in files">
        <td>{{value.timestamp | date}}</td>
        <td>{{value.name}}</td>
        <td>
          <a href="{{value.url}}" class="btn btn-default" target="_blank">Download</a>
          <a href="#" class="btn btn-default" ng-click="delete(key, value.name)">Delete</a>
        </td>
      </tr>
    </tbody>
    </table>
  </div>

Here we have setup a datatable showing the upload date, file name and buttons to download or delete a file. File details are shown from files object created in tableCtrl.

Step2: Create tableCtrl in controllers.js

function tableCtrl($scope, $firebaseStorage, $firebaseObject){
    let fileRef = firebase.database().ref('Files');
    $scope.files = $firebaseObject(fileRef);
    $scope.delete = (key, name) => {
        let storageRef = firebase.storage().ref(name);
        let storage = $firebaseStorage(storageRef);
        storage.$delete().then(() => {
            delete $scope.files[key];
            $scope.files.$save();
        })
    }
}

angular
    .module('app')
    .controller('UploadCtrl', UploadCtrl)
    .controller('tableCtrl', tableCtrl)

Explanation:

  1. Reference is created to the Files location in database. Then data for all files is downloaded using $firebaseObject.
    function tableCtrl($scope, $firebaseStorage, $firebaseObject){
        let fileRef = firebase.database().ref('Files');
        let storageRef = firebase.storage().ref();
        $scope.files = $firebaseObject(fileRef);
    
  2. 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.

    $scope.delete = (key, name) => {
            let storageRef = firebase.storage().ref(name);
            let storage = $firebaseStorage(storageRef);
            storage.$delete().then(() => {
                delete $scope.files[key];
                $scope.files.$save();
            })
        }
    

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.

References

Further reading

Five steps to build a basic contacts app using Firebase and AngularJS

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:

Go to firebase.com to create a free account. Then go to Firebase Console and create new project.

Creating Project

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

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

Test Mode

Setting up project files:

Step 1: Create index.html as following:

<!DOCTYPE html>
<html ng-app="app">

 <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title page-title></title>

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />

 <style>
 body{
     font-family:”Open Sans” , sans-serif
 }
 </style>
 </head>
 <body>
 <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Address Book</a>
        </div>
       <ul class="nav navbar-nav">
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="add">Add</a></li>
       </ul>
    </div>
 </nav>
 <div ui-view></div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
 <script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
 <script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
 <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/angular-datatables.min.js"></script>

 <script>
 // Initialize Firebase
 var config = {
    apiKey: ********************,
    authDomain: ********************,
    databaseURL:********************,
    projectId: **********************,
    storageBucket: **********************,
    messagingSenderId: **********************,
 };
 firebase.initializeApp(config);
 </script>
 <script src="scripts/app.js"></script>
 <script src="scripts/config.js"></script>
 <script src="scripts/controllers.js"></script>
 </body>
 </html>

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.

Initializing Firebase

 

Step 2: Create a scripts folder and create following files:
app.js

angular.module('app', [
        'ui.router',
        'firebase',
        'datatables'
    ])

Here we need to import modules of Angular UI Router, AngularFire and datatables (to be explained later).

config.js

function config($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
       .state('home', {
            url: "/home",
            templateUrl: "views/home.html"
        })
        .state('add', {
            url: "/add",
            templateUrl: "views/add.html"
        })
}

angular
    .module('app')
    .config(config)

Then we setup the URL and pages for the Home and Add pages using Angular UI Router. /home is set to be the default page using $urlRouterProvider.

 

Step 3: Create a views folder and create home.html file with just “Hello World!” text.
Create add.html page as:

<div class="container" ng-controller="addContactCtrl">
<form ng-submit="add()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" ng-model="formData.name">
    </div>
    <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control" ng-model="formData.address">
    </div>
    <div class="form-group">
        <label>Phone No.</label>
        <input type="text" class="form-control" ng-model="formData.phone">
    </div>
    <button class='btn btn-default' type="submit">Save</button>
</form>
</div>

Here the input text is stored in the formData object using ng-model. When the user submits the form, add function is executed.
Add function will store the new person’s details in Firebase.

 

Step 4: Create controllers.js and add the following code:

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

    let ref = firebase.database().ref('Contacts');
    let pushKey = ref.push().key;
    $scope.formData = $firebaseObject(ref.child(pushKey));

    $scope.add = function(){
        $scope.formData.$save().then(() => {
            $state.go('home');
        });
    }
};
angular
    .module('app')
    .controller('addContactCtrl', addContactCtrl)

Add page now looks like this:

Add Contact Page

Let’s explain it step by step:

  1. 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) {
  2. 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');
  3. 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;
  4. 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));
  5. 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.

    $scope.add = function(){
        $scope.formData.$save().then(() => {
            $state.go('home');
        });
    }

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.

Setting up DataTables:

Step 1: Create home controller to get contacts from Firebase

function homeCtrl($scope, $firebaseObject){
    const ref = firebase.database().ref('Contacts');
    $scope.contacts = $firebaseObject(ref);
}
angular
    .module('app')
    .controller('homeCtrl', homeCtrl)
    .controller('addContactCtrl', addContactCtrl)

Here we created a reference to the Contacts key in Firebase and downloaded its data in $scope.contacts using $firebaseObject.

Step 2: Create home.html in views folder

<div class='container' ng-controller="homeCtrl">
<table datatable="ng" class="table row-border table-striped table-hover compact display">
    <thead>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone No.</th>
    </tr>
    </thead>
    <tbody>
      <tr ng-repeat="contact in contacts">
        <td>{{contact.name}}</td>
        <td>{{contact.address}}</td>
        <td>{{contact.phone}}</td>
      </tr>
    </tbody>
</table>
</div>

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.

Home Page
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.

References

Further reading

Tips to build magento2 mobile app using ionic framework

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:

  1. It provides very beautiful UI. It has many default JS and CSS components which are clean, simple and functional.
  2. It focuses on native apps by running inside PhoneGap or Cordova to deploy an app natively.
  3. 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.

Magento2 Rest API Configurations: Test accessibility of the mobile API

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.

Magento2 Server-side Configurations(CORS handling):  Setting of Headers in the .htaccess file.

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:

      Access-Control-Allow-Origin: http://YourDomain.com
      Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD...and more
      Header always set Access-Control-Allow-Headers:DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type

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:

  1. The Ionic framework uses node.js as its utility, so to start first install the node.js utility:
     $ npm install -g ionic
  2.  Then, install the latest Cordova and Ionic command-line tools
    npm install -g cordova ionic
  3. 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.

For more details about ionic framework read its doc.

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:

  1. User signup
  2. User Login
  3. 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 3. Update the app.js file for app’s states

Now define your app screens state in the app.js file. e.g:

     .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider,$provide) {
         $ionicConfigProvider.navBar.alignTitle('center');
         $stateProvider

        .state('login', {
             url: "/login",
             templateUrl: "templates/login.html",
             controller:"LoginCtrl"
        });

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 which defines the method which is to be called when user clicks on submit button.

.controller('LoginCtrl', function($scope, $state) {
   $scope.login = function(data) {
    // do what you want to do
   }
};

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:

.service('AuthService', function($q, $http) { // call your API here to get informations for the app uses. }

Step 6. update your index.html file

Now, this is the final step to play with your ionic files. Update your index.html file with all the js and CSS file you created in your app. For example:

      <!-- your app's js -->
      <script src="js/app.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/services.js"></script>
      </head>

Sample Code

To get a complete code click here.

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… 🙂

References

Ionic framework : Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Magento2 REST API : Magento is an open-source e-commerce platform. Its REST API is used for building an e-commerce mobile apps.

Further Reading

 

Portfolio Items