Making my first mobile app – Ideaal Catering

Hi All,

This will be a snapshot of an app I tried to make. We have a client running a woocommerce website – Ideaal Catering. And having a platform to have woocommerce to mobile app would be a good opportunity for our other clients. We have more than 5 clients on woocommerce and having this extra service would be a good experience.

Since this is my first app, we have decided to use Ionic Framework. It is basically wrapping a web browser into a mobile view. So technically this is not a native app. The language used is Angular.js in this framework. And it should work for both iOS and Android since it is basically just a web browser. But we have nothing to lose so we gave it a try.

Design

The design is very simple with home view of different product categories. BBQ pakketten, Grouppaketten, and so on. If you click on one category it will bring a new view with all the products from that category. When you click further to a category you will have the description and you can add it to the cart. Since it is made in angular, you will see that the total is updated once you add a product.

Mobile App with Ionic

You will also have the side menu with standard view. Some of the just simple views and some are contact form. This form is connected to the server which sends an email.

Data Flow

Woocommerce has an API of to pull their products. This is the first thing that I did. However, Woocommerce API works very slow – depending on the server. So we decided to move all the products to Firebase. From firebase, we pull the data to the app. This turns to be much more quicker. The main client website do not update their website nor they have a stock update. So this is working quite fine. In addition, I can also sync the Woocommerce to Firebase once a day should some products change. This app also send back via the API if someone made an order. Luckily this website has only payment on site. Otherwise we would need to figured out how to do the payment in App. Instead, the owner will get an email that there is a new order being made.

 

Result

Here you can see the gif of the results. If you download a legacy ionic viewer on your phone (App Store) and insert this ID: AC74D741, you can view it on your phone.

Mobile App with Ionic

Unfortunately, this app never made it to the App store or Google store. This is because there was a dispute for the cost between with owner. That is quite unfortunate but it was a nice experience for me nonetheless. Definitely, I can make an app for other Woocommerce websites.

Leave a Reply