How to create a mobile application for your Woocommerce Online Shop

Woocommerce is a Wordpress plugin used to create an ecommerce shop and it is the most popular there is. Lots of ecommerce websites on the internet are powered by Woocommerce. However, one limitation that has confronted many online shop owners is, inability to extend their shop beyond the borders of their primary website url. Most of them would love to expand their coast by adding a mobile app, but just don't know how to go about it

Today I'm going to show you how to create a mobile app for your Woocommerce shop.
For this tutorial, we are going to build our mobile app using Xamarin.Forms . Xamarin is a crossplatform framework which allows you build an app that can run natively on Android, iOS and Windows. To learn more about Xamarin.Forms, visit https://www.xamarin.com/forms

If you are not familiar with Xamarin, , there's no need to worry. You can build your mobile app using any other language or platform. JAVA is a good choice too. IONIC and REACT NATIVE are also great hybrid platforms you can use.

The main idea is to understand the workings of the Woocommerce REST API and how to call and implement it anywhere. Once you can get a hold of how the Woocommerce API works, you can customize it to suit whatever need you have. The specifics of the mobile app is up to you!

Shall We Begin??!!

Woocommerce provides RESTful API service by default. You just need to enable it! Its that easy.
Head over to your wp-admin dashboard.
Hover over Woocommerce option and click on setting.
Now Click on the API tab and then check Enable the REST API then Save Changes
I'm assuming by now you already have woocommerce plugin installed and your shop set-up

Now, click on the next tab "Keys/Apps"
Add Key

Give your key a description, then select the "Read/Write" option in permissions then click Generate API Key

Make sure to copy the keys that will be generated immediately especially the secret key because after you exit that tab, you will not be able to view your consumer secret again unless you revoke that key and generate a new one.
and please remember to keep it secret always!

Now that you have your consumer key and secret, its always a good idea to test run and see if the API returns actual data from your website. There are so many tools you can use to test RESTful APIs. I am going to make use of Postman.
If you have postman, type in your API endpoint in this format

https://yourwebsiteurl/wc-api/v3/endpoint?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

eg
https://wikeplus.com/wc-api/v3/products?consumer_key=ck_1234567890123&consumer_secret=cs_1234567890123

Click send. You should see something like this

If you get a 401 error, or No response error, please cross check the url you are using, as well as the keys. One of them is wrong
Note that you can also make this API call from your normal browser, but for the sake of professionalism and the added features, tools like postman provide, I chose to use it

There are other ways to get this done too. You can use a basic Auth in Postman to test this out, taking the consumer_key as the username and the consumer_secret as the password. However, this usually results in some little errors (most pertaining to SSL and other advanced stuff). However, to put the keys directly into the url as parameters usually does the trick.

If you got a response like the one I got, great! You are halfway through.

Building Our Mobile App

Having tested and confirmed that the API is returning what we want it to, lets move on to build the app that'll make calls to this API and display our shop data as we like.

*If you are not familiar with xamarin, there's no need to worry, you'll get along quite alright. If you have basic idea of programming, then you're all good...All you need to do is make an API call to your Woocommerce website and manipulate the result as you like.

Steps

To create a xamarin.forms application, you need visual studio installed.
Click on File --> New --> Project
Click on Cross-Platform and then select Cross platform App(Xamarin) then give your app a name

Now select the following Blank app --> Xamarin.Forms --> Portable Class Library and click Ok

Models

For this app, we are going to work with only two Woocommerce endpoints which would be enough to get the point across. Create two models:
Product.cs and Order.cs
The Product model will look like this

    public class Product
    {
    public string title { get; set; }
    public int id { get; set; }
    public DateTime created_at { get; set; }
    public DateTime updated_at { get; set; }
    .
    .
    .
    }

Its pretty long because woocommerce api returns a large number of data when that endpoint is called. You can go through the code for this tutorial on github to see the complete model of the product API endpoint.
To see full list of all Woocommerce endpoints available, make a call to https://*yourwebsiteurl*/wc-api/v3/

Now for the main thing, the api call
We create a folder called Services and add a new class called WoocommerceAPI.cs

The class is implemented as follows:

class WoocommerceAPI
  {
      private static string website_url = "https://wikeplus.com";
      private static string consumer_key = "ck_1234567890XXXXXXXXXXXXXX";
      private static string consumer_secret = "cs_1234567890XXXXXXXXXXXXXX";
      private static string GetAllProductsApiUrl = string.Format("{0}/wc-api/v3/products?consumer_key=
      {1}&consumer_secret={2}",website_url, consumer_key, consumer_secret);
      private static string GetAllOrdersApiUrl = string.Format("{0}/wc-api/v3/orders?consumer_key={1}&consumer_secret=
      {2}",website_url, consumer_key, consumer_secret);
      public async Task<Products> GetAllProducts()
      {
          var httpClient = new HttpClient();            
          var response = await httpClient.GetAsync(GetAllProductsApiUrl);
          HttpContent content = response.Content;
          var json = await content.ReadAsStringAsync();
          var products = JsonConvert.DeserializeObject<Products>(json);
          return products;
      }
      public async Task<Orders> GetAllOrders()
      {
          var httpClient = new HttpClient();
          var response = await httpClient.GetAsync(GetAllOrdersApiUrl);
          HttpContent content = response.Content;
          var json = await content.ReadAsStringAsync();
          var orders = JsonConvert.DeserializeObject<Orders>(json);
          return orders;
      }
}

replace websiteurl, consumer_key and consumer_secret with your own information

Now to display the data returned from the API, we create an instance of this classs and call the appropraite method in our view.
This is how I called the API in my product.xaml.cs page

            var api = new WoocommerceAPI();
              var AllProducts = await api.GetAllProducts()

Here is the xaml that defines the view

 <StackLayout>
            <ListView x:Name="productsListView"
                      HasUnevenRows="True"                       
                  VerticalOptions="FillAndExpand"
                      SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Frame HasShadow="True" Margin="8">
                                    <StackLayout>
                                        <Label Text="{Binding title}" FontSize="Large"/>
                                        <Image Source="{Binding featured_src}"/>
                                        <Label Text="{Binding created_at , StringFormat='{0:dd/MM/yyyy}'}" FontSize="Small" FontAttributes="Italic"/>
                                        <Label Text="{Binding price , StringFormat='{0} Naira'}" TextColor="Red"/>
                                    </StackLayout>
                                </Frame>                       
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

and here is the result

Please pay no attention to the crappy UI; its meant only to be for tutorial purpose. You can modify your UI to be anything you want
Now to juxtapose the shop on the mobile app with the website, we find that the mobile app is distinct from the website in terms of UI. The essence of pointing this out is to show that once your API data has been fetched, you have total control over the presentation on any device.

I'm leaving a link to the project on github...If you have any questions or would love to make contributions, feel free to shoot!!

Gracias

---

Posted on Utopian.io - Rewarding Open Source Contributors

---