How to create a mobile application for your Woocommerce Online Shop
utopian-io·@johnesan·
0.000 HBDHow 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*
.png)
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**
.png)
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!*
.png)
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](https://www.getpostman.com/).
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](https://www.visualstudio.com/) installed.
Click on **File --> New --> Project**
Click on **Cross-Platform and then select Cross platform App(Xamarin) then give your app a name**
.png)
Now select the following **Blank app --> Xamarin.Forms --> Portable Class Library** and click Ok
.png)
### 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/`
.png)
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. .png)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](https://github.com/Johnesan/Woocommerce-Mobile-App)...If you have any questions or would love to make contributions, feel free to shoot!!**
*Gracias*
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@johnesan/how-to-create-a-mobile-application-for-your-woocommerce-online-shop">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>