Now we will call the API using AJAX, from a front end application. We will create this front end application using Rails. In practice, Rails is not used to create front ends. Instead, a front end framework such as React is used. This lesson explains how it works, without requiring that you know React. However, this lesson does require knowledge of javascript, in particular to access and manipulate the DOM and to access APIs using fetch().
As the previous lesson was a long one, this lesson is optional, but it will help you understand how front end applications access a Rails API.
There are several steps needed to get ready.
The Starter AJAX Application
Fork and clone the following git repository for the ajax sample application here. This sample application is fully functional but limited. You need to run bundle install and yarn install as usual. Now you start BOTH the the rest and the the ajax sample applications, but you start them on different ports. You will need two command line windows open, or if running vagrant, two vagrant ssh sessions. You start the rest application using:
bin/rails s -p 3001Or, if you are running vagrant:
bin/rails s -b 0.0.0.0 -p 3001For the ajax sample application, you let it default to use port 3000:
bin/rails sor if you are running vagrant:
bin/rails s -b 0.0.0.0Now open the browser to localhost:3000. You will see a very basic page, which is not styled at all. The default (session) page allows user enrollment, user logon, and user logoff. The members and facts page allows CRUD operations for members. You will extend this to implement additional CRUD operations for members and facts.
Use the session page to log in a user, using one of the users you created in a previous step. Then go to the members and facts page and list members. If you try to list members without logging in, you will get a 401 return code, indicating that you are not authenticated.
The HTML for this application is in app/views/ajax/home.html.erb and app/views/ajax/session.html.erb. The first of these pages calls app/javascript/packs/ajax_ops.js. The second page calls app/javascript/packs/session_ops.js. Your assignment will involve extending home.html.erb and ajax_ops.js.
Study the javascript in ajax_ops.js. You will see that it creates a click event listener for the div containing each button. Within the event listener is logic to check which button was clicked (the event.target). , and then when one is clicked, it causes a javascript fetch request. If the fetch is a POST or a PUT, a JSON body is included with the request. When the request completes, the result is sent to the screen, or an error is given in an alert. Because these requests require authentication, the authorization header is included with the request. The value of the authorization header is derived from the logon. You can see how by looking at the logon operation in session_ops.js.
AJAX Assignment
Create a git branch called ajax. This is where you will put the code changes for your lesson.
Extend the home.html.erb file. Add another line, on which you would have an entry field for member_id and a button for Delete Member. Add logic to the app/assets/javascripts/ajax_ops.js so that you can delete a member entry. You can use the existing event listener, with the new target being the delete button you create. This is similar to the update logic, but the method is ‘DELETE’ and there is no body to the request. You still have to specify the authentication header. Test it out to be sure it works.
Extend the home.html.erb file further. Add another entry field and button for list facts. The entry field should be for the id of a member entry. When the second pushbutton is clicked, it should retrieve all the facts belonging to that member entry, via an AJAX request. You will have to send the AJAX request to the URL http://localhost:3001/members/member_id/facts where member_id is from the corresponding entry field.
Once you get this working, extend the home.html.erb file further. Add entry fields for member_id, fact, and likes, as well as a pushbutton for create fact. You want to create a fact belonging to the member specified by the member_id. You will need to send a POST request to the same URL as for the fact list request, with a JSON encoded body for the fact object to be created. Note that the member_id is not in the JSON body because it is in the URL.
Once that is working, add code to update and delete fact entries, and test those changes too.
When all is working, push your ajax branch to github and create a pull request.
This reference may be helpful: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
