Here are some important points to be noticed before starting the development on the front-end.
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.
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$ npm install -g ionic
npm install -g cordova ionicionic start <your app name> blank
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:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider,$provide) {
$ionicConfigProvider.navBar.alignTitle('center');
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller:"LoginCtrl"
});</pre>
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
