uda-react-easy-api-integration v1.1.4

uda-react-easy-api-integration

uDA has developed Artificial Intelligence models of valuation, projection and prescription that allow best market decisions of investment/divestment. Big players can now maximize their yields according to their business models.

For this process, uDA platform automatically assign Value, Profitability, and Risk to a Real Estate asset; in a unique and documented way through 30 financial and 160 urban context indicators (KPIs) from more than 40 public and private Data Sources.

For most external processes, uDA uses its own REST API. However the API is getting complex and sometimes it can be hard to follow it.

The uda-react-easy-api-integration claims to be just a get started guide for them who are starting to dig down in the uDA API.

Integration demo here

Getting started

We use an integrated toolchain for the best user and developer experience which is Create React App. The toolchain recommended on this page don’t require configuration to get started and it works on macOS, Windows, and Linux.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Step 1. Creating an app

You’ll need to have Node >= 6 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app

yarn create is available in Yarn 0.25+

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

No configuration or complicated folder structures, just the files you need to build your app. Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Step 2. Install and Import the uDA library

Install the uDA library:

npm i uda-react-easy-api-integration

Go to the App.js file and import the uDA library:

import {UdaSearchBox, UdaMap, UdaDataBox, UdaReport} from 'uda-react-easy-api-integration';

Step 3. Define specifics properties

Add these properties into the App.js file:

const defaultFilters = {
  operation: 1,
  property_type: 4,
  construction_type: 2,
  rooms: 3,
  energy_cert: 1, 
  storage: 0, 
  garage: 0,
  pool: 0,
  ac: 1,
  elevator: 1,
  outside: 0,
  agency: 1,
  bathrooms: 1,
  floor: 5,
  common_zones: 1,
  orientation_north: 1,
  orientation_south: 1,
  orientation_east: 1,
  orientation_west: 1,
  status: 5,
  lat: 40.429185,
  lon: -3.693834
};

const stylesMap = {
  height: '350px',
  minWidth: '320px',
  maxWidth: '100%',
  zIndex: 1
};

const buttonStyles = {
  textColor: '#FFF',
  background: '#CA1C24',
  borderColor: '#B7BCC6',
  borderWeight: '3px',
  borderRadius: '20px'
}

Step 4. Include initial state and props propagation functions

Also in App.js

constructor(props) {
  super(props);
  this.state = {
    loc: { lat: 40.429185, lon: -3.693834, zoom: 18 },
    showPOI: true,
    assetFilters: defaultFilters,
    showPOI: false,
    assetID: null
  };
}

onCoordinatesChange = (lat, lon, address, token, isCatastro, area) => {
    if(lat && lon) {
      this.setState({ 
        token: token,
        showPOI: true,
        loc: {lat: lat, lon: lon, zoom: 18},
        assetFilters: {...defaultFilters, 
                        address: address, 
                        lat: lat, 
                        lon: lon, 
                        area: (isCatastro ? area : 90)
                      }
      });
    } else {
      this.setState({
        token: null,
        assetFilters: null,
        showPOI: false,
        loc: {lat: 40.429185, lon: -3.693834, zoom: 18}
      });
    }
  }

  getAssetID = (id) => {
    this.setState({assetID: id});
  }

Step 5. Modify the App renderization

<div className="App">
  <header className="App-header">
    <div className="headerLayer">
      uDA Components - Demo
    </div>
  </header>
  <div className="content">
    <div>
      <div className="topContainers">
        <UdaSearchBox
          credentials={{ user: "Your uDA user here", password: "Your uDA password here" }}
          showCoordinates={this.onCoordinatesChange}
        />
      </div>
      <div className="topContainers">
        <UdaDataBox
          background={'#EEE'}
          assetFilters={this.state.assetFilters}
          token={this.state.token}
          portfolio={555}
          assetID={this.getAssetID}
        />
      </div>
    </div>
    <div>
      <UdaMap styles={stylesMap} coordinates={this.state.loc} data={{ address: "" }} showPOI={this.state.showPOI} />
    </div>
    {
      this.state.token &&
        <UdaReport
          buttonText={"Generar"}
          buttonStyles={buttonStyles}
          token={this.state.token}
          assetID={this.state.assetID}
        />
    }
  </div>
</div>

Step 6. Include leaflet statics libraries

Add the code below in the public/index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
    crossorigin=""></script>

That is. Happy coding!!