Writing your First JavaScript Vue.js App for Petro.ai

Getting Petro.ai installed can be an exciting time and open quite a few doors for development, especially when it comes to JavaScript apps. Custom applications become a cinch using the API. In the coming weeks I'll be putting together some simple applications that you can make on top of the Petro.ai platform. We'll be using an assortment of languages to communicate with the Petro.ai API so feel free to ask for an example.

Here is the HTML

    Hello, Wells!

And the JavaScript (Vue.js)

    Vue.component("blog-post", {
  props: ["title"],
  template: "{{ title }}",
});

new Vue({
  el: "#hello-wells",
  data: {
    wells: [],
  },
  created: function () {
    var vm = this;
    // Fetch our array of documents from the Petro.ai wells collection
    fetch("http:///api/Wells?Limit=10")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        vm.wells = data["data"];
      });
  },
});

And poof! We've called the first 10 wells from the Petro.ai wells collection:

Hello, Wells!

    DEJOUR WOODRUSH B-B100-E/094-H-01
BLACK SWAN HZ NIG CREEK B-A007-G/094-H-04
BLACK SWAN HZ NIG CREEK B- 007-G/094-H-04
BLACK SWAN HZ NIG CREEK B-G007-G/094-H-04
BLACK SWAN HZ NIG CREEK B-E007-G/094-H-04
BLACK SWAN HZ NIG CREEK B-D007-G/094-H-04
BLACK SWAN HZ NIG CREEK B-C007-G/094-H-04
ZEAL 4-25-46-26
PEYTO WHHORSE 4-9-49-15
BLACK SWAN HZ NIG CREEK A- 096-C/094-H-04

What's going on here is that the app is pulling directly from the Petro.ai server asynchronously. In the coming weeks, I'll show how we can create reactive JavaScript applications that will update from the Petro.ai server so that we can watch things like rigdata or real-time production data. This data was provided by GeoLogic and we'll be setting up a public Petro.ai instance for everyone to develop against.