Welcome to the official Mechasparrow site. Here you can check out projects and games being built by the mechanical bird.

Posts - Page 6 of 11

On Project Based Learning

I really enjoy working on projects. Especially the ones that allow for creative freedom. When a problem is presented, we are either told by someone else how it is solved, or we are tasked with creating a solution. Often, there can be more than one solution to a problem. I find that incredible.

Retention of information

When a problem is presented, we are required to pull from multiple repositories of information to create a potential solution. Rather then making the excuse, “I don’t see myself using this in real life”, you are given a problem. Go solve it. Oh by the way… Here are some books that might help. Good luck.

By engaging the students in trying to find the solution themselves, they have a greater investment in figuring out what key information they were missing for the solution.

Diversity of learning

Depending on the scope of the problem presented, an individual has several paths that may lead to the completion of the project. Even if it is pre-structured project, the student/disciple is often given a variety of paths to complete it. This allows each student to pick up knowledge that aids them in the methods of problem solving that they utilize.

Collaborative efforts

By throwing multiple individuals into a project, a short feedback loop between team members can be established. This allows for incremental improvement and development without the complete fear that what is being built is somewhat viable. That is, of course, if other members choose to speak there mind regarding the project at hand.


If we want to stay motivated or learning new things, the best way is through the completion of projects or goals. This brings personal meaning behind the knowledge were attaining.

– Michael Navazhylau

Read More

2018 August Dev Log 01: App Dev and Project experimentation

I’ve been developing a couple of project lately. The main right now is a scavenger hunt app. Another friend of mine is developing this one with me, so that is pretty fun.

The other one I’m building is a information sharing platform. I’ll cover that one in more detail in the next Dev Log.


The features the completed app will have are

  • Ability to complete scavenger hunts
  • Ability to complete unique challenges that each hunt contains.
  • A Leader board that shows which players have completed the most challenges/hunts
  • Ability for users to create their own hunts/challenges
  • Users will be able to check back on the hunts/challenges they have recently completed


The basic version of the app frontend has been completed. I have begun coding the backend API not too long ago. Be adding a web backend to the app, users will be able to interact with one another and allows for the accumulation of user-generated content.

The Tech Stack

The aim right now is to be able to release the app on Android and IOS once it has been completed. As such, we opted to develop the app using JavaScript and React Native on the front end. React Native offers wonderful cross platform support with the offer of integrating essential native device features like Geo Location. In addition, if the app will be ported to the web (with React.JS), very little of the code base will actually have to be modified.

For the backend API, I am currently experimenting with Ruby on Rails

This project is being developed at a relaxed pace. This is mostly because senior year of high school is starting up in a few weeks from now :)

– Mechasparrow (Michael Navazhylau)

Read More

Web Backend Development with Ruby (Rails) Part two

If you haven’t read part one. Go back and read that

In this tutorial we will create additional models and seed them into the database.

After that we will write a simple view that will display a list of items the the grocery store has in stock.

Lets make the application look nicer

Before we start adding more data models to our application, lets install bootstrap.

inside the file named Gemfile, add these lines to it

gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'

Then run

bundle install

This will install the bootstrap library for the project.

Afterwards go into the /app/assets/stylesheets/application.scss file and add these line

Adds bootstrap

@import "bootstrap";

if the application.scss file ends in .css, just change it so it has the .scss ending.

You can do this by running this command to change it in the terminal

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Add these lines to /app/assets/javascripts/application.js file.

//= require jquery3
//= require popper
//= require bootstrap

Now we have Bootstrap 4 added to our application!

Adding our new models

We are going to add 2 new models, Ordered_Items and Carts. The ordered items model will be a table of items that have been ordered. The Cart will contain items that were ordered by the customer. So there will be some level of overlap that we will have to account for.

These are called associations.

First lets create the new models.

rails generate model Cart rails generate model OrderedItem

inside the folder /db/migrate, there will be a file ends with create_ordered_items.rb, open that file and edit it so it becomes this.

class CreateOrderedItems < ActiveRecord::Migration[5.1]
  def change
    create_table :ordered_items do |t|
      t.integer :quantity
      t.references :item, index: true
      t.references :cart, index: true

The references fields refers to the tables that the the table is connected to. In this case it is the Item and Cart model. I’ll show you how this connects when we seed example data for this.

The last migration we need to create is in order to modify our previous Item table. To do this we run.

rails generate migration AddStockToItems

This will create a file in the migrations folder that ends with add_stock_to_items.rb. Edit the file so it contains this…

class AddStockToItems < ActiveRecord::Migration[5.1]
  def change
    add_column :items, :stock, :integer

With the add_column function, this migration adds a integer(number) column called stock to the items table.

And finally.

rails db:migrate

Writing the model associations

In order to handle the connected tables we need to write the corresponding associations.

Inside /app/models/ordered_item.rb

class OrderedItem < ApplicationRecord
  belongs_to :item
  belongs_to :cart

Inside /app/models/item.rb

class Item < ApplicationRecord
  has_many :ordered_items, dependent: :destroy

Inside /app/models/cart.rb

class Cart < ApplicationRecord
  has_many :ordered_items, dependent: :destroy

With the belongs_to and has_many association functions. We tell the framework that a Item has many Ordered Items connected to it. The Cart also has many ordered_items connected to it. And the Ordered Item belongs to both a Item and Cart.

That way when a customer wants to take his or her cart to checkout, it already has all the corresponding ordered items. Those ordered items point to the items that are currently in stock.

This may sound over complicated, but it will make managing the item inventory much more easier :)

Seeding the data

If we want to display the items we have in stock, we need some items!

Go into /db/seeds.rb, and edit it so it is like this.

items = Item.create([
    name: 'Apple',
    description: 'Basic Fruit',
    price: 0.25,
    stock: 1
    name: 'Watermellon',
    description: 'Fruit mainly composed of Water',
    price: 3.00,
    stock: 1

run rails db:seed

to add the new data to the database.

Now we have some initial items that we can display.

Displaying the item catalog

So now we want to display the items in the shop. Go back to the InventoryController (/app/assets/controllers/inventory_controller.rb) and edit the index function like so

def index
  @items = Item.all

We created a variable called @items that we will be able to reference to within our view template. Item.all retrieves all the rows from the Item model.

Let’s edit our view to be able to use this variable. Go into /app/views/inventory/index.html.erb and change it to this

<div class = "container">
  <h1 class = "header-title"> Here are all the items that are currently in stock...</h1>

  <% if (@items.length <= 0) %>
    <p>Sorry no items :-( </p>
  <% end %>

  <% @items.each do |item| %>
    <div class = "card card-item">
      <div class = "card-body">
        <h5 class = "card-title"><%= %></h5>
        <h6 class = "card-subtitle mb-2 text-muted"><%= item.stock %> in stock</h6>
        <p class = "card-text">
          <%= item.description %>
        <p class = "card-text card-item-cost">
          $<%= '%.2f' % item.price %>
  <% end %>


also edit /app/assets/stylesheets/inventory.scss to contain this

.header-title {
  margin-top: 16px;

.card-item {
  margin-top: 16px;

.card-item-cost {
  color: green;

Now when you visit the / of the rails app. It should display something like this.

Great Job! Now people can see what items can be purchased! In the next tutorial, we will start adding functionality that will allow the user to add items to his/her cart.

You can get the source code for this project on Github

– Mechasparrow

Read More