Mechasparrow

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

Posts - Page 4 of 9

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.

Features

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

Progress

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
      t.timestamps
    end
  end
end

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
  end
end

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
end

Inside /app/models/item.rb

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

Inside /app/models/cart.rb

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

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
end
...

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"><%= item.name %></h5>
        <h6 class = "card-subtitle mb-2 text-muted"><%= item.stock %> in stock</h6>
        <p class = "card-text">
          <%= item.description %>
        </p>
        <p class = "card-text card-item-cost">
          $<%= '%.2f' % item.price %>
        </p>
      </div>
    </div>
  <% end %>


</div>

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

Summer Vacation 2018

My 2018 Summer so far

Oh how different it really was

This summer. This summer has been quite a ride. When I started this summer, I thought that I would spend time just studying computer science and reading math textbooks. Yeah… That’s not really how I do “computer science”. Maybe next summer, or over the senior year… But definitely not summer.

Personal Development

For me, summer has always been a time to build new frameworks for sustained growth and progress. It is like the calm before the storm. Its not like nothing happens during summer. There is just more time to think. However, that shouldn’t be an excuse not to think when it counts.

And with this summer, this has been never more true. I am entering my final year of high school. Beyond that, college. This creates some uncertainty about the future that most be faced directly and no longer avoided.

Learned some things

I did learn some concrete things summer, not just spiritual or “life lessons”. Due to some unforeseen circumstances, I had a unfulfilled art course requirement that needed to be taken care of. I choose to take care of this by taking an online summer art course over AP Art History. I did not know how much this would change my appreciation for the arts and just art as a whole. Though it was long and tedious, I am glad that I took that course this summer.

I had some social conflicts with some new and old friends. In the process, I learned what I really valued in a friendship and what it means to be supportive and understanding of other peoples lives. By what degree? I can’t really say without point of reference

Programming and Building things again!

In the beginning, I referred to not studying that much computer science. Well I studied a little. Just a couple chapters of a textbook. Instead, most of my time was spent studying new frameworks and tools that I could use to create interesting and useful applications. For the tech nerds out there. I studied React.JS, Redux, React-Native, and some Backend tech. I’ll list links to these in the bottom.

I learned these technologies through project-based learning. I’m working on a couple projects right now. For now, just an app and a sort of game with geo-location. I also plan on starting to live stream these and release some tutorials on a semi-consistent basis.

Teaching

A couple weeks back, I got hired as a programming instructor for a Untitled Learning Center. I also have been creating tutorials for the LiveEdu platform. The skills I pick up in teaching should be helpful in other avenues of life. Who knows?

React
Redux
React-Native


This has been a long blog post. So I’m going to cut it here. I might go into more detail on specific parts later on. But thats that for now.

– Mechasparrow

Read More