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.
2 Comments