Tech Leads Programming Class Week 1
Thank you for joining us for the first week of the Tech Leads Semester Programming Class at the Koforidua Technical University.
It is much pleasure to have you join us, as we explore the world of web applications and the pieces and bits that come together to make amazing websites that people love to use.
My name is Rexford Nkansah, a Senior Web Developer, and will be taking you through this semester’s course.
Below are what was discussed at today’s class.
Week One Updates
All web applications (websites) on the web today are all built with fundamental technologies, namely, HTML, CSS and Javascript.
HTML stands for HyperText Markup Language, CSS for Cascading Styles Sheets, and Javascript stands for, well, nothing. It is just Javascript.
Note: Javascript has nothing to do with Java. Both are two distinct programming languages.
In a typical web application, we structure our site with HTML, use CSS to give it beauty, and apply Javascript to heighten interactively and liveliness of our application.
Client-Server Communication
Whenever you visit facebook.com or google.com, the browser you used in visiting the site (recommended is Chrome browser) is considered the client.
Whatever machine (or processes) at the other end which belongs to Facebook, that will give the response and let us see our news feed or search box is considered the Server.
A client sends a request (e.g gimme my pool party photos), and the server responds accordingly.
When we create an account on websites, it allows servers to know who we are whenever we (the client) communicates with the server. Without this AA (Authentication and Authorization), it would be almost impossible for the servers to keep track of who you are.
Imagine asking for your pool party photos, but you got pizza photos instead from someone living in Malta. That’s definitely not you, and you aren’t interested in Pizza (are you?).
The point is, for the server to know, you are who you say you are, we create accounts.
Whenever we log into our account, the server gives the client (your browser) a few unique information, which the browser stores in itself, and sends back to the server each time it goes to it for a request.
Depending on the approach used, the information can be in the form of what is known as Cookies, or a JWT (JSON Web Tokens)
Before you go like, “What’s all this?”, take a deep breath. We’ll consider relatively indepth of these technologies as we proceed in the class. We’ll study primarily what matters in the completion of our project web application
This Cookie or JWT will then be used by the Server to determine who you are. Simple, right? Well yes, but there’s more, which we’ll consider in details as we move on in the weeks ahead.
Our project web application would also follow this client-server communication approach. Duh!
Below are the stacks we’ll be considering in completing our project web application for this semester (the project is described later in the article)
Client Technology Stack
In building what the user sees in the browser, on the phone, tablet or laptop, here are the web technologies we will be using:
- HTML5
- Bootstrap (an open-source CSS Framework)
- Angular (an open-source front-end Javascript Framework)
Why use Open Source tools? There are many benefits to using Open Source softwares. At least in our case, we won’t have to pay for use of any of these frameworks.
Remember, you wouldn’t become a guru in all the above technologies, however, you’ll be very familiar and comfortable and gain a fundamental understanding of the pieces in each of the technology above, which will help us build our project web application.
All three above together, we’ll have a highly efficient and fast web application, even available to interact with when offline or on a slow internet connection.
The technologies above have been battle-tested by thousands of organizations and tens of thousands of individuals around the world, therefore, rest assured, you’ll be learning technologies are real-world ready, and valuable in the real job market!
Server Technology Stack
In the above illustration of your browser requesting one or two stuff from Facebook, Facebook’s servers gave the response back.
Our project will involve us building a miniature server (in comparison to the sheer scale of Facebook’s or Google’s), from which our website will communicate to, and give responses back to the client when requests are made.
Here are what we’ll be considering in our server stack:
- MongoDB – This will be our Database. A database is basically a structured dataset which is persistently stored, and available for retrieval in various ways.
- Node.JS (an open source server framework, which uses Javascript)
- Express (an open source web application framework for Node.js)
- Nginx (NGINX is a free, open-source, high-performance HTTP server, reverse proxy, and IMAP/POP3 proxy server)
Miscellaneous Technologies
Although sectioned under miscellaneous, the technologies below will play an integral part in the overall building and upgrades of our application.
- NPM (Node Package Manager, npm is the package manager for JavaScript)
A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer’s operating system in a consistent manner.
- Gulp is a javascript task runner that lets you automate tasks such as… Bundling and minifying libraries and stylesheets.
- Sublime Text 3 (or Visual Studio Code) Text Editor. These are software designed to help us edit our text files of our project. Use any of the above which you come to like. I prefer Sublime Text 3, and have been using for a long time now.
- Digital Ocean, will be our Virtual Private Server provider, and we will be hosting our websites, both the front-end and server API on their Droplets.
Exciting Offer: Remember we talked about VPS (Virtual Private Servers)? You can sign up with Digital Ocean using this link, and it’ll get you a 10$ credit free, which you can use for 2 months with a 5$ per month cost droplet —> https://m.do.co/c/bf6534e1c447
Overview
So here is how all the pieces above will come together
- Someone (a user) will visit our project site in their browser (the page will be loaded from our web server)
- The user can engage in actions on our site, like login, create an account, search for stuff and whatnot.
- The page in the browser will then be sending each request from the user, back to the server for responses.
Our Project Web Application
Come to think of this:
Our phones, laptops, and tablets all come with a unique number. On phones and tablets and many handheld devices, this unique number is referred to as the IMEI Number. On laptops, it is the serial numbers.
Now, what if there could be a way before you buy a second-hand device, you can quickly search on a site, using the device’s unique number, and learn if it is a stolen item or not.
It’ll be marked stolen by the owner as stolen onto the platform.
Therefore, buying second-hand devices could be done without the fear of buying a stolen product. With this in mind too, it’ll be hard for thieves to resell stolen devices legitimately.
Brainstorming
We brainstormed a few ideas of how this project could be built. And with the suggestions in mind, we plan to do so in next week’s class.
Next Week
Next week, we consider designing our pages for the project web application, which will involve:
- Writing a bit of HTML5 markups
- Adding Bootstrap CSS to style our HTML5
- Creating all the pages needed:
- Welcome page with search box
- Login/Register page
- Authenticated page with your list of added devices and their unique numbers
- Add new device unique number page
It’ll be an exciting process and we’ll learn so much along the lines.
Follow the next article to learn more
