ClemenBykes MVP

[chrvn]

DEV ENV

1. Open your terminal.
2. Navigate to the directory that you want to store the repo in.
3. Run git clone [email protected]:elenaywang/valetbike.git to clone the repository at this link: https://github.com/elenaywang/valetbike
4. Run bundle install to install all necessary dependencies (which includes the devise and mapbox-gl-rails gems and more).
5. Run rake db:migrate to run migrations.
6. Populate the database by running the following commands:

rake db:import_stations["notes/station-data.csv"]	
rake db:import_bikes["notes/bike-data.csv"]

7. Run rails c to open the Rails console
8. Run Station.not_geocoded.each( |station| station.geocode && station.save! } to add the latitude and longitude values to the stations table
9. Run exit to close the Rails console
10. Run rails assets:precompile to precompile assets.

MVP FUNCTIONALITY

User Functionality:

Our MVP allows users to create accounts or sign in to existing accounts, and while signed in, users are able to edit their account information or cancel their accounts. The home/profile page contains buttons to views containing user-specific information and forms, such as rental history, payment, and account editing. Guest users (users who are not signed in) are unable to use the rental service or access specific views, such as the profile view or forms for creating/editing payment information. If an unauthenticated user attempts to access those resources, they will be prompted to sign in.

Rental Functionality:

Users are able to rent a bike from a specific station, and later return that bike to a specified station. They can return that bike from two different places across the site: from the current rental page and from the Rent Bike/Return Bike page. Upon renting a bike, a code is generated for the user to officially unlock the bike via kiosk. The total cost for and duration of the ride is calculated once the user has returned their bike. As mentioned above, rental history is also viewable. Each user may only have one rental at a time.

Map Functionality:

The interactive map augments rental functionality by providing users a visual for the stations we have around Nipmuc Notch. The view the map is displayed on additionally has a sidebar with detailed information on each of our stations, including the address and a record of how many bikes are currently docked at each station. This sidebar has buttons that direct users to the view for creating a new rental (if the user has a currently active rental, those buttons will instead take users to the view for returning a rental).

Payment Functionality:

Users are able to submit their credit card information through the button available on the user profile view, or when prompted when making a rental (if a user attempts to make a rental without recorded payment information, they are redirected to the payment creation form.) While our payment feature does not actually interact with a user's bank account, it contains validators to ensure the user is submitting valid credit card information on either the new or edit forms. Each user may only have one form of payment information at a time. Upon account cancellation, associated payment information is also destroyed for security reasons.

Authentication Functionality:

As mentioned, certain views are only available to logged in users. There are additional authenticators and redirects in place to prevent users from accessing information belonging to other users' accounts, or from accessing information about objects not associated with their account.

Informational Pages:

ClemenBykes features a page on our pricing model with a button that directs you to the map and list of stations for initiating a rental. The home page also contains a concise visual guide on how to use our service. We also have an About/FAQ through which users can learn more about the ClemenTeam and how our service works.

UI/UX:

Our website has a responsive and user-friendly UI. The navigation bar in the header maintains easy access to key features of ClemenBykes, and our views generally prioritize readability, usability and concision. We also have engaging and cohesive visuals/branding, and a distinctly playful personality throughout our website.

CHANGES MADE

User Accounts

We have added additional fields for user account information and implemented authentication checks for different features to ensure only logged in/appropriate users can access them. We have added a profile page for users to modify account or payment information and view rental history through.

Rental

Users can now return rentals. The cost of the rental is calculated based on duration upon its return and stored in the rental object. User's ability to set rental start time has been removed. Checkout and return dates and times have been made accurate. If there are 0 bikes at a station, users can't rent a bike from that station. In general, views related to the rental feature are more descriptive and user-friendly. If users have an active rental, the user profile page will display a button to view it.

Map

The map sidebar with station information is permanently displayed. In addition the number of bikes listed for each station will change when rentals are made and returned. The page conditionally changes between letting users either rent or return their bike depending on active rental status. Layout has been modified, and a map has been added to the overall website homepage. CSVs for stations and bikes have also been cleaned up.

Payment Functionality:

We have added a payment feature to our product and functionality for adding new payment and editing existing payment. New routes, forms, validators, and controller logic have been added to accommodate for this feature. This feature does not actually charge payments to users' bank accounts, but the cost of each rental is saved upon returning the bike in each rental object.

UI/Front-end

The website layout implements a CSS grid to make the website more responsive. We have also added hand-drawn images and animations created by team members. Many views also contain buttons to help users access other relevant pages (ex: user profile has buttons for editing account/payment info and seeing rental information). Forms have been standardized with a specific format. In general, website styling and visual direction has become more visually engaging, and CSS / JavaScript have been added when needed to individual and specific views.

Routes and Security

Routes have been added for the payment feature. We have implemented authenticators and redirects to prevent users and guests from accessing views they are not authorized to. Payment objects are also destroyed if their associated user account is canceled (rental history is maintained for comprehensive record keeping).

Informational Pages:

Additional information has been added to the homepage on how to unlock and return bikes. We have also added an FAQ/About page so users can learn more about the ClemenTeam and the ClemenBykes service.

Explore Page Pitch

We initially planned to implement a community-based feature where users could submit and rate their favorite trails to bike on, but we ran out of time and decided to focus on fully debugging our core features. We added a text description of our vision in the page that would've contained the Explore feature's homepage.

WALKTHROUGH

1. Start on the home page, which is the default page when loading the local server. Scroll up and down to view our mission statement and a quick visual guide as to how the rental system works.

At any point, clicking on our logo will return the user back to the home page.

2. Click on register in the navigation bar to create an account. After creating an account, you will automatically be logged in. Navigate to the profile page via 'My Profile' in the navigation bar. There, you can edit account information or cancel your account (and return back to Step modified to display number of docked bikes #1 of the walkthrough). You can also add payment information or view rental history.

If payment information does not already exist for your account, upon clicking 'Edit Payment' you will be taken to the new form to create a payment; otherwise you will be taken to the edit form.

3. Return to homepage. Clicking on the 'Start Now' button at the bottom of our mission statement or clicking on the 'Rent Bike' button in the navigation bar will take you to our map, which displays all our stations in Nipmuc Notch. Clicking on the map markers will render a pop up with station information. The left side of the screen also has a scrolling sidebar list of all stations and station information, with a button to rent a bike there and the number of bikes at each station.

If you have skipped steps and are not logged in or have not added payment information, then attempting to rent a bike will redirect you to the relevant forms for accomplishing those two actions.

4. Selecting a station to rent a bike from takes you to a page to confirm the rental. Confirm the rental. This will take you to the Current Rental page where it displays rental information, instructions on how to unlock your bike, and a button to return the bike when you are done riding.

You can also return your bike by returning to the map page. If you have an active rental, the buttons for renting a bike on the map page will instead give you the option to return the bike.

5. Return the bike either by choosing a station to return to on the map page (Return Bike in the navigation bar; defaults to the station you chose to return to) or by returning from the Current Rental page (defaults to the station you checked out from). Completing the return will display all rental information again, and a button to view your comprehensive rental history.

6. Click on 'Pricing' in the header to view our pricing model. The bottom of the page also has a button to go to the map page to select a station and initiate a rental.

7. Click on 'About' to read our team bio and view our FAQ. Click on each individual question on the FAQ to expand it and see our answer.