Steps to build an Ionic APP from your dynamic php web site

Well, here you are , You have built a great business. For convenience, lets assume that your business makes vegan products. Very popular these days! You do a roaring online business. You have distributers in many countries. Wow things are buzzing along perfectly. But wait. There is one nagging issue. Your company does not have a mobile app. Admittedly, the WordPress website with its array of plugins is working admirably, but there have been a question or two about a mobile App, at least from the B2B community.

For example  Travis from Whole-ish Foods NM .
“It would be great to have an App that can scan bar codes and  create my order.
In addition:
It would make life in my storage warehouse a whole lot easier. Printed sheets make mistakes easy. So an App that works offline would be great.
It would be good to get Notifications about my order right on my mobile,
Also if I coild just reorder from the previous one with a few changes.”

Or Molly from Pro-meals SC
“My order changes all the time and your online system gets tedious. “

Or my own sales staff
“It would help us  to have access to sell sheets while offline”

Yes an app would help my B2B customers and it would make me more visible. Even my B2C customers can find ways to help them. Such as Notifications when a back-order is filled.

But It is so expensive and time-consuming to build an app. It has to work on the iPhone and on Android. Also, now I will have 3 different things to maintain. Oh boy,  the prospect is daunting!!!!!!

Lets stop. and take a step back.
You have a dynamic PHP website. That is half the battle won. To give you an overview of the process take a look at this image

 

It may look technical, but once an explanation is provided, it makes so much sense.

Let me explain
“Mobile middleware Custom Api” seems daunting but all that it translates to is a layer between your site “backends and platforms” and the world “Web and Mobile Clients”

So what this means in layman terms is : Create all your functionality using existing infrastructure and tools already in place.In the case of a WordPress site with WooCommerce integration, we would use the api to create all the data points that the app would use. For example the app would have access to al your products and for each client their account and order history. So we would start by creating lists of those as web service APIs. In other words, little tasks that run on your WordPress installation feeding data and interacting with your App.

Lets get a little technical.

Please check the Woo Commerce API documentation for more details. The samples below are just to illustrate the main points of the integration process.

Product List

One of the first things we are going to need in the App is a list of products. Well, there may  be huge numbers products, so we will build pagination to the api.

"yoursite/wc-api/v3/products?filter[limit]=25&filter[offset]="+offset;

That returns an array of products.

{
  "product": {
    "title": "Vegan Butter",
    "type": "simple",
    "regular_price": "21.99",
    "description": "yummmy.",
    "short_description": "Yum.",
    "categories": [
      1,
      2
    ],
    "images": [
      {
        "src": "http://example.com/wp-content/uploads/2015/01/premium-quality-front.jpg",
        "position": 0
      },
      {
        "src": "http://example.com/wp-content/uploads/2015/01/premium-quality-back.jpg",
        "position": 1
      }
    ]
  }
}

Next.  Build the product lister with infinite scroll in ionic (coming soon)