API Tutorial

Overview of the Golfbert API

Golfbert is a powerful golf GPS API that provides access to a wide range of golf course data,including course details, scorecards, and hole information. By leveraging Golfbert API, we cancreate a seamless experience for users looking to manage their golf courses, keep scores, andnavigate holes with ease.

Overview of the React App with Google Maps

We will build a React app that fetches and displays data from the Golfbert API and integratesGoogle Maps to render the locations of holes on the selected golf course. The app will have aresponsive design and provide a seamless user experience across various devices.

App Functionality and Features

• Make API requests to Golfbert and display course data
• Search and filter golf courses
• Show scorecards with basic scorekeeping functionality
• Render hole locations on Google Maps with navigation

Prerequisites

Before starting this tutorial, make sure you have the following:

1. Basic knowledge of JavaScript, React, and Google Maps API
2. Node.js and npm installed on your system
3. A valid Google Maps API key
4. A Golfbert API key

With these prerequisites in place, let's get started on building our Golf Course Management ReactApp!

A. Create a new React project using Create React App

To begin, open your terminal and run the following command to create a new React project usingCreate React App:

npx create-react-app golf-course-management

Once the project is created, navigate to the project folder:

cd golf-course-management

B. Install necessary packages

Next, we will install the necessary packages for our project. We will need Axios for API requests,React Tabs for the tabbed interface, and React Google Maps for rendering maps.

Run the following commands to install these packages:

npm install axios
npm install react-tabs
npm install @react-google-maps/api
npm install aws4
npm install isomorphic-unfetch
npm install querystring

C. Update the App component

Now that we have all the required packages installed, let's update the src/App.js file to match theprovided App component:

Import the necessary components and styles:

import React from 'react';
import './Style/App.css';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import Courses from './Pages/Courses';
import Scorecard from './Pages/Scorecard';
import Hole from './Pages/Hole';

Replace the existing App component with the provided one:

function App() {
    return (
        <div className="App">
            <Tabs style={{ paddingTop: 25 }}>
                <TabList>
                    <Tab>First Request</Tab>
                </TabList>
                
                <TabPanel>
                    <p>healthy</p>
                </TabPanel>
            </Tabs>
        </div>
    );
}

export default App;

With the development environment set up, we can now proceed to build our Golf CourseManagement React App.

A. Initialize the Class and Constructor

Create a new folder named lib inside the src directory. Then, create a new file named Golfbert.js inside the lib folder.

Start by importing the necessary libraries at the top of the file:

import aws4 from 'aws4';
import fetch from 'isomorphic-unfetch';
import querystring from 'querystring';

Next, create the Golfbert class and initialize the constructor. The constructor should accept aconfiguration object that contains the API key, AWS access key, AWS secret key, API host, and AWSregion:

class Golfbert {
    constructor(config) {
        this.apiKey = config.apiKey;
        this.accessKey = config.accessKey;
        this.secretKey = config.secretKey;
        this.host = 'api.golfbert.com';
        this.region = config.region || 'us-east-1';
    }
}

B. Implement the Request Method

Add a request() method to the Golfbert class. This method is responsible for making APIrequests to the Golfbert API. It should take an options object as an argument that includes detailslike the HTTP method, path, and any additional headers. Use the aws4.sign() method to sign therequest using the provided AWS keys and the fetch() method to make the request:

request(options) {
    const url = `https://${this.host}${options.path}`;
    const config = aws4.sign(
        {
            ...options,
            service: 'execute-api',
            region: this.region,
            host: this.host,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'x-api-key': this.apiKey,
            },
        }, 
        { 
            accessKeyId: this.accessKey,
            secretAccessKey: this.secretKey,
        }
    );
    
    return fetch(url, config).then((res) => {
        if (res.ok) {
            return res.json();
        }
        
        const error = new Error(res.statusText);
        error.response = res;
        
        throw error;
    });
}

C. Add a Status Method

As an example of how to use the request() method, add a status() method to the Golfbert class.This method sends a GET request to the /status endpoint of the Golfbert API:

status() {
    return this.request({
        method: 'GET',
        path: `/status`,
    });
}

D. Export the Class

Finally, export the Golfbert class at the end of the file so it can be used in other parts of yourproject:

export default Golfbert;

Now that you have created the Golfbert class, you can use it in your project to simplify interactionswith the Golfbert API. Just import the class in the components where you need to make API callsand initialize a new instance with your API key, AWS access key, and AWS secret key.

A. First Request

The First Request tab will demonstrate how to make a basic API request to the Golfbert API usingthe provided Golfbert class and display the response data. We will create a new FirstRequestcomponent and incorporate it into our App component.

Integrating the Golfbert class into the project: Create a new folder named lib inside the srcdirectory. Then, create a new file named Golfbert.js inside the lib folder and add the providedGolfbert class code.

Creating the FirstRequest component:

Create a new folder named Pages inside the src directory, if it doesn't already exist. Then, createa new file named FirstRequest.js inside the Pages folder and add the following code:

import React, { useState, useEffect } from 'react';
import Golfbert from '../lib/Golfbert';

const FirstRequest = () => {
    const [data, setData] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            try {
                const golfbert = new Golfbert({
                    apiKey: 'your_golfbert_api_key',
                    accessKey: 'your_aws_access_key',
                    secretKey: 'your_aws_secret_key', 
                });
                const response = await golfbert.status();
                setData(response);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        
        fetchData();
    }, []);
    
    return (
        <div>
            <h2>First Request</h2>
                {data ? (
                    <pre>{JSON.stringify(data, null, 2)}</pre>
                ) : (
                    <p>Loading data...</p>
                )}
        </div>
    );
};

export default FirstRequest;

Make sure to replace your_golfbert_api_key, your_aws_access_key, and your_aws_secret_keywith your actual Golfbert API key, AWS access key, and AWS secret key.

Integrating the FirstRequest component into the App component: Open the src/App.js file andimport the FirstRequest component at the top:

import FirstRequest from './Pages/FirstRequest';

Then, replace the <p>healthy</p> line inside the first <TabPanel> with the <FirstRequest /> component:

<TabPanel>
    <FirstRequest />
</TabPanel>

Now, when you run the app and navigate to the First Request tab, it should display the data fetchedfrom the Golfbert API using the Golfbert class. If there are any issues, the console will display anerror message.

A. Import Dependencies and Initialize the Component

Start by importing the necessary dependencies at the top of the file, such as React, useEffect, andthe Golfbert class:

import React, { useEffect } from 'react';
import Golfbert from '../lib/Golfbert';

Next, initialize the Course functional component:

function Course(props) {
    // ...
}

B. Manage State with React Hooks

Use the useState hook to manage the state of the component. Declare two state variables:searchText for the search input value, and courses to store the fetched course data:

let [searchText, setSearchText] = React.useState('');
let [courses, setCourses] = React.useState([]);

C. Fetch Course Data

Use the useEffect hook to fetch course data when the component mounts:

useEffect(() => {
    getCourses();
}, []);

Define the getCourses function, which initializes a new Golfbert instance and calls the getCourses()method with the search parameters:

const getCourses = () => {
    const golfbert = new Golfbert({
        apiKey: 'your_golfbert_api_key',
        accessKey: 'your_aws_access_key',
        secretKey: 'your_aws_secret_key',
    });
    
    golfbert
        .getCourses({ name: searchText, limit: 10, offset: 0 })
        .then((data) => {
            setCourses(data.resources);
        })
        .catch((err) => console.error(err));
    };

Remember to replace 'your_golfbert_api_key', 'your_aws_access_key', and 'your_aws_secret_key' with your actual keys.

D. Render the Component

Render the search input, search button, and course data in a table:

return (
    <div className="course" style={{ margin: '25px' }}>
        <div style={{ margin: '25px' }}>
            <input
                type="search"
                placeholder="Search"
                value={searchText}
                onChange={(e) => setSearchText(e.currentTarget.value)}
            />
            <button onClick={getCourses}>Search</button>
        </div>
        <table id="courses"> 
            <thead>
                <tr>
                    <th>id</th>
                    <th>Course Name</th>
                    <th>Phone Number</th>
                    <th>Street</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Zip</th>
                    <th>Country</th>
                    <th>lat</th>
                    <th>long</th>
                </tr>
            </thead>
            <tbody>
                {courses.map((course, index) => (
                    <tr key={index}>
                        <td>{course.id}</td>
                        <td>{course.name}</td>
                        <td>{course.phonenumber}</td>
                        <td>{course.address.street}</td>
                        <td>{course.address.city}</td>
                        <td>{course.address.state}</td>
                        <td>{course.address.zip}</td>
                        <td>{course.address.country}</td>
                        <td>{course.coordinates.lat}</td>
                        <td>{course.coordinates.long}</td>
                    </tr>
                ))}
            </tbody> 
        </table>
    </div>

E. Adding the getCourses Method to the Golfbert Class

Before we can use the getCourses method in our Course component, we need to add it to theGolfbert class. Open the Golfbert.js file and add the following method to the class:

getCourses(options) {
    const qs = options ? '?' + querystring.stringify(options) : '';
    
    return this.request({
        method: 'GET',
        path: `/v1/courses${qs}`
    });
}

This method accepts a params object containing query parameters for the API request, such as thecourse name, limit, and offset. It then converts the parameters into a query string and sends a GET request to the /courses endpoint.

F. Integrating the Course Component into the Main App

Now that we have implemented the Course component, it's time to integrate it into the main Appcomponent. Replace the Courses import statement in the App.js file with the new Coursecomponent:

import Course from './Pages/Course';

Then, update the corresponding <TabPanel> to render the Course component instead of theCourses component:

<TabPanel>
    <Course />
</TabPanel>

G. Testing the Application

At this point, your application should be fully functional. To test it, start your development serverwith npm start or yarn start, and open your browser to http://localhost:3000. You shouldsee the application with four tabs: "First Request," "Course List," "Scorecard," and "Hole."

Click on the "Course List" tab, and you should see a search input and a "Search" button. Enter acourse name or leave the input blank to fetch all courses, and click the "Search" button. Thefetched course data should appear in a table below the search input.

Now that you have successfully built a sample React app that integrates with the Golfbert API and displays course data, you can continue to expand your application by implementing the"Scorecard" and "Hole" tabs, utilizing additional Golfbert API endpoints, and adding more featuresto create a comprehensive golf application.

Step 1: Add getCourseScorecardById method to Golfbert class

Before proceeding with the creation of the Scorecard component, you'll need to add a new methodto the Golfbert class in the lib/Golfbert.js file. This method is used to fetch the coursescorecard by ID.

Open the lib/Golfbert.js file and add the following method to the Golfbert class:

getCourseScorecardById(id) {
    return this.request({
        method: 'GET',
        path: `/v1/courses/${id}/scorecard`
    });
}

Now that you've added the getCourseScorecardById method to the Golfbert class, you canproceed with creating the Scorecard component.

Step 2: Create a new file and import necessary libraries and components

First, create a new file named Scorecard.js inside the Pages directory of your project.

Next, import the required libraries and components at the beginning of the Scorecard.js file:

import React, { useEffect } from 'react';
import Golfbert from '../lib/Golfbert';

Step 3: Create the Scorecard function component

Define a new function component named Scorecard that takes props as its argument:

function Scorecard(props) {
    // ...
}

Step 4: Initialize state

Inside the Scorecard component, initialize the state using React.useState for searchText, courses,teeboxColors, and scorecard:

let [searchText, setSearchText] = React.useState(18813);
let [courses, setCourses] = React.useState([]);
let [teeboxColors, setTeeboxColors] = React.useState([]);
const holes = Array.from({ length: 18 }, (_, index) => index + 1);
let [scorecard, setScorecard] = React.useState([]);

Step 5: Fetch courses on page load

Use the useEffect hook to call the getCourses function when the component mounts:

useEffect(() => {
    getCourses();
}, []);

Step 6: Define the getCourses function

Create a function named getCourses that fetches the course scorecard by ID using the Golfbertlibrary:

const getCourses = () => {
    // ...
}

Inside this function, create a new instance of Golfbert with your API key, access key, and secret key.Call the getCourseScorecardById method with the searchText state as an argument. Then, processthe received data to extract unique tee box colors and create the scorecard array. Finally, updatethe teeboxColors and scorecard state variables:

setTeeboxColors([]);
setScorecard([]);
const golfbert = new Golfbert({
    apiKey: 'your_api_key',
    accessKey: 'your_access_key',
    secretKey: 'your_secret_key',
});
golfbert
.getCourseScorecardById(searchText)
.then((data) => {
    console.log(data)
    
    // Get colors
    let colors = data.holeteeboxes.map((teebox) => { return teebox.color; })
    const uniqueColors = [...new Set(Object.values(colors))];
    
    setTeeboxColors(uniqueColors);
    
    // Get scorecard
    let scorecard = data.holeteeboxes
        .map((hole) => {
            return hole
        }) 
        .sort((a, b) => a.holenumber - b.holenumber)
        
    setScorecard(scorecard);
})
.catch((err) => console.error(err));

Step 7: Define the getHoleDistance function

Create a function named getHoleDistance that takes color and holeNumber as its arguments. Thisfunction returns the distance of a hole based on the provided tee box color and hole number:

// function to get hole distance based on color and hole number
const getHoleDistance = (color, holeNumber) => {
    const matchingHoles = scorecard.filter(hole => hole.color === color && hole.holenumb
    
    if (matchingHoles.length === 0) {
        // no holes match the given color and hole number
        return '-';
    } else {
        // only one hole matches the given color and hole number
        return matchingHoles[0].length; 
        }
    }

Step 8: Return the JSX for the Scorecard component

In the return statement of the Scorecard component, render a search input field, a search button,and a table to display the course scorecard:

return (
    <div className="course" style={{margin: '25px'}}>
        <div style={{margin: '25px'}}>
            <input type="search" placeholder="Course Id" value={searchText} onChange={ e =
            <button onClick={getCourses}>Search</button>
        </div>
        <table id="courses">
            <thead>
                <tr>
                    <th>Hole</th>
                    {holes.map(hole => (
                        <th key={hole}>{hole}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {teeboxColors.map(color => (
                    <tr key={color}>
                        <td>{color}</td>
                        {holes.map(hole => (
                            <td key={hole}>{getHoleDistance(color, hole)}</td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
);

Step 9: Export the Scorecard component

Export the Scorecard component so it can be used in other parts of your application:

export default Scorecard;

With these steps, you have successfully created a Scorecard.

Step 10: Import and display the Scorecard component in App.js

Now that you've created the Scorecard component, you need to import it into your App.js fileand display it inside a TabPanel.

Open the App.js file and add the following import statement at the beginning of the file:

import Scorecard from './pages/Scorecard';

Next, find the place where you want to display the Scorecard component and add it inside a TabPanel:

    <TabPanel>
        <Scorecard />
    </TabPanel>

With these changes, your Scorecard component will be displayed inside the specified TabPanel inyour application.