Week one Project Management

Overview GIT & Gitlab

Git

Git is officially defined as a distributed version control system (VCS). It is free and open-source software and primarily used via the command-line interface, which we can access with our system terminals. In other words, it’s a system that tracks changes to our project files over time. It enables us to record project changes and go back to a specific version of the tracked files, at any given point in time. This system can be used by many people to efficiently work together and collaborate on team projects, where each developer can have their own version of the project, distributed on their computer. Later on, these individual versions of the project can be merged and adapted into the main version of the project.

Git thinks of its data more like a series of snapshots of a miniature filesystem. With Git, every time you commit, or save the state of your project, Git basically takes a picture of what all your files look like at that moment and stores a reference to that snapshot. To be efficient, if files have not changed, Git doesn’t store the file again, just a link to the previous identical file it has already stored. Git thinks about its data more like a stream of snapshots.

We can single out two major types of Git repositories:
A Git repository is a container for a project that is tracked by Git.

• Local repository - an isolated repository stored on your own computer, where you can work on the local version of your project.
• Remote repository - generally stored outside of your isolated local system, usually on a remote server. It’s especially useful when working in teams - this is the place where you can share your project code, see other people’s code and integrate it into your local version of the project, and also push your changes to the remote repository.

Git has two data structures: a mutable index (also called stage or cache) that caches information about the working directory and the next revision to be committed; and an immutable, append-only object database.
The index serves as a connection point between the object database and the working tree.
The object database contains five types of objects:

• A blob (binary large object) is the content of a file. Blobs have no proper file name, time stamps, or other metadata (A blob’s name internally is a hash of its content). In git each blob is a version of a file, it holds the file’s data.
• A tree object is the equivalent of a directory. It contains a list of file names, each with some type bits and a reference to a blob or tree object that is that file, symbolic link, or directory’s contents. These objects are a snapshot of the source tree. (In whole, this comprises a Merkle tree, meaning that only a single hash for the root tree is sufficient and actually used in commits to precisely pinpoint to the exact state of whole tree structures of any number of sub-directories and files.)
• A commit object links tree objects together into history. It contains the name of a tree object (of the top-level source directory), a timestamp, a log message, and the names of zero or more parent commit objects.
• A tag object is a container that contains a reference to another object and can hold added meta-data related to another object. Most commonly, it is used to store a digital signature of a commit object corresponding to a particular release of the data being tracked by Git.
• A packfile object is a zlib version compressed of various other objects for compactness and ease of transport over network protocols.

To know more about Git see this video, or click here and here .

Gitlab

platform that combines the ability to develop, secure, and operate software in a single application
Basically a remote host for your git repositories by using git version control, a place where you can store your repositories, codes and work on it with your team.
It is more developed and equipped with needed features to ease the process of storing and writing code.Also offers functionality to collaboratively plan, build, secure, and deploy software as a complete DevOps Platform
GitLab is highly scalable and can be hosted on-premises or on cloud storage. It also includes a wiki,issue-tracking,IDE, and CI/CD pipeline features.
GitLab helps teams reduce product lifecycles and increase productivity, which in turn creates value for customers. The application doesn’t require users to manage authorizations for each tool. If permissions are set once, then everyone in the organization has access to every component. GitLab started as an open source project to help teams collaborate on software development. GitLab’s mission is to provide a place where everyone can contribute. Each team member uses our product internally and directly impacts the company roadmap. This exceptional approach works because we’re a team of passionate people who want to see each other, the company, and the broader GitLab community succeed and we have the platform to make that possible.
GitLab, like GitHub, also offers a free GitLab Pages product for hosting static web pages (that can be automatically built on GitLab with Hugo, Jekyll or any other static site generator).

Additional knowledge will be found here: video, or click gitlab and wiki .

Building a Website

I have used Html bootstrap5 with Visual studio code editor and sourcetree in this process.

1) Cloning a repository

I Opened the link provided by fabacademany by email and signed into my gitlab by credentials provided through fabcloud.

Then I clicked on clone dropdown button on the right hand side, and chose ssh link to copy and then pasted it in the clone tab - sourcetree application as shown in the picture by entering required information.

To allow both local and remote repos to connect each other by pulling and pushing via SSH key, I generated it from sourcetree and then saved the public key in the fab academy student gitlab account.

Now as my loacal repo was saved on my laptop, I dived in the main interesting part...

3) Building a website

Building a customized website with a new coding language. After learning fundamentals and basic lines of bootstrap through tutorials , Bootstrap documentation and W3schools , all of these references were very helpful for referring codes.
Tips: its highly recommended to go through and refer them at all times.

Due to time constraints it was wise to use a ready template so I liked this template called business casual which has these amazing features:

• A fresh, modern design style.
• Four, pre-built HTML pages.
• Store hours script that updates with current day.

Moreover the best thing that i found is the style of the background image.

So I downloaded the Business casual template and explored its codes and started customizing it according to my taste.
Also referred to many former student website templates and found Rashid Ali similar to my chosen template so I decided to explore it by clicking the download button to save his files and repository.

While exploring I deleted all unwanted files specially pictures from both ready template and Rashid Ali repo.
Tips Remember .gitlab-ci.yml, .gitgnore, readme.md and requirements files are very important don't delete them.

Before publishing the website, It is recommended to edit and customize it locally first, as visual studio has a great extension live server which provides live status of the coding which will be found on the bottom bar after installing it.
That is why I edited it first locally and then pushed it to the remote repo.

Here are some examples for editing in the index file (right side is the edited file and the left side is the original template).

There are many cheat sheets found online as references which helped me along the way such as shown in picture, but the bootstrap documentation was satisfying for me as it was with explanation.

Lastly,

4) Publishing the website

From local to the remote repo. In sourcetree I staged only those changes that i was sure about it and want it to take effect. And then committed these changes by writing a small note of these changes for future references.
Tips Remember to pull the repo before pushing it to avoid any unclear matters
Finally push them all and check the pipeline for success submission and go head check the website.

Voila its done

To sum up, I completed the following:

• √ Made a website and described how I did it
• √ Introduced myself
• √ Documented steps for uploading files to archive
• √ Pushed to the class archive
• √ Signed and uploaded the Student Agreement
• √ Read the Fab Charter
• √ Sketched my final project idea and Described what it will do and who will use it

Challenges

I had a strange issue that even though I generated SSH key and worked for that period of time, but as soon as I close the application I had to reload the SSH key in the pigent again.

Solution

As mentioned in the lecture to check the path key so I rechecked the path location in the application sourcetree settings and found that it wasn't correct, so I changed it.

Aknowledgment

• √ Special thanks to Business-Casual theme from start bootstrap, which inspired me to follow it and add my favorite styles and content.
• √ Thanks to Rashid Ali for motivation
• √ Thanks to Mahmoud Abo ElNaga and Ahmed Saeed, I have learned alot from their documentations for this week.