## Glide Tutorial

The guide below will walk you through creating the ride link application

## Set Up The Database (Glide Tables)

The foundation of the app will be a set of tables to store **users**, **rides** and **ride requests**.

Select the data tab at the top of the window, then click the plus button to add the following tables:

> To add a new column click the plus sign on the right

#### **Users** - To store basic user info.
- This table already exisits so we will modify it slightly
- Add a column called **UserID**. The type should be **Row ID**, this can be found by searching

#### **Rides** - To store each carpool ride offered by a driver.

| Column Name | Type |
|:-------------- | ----------- |
| RideID | Row ID |
| DriverName | Text |
| From | Text |
| To | Text |
| DepartureTime | Date & Time |
| SeatsAvailable | Number |

Each time a driver posts a ride, a new row will be added here with all the details. The DriverName field links the ride to who offered it.

#### **Requests** - To store ride requests from riders

| Column Name | Type |
|:------------------------------------------------------------------ | ------ |
| RequestID | Row ID |
| RideID (This links to the ride being requested in the rides table) | Text |
| RiderName | Text |
| SeatsRequested | Number |
| Status | Text |

Each time a rider requests a spot on a ride, we'll add a new row here. The **RideID** ties the request to a specific ride posting and the **RiderName** identifies who made the request. The **Status** will be update by the driver to **Approved** or **Declined** and will initially be set to **Pending** when a request is created.

#### Add relationships

Adding relation ships allows us to view and manipulate related data in the application screens

| Table Name | Relation Name | Relate to value | Matches value |
|:-------------- | ------------- | --------------- | -------------- |
| Rides | RideDriver | DriverName | Users > Name |
| Rides | RideRequest | RideId | Requests > RideID |
| Requests | RequestRide | RideID | Rides > RideID |
| Requests | RequestRider | RiderName | Users > Name |

---
---

## Adding the screens

As we want to keep things simple, we'll let users decide if they want to act as a Driver or Rider within the app itself

To achevie this, we'll have two tabs. One for Drivers to "Offer a ride" and one for Riders to "Find a Ride"

- Select the Layout tab at the top of the window
- In the Navigation section on the left, delete the existing screen by right clicking it then selecting delete

Follow the steps below to add a screen:
- Click the plus button to add a new screen, select custom screen
- In the panel on the right, change the label to your desired name
- Next to the label change the icon to your desired icon

Follow the steps above to create two screens:
- Drive
- Ride

---
---

## Building the Driver Interface: Posting & Managing Rides

On the Driver tab(screen), we'll create features that let a driver post new ride offers and review incoming ride requests

### Ride Posting Form

Drivers need a form to submit new rides. Once submitted this will update the rides table we creted earlier.

#### Set up the form
Follow the steps below to create the form.

> Make sure you are on the **Drive** screen. You can get to it by either selecting it in the navigation on the left or in the tab bar on the virtual phone.

- Click the plus button in the components section at the bottom left
- In the search bar, enter **Form**
- Drag the **Form Container** component, into the component section in the left
- Select the Form Container compoenet on the left
- In the menu on the right, make the following changes
- Set the **target table** to **Rides**
- In the *design section*, set the background to card
- In the *Additional Colum section*, click in the text box, hover over **User profile**, then select name
- This will automatically retrive the logged in users name to add as the driver name
- In the *After submit action section* click the button, in the message box add the text "Successfully posted a ride!"
- This will show a notifcation with the message

#### Add the fields

Now the form is set up, we can update the input fields on the form to collect the data required for posting a ride.

- In the components section on the left select the title. On the right, change the title to "Post a Ride"
- In the components section on the right, delete the *DriverName* text entry field
- For each of the remaining components update:

| Component | Required | Placeholder | Min | Max |
|:-------------- | -------- | ----------------------- | --- | --- |
| From | Yes | Enter pickup location | | |
| To | Yes | Enter drop-off location | | |
| DepartureTime | Yes | | | |
| SeatsAvailable | Yes | Enter available seats | 1 | 4 |

### Now users can post rides. Test it out an take a look at the ride table

---
---

## Building the Rider Interface: Display Available Rides

Now switch to the rider tab/screen. This is where users looking for a ride can browse available carpool rides and send a request to join

### Display available rides

- Add a container component to the screen
- Add two more components, a **text** and **list** components
- Drag the two components into the container component. There should be a slight indent to show these are nested in the container component
- Select the container component in the component tree on the left, then on the right, set the background to card
- Select the text component on the left, then on the right set the style to *headline medium* and change the text to *Request a ride*
- Select the collection

### Update the available rides display

Select the Collection component on the left. Then in the section on the right, update the following:
- In the *Items Data* section, clear the value from the image text box
- In the title box, clear the contents, click the menu button (4 dots on the right), then select *DriverName*
- After DriverName, add the text *Is Going To*
- Click the menu button again, then select *To*
- Now in the same way, update the description so that the text displayed looks like this: **Pickup at** *[from]* **at** *[DepartureTime]*
- Update the Meta so it displays the numner of seats available

### Request a ride

Now that we can see available rides, users need to be able to request a ride.

Make sure you are on the ride screen, you should see an available ride. If there aren't any, go back to the drive screen, create a ride then come back to the ride screen.

- In the app, click on the ride that is displayed, this will take us to the ride detail screen.

You can modify this screen to display any information related to the available ride in the same way we did previously.

We will just add a button here that will let the users request a spot on this ride.

- In the components section on the left, add a button
- Ensure the button is selected then click the options tab in the window on the right

Here we can add some conditions that determine when the button is visible. We should add two conditions here

- DriverName is not User Profile > name
- A user should not be able to request a spot on their own ride
- Seats available is greater than zero

After doing this, the button should disapper. Create a new user, and switch to them by using the user dropdown. The button should re-appear

### Request a ride workflow

- Select the button in the component list
- Click the action button on the right
- Change the title to **request a ride**
- Click the "show notification" dropdown, hover over workflow, then select create a new workflow

In the workflow creation screen we want to do the following:
- Rename the workflow to "Request a ride"

Actions can be added by hovering over the existing action "show notification", then clicking the circle that appears. We need to add 3 actions that do the following:
- Add a row to the requests table, with the correct information
- Send a success notification
- Navigate back to the ride tab

### Now users can request a seat in a posted ride

---
---

## Building out the rest of the application

Now use what we've covered to try and build out the next feature, accepting ride requests.