Using the fauxton client with Bingo MVC and ReactJS

My last post was an introduction to the Bingo MVC; this one is somewhat similar. The gist of this piece is using the Fauxton client library with the aforementioned framework. Couch DB, a NoSQL database the web interface for which is Fauxton, is an interesting back-end tool with a RESTful API. The Fauxton client is simply a library the purpose of which is making interactions with Couch DB a lot easier — the API calls are neatly abstracted into well crystallized functions which are, accessible to those who intend to use them.

The app showcased in the subsequent text is one that allows for entry and retrieval of sports information documents in stored in a sports database.

The first step in the build process is, of course, installing the Bingo Framework. Adding the fauxton-client package to your composer.json file for installation via Composer, comes next.

"chemem/fauxton-client": "dev-master"

Next, edit the Configuration file in the App directory of your project by adding your CouchDB access information.

const DB_NAME = 'nba_info';
const DB_USER = '<couch-db-username>';
const DB_PASS = '<couch-db-password>';
const DB_HOST = '<couch-db-url>'; //default is http://localhost:5984

Proceed to create the database nba _info using the Fauxton interface and then, add the fauxton-client library to the Bingo package dependency container. Also, add a route for the controller.

$router->inject('CouchDb', function ($c) {
  $db = new \Chemem\Fauxton\DatabaseActions;
  $doc = new \Chemem\Fauxton\DocumentActions;
  $doc::setReturnType(false); //returns a decoded JSON strings
  $db->useFauxtonLogin(\App\Config::DB_USER, \App\Config::DB_PASS);
  return new \App\Models\Basketball($db, $doc, $qb, $queries);
});
$router->addRoute('nba', [
  'controller' => 'Basketball',
  'action' => 'index'
]);

Since the appropriate Basketball model for interacting with the desired database will not create itself, fashioning a Basketball.php model file to reflect the code shown below is the logical next step in the creation of our simple application.

<?php
namespace App\Models;
final class Basketball
{
  protected $db;
  
  protected $doc;
  public function __construct($db, $doc)
  {
    $this->db = $db;
    $this->doc = $doc;
  }
  public function getAllDocs()
  {
    $rows = $this->doc->showAllDocuments(Config::DB_NAME)->rows;
    $keys = [];
    for ($x = 0; $x < count($rows); $x++) {
      $keys[$x] = $rows[$x]->key;
    }
    return $this->doc->getDocsByKey(
      Config::DB_NAME, 
      ['keys' => $keys]
    );
  }
  public function createDoc(array $doc)
  {
    $id = $this->doc->generateId()->uuids[0];//unique id
    return $this->doc->createDocument($id, Config::DB_NAME, $doc);
  }
}

JavaScript, CSS and HTML markup are the front-end components for this application the specific files for which are available on GitHub. The JS file, in particular, is a ReactJS implementation with no JSX, an approach I find quite fulfilling though Sisyphean in some respects. Go ahead and create the main.css, react-main.js as well as the basketball.html files to add a face to the data.

Finally, open the application in your browser — it will look a lot like this:

The interface for the application.