/ Leave a Comment /

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

 

Leave a Comment

Also check out

Scroll to Top