Creating a FFXIV Market Board Application

So last week I was watching a video on how to earn gil (the currency used in FFXIV).

Apparently the gist of it is to buy items from the Material Supplier found in major cities and your house (if you’re lucky / wealthy enough to have one).

So as I was watching the video I was thinking that there must be a better way to figure out what items to sell then to manually go through each items listings.

Programming a solution

I figured that as with most games there must be an API I could work with to get the vendor items and their market prices from the API.

After some research I discovered that XIVAPI existed. Great deal of documentation but at the time the market prices API wasn’t working. Luckily the folks over on their Discord were insanely helpful! They even implemented an endpoint method that allowed me to pull multiple items from the market board so I don’t have to make an insane amount of calls to their API!

Learning to dynamically load data into a bootstrap table

Since I’m horrible at CSS and creating good designs I usually opt to use a bootstrap theme as a starting point and get the different pieces of HTML from there. Only this time I had to figure out a way to dynamically load data without creating templates and using jQuery to append this each time.

And yet again the people on Discord were very helpful! They suggested I try to use vue.js. As I had never used this before I do what I always do, find some practical examples I could work of.

I couldn’t quite find what I was looking for and I wasn’t sure how their framework worked at all without going through all of their documentation step for step.

Miracle strikes, bootstrap-vue.js!

It was then when I struck gold, I had found bootstrap-vue.js! I quickly dove in and found some working examples, I had some issues getting data to show the way I wanted but yet again I’m saved by the lovely people from the bootstrap-vue Discord!

I love bootstrap-vue.js, there’s just so many things that work out of the box as long as you supply it with correct JSON data. But I sure still have many things to learn about using bootstrap-vue.js.

How to analyze the market

Another issue I had to tackle was how I was going to interpret the data available on the market. How do you derive what is valuable and what is a good investment?

I ended up making 2 “artificial columns” with some formula to determine what could be a good investment.

The first one was “Time To Sell” which was hard to do given I had limited data (I by default only get 50 history listings and I wanted to keep this a pure clientside application).

What I did was assign points based on shorter periods between sale dates and apply the following formula:

salePoints = Math.log(Math.sqrt(Math.round(salePoints / historyAmount))).toFixed(2);

I also made sure to specifically exclude HQ quality items from these since you can’t buy those from a vendor (well maybe if you got the specific crafting class fully leveled).

The second one was “Profit” even though the more correct term is possible profit but I had limited header space if I wanted to have the table look smooth.

This one was rather easy, I just calculated the average sale price by summing all the sales (minus the HQ items) and then dividing it by the amount of sales (minus HQ yet again) and then subtract the vendor buy price from it.

Conclusions and final thoughts

I enjoyed dabbling into the XIVAPI and thinking about how to calculate profit, I also managed to learn about bootstrap-vue.js which I surely might use again in the future.

Click here if you guys want to check this out for yourself and the Github Repo over here.

I hope you guys enjoyed my writeup, I sure did 🙂
Love you all, Zeffuro