Lesson 6: From Databases to Development Teams: MySQL, GitHub and Agile

Databases, GitHub and How Development Teams Work

    As our students continue building the Battlefords Youth Job Bank, we are beginning     to move beyond individual HTML pages and into some of the tools and concepts used     to build real software applications.

    This class introduced students to databases using MySQL, gave them their first look     at GitHub and version control, and provided a sneak peek at how development teams     organize their work using Trello and Agile development practices.

Why Do We Need a Database?

    Until this point, much of our work has focused on HTML, CSS and Python.

    HTML gives a webpage structure. CSS controls how it looks. Python allows us to     introduce programming logic. But if we are going to build an application such as     the Youth Job Bank, we also need somewhere to permanently store information.

    For example, our application may eventually need to store:

•    
• Names
•    
• Phone numbers
•    
• Email addresses
•    
• Job postings
•    
• Employer information
•    
• Applicant information

    This is where a database becomes useful.

Thinking About Databases

    We started with a simple comparison to something many people have seen before:     a spreadsheet.

    A database contains tables. Tables contain columns,     and individual pieces of stored information appear as rows.

    Conceptually, we can think about it like this:

Database
    ↓
Table
    ↓
Columns
    ↓
Rows of information

    A spreadsheet and a database are not the same thing, but the comparison gives us     a useful starting point.

    Databases are designed specifically for applications that need to store, search,     update and connect structured information.

Our First Database with MySQL

    Students used MySQL Workbench 8.0 on Windows.

    MySQL is the database system itself, while MySQL Workbench gives us a graphical     interface for connecting to the database and running commands.

    Inside Workbench, students were introduced to the Schemas panel.     For our purposes, we can think of a schema as the database containing our tables.

    We first created a database:

CREATE DATABASE student_db;

    We then told MySQL that this was the database we wanted to work with:

USE student_db;

    This is an important idea. A database server can contain many databases, so we need     to tell MySQL which one our commands should affect.

Creating Our First Table

    Next we created a simple table called contacts.

CREATE TABLE contacts (
    name VARCHAR(100),
    phone VARCHAR(20),
    email VARCHAR(150)
);

    This gave us three columns:

•    
• name
•    
• phone
•    
• email

    Each column uses VARCHAR.

    VARCHAR stands for variable-length characters. More simply,     it means we are storing text.

    Even though phone numbers contain numbers, storing them as text makes sense because     we do not normally perform mathematics on a phone number.

    Phone numbers can also contain characters such as:

306-555-1234

(306) 555-1234

+1 306 555 1234

Adding Information with INSERT

    Creating a table gives us somewhere to store information, but the table initially     contains no rows.

    To add a contact, we introduced the SQL INSERT INTO command:

INSERT INTO contacts (name, phone, email)
VALUES ('John Smith', '306-555-1234', 'john@example.com');

    One useful thing about SQL is that many commands can almost be read as sentences.

    Insert into the contacts table, using the name, phone and email columns,     these values.

    The values must appear in the same order as the columns we listed.

name   → 'John Smith'
phone  → '306-555-1234'
email  → 'john@example.com'

Getting Information Back

    Saving information is only useful if our application can retrieve it again.

    We introduced the SELECT command:

SELECT * FROM contacts;

    SELECT means that we want MySQL to return information.

    The * means that we want all of the columns from the     contacts table.

    We can now see a very important pattern beginning to form:

Collect information
        ↓
Store information
        ↓
Retrieve information
        ↓
Use information in our application

    Eventually, the HTML forms students have been building for the Youth Job Bank can     send information to Python and Django, which can then store that information in a     database.

Connecting This Back to the Youth Job Bank

    In our previous class, students began building pieces of the Battlefords Youth Job     Bank, including an employee signup interface and job description pages.

    At the time, those pages were mostly HTML. A form could contain a name or email     field, but submitting it did not actually save anything.

    We can now begin to see how those pieces will eventually connect:

User fills out HTML form
        ↓
Browser sends information
        ↓
Python / Django receives it
        ↓
Django communicates with the database
        ↓
Information is stored
        ↓
The application can retrieve it later

    We are not building that entire system yet, but students now have another piece of     the architecture required to understand it.

Another Problem: How Do Developers Share Their Work?

    The Youth Job Bank has also introduced another challenge.

    We now have multiple students working on different parts of the same project.

    We could copy files onto USB drives, email them to one another, or repeatedly make     ZIP files.

    Very quickly, however, we would end up with something like:

youth-job-bank.zip
youth-job-bank-new.zip
youth-job-bank-final.zip
youth-job-bank-final-2.zip
youth-job-bank-ACTUALLY-final.zip

    Professional development teams need a better solution.

Introducing Git and GitHub

    Students were introduced to GitHub, one of the major platforms     developers use to store and collaborate on software projects.

    There are two related terms that are important to separate:

•    
•         Git is a version control system that tracks changes to files.    
•    
•         GitHub is an online platform built around Git that makes it         easier for developers to store projects and collaborate.    

    The phrase version control is important.

    It means that instead of constantly creating completely separate copies of our     project, Git can record how the project changes over time.

Repository

    A repository, often shortened to repo, is the     project being tracked by Git.

    It contains the project's files as well as information about their history.

Commit

    A commit is a recorded checkpoint in the project's history.

    Instead of simply pressing Save, we can record a meaningful group of changes.

    For example:

Add employee registration form

    or:

Fix navigation link on job page

Push

    A push sends commits from our computer to a remote repository,     such as one stored on GitHub.

Our computer
     ↓
    Push
     ↓
GitHub

Pull

    A pull brings changes from the shared repository back to our     computer.

GitHub
     ↓
    Pull
     ↓
Our computer

    This begins to give us a way for several developers to contribute to the same     project.

Branches

    Students were also given a brief introduction to the idea of a     branch.

    A branch allows developers to work on changes without immediately changing the     main version of the software.

    Conceptually:

main
 │
 ├── employee-signup
 │
 └── job-listing-page

    Different parts can be worked on separately and later combined.

    We will explore this workflow more as students become comfortable working with     shared projects.

Writing Code Is Only Part of Software Development

    GitHub solves part of the collaboration problem, but another question remains:

    How does everyone know what they are supposed to be working on?

    This gave us an opportunity for a quick preview of Trello and     Agile development.

A Sneak Peek at Trello

    Trello allows work to be represented using cards that can move between different     stages.

    A very basic development board might contain:

TO DO
  ↓
IN PROGRESS
  ↓
REVIEW
  ↓
DONE

To Do

    These are tasks we know need to be completed but nobody is currently working on.

In Progress

    Someone has taken responsibility for the task and is currently working on it.

Review

    The work has been completed but needs to be checked, tested or reviewed by someone     else.

Done

    The task has been completed and accepted.

Breaking Large Problems Into Smaller Problems

    Instead of creating one Trello card that says:

    Build the Battlefords Youth Job Bank.

    we can refine the project into smaller pieces:

•    
• Create the employee signup form.
•    
• Create the employer signup form.
•    
• Create a job listing page.
•    
• Create an individual job description page.
•    
• Create a database table for users.
•    
• Create a database table for jobs.
•    
• Connect the forms to the server.
•    
• Display jobs stored in the database.

    Each of those tasks can then be refined even further.

    This brings us back to one of the very first concepts introduced in this program:     refinement.

Large problem
      ↓
Break it into smaller problems
      ↓
Solve one manageable problem
      ↓
Test it
      ↓
Combine it with the larger system

What Does Agile Mean?

    Agile software development can become a fairly large topic, so students were only     given a preview.

    At a basic level, Agile encourages teams to avoid trying to perfectly design an     enormous project all at once.

    Instead, we divide the project into smaller pieces, build useful parts, review what     happened, and adjust what we do next.

    In simplified form:

Plan a small piece
        ↓
Build it
        ↓
Test and review it
        ↓
Learn from it
        ↓
Plan the next piece

    Agile does not simply mean "work faster." It is a way of organizing development so     that teams can continuously build, review and adapt.

Connecting the Pieces

    At this point in the program, many concepts that originally appeared separate are     beginning to connect.

HTML
Creates the structure users interact with

        ↓

CSS / Bootstrap
Controls presentation

        ↓

Python / Django
Provides application logic

        ↓

MySQL
Stores information

        ↓

Git / GitHub
Tracks and combines developers' work

        ↓

Trello / Agile
Organizes what the team works on

    This is an important transition.

    We are moving away from simply asking:

    How do I write this piece of code?

    and beginning to ask:

    How do several people design, build and maintain an application together?

Main Takeaways

    During this class, students:

• Were introduced to databases and why applications need persistent storage.
• Used MySQL Workbench 8.0 on Windows.
• Created a MySQL database.  
• Created their first database table.   
• Worked with VARCHAR columns.
• Used INSERT INTO to add information.
• Used SELECT to retrieve stored information.
• Connected database concepts back to the Battlefords Youth Job Bank.
• Were introduced to Git and GitHub.
• Discussed repositories, commits, pushes, pulls and branches.
• Saw why version control becomes important when multiple developers work together. 
• Received a preview of Trello and Agile development.
• Saw how a large project can be divided into manageable development tasks.

    The individual technologies are important, but the larger lesson is how they begin     working together.

    Students are moving from creating isolated webpages and programs toward understanding     the structure of a real software project and the workflow used by a development team.