Creating a Flash Card app Part1
During my time in school, I found myself struggling greatly getting used to the new vocabulary that came with coding. Many of the words were familiar but had completely different meanings. So i decided to build an app that can help solve this problem. Before we get started please check the list of prerequisites below .
Prerequisites
Ruby on Rails(BackEnd)
Javascript(Front End)
Getting Started With The BackEnd
To get started with the backend, cd
into the proper directory and create a folder named FastCards. cd
into Fast cards and enter the following command to create a react api app with postgresql.
rails new api_fast_card --api --database=postgresql
Beautiful! Now that we have our Rails App, we can structure our backend to create a deck of cards and create cards for those respective decks. In order to do so, we will need to first cd into our new file “api_fast_card” and create our schema.
rails generate scaffold Deck category:text card_id:integer
The above command will generate a Deck Controller, Deck Model,Resource, and table ready to migrate with the attributes we’ve listed. Next we can do the same for the cards, however we are going to use rails g resources.
rails generate resource Card word:text definition:text deck_id:integer
Now that we have our tables, we can now rake db:create
& rake db:migrate
. Looking Great! Time to associate our models. I like to use serializers because they tend to make life easy and clean. You can do so by placing the following line into your gemfile.
gem 'active_model_serializers', '~> 0.10.2'
run bundle
to install the changes. To create the serializer files, we can use a generator. rails g serializer Deck
& rails g serializer Card
. Inside of our new serializer files, we need to document the associations.
class DeckSerializer < ActiveModel::Serializer attributes :id, :category has_many :cardsendclass CardSerializer < ActiveModel::Serializer attributes :id, :word, :definition, :deck_id belongs_to :deckend
Now that our serializers are all set, we need to make the same associations in our models. Navigate to the Model files and redocument the same associations.
class Card < ApplicationRecord belongs_to :deckendclass Deck < ApplicationRecord has_many :cardsend
Our associations should be all set. To confirm this, you can either seed data, or use rails c
and enter the following lines for usable data.
Deck.create(category:'Software Engineering' )Card.create(word:'Array', definition:"An array is a data structure, which can store a fixed-size collection of elements of the same data type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.", deck_id:"2" )
Your rails s
http://localhost:3000/decks should look something like this
Nice and Neat beautiful data. Now we can move on to building the front end. Stay tuned for the next part where we set up the frontEnd