In my journey to becoming a full-stack developer I have finally reached the point where I am doing some back-end work using Ruby and it is actually quite fun in it's own way.
Using Ruby and React, I was able to create a web application that talks about a game from one of my favorite video game series: Final Fantasy 6.
The web application's design and functionality are pretty simple actually. The idea is that you can take a peak into the type of monsters you can encounter in 3 zones and you can both add to those zones or even update the information of a specific monster in a zone. Nothing incredibly crazy.
This is all accomplished by using Activerecord and Sinatra to handle some key functions.
From the Zones page, you can see the listed Zones and the monsters that exist within them. The monsters each have a small button next to them which allows you to remove the monster not only from the view side, but also from the model side. Here is a snippet of the code:
const zoneMonsters = monsterList.filter(monster => monster.zone_id === area.id)
return(
<div id={area.id}>
<h2><em>{area.name}</em></h2>
<p>Region: {area.region}</p>
<p>{area.info}</p>
<h3><u>Monsters</u></h3>
<ul id='monsters'>
<li> {zoneMonsters.map((monster,index) => {return (<Monsters key={index} monster={monster} handleDelete={handleDelete}/>)})}</li>
</ul>
</div>
)
And for each monster the code looks like this:
return(
<div>
<p>{monster.name} <button class="deleteButton" id={monster.id} onClick={handleDelete}>remove</button></p>
<p>{monster.info}</p>
</div>
In another section of the application, you can update the creature information and that looks like this:
<div id='inputpage'>
Add a new monster!
<form onSubmit={handleSubmit} id='newform'>
<label>
Name:
<input type="text" value={name} onChange={handleNameAdd}/>
</label>
<label>
Zone:
<input type="text" value={zone} onChange={handleZoneAdd}/>
</label>
<label>
Info:
<input type="text" value={info} onChange={handleInfoAdd}/>
</label>
<button type="submit"> Add Monster</button>
</form>
Or update an existing one
<form onSubmit={handleUpdateSubmit} id="updateform">
<label>
Name:
<input type="text" value={nameUpdate} onChange={handleNameUpdate}/>
</label>
<label>
Info:
<input type="text" value={infoUpdate} onChange={handleInfoUpdate}/>
</label>
<button type="submit">Update Monster</button>
</form>
</div>
The code could do with a code smell of course, but that will be once I have an MVP to provide for my project.
These are the three pieces of code that communicate with my Ruby-based backend.
Let's start with Monsters. When a user clicks the remove button, the monster's id gets passed to the fetch which contains the delete endpoint for my API, /monsters/:id,
and it will then send to the back-end a request to the controller to delete the specific monster.
The code for that on my backend looks like this:
delete "/monsters/:id" do
deleting_monster = Monster.find(params[:id])
deleting_monster.destroy
monsters = Monster.all
monsters.to_json
end
To make sure there won't be any hiccups and that it is a smooth deletion, I stored the record in a local variable, used the destroy method to delete the method from the database and then gathered all the monsters again and put them in a neat JSON to serve as a response to the view so that state can be updated and the user can see it instantly.
Following that, I added an end point for the update section which is different from the endpoint for deleting, but still keeps it simple for anyone else who would use the API. The endpoint to update, or patch, is just /monsters. This is both because I am focusing on make an MVP and because the code to write out how to update all of it would require quite a few additional statement that might slow down my application.
This is what it looks like:
patch "/monsters" do
updating_monster = Monster.find_by(name: params[:name])
updating_monster.update(:info => params[:info])
monster = Monster.all
monster.to_json
end
When updating the monster, it takes from params the name of the monster, finds it, and then allows the user to update the info. I plan to flush out the ability to update the name and the zone later, but not the name as I don't want the user just putting ANYTHING in there.
All in all, my application looks a little something like this:
The zones part of my web application also pulls from my own database of three zones. The reason for this because the world of final fantasy 6 is so expansive that three zones is enough as the user could easily find dozens of monsters in each zone alone.
To get the zones, there is an useEffect with fetch done to the endpoint /zones which gathers all zones currently in the database for the response, then converts it to JSON for the view to use. The backend for zones look like this:
get "/zones" do
zones = Zone.all
zones.to_json
end
Which is sufficient for a simple page like zones.
My intention however is to allow the user to eventually get a specific zone from amongst many using the .find method on the Zone model. However that will be done at a later date.
Learning Ruby is by far one of the most interesting yet simple lessons by far. This is mainly because of the fact it's so declarative at its core.
By making everything an object that is an instance of a class which has a super class of its own, makes it easy to use the instance because the methods are already written for you and those methods themselves are very intuitive. Their names alone explain their methods.
I intend to build out more functionality by allowing the addition of zones as well as an update in their information which will be very fun indeed.
Happy coding everyone!
Top comments (0)