Forem: Ghameerah McCullers

The Most Effective Tutorial on Tests You Will Ever Read

Ghameerah McCullers — Sun, 22 Jan 2023 22:23:18 +0000

A Testing Guide For Node.js, Express.js, and Mongoose Apps with Jest and SuperTest

The benefits of testing isn’t obvious at first.

Testing is responsible for verifying the correctness of our code. When writing any software, it is important to have confidence in the quality of your code. Tests can help you confirm that your code is working as expected.

In this article, you’ll learn how writing tests will make your coding life easier. I’ll provide a good overview of what testing is, and show you how to write tests for your Node.js/Express.js and MongoDB/Mongoose applications with testing libraries Jest and Supertest.

Let’s get started

Ever wondered how you could test your API without using Postman or ThunderClient? While these tools are helpful, if you’re like me and work in the backend a lot, working with these tools can get time-consuming and tedious. Instead of manually making calls to your API, testing the backend can be automated with unit testing. There are many other benefits to testing but here are a few:

Helps you keep your codebase in good shape.
Improves development efficiency.
Expands how you think about your code.
Strengthens the reliability of your code.
Quicker debugging.
Helps you ensure your application is bug-free.

Testing can even make your development faster. You pay a fee upfront by investing time in creating the test case, but once their complete, you can rerun it at little to no cost. The investment can pay dividends even during the initial development.

Reading tests written by another developer can help you understand their code much faster and can be a guide for how to refactor. Not only is testing useful for the codebase it also provides a benefit to team workflow. Understanding how the code will be tested informs developers on how code should best be composed and modularized.

When writing any software, it is essential to have confidence in the quality of the code. Tests can help you verify that your code is working as expected. Although testing is not required to build healthy apps, it is generally a good development practice to have unit tests.

Unit testing principles

There are many different ways software can be tested. Unit testing is just one of many ways to classify testing.

The single-responsibility principle plays a significant role in developing tests. In JavaScript, if you have a particular function that is supposed to take some arguments, process them, then fire a callback, you might write something known as unit tests that target that specific function as opposed to testing the entire class. Each unit test should only be checking the completion of a single act or responsibility. Unit tests are responsible for verifying the correctness of your code in isolated chunks.

A unit test is a way of testing the smallest piece of code (unit or component). A unit might be an individual function, method, procedure, module, or object. This will drive the code to be written in a way that adheres to the same principle. Unit tests are typically run as you code. When using tests to guide your development work, you can use failing test messages to determine how to move forward and make the test pass.

Tools for Testing

In JavaScript land, there are many testing frameworks out there. To name a few:

Mocha
Jest
Jasmine
Protractor
Karma
Selenium

In this article, we’re only focusing on one in particular: Jest.

Jest is a popular JavaScript testing framework whose strength is its compatibility with many project-types and its lightweight setup.

Jest comes with many built-in features that are key ingredients needed for testing:

An assertion library — an API of functions for validating a program’s functionality
A test runner — a tool that executes tests and provides outputted test summaries

This article will also make use of a framework known as Supertest.

What is Supertest?

Supertest is a library that simulates HTTP requests. I’ll be covering how to add testing to a backend Node.js/Express.js app later in this article. Very shortly, you will see how Supertest can be used alongside Jest. Supertest will be implemented to test some Express routes/controllers.

Now you’re ready to start testing your app.

Building your First Test

I’ve already set up a demo Express.js app but this tutorial can be used for your app as well.

This is an example folder hierarchy:

Let’s say you’ve built a backend REST API for a social network application.

This app should:

Get all the users
Get a user by id
Add user(s) to the database
Delete user(s) from the database
Update user information

In order to begin adding tests to your project, you need a few things.

First, you need some packages installed

You will need to install: jest, supertest, and cross-env. Use the code sample below to install them as your project's devDependenciestogether:

npm i jest supertest cross-env --save-dev

We’re using cross-env because it allows you to run scripts that set and use environment variables across platforms.

Next, you need to add some test scripts to `package.json`

You will need to utilize cross-env to set environment variables, jest to execute test suites, and have testTimeout set to 5000 because certain requests might take a while to finish.

Open up the package.json and under the "scripts" key add the following test scripts:

"scripts": {
    "test": "cross-env NODE_ENV=test jest --testTimeout=5000",
    "start": "node server.js",
    "dev": "nodemon server.js"
},

Once you write your tests, you can run the tests in the terminal with the following command:

npm run test

Next, you need to create a test folder

Jest searches for the folder tests at the project's root when you run npm run test. Let’s create a new file with the same name as the file that you’ll be testing, but add .test.js . Every test file using Jest will need to have .test.js at the end of the name in order for it to be detected as a test case and you must place your test files in the tests folder. Within that directory create a file called user.test.js.

Below is an example file structure:

├── config

├── controllers

│ └── user.controller.js

├── models

│ └── user.model.js

├── node_modules

├── routes

│ └── user.route.js

├── tests

│ └── user.test.js

├── utils

├── package-lock.json

├── package.json

├── .env

└── server.js

Next, you need to import `supertest` and `mongoose in your` test file.

MongoDB/Mongoose is the database of choice for this tutorial. You’ll need it to create your unit test. In user.test.js add the following:

const mongoose = require("mongoose");
const request = require("supertest");

Next, you need to import `dotenv` to load environment variables

In user.test.js add the following:

const mongoose = require("mongoose");
const request = require("supertest");

require("dotenv").config();

Let’s import `server.js` because this is the location where your application starts.

In user.test.js add the following:

const mongoose = require("mongoose");
const request = require("supertest");
const server = require("../server");

require("dotenv").config();

Next, you’ll need to connect and disconnect the database before and after each test (because you won’t need the database once testing is complete).

In user.test.js add the following:

beforeEach(async () => {
    /* Runs before each test */
    await mongoose.connect(process.env.MONGO_URL, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    });
  });

  /* Closing database connection after each test. */
  afterEach(async () => {
        /* Runs after each test */
    await mongoose.connection.close();
    await server.close();
  });

Below is a simple test for the /user endpoint to verify that the get request does what’s expected. The describe keyword is used to describe the unit test which you will find to be useful to identify tests in test results. The it keyword is used to write the actual test code. This is where you specify what needs to be performed, in the first argument, and then in the second argument, write a callback function that contains the “arrange, act, and assert” test structure. "Arrange, Act, Assert" is a useful pattern for reading and structuring tests. In the callback function, the request is sent to the endpoint first (arrange and act), and the expected and actual responses are then compared (assertion).

describe("GET /api/user", () => {
    it("should return all users", async () => {
      const res = await request(server).get("/user");
      expect(res.statusCode).toBe(200);
      expect(res.body.length).toBeGreaterThan(0);
    });
  });

Give it a try, write tests for all your endpoints

Below is another simple test for our /user endpoint to verify that our post request does what’s expected.

describe("POST /api/user", () => {
    it("should create a user", async () => {
    const res = await request(server).post("/user").send({
        userName: "pear",
        firstName: "frank",
        lastName: "sonata",
        password: "password",
        email: "franky@mail.com"
    });
    expect(res.statusCode).toBe(201);
    expect(res.body.userName).toBe("pear");
    });
});

Finally, you can run tests

In the command line, run the following command:

npm run test

Other Testing Tooling

You can install the Jest Extension for VS Code to see the tests using the Beaker icon in the editor. After installing the extension type command-shift-p and select Jest start all runners.

Congratulations! You did it! 😄

Now you know everything you need to know to create new tests for your Express/Mongoose applications.

Summary

Testing your codebase is a very important stage of the Software Development Life Cycle (SDLC) because it strengthens the integrity and quality of the code. The intention of testing is to identify and find solutions for bugs and errors in the product before being shipped off.

Citation

Learn React Testing: Jest Cheatsheet | Codecademy

https://saucelabs.com/resources/articles/test-automation-tutorial

If you have any questions, feel free to message me on Twitter.

Creating a Book Class 📚

Ghameerah McCullers — Thu, 05 May 2022 17:32:03 +0000

One thing that attracts me to programming is the ability to represent real-life objects in code. In this article, you'll learn how to create a Book class using Python. Let's learn about the core functionality of Python objects and classes by creating a fun Book class! 🐍🖥

Python exercise 1 😄

Mission
Fact: Libraries have a lot of books.

If we want to make a program that tracks all the books in a library, we can make the process much more efficient by making a class for a book, much like a template. That way we can more easily make and keep track of all the different books.

Attributes

Every book should have:

title
author
description
publication date
isbn
number of copies available to check-out
list of names of people who currently have this book checked-out

What is a Book? (to Python) 🧑🏾‍💻

How do we communicate to Python to tell it what a book is?
Think of attributes as the adjectives and nouns associated with a book?

Examples of a book may include...

Title: "The Power of Now",
Author: "Eckhart Tolle",
Description: "The Power of Now: A Guide to Spiritual Enlightenment",
ISBN: "9781682300688",
Published Date: "1997",
Copies Available: 8,
Who currently has one checked out: "Ajh"

Let's start by adding these simple attributes to our Book class. We'll create the class Book and create an __init__ method.

init 🪄

Quick derail because I can't stress the importance of this method we call the constructor. A constructor defines what our Books will be when they are first introduced to the world, the program and Python.

self will refer to a specific book that we create. self.title refers to that specific book's title.

We can create a new book by calling our constructor. We call and the constructor picks up, we ask "May I create one new book using these attributes." The constructor then grants the request and creates a new Book.

Notice that when we create a new book, we say it like this

In this example we call Book(...), NOT __init__.
We can also add a second book to our collection by updating our code

I Got A Instance 🍪

So far we've created two instances of our Book class. An instance is a single occurrence of an object. In our above examples we had two instances of a Book but their attributes are specific to each of the respective Books.

Methods: What A Library Book Can Do 🥳

Functional Requirements

Usually methods will be related to at least one of your attributes.

For every Book, we should be able to:

checkout one book to a single person: This feature should update the number of copies available to check-out, and the list of names of people who currently have this book checked-out.
checkin one book from a single person: This feature should update the number of copies available to check-out, and the list of names of people who currently have this book checked-out
add more copies of this book: This feature should update the copies available
remove more copies of this book: This feature should update the copies available

These actions might change some of the attributes we already gave our Book or necessitate that we add new attributes. Let's first update our Book class to be able to be checked out. We'll create a checkout method inside of our class.

The self parameter refers to the specific book we're attaching this method to. The name parameter refers to the specific name of the person checking the book out. In this method we add the name to the checked_out_by list by appending it and then we decrease the copies_available by 1.

Not too fast 🚦

To complete this task we will be using object oriented design, though it is interchangeable with object oriented programming.
What is OOP? Object-oriented programming is a computer programming model that organizes software design around data, or objects, rather than functions and logic. An object can be defined as a data field that has unique attributes and behavior. Think of OOP as creating a cookie-cutter template for your created data sets. OOP allows you to create new data types in your code that otherwise wouldn't be available to you.

Back to Business 😄

Let's add the functionality of checking in a book to our class. This going to be the opposite action of our checkout action, instead we'll be building the check_in action.

Notice in this method we remove the name from the checked_out_by list by calling .remove() and passing in the name and then we increase the copies_available by 1.

Next, we'll need to add a method that:

Adds more copies to the shelf
Removes copies from the shelf

Since we have copies_available as a number we can easily manipulate it's value.

See it in Action! 🎬 Here are some examples of the actions we can now do our book:

Will output "The Power of Now" in terminal

Will output "Ajh" and "Kyrie" to the terminal

Will output "7" to the terminal

Will output "10" to the terminal

Will output "Ajh", "Malcolm" and "Mansa Mua" to the terminal

Summary

Our final Book Class

What are some other actions or attributes we can add to a book? Comment below if you think of a cool related attribute. 😄

What is TypeScript?

Ghameerah McCullers — Fri, 07 Jan 2022 17:29:29 +0000

An introduction to the strongly-typed language TypeScript and why you might want to learn it.

TypeScript: A JavaScript superset

When it comes to programming tools, Javascript is a beast of a language with a vast array of viciously competing libraries and frameworks. If you're like me and find yourself getting frustrated reading documentation and annoyed with all the changes the API makes in a blink of an eye, then you are not alone.

TypeScript was introduced as a JavaScript superset and was created released by Microsoft in 2012. TypeScript is JavaScript with syntax for types. What are types? Types give you the authority to describe your data. Types allow you to describe the shape of objects and functions in your code. Type checkers are type police built into JavaScript to enforce the type laws (for example, it's against the rules to multiply a string with an array). Type checking is the process where type checkers verify that your code follows all of the rules of the language.

JavaScript is a dynamically typed language, meaning, a variable declared as a number can be turned into a string. Comparatively, TypeScipt is a statically typed language, meaning you declare beforehand what type of value the variable will hold and it doesn't change. Think of TypeScript as your code's enforcer on rules. TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

The beauty of TypeScript is that it makes it possible to see documentation and issues directly in your editor, no more waiting until runtime to know something in your code broke. TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. As your codebase continues to grow, so does your enforcement of rules.

In dynamically-typed languages like JavaScript, type checking occurs during runtime. TypeScript is so sweet that it will help developers identify errors before runtime. The browser can't actually execute typescript, so your .ts file or .tsx file is compiled to Javascript at runtime. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps. Statically-typed languages like TypeScript check types during compile time - right in your text editor!

Basic Type Definitions:

let id: number = 5
let company: string = 'Ghameerah'
let isPublished: boolean = true
let x: any = 'Hello'
let ids: number[] = [1,2,4,7,8]

Summary of Benefits of TypeScript:

Similar to static languages such as Java or C#
Extra error checking
Runtime errors caught early during development
Avoid unwanted behavior at runtime
Mitigation Strategies
TypeScripts helps developers write better code
Make sure type conversion doesn't happen
Add static types
Explicitly naming types in your code
Explicitly assign types to variables
Helps with predictability

Other Resources

React TypeScript Cheatsheet
https://react-typescript-cheatsheet.netlify.app/

Getting started with create-react-app for Beginners

Ghameerah McCullers — Sun, 14 Mar 2021 16:21:46 +0000

Hello there, my name is Ghameerah McCullers & I'm Software Developer here to talk with you today about what it's like starting your first React application.

For starters, you should check out the official documentation on React's website (https://reactjs.org/docs/getting-started.html). This site has a really great guide on how getting started with React works.

Also, to get your feet wet, you should play around with the Tic Tac Toe tutorial providing by the official React website (https://reactjs.org/tutorial/tutorial.html). Building this mini-project should give you hands-on experience with the tool.

I would also suggest reading the Thinking in React blog post (https://reactjs.org/docs/thinking-in-react.html) in order to get more familiar with the concepts of React.

In order to play around with the tool, you'll need to create your first application. This can be accomplished by simply running this command in your single-application project directory:

npx create-react-app <cool-app-name>

Notice, you can name your application WHATEVER you like, it's your prerogative. Just be mindful about your naming, you'll want your project name to be related to the purpose of your app.

As a good developer, we want to make sure we have the most up-to-date tools. Set up your development environment so that you can use the latest JavaScript features and optimize your application. You'll need to have Node >= 10.16 and npm >= 5.6 on your machine. NPM & Nodejs (Node) can be downloaded on your machine using the following website for reference: https://www.npmjs.com/get-npm.

Once you have created your project, move into the folder to see the application run on your local machine. In your terminal type the following:

cd <cool-app-name>
npm start

I hope the article was helpful for React beginners, if you have any questions reach out to me via LinkedIn or Twitter. Happy Coding!

Simple Array Sum –[HackerRank Coding Challenge]

Ghameerah McCullers — Sun, 31 Jan 2021 23:35:57 +0000

Warning, it is assumed that if you are reading this you understand JavaScript ES6 concepts.

Problem

Given an array of integers, find the sum of its elements.

For example, if the array [1,2,3], 1 + 2 + 3 = 6 , so return 6.

Function Description

Complete the simpleArraySum function in the editor below. It must return the sum of the array elements as an integer.

simpleArraySum has the following parameter(s):

ar: an array of integers

Solution

const simpleArraySum = arr => arr.reduce((acc,curr) => acc + curr, 0)

Read more on the reduce() JavaScript ES6 array method here => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

P.s. here's another really cool resource I like for learning more about JavaScript and reduce() => https://www.youtube.com/watch?v=-LFjnY1PEDA&t=401s&ab_channel=TheCodingTrain

Happy Coding!

Building a JavaScript frontend and Rails API backend Project for Beginners

Ghameerah McCullers — Sat, 02 Jan 2021 05:13:07 +0000

Fresh Find application is a web application using JavaScript to render frontend data and Rails API to manage backend data.

Farmers, use the Fresh Find application to keep track of your inventory when your next Farmer's Market rolls around!
Create a "Produce List" using your choice of name, then simply add items to your list.

For Flatiron School's Software Engineering course project 4, I decided to have two separate repositories for my frontend along with my backend. This avoids issues of hosting on a deployment site such as Heroku. This also allows me to run both my backend and frontend at the same time, with the Rails server running on localhost:3000 and the front-end Javascript and HTML/CSS running on the browser. This allowed for faster error handling because of the use of the Console in the browser and being able to go into the Rails console at any moment. When I was setting up my Rails API, I had to make use of the - api Flag like so.

rails new fresh-find-backend - api

This - api flag ensures that I create an API only application using Ruby on Rails.

This project uses AJAX and JavaScript to make fetch requests to a Rails backend to access a database containing information about Farmer's Market items. I used JavaScript to make changes to the DOM. Javascript is powerful and capable of so much. This JavaScript Project requires that the app use a Javascript frontend with a Rails API backend. Client/server interaction must be handled asynchronously in JSON format. The Rails backend needs to have a resource with a has-many relationship and have at least 3 AJAX calls (at least two of Create, Read, Update, and Delete). This was by far the toughest part of the course, combining both JavaScript and Rails.

My JS + Rails API project is a Farmer's Market vendor's dream. My app allows vendors to keep track of their inventory by creating lists for their items they'll be selling at their upcoming Farmer's Market visit. The object model relationship is a list has many items.

Three Pillars of Web Programming

Recognizing JS events, Manipulating the DOM, and Communicate with the server. All of these pillars were difficult for me to grasp at first but with persistence, I was able to learn these pillars.
My application has two classes, List and Item as show below:

class List { 
 static listNames = []
 
 constructor(list){
 this.id = list.id
 this.name = list.attributes.name
 this.items = list.attributes.items
 List.listNames.push(this)
 }
}

class Item {
 constructor(item) {
 this.id = item.id
 this.list_id = item.list_id
 this.content = item.content
 this.li = document.createElement('li')
 }

Making sure back end is connected to front end

In order to connect my frontend directory to my backend directory I needed to make use of a fetch request to my Rails API backend from my JavaScript frontend. Using the http://localhost:3000/lists as my endpoint. I connect the front end of my application to my back end using the following GET fetch request:

static getLists() {
 fetch(listsURL)
 .then(resp => resp.json())
 .then(lists => {
 for(let list of lists) {
 let newList = new List(list.data)
 }
 this.renderLists()
 })
 }

This is also an example of a static method in JavaScript. With the data I receive from my back end server, I am then able to handle DOM manipulation and render this data to my HTML.

My classes contain functions that strictly handle DOM manipulation. Some functions handle server communication. Some functions may serve as 'helper' functions to others. This all ties into the programming mantra of "Separation of Concerns". With Object Orientation, instead of a web, we can think of our code as a collection of cells. These cells are separated from each other, can contain information, bits of data like variables, as well as behaviors, functions directly related to that data.

Static Methods - OOJS

Static methods are class-level methods - they are not callable on instances of a class, only the class itself. These are often used in 'utility' classes - classes that encapsulate a set of related methods but don't need to be made into instances.

class StaticMethod {
 static methodName() {
 console.log("My method is static!");
 }
}

I hope you learned something about JavaScript and Rails reading this piece on the fourth software engineering project for Flatiron School. This was by far the toughest part of the course, combining both JavaScript and Rails. I learned a lot about utilizing classes in JavaScript and handling JSON formatting.

Source Code https://github.com/ameerrah9/Fresh-Find-Frontend

Happy Coding!

Getting Started with Rails as an API

Ghameerah McCullers — Sun, 22 Nov 2020 22:32:11 +0000

An API is known in the programming world as an Application Program Interface. What does this mean you ask? Well from my understand an API is used to grab data from a particular source, usually a database.

You may ask, what is a database? From my understanding, a database is used to store and retrieve information, and when I get really good at communicating with these suckers, I'll become a better engineer.

An API can be created by anyone, that's the really cool part. The way to get started will be explained in this blog post. Now the first thing I will tell you is, APIs enable programmers like me, to access and display on a web page.

APIs can become the grit of your application because of the freedom and the ability to grab any informational database and use it as a tool. APIs are great because your program is allowed to be multi-resourced. It has range, it has freedom, go create. This tool comes with flexibility by using a powerful gem called the Fast JSON API. The Fast JSON API gem provides a quick way to generate and customize JSON serializers.

Woah, slow down! What are you even saying?
Okay, I'll break it down, you're probably asking, "what is JSON?" It stands for JavaScript Object Notation. JSON (JavaScript_Object_Notation) is a simple data format that uses sets of the familiar key & value pairs to store information. Back to that information storing thing again. JSON is chosen because it uses javascript to pass information around. Serializers enable us to handle the logic of arranging our JSON data the way we want it.

There are many gems out there, but there is a particular gem in Rials that I truly have fallen madly in love with. It was an instant connection, didn't make much for me to realize the power of this tool. It's not just me that can confirm how brilliant it is. Using this popular option, the Fast JSON API gem creates a JSON serializer for Rails APIs. It provides a way for us to generate serializer classes for each resource object in our API that is involved in customized JSON rendering.

Setting up Fast JSON API
To add the Fast JSON API gem to your Rails program, go to your project's Gemfile and copy and paste this line there:


gem 'fast_jsonapi'

Then run bundle install in your terminal.

Once installed, you will gain access to a new generator, serializer.

Godly Gem!

What is Rails?

Ghameerah McCullers — Wed, 21 Oct 2020 14:14:03 +0000

Ruby on Rails is a web framework that provides developers the tools they need in order to build applications. Rails is written in the Ruby programming language and it is incredibly smart because it makes assumptions about what every developer needs. Rails is a very fun framework to work with because it is just so powerful, and you can accomplish more with less code.

If you ever run into any issues when building your application, Rails has comprehensive documentation for (almost) every aspect of Rails. Refer to their documentation if you ever feel really stumped.

The Rails philosophy includes two major guiding principles:

I've heard these concepts come up a lot during bootcamp, the first concept is D.R.Y., which is an abbreviation for "Don't Repeat Yourself". This is a huge principle of software development which states that "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system." Ruby makes your life as a developer very easy because you can achieve a lot with less code and by not writing the same information over and over again, your code is more maintainable, more extensible, and there are far fewer bugs. It astonished me what you can "DRY" up in Ruby, one line of coders are a frequent occurrence in my Travelgram application.

Another really important principle is "Convention Over Configuration". Rails has opinions about the best way to do many things in a web application and defaults to a simple set of conventions.

Rails is an open-source software, so it free to use! Check out this video to learn more on Rails: https://youtu.be/OaDhY_y8WTo

If you've heard of any of these known apps, you probably wouldn't know they were all built with Rails:
Shopify, Airbnb, Twitch, SoundCloud, and Hulu.

Building a Rails Application

Ghameerah McCullers — Wed, 21 Oct 2020 13:48:13 +0000

The Travelgram App was built using the Ruby on Rails framework and no scaffolding was used to build my project. This app was created with the intention to help travelers blog about their experiences.

Rails comes with scripts called generators that are designed to make your development life easier by creating everything that’s necessary for you. The generator I used was the new application generator. The new generator will provide you with the foundation of a fresh Rails application so that you don’t have to write it yourself.

To use this generator, I opened up my terminal, navigated to my project directory, and typed the following command:

$ rails new Travelgram

Building a blog with comments using Ruby on Rails is a foundational exercise I went through to learn more about the framework. Ruby and Rails allowed me to generate a fairly simple MVC pattern built on top of a CRUD approach when working with dynamic data.

When building a Rails app I struggled a lot with routing. Most developers struggle with understanding routes like I did. A lot of the time it was simple syntax errors and not knowing what was being passed through to my views.

Understanding the routing process made it a lot easier for me to build successfully. Another key struggle was with styling and CSS. This was a personal issue for me not so much as a technical issue. I wanted my application to look a certain way so that my user could get a certain feel when interacting with my application.

Luckily the developer network is very useful in that if you need help you can find a useful resource. Rails has really great documentation (https://guides.rubyonrails.org/) for developers, so it makes the process really fun when you run into an issue.

Feel free to check out my application, I have linked my repository (https://github.com/ameerrah9/Travelgram)! Happy coding!

Creating a Basic Sinatra App

Ghameerah McCullers — Mon, 31 Aug 2020 22:16:12 +0000

First I want to admit learning and Building with Sinatra was a journey; Sinatra was a challenge but do-able. I had a bit of difficluty just understading how the SQL database works with Sinatra but I was able to figure it out and complete my project which I am so proud of. I’ve grown as a developer during this jounrey and anyone reading this will learn from me. What exactly is Sinatra? Sinatra is a Domain Specific Language used for writing web applications written in Ruby.

I’m going to take you through my process of development. I started with a sketch on plain paper, because it’s important to map out the layout of yoru design prior to writing any code. I asked myself this basic question to spark my creative spirit; What do you care about? What are you passionate about? Next, I developed 2 models. I decided to use my newly learned Sinatra web application skills to build a Business Posting site. I’ll explain my two models and their concepts below.

BizPlan Model

 class BizPlan < ActiveRecord::Base
    # association macro
    belongs_to :user
    # model validations
    validates :name, presence: true
    validates :name, length: { minimum: 3}
    validates :mission, presence: true
    validates :mission, length: { minimum: 3}
    validates :budget, presence: true
    validates :budget, length: { minimum: 3}
end

I created a correspoding table for each of my model classes so they need to inherit from ActiveRecord. With this piece of code, I use macro to establish a relationship to a user. And I use bcrypt through ActiveRecord; using has_secure_password adds methods to set and authenticate against a BCrypt password.

User Model

 class User < ActiveRecord::Base
    has_secure_password
    has_many :biz_plans
end

I establish a relationship to biz_plans and also use has_secure_password to add methods to set and authenticate against a BCrypt password. When a user creates an account it must be with a unique login attribute. The job of ensuring the login is unique is left up to the controllers. Read below on how to set up your controller for authorization checks.

CRUD (Create, Read, Update, Delete) actions using Active Record.

CRUD actions in the controllers connects views and erb files to certain actions in the controller. CRUD actions come with the sinatra-activerecord gem. CRUD routes are created in the controller for four unique actions; create, read, update and delete. With the Create CRUD action we can create a table using a Rake task to create migration. In the controller I create a route get ‘/biz_plans/new’, that renders the new.erb view. With the Read CRUD actions we can read or display information from our database. In the controller I create a route, the ‘biz_plan_index’ action, which should render the ERB view index.erb, which shows a list of all of the biz_plans. With the Update CRUD action we can update information in our database using a form. In the controller I create a route get ‘/biz_plans/:id/edit’, that renders the view edit.erb. With the Delete CRUD actions we can delete information from our database using a form. In the controller I create a route delete ‘/biz_plans/:id’, that creates a button and send the information to a form that will send a request to the delete controller action, where we will identify the biz_plan to delete and delete it.

When creating a Sinatra application, the file structure is very important. I used the corneal gem to set up my file structure for my project. I will break down the MVC File Structure below. When I continue my build I must understand each file in our application will have a different responsibility and we’ll keep these responsibilities split up into reasonable chunks.

Steps

Create file structure using corneal gem in terminal. You can use this or manual create each folder. Corneal is just an easier way to handle this job. Run bundle install in terminal, ensure versions are up to date. - set up gems
Set up Rake tasks, config folder and environment file This is a very important file, is where you get your database connection ready, and it will connect your app folder with the rest of the files that require it as well.
Setting up config.ru file
Create a migration - create users table and biz_plans table with input for both
Create another migration
Create a User class - inherit from the ActiveRecord::Base class - set up validations
Create a BizPlan class
Create a users_controller - sessions and Validation
Create a biz_plan controller - Update, Delete, and Protecting Resources
Create Restful routes - explain Restful routes - User Signup and Password Protection
Set up views - Forms - error messaging create BizPlans and users - use rake console
Run shotgun and test out as you build
Commit to GitHub Repo
Add styling with CSS

Model, View, Controller (MVC) File Structure

Keeping Code Organized is so critical to the layout and flow of an application. MVC is used to help us with the organization. What is MVC? Model, View, Controller.

Controller actions are where the application configurations, routes, and controller actions are implemented. Controller actions represent the application logic. The “C” in MVC acts as the interface and flow of our application. Our “V” in MVC is out Views and holds the code that will be displayed in the browser. Models of our application represent the data and object logic of our application. Typically a Model includes a class used as a unit of measurement, it is the “M” in MVC.

Keeping our code organized is crucial when developing complex applications. As a developer I have learned the importance of separation of concerns and single responsibility.

├── apps
│ ├── Controllers
│ │ └── # Your controllers
│ ├── models
│ │ └── # Your models
│ └── views
│ │ └── # Your Views
│ ├── layout.erb # the default html template
│
├── config.ru # Your Rack config
├── db
│ ├── development.sqlite# Sqlite3 database
│ ├── migrate
│ │ └── # Migrations
│ └── schema.rb
├── config
│ └── environment.db
├── Gemfile
└── Rakefile # Your Rake tasks

Separation of Concerns is again super important when building web applications. The views should never directly pull from the database. All of that should be taken care of in the controller actions, and the data should be passed to an erb file through a specific controller action.

Project requirements - Build a full scale Sinatra application that uses:

A sqlite database
ActiveRecord
RESTful routes
Sessions
Login/Logout

This is what I was tasked with and it can seem like a lot but once it’s completely mapped out it because easy to understand how everything needs to work together. With the knowledge and understanding of your controllers views and routes in your app, you can truly create something amazing!

What is REST?
A RESTful route is a route that maps HTTP verbs (get, post, put, delete, patch) to controller CRUD actions (create, read, update, delete). It helps us with data manipulation and by following it we are able to create new content, edit content, and delete it.

HTTP verb: GET routes to ‘/biz_plans’, action: index action, used to display all biz_plan only if you’re logged in. HTTP verb: GET routes to ‘/biz_plans/new’, action: new action, used to display create biz_plan form new biz_plan. HTTP verb: GET routes to “/biz_plans/:id/edit”, action: edit action, used to display edit form based on ID in the url. HTTP verb: GET routes to ‘/biz_plans/:id’, action: show action, used to display a biz_plan based on ID. HTTP verb: POST routes to ‘/biz_plans’, action: create action, used to create a biz_plan HTTP verb: PATCH routes to ‘/biz_plans/:id’, action: update action, used to update an existing biz_plan based on ID. HTTP verb: DELETE routes to ‘/biz_plans/:id’, action: delete action, used to delete a biz_plan based on ID.

What are sessions and cookies?

Sessions and cookies work in tandem to store information about a user’s interactions with a website at a given point in time. A session gives us a way to remember a user’s identity from page to page. Cookies and session data assists a web application in knowing who interacting with it. Cookies store information locally and are visible only to the server that created them. And while the web application on the server reads the client side cookie, it associates the cookie with an existing session (if such a session exists), and decides how to move forward. Pretty cool huh?

Why

The goal of this project was to build a basic Sinatra application by utilizing the Sinatra framework in conjunction with ActiveRecord and SQLite 3. This Sinatra project is my very first web application – completed with a database!

Look Ma, I built a website!

Hope this post was helpful. Here I’m adding a link to my Github repository (https://github.com/ameerrah9/BizUs) in case you want to check out my code and/or try out my Business planning app!

Why did you decide to study Software Engineering?

Ghameerah McCullers — Sat, 09 May 2020 17:02:56 +0000

The reason I have to become a software developer...

“You can focus on your spiritual growth more when you’re not in survival mode living paycheck to paycheck.”
-Ayodeji Awosika

I come from a low income household and not the most educated. I was the first to graduate from college in my family. My family lived on public assistance for most of my life. I found freedom in a skill which allowed me to further my education at a lower cost than most; playing basketball. Though a scholarship funded my education, I still had to take out student loans. After I earned a degree I was not able to find work in my field, a bachelor's only gets you but so far nowadays. Before this pandemic I was making a $30k salary barely enough to pay rent, eat healthy or enjoy activities out of my home. After fighting myself and beating myself up over the position I was in in life, I discovered a way to financial freedom.

"Today, every company is a Software company. The Software industry is booming and demand for qualified software engineers is expected to increase by over 23% by 2028."

Technology is an essential skill of the world! If you have desires to survive and thrive, learn about technology. The technology industry is trending towards engineers; the need for engineers is very high. The chance to be a part of an organization's decision making and being in those rooms where innovative change is discussed and planned is something that drives me. I’m intrigued by the influence engineers have on a product directly and the impact we can have on a business. Software Engineering is a very collaborative task and I love to immerse myself in team environments. I am very intrigued by the field because of the real world application of the projects. When I learn Software Engineering I will get the necessary preparation and knowledge needed to make a break in this industry.

I have been interested in coding for as long as I can remember, more distinctly, since high school. I have always had the desire but I’ve never been given the chance to be educated formally since then. Learning Software Engineering creates a competitive advantage for myself to gain the attention of employers. Let's be completely transparent, there's $100,000 ON THE TABLE A YEAR!!! I just need to believe in my infinite capacity to learn. I intend to learn new skills for self-enrichment and financial freedom. I intend to start a new in-field job within 60 days of graduating the Flatiron program. With no formal education in this field and no Computer Science degree, it's clear I have an insane amount of self determination to be successful.

The reason I have to become a software developer...

I have a strong desire to learn! Not just programming but in life, I'm a lifelong learner. Yes, adding coding skills will allow me to add value to a business in exchange for gainful employment; but it's about more than money. In fact, I’m enjoying the process of learning that I would do it for free! Engineers are respected and for good reason. Software Engineering is full of twists, turns and roadblocks that can have you thinking, "Can I actually do this?" This journey will be a test of toughness and resilience. I'm constantly reaching out and networking so I can find ambitious people so that I am surrounded by motivated, hard working people! There's an abundance of reasons why I chose to learn Software Engineering, but a key reason is to challenge myself.

The reason I have to become a software developer...

A career in software engineering would be life changing, I would be doing something impactful, something I love and enjoy and can feel fulfilled by and it would financially allow me to have more buying power and freedom for my family and future success. I think of programming as a craft. I was an athlete in college so I truly enjoy craftsmanship. When I put my mind to something, I try to learn as much as possible about it, in hopes of enjoying them more. I love the challenge of programming. I see it as a creative mode of expression. Upon graduating this course my goals are to continuously learn more and more skills to better my craft as an engineer, my education starts with Flatiron School but it doesn't end. My goals include being employed at a company that I feel adds value to the world and aligns with my values. My goals are to earn six figures by 2021 and be able to do more for my family. My goals have always been to contribute to the human advancement through technology. Learning Software Engineering allows me to provide a valued skill to individuals and businesses that can utilize this unique skill. Once I complete Flatiron's course I will have the confidence, the skills and the experience to make an impact on a company and further produce for their bottom line. My goals are to add value to an organization using my coding skills and problem solving ability, I also have desires to create a better life for my family and other coders who come after me.

So that’s it! The plentiful reasons why I chose to embark on this crazy journey of learning Software Engineering. My friends and family think I’m crazy but I know I can do this! Let’s face it, I’m a NERD. I can’t get enough of this! Keep following my journey as I give updates on my story.

Forem: Ghameerah McCullers

The Most Effective Tutorial on Tests You Will Ever Read

A Testing Guide For Node.js, Express.js, and Mongoose Apps with Jest and SuperTest

Let’s get started

Unit testing principles

Tools for Testing

What is Supertest?

Building your First Test

First, you need some packages installed

Next, you need to add some test scripts to package.json

Next, you need to create a test folder

Next, you need to import supertest and mongoose in your test file.

Next, you need to import dotenv to load environment variables

Let’s import server.js because this is the location where your application starts.

Next, you’ll need to connect and disconnect the database before and after each test (because you won’t need the database once testing is complete).

Finally, you can run tests

Other Testing Tooling

Summary

Citation

Creating a Book Class 📚

Python exercise 1 😄

Attributes

What is a Book? (to Python) 🧑🏾‍💻

__init__ 🪄

I Got A Instance 🍪

Methods: What A Library Book Can Do 🥳

Not too fast 🚦

Back to Business 😄

See it in Action! 🎬 Here are some examples of the actions we can now do our book:

Summary

What is TypeScript?

An introduction to the strongly-typed language TypeScript and why you might want to learn it.

TypeScript: A JavaScript superset

Basic Type Definitions:

Summary of Benefits of TypeScript:

Other Resources

Getting started with create-react-app for Beginners

Simple Array Sum –[HackerRank Coding Challenge]

Problem

Solution

Building a JavaScript frontend and Rails API backend Project for Beginners

Three Pillars of Web Programming

Making sure back end is connected to front end

Static Methods - OOJS

Getting Started with Rails as an API

What is Rails?

Building a Rails Application

Creating a Basic Sinatra App

BizPlan Model

User Model

CRUD (Create, Read, Update, Delete) actions using Active Record.

Steps

Model, View, Controller (MVC) File Structure

What are sessions and cookies?

Why

Look Ma, I built a website!

Why did you decide to study Software Engineering?

Next, you need to add some test scripts to `package.json`

Next, you need to import `supertest` and `mongoose in your` test file.

Next, you need to import `dotenv` to load environment variables

Let’s import `server.js` because this is the location where your application starts.

init 🪄