Sinatra Portfolio Project

I would like to make a Content Management System for my daughter’s nursery. They keep the daily information about the children in notebooks full of very easy to lose post its and hope this app can help with it. The daily information will be referred to as activities.

The app provides a database and web interface for users to:
* Sign up, log in or log out securely as a nursery staff or parent.
* Nursery staff can create, read, update, and delete (CRUD) an activity.
* Parents can read only the personal profile page of their children.
* User inputs are validated.
I am using Sinatra to build the app, extended with Rake for working with a SQL database using ActiveRecord ORM.
Sinatra is a Domain Specific Language implemented in Ruby that’s used for writing web applications.
My first steps to create the app are:

-Create a repository in Github.

-The project structure following the MVC conventions.

-Set my environment and my config.ru. I am following the Modular Sinatra Pattern and having a config.ru file is one convention of it. The purpose of config.ru is to detail to Rack (Sinatra gem is built on top of Rack) the environment requirements of the application and start the application, mount my application controllers. Rack is a convention, or specification, that lets web applications “plug” into a common interface for handling HTTP requests. To actually serve requests, we need a web server — something that can translate HTTP requests into Ruby calls. My gem ‘thin’ is a web server that do this job.

-Create my Gemfile with all gems that I am going to run trough Bundle, which is set up in my environment file.

Here are the gems I want to use:

Sinatra: to create my web application.
activerecord: it is my Object Relation Mapper, links my Ruby models with rows in my database table. It is a gem to have access to the database mapping and associations.

sinatra-activerecord: it gives me access to some Rake tasks.
rake: short for “ruby make”, it is a package that lets me quickly create files and folders, and automate tasks such as database creation.
require_all: for a simplier way to load code.

sqlite3: sqlite is a library that implements a SQL database engine. sqlite is my database adapter gem.

thin: it is a web server.

shotgun: this is my development server.
pry: my debugger.
bcrypt: it is a hashing algorithm for passwords.
tux: it gives me an interactive console that pre-loads my database and
ActiveRecord Associations.
rake: great gem to create actions and tasks, for example a pry console to test the models and the database. It needs a Rakefile in the root directory of the app with the environment specified and requiring ‘sinatra/activerecord/rake’.
Model classes

I think that I will need at least 3 models, User, Activity and Student.

1. User: stores user attributes, including:
* Username
* Email
* Password (Secured with Bcrypt hashing algorithm)
* Nursery_staff, a boolean value to indicate if a user is a nursery staff
2. Activity: stores activity attributes, including:
* Date
* User_id, to associate Activity to User
* Student_id, to associate Activity to Student
* Breakfast
* Morning Snacks
* Lunch
* Afternoon Snacks
* Sleep
* Nappies
* Comments
3. Student: stores student attributes, including:
* Name
* User_id, to associate Student to User
* Key person
* Room
Model Associations
User has many students and has many activities
Student has many activities and belongs to a User (parent).
Activity belongs to a Student and belongs to User.

Is it works?

I am using Visual Studio Code and after creating the structure of my project with very basic info I tried to run shotgun and was getting the following error:

I had a server running in the background. After trying a lot of different things I could stopped it with the following I found in StackOverflow:

Ran lsof -i :9393 (9393 is the port I ran it on).

I killed the process using kill -9 *pid*. My pid was: 58152.

When I ran lsof -i :9393 again, nothing showed up.

I then ran shotgun and everything works fine now.

Model Validations
You can find all info about validations here.
I will use in my controllers the methods save and update, which trigger validations for themselves and will save the object to the database only if the object is valid.
I will use some helpers to validate that some specified attributes are not empty. I want to make sure that a user gives an username and an email and that an activity has a date and a student has a name at least. I will validate the uniqueness of the email too.

 

 

 

 

 

 

Authentication system

Enable sessions in your AppController and use the gem bcrypt. Make sure your user model has_secure_password and that on your users table you store the password like password_digest“.

 

 

 

 

Protecting the session secret by Martin Fowler:

I changed my configuration to look like this:

 

 

 

 

The password fails safe to a secure hex value if SESSION_SECRET is unset.

Database

Create a Database folder (db), run your migrations to create your tablesI have created one table for the students, another table for my users and a last one for the activities.

I run:

rake db:create_migration NAME=create_students

rake db:create_migration NAME=create_users

rake db:create_migration NAME=create_activities

Then modify my migration tables according to my needs.

And finally run rake db:migrate, and all your tables will be added.

Play with my models and the database.

I run tux in my console but I got the following error

config.ru does not support require_relative so I changed my link and everything works fine!

Now it is time to be more creative and design my routes in the controllers and my views. I am using Bootstrap.

To check this project follow the link.

Local web server and Visual Studio Code

I am using Visual Studio Code to follow the HTML fundamentals lessons of Flatiron Bootcamp.

In order to get a running local web server to see my code in action I chose to use the following procedure which is valid for MAC or PC and I saw in this website: Visual Studio Code and local web server.

  • Create folder for your project and add an index.html file and a package.json file to it. Inside package.json file copy/paste the following text:

I tried that but it didn’t work, I was getting an error  (to see more about it check this link) :
String does not match the pattern of "^(?:@[a-z0-9-~][a-z0-9-._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".
So I changed the string ‘Demo’ to ‘demo’ and all good.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    • Get the latest version of Node running:

brew update

    • Install node running:

brew install node

    • Test that you got Node running:

node -v

    • Test that you got NPM running:

npm -v

  • Install the web server running:

npm install

This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.

  • Start the local web server running:

npm start

Done!!

Solitaire Game

So, this is my first JS project, in which I am still working to implement most of the conditions with the drag and drop and make some sense according to the game rules.

I have used HTML, CSS and JS.

Here it is my HTML, where I have created a navigation bar and a structure made of divs to display the stack, the waste, the spades, hearts, diamonds and clubs piles and a second row with seven piles. In my first attempt I made a table with rows but it was much easier using divs when I started to modify everything with CSS.

Here it is my CSS code. I have had many problems trying to put the image I was dragging on top of another one. Everything has to say with their position, absolute and relative positions. The position property.

And finally, the fun part! All my little “monstruos”, aka my functions. There are some pertinent comments along the code.

WORK TO DO:  I am still working in all the necessary conditions to delimit the drop function according to the rules of the game. Now, you can drag and drop everywhere, you can even pick a card that it isn’t on the top of the pile!

Getting the Basics on Web Development

Online Education courses I have completed:

OpenClassrooms courses are concise. They are great if you want to have a general idea about the subject that is covered.

Good courses to get the fundamental info but you have to pay if you want to do a project to practise your new skills.

The Javascript part is a lot harder than the Ruby one. They explain the fundamentals and you do some exercises and some projects as a Rock Dodger using JS and a Tic Tac Toe with Ruby. I had really enjoyed this course.

Books: