Tapitoo OpenCart: An open source e-commerce mobile app

325 readers like this.
Different cell phones

Opensource.com

Tapitoo OpenCart is an open source online store app designed to help online stores increase their visibility and make a greater impact in their most competitive markets. We decided to develop and app that can make the integration with the biggest e-commerce backend solutions, as well as with custom stores, as seamless as possible.

CyberMonday and CyberWeek aside, millions rely on the mobile purchasing channel, a preference that has revolutionized online commerce. Currently, mobile accounts for 40% of all e-commerce revenue and industry experts expect it to grow to 70% in just a few years. Today mobile apps are not just recommended for any e-commerce effort, but they are required for a retailer's survival. According to Google, "Not having a mobile optimized site is like closing your store one day each week."

Following up on research, we found that mobile apps deliver 2x user retention power, with new app users more likely to return within 30 days versus mobile web users. Also, app conversion rates are unmatched, closing the deal with consumers and delivering more efficient transactions than any other channel.

The client

To accomplish our goal, we decided we should build a mobile app for both iOS and Android.

Time is of the essence, so why spend it building for multiple platforms and writing in different languages with different codebases? We did our research, found a solution, and with Adobe's PhoneGap we solved this multiplatform-creation aspect by using one codebase for all platforms. PhoneGap framework is an open source distribution of Cordova that uses open web technologies to build mobile apps. The app runs inside a custom browser container, but the performance is great for our purpose.

When we first started our adventure, we needed a solid framework to handle all the data and operations. I do not want to start a framework war, but AngularJS is the most popular JavaScript framework in use today, is backed by Google, has over 53,000 stars on GitHub, and is forked by over 23,000 people. However, just because it's the biggest framework and it's backed by Google doesn't automatically mean it was the best for us. In our case, it had advantages over other JavaScript frameworks, including that it is a Model View Controller (MVC) framework, which gives us a good structure for the app. It also has "two-way data binding," so we can bind our models to the HTML elements, which means if any changes were made in the backend of the store they will be reflected in the app instantly. Templating with HTML was also a plus because doing so kept things simple and allowed designers and developers to work simultaneously.

For the UI we had several options from which to choose. Kendo UI could have been a good candidate because it was a stable framework at that time and had awesome performance and documentation, but it had one major drawback, it wasn't open source. Our first intention was to distribute this commercially. Paying a flat fee for every customer was a big drawback. We were left with choosing either the Sencha Touch or Ionic framework, both of which were very permissive and carried MIT licenses. During the process, Sencha changed their licensing model, and this gave us the push we needed to dive into Ionic. We ended up having to rewrite part of our modules and learned a big lesson about licensing, so be extra careful when choosing what you build your product with; it can shut you down before you even start.

Ionic is built to play nice with AngularJs. It extends Angular with a collection of components (complex lists, side menus, navigation, popover, modal, etc.) to make building the UI for mobile devices incredibly easy. This came really useful to us as we wanted to build a simple backbone for the app and customize it later for the needs of our customers to fit their look and feel.

Unfortunately, building our app with Ionic wasn't going to be just sugar and honey. When we started, Ionic was still in beta and we encountered different development issues. One of them was with scrolling performances. If it was a bigger store and had over 1,000 products per category, the loading time would take much longer, and also the scrolling was awful. Until the good people from Ionic fixed this issue we had to resort to loading only 10 products per page. They then introduced a new JS component collection-repeat, which allows an app to show huge lists of items much more performantly. It renders into the DOM only as many items as are currently visible. This means that on a phone screen that can fit eight items, only the eight items matching the current scroll position will be rendered.

With our app we also wanted to give the owners a new channel to maintain a closer relationship with their customers through push notifications, so we found and integrated into our own a service called OneSignal. It 100% free and can send unlimited notifications on unlimited devices. It also helps us to create personalized messages. The setup is straightforward and has many other features.

From the beginning, we wanted our app to be instantiated and integrated easily with all major e-commerce frameworks. To achieve that we built it incredibly modular so its setup would be easy even for a new developer who is merely familiar with Angular. We tried to replicate every feature of the e-commerce platform in our services for easy extension or modification.

Customizing the app to fit the aesthetics of different online stores is dependent on the developer's capabilities; he or she needs only to edit some HTML files and CSS classes.

The backend

In order to showcase our project's capabilities, we connected the demo instance to OpenCart, one of the big players in open source e-commerce. The integration was painless once we had set up an API for the platform. Remember that the focus of our project is not an integration to a particular e-commerce provider, but more on a general approach that can be integrated to any backend solution.

Looking towards the future

Our developer's roadmap for Tapitoo OpenCart is full and we are seeing a lot of buzz about it in the community. We want to do optimizations on the current app, enhance the UI and architecture, and maybe even do a spinoff project: Angular.js commerce. We hope our platform will get as much attention as possible, because we have made it truly functional, ready for production, and useful. At the time of writing, we had almost 60,000 page views in 13 days.

With these goals in mind, we expect talented developers to contribute to its development. Theme creators can also join and design beautiful themes for deploying to both iOS and Android. If you find bugs, please let us know in the issue tracker. Find us on GitHub.

Tags
User profile image.
3x failed entrepreneur. Neo4j certified developer and contributor. Interested in distributed computing, big data and A.I.

2 Comments

Tapitoo is crying out for a mobile control panel to allow traders who use e-commerce to do all the things they normally do either on a desktop or worse, forced to do by phone. Things like manual overrides, reverse payments, refunds. Stuff that makes the customer feel like you care because you did it straight away

I'm a mobile architect, or was in my last job. My opinion is that systems should be designed as mobile ONLY.

That means that mobile apps should be designed with all the functionality. There's nothing stopping desktop apps being built, but large screen estate and other resources make you lazy. Put your creative energies into making a mobile app so functional that the user never has to find a tethered device. Then do the desktop app after.

Trust me, I know it makes sense.

Can this be included as an Android Studio project?

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.