Task

Assignment: Work through a git tutorial and build a personal site in the class archive describing myself and my final project.

Work flow of assignment

What is Git...?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Git is easy to learn and has a tiny footprint with lightning fast performance.

Git Bash for Windows is a package that is comprised of two parts:

1. Git: It is a version control system (VCS) which tracks the file changes, commonly used for programming in a team setting. Git - Wikipedia
2. Bash: It is a unix shell command line interface commonly used in different linux machines. Bash (Unix shell) - Wikipedia

Account formation on Git...

First I went on gitlab.com. And filled the details in registration form.

Fig. Registration form on Gitlab

Registration process was done. Then I "Sign in" into gitlab.fabcloud.org.

Fig. Sign in into gitlab.fabcloud.org

After Sign in into 'gitlab.fabcloud.org' successfully, I need to generate the "SSH key". And for that I required "Git Bash"

Fig. Downloading "Git Bash" from 'git-scm.com'

My PC had 32-bit Windows Operating system, so I downloaded '32-bit Git Bash' setup from git-scm.com.

After Installation of "Gitbash", '$ ssh-keygen -t rsa -C "sarodejaydip34@gmail.com" -b 4096' This command run in the Git Bash. Then I checked SSH key on 'gitlab.fabcloud.org'

Fig. SSH key generation using Git Bash

SSH key generated in Git Bash. Then I checked SSH key satatus on 'gitlab.fabcloud.org'.

Fig. SSH key generated on 'gitlab.fabcloud.org'.

After generating SSH key, I run some following commands in Git Bash for configuring some information to 'gitlab.fabcloud.org'.

'$ git config --global user.name "jaydip.sarode"'
This command run for to configure username to 'gitlab.fabcloud.org'.

'$ git config --global user.email"sarodejaydip34@gmail.com'
This command run for to configure e-mail id to 'gitlab.fabcloud.org'.

'$ git clone git@gitlab.fabcloud.org:academany/fabacademy/2019/labs/vigyanashram/students/jayadip.sarode.git'
This command run for to configure project address to 'gitlab.fabcloud.org'.

Fig. configuring project address to 'gitlab.fabcloud.org'.

Most frequently used commands in Git Bash are following:

'$ git pull' and '$ git add --all'
These two commands used for to update your changes.

'$ git commit -m"Message"'
This command used for Message which will identify user and purpose of commit.

'$ git add'
This command used for to start uploading process.

Fig. Process of Pull-Push protocol (Source: Internet).

Fig. Git pull, add --all, commit & push commands used in Git Bash.

After used '$ git push'
this command uploading process started.

Fig. During writing objects.

Fig. After 100% completed writing obejects

Building personal site...

What is website and web page...?
A website is a collection of web pages with information on a subject, and a web page is a smaller part of a larger website usually containing more specific information.

Now I'm going to design my wesite index for my all assignmets web pages. I'm very excited to do this, because I didn't make any simple webpage ever. So this will more joyful thing for me.

Now at this satge I don't know how and where to start work. So, firstly I refer w3schools for website design and their tutorials are very useful for new learner.

Fig. Html tutorials on w3schools(Source: Internet)

My understanding...

HTML Document

Fig. HTML Document (Source: My laptop/word document)

HTML Element

Fig. HTML Element (Source: My laptop/word document)

HTML Headings, Paragraphs, Buttons, Lists and their Code

Fig. HTML Headings, Paragraphs, Buttons, Lists and their Code(Source: My laptop/word document)

HTML Links, Images and their Code

Fig.HTML Links, Images and their Code.(Source: My laptop/word document)

Softwares for making the webpage or edit the template (Source: Wikipedia)

Adobe Dreamweaver CC
Adobe Dreamweaver is a long-established app that allows you to code your website design directly, without having to know too much about programming. The software works through a mix of visual editing and HTML editing, which means it shouldn't have too steep a learning curve for most users.

Bluefish
Bluefish is amongst the smallest web design tools available today. The tiny installer weighs in at just under 53MB and setup takes only a few moments. While the interface is text-only, it's clearly designed with novices in mind as it employs clear-cut toolbars, user customizable menus and syntax highlighting.

Atom Text Editor
Atom is an open source editor for designing, developing, and editing code. It's very easy to use and there are developer tools to simplify the process. The integrated packet manager also means you can add additional features directly from Github, who developed Atom, and there's a drag-and-drop feature for moving files and folders around.

Google Web Designer
Google Web Designer is primarily for creating interactive content in HTML5, JavaScript and CSS. In plain English, this means its primary function is to build ads.

Webflow
Webflow is a cloud-based service which has been created specifically to allow people with no coding knowledge to get started with web design.

WordPress
WordPress is an alternative way to set up and design your website, being rather different to the other offerings we've highlighted here because it's actually a content management system (CMS). The power here is that it is a simple matter to set up a website in minutes. Indeed, many web hosting packages include a one-click install of WordPress from their Control Panel, but even without that, WordPress is relatively easy to install.

Brackets
A modern, open source text editor that understands web design. With focused visual tools and pre-processor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers.

I want to use Brackets for Editing my web template. Because it has 'Live Preview' option and it's user interface is good.
So went onbrackets.io for download it and then installed successfully.

Fig. Downloading Bracket software for editing the webpage.

I decided to download the template web page and then I will be edit it as per my requirements
So I went on Templatewire.com for download free template web page.

Fig. Downloading the web page template.

User interface of 'Bracket' software described in following image:

Fig. Bracket software description.

Then I edited downloaded template in bracket software it as per my requirements.

Fig. Webpage HTML template editing.

Finally completed my web site page as per my requirements.

Fig. Completed Website page.

Project Management

About Project
INDIA is the Agricultural Country. We need go for geen house automation for sustainable farming. But other hand we were also facing problem of drinking water. So, we should have need to work on basic needs for people. i.e. Drinking water.
In "Vigyan Ashram", we were facing water problem form many years, So we were installed grey water tratment plant. I decided I'll go one by one. So, now at this stage I want to experiment on "Greay water". That's why, I choose "Monitoring for Grey water recycling system".

Project consists of:

Water Float Sensor
A float switch is a device used to sense the level of liquid within a tank, it may actuate a pump, an indicator, an alarm, or other device.
I'm going to use 'water float sensor' in water pipeline, because I want ankonwledge about water pump is ON or OFF OR how many times water pump ON and OFF. This sensor is working on 5 volt dc supply and it requires very low current. Also cheap in cost.

WiFi Module
The ESP8266 WiFi Module is a self contained SOC with integrated TCP/IP protocol stack that can give any microcontroller access to your WiFi network. The ESP8266 is capable of either hosting an application or offloading all Wi-Fi networking functions from another application processor.
I'm using this wifi module in my project, because I want to share data on cloud.

Micro-controller
Micro-controller is a small computer on a single integrated circuit. In modern terminology, it is similar to, but less sophisticated than, a system on a chip (SoC); an SoC may include a microcontroller as one of its components. A microcontroller contains one or more CPUs (processor cores) along with memory and programmable input/output peripherals.
Microcontrollers are used in automatically controlled products and devices, such as automobile engine control systems, implantable medical devices, remote controls, office machines, appliances, power tools, toys and other embedded systems.

Buzzer
A buzzer or beeper is an audio signalling device, which may be mechanical, electromechanical, or piezoelectric (piezo for short). I'm using 5 vold DC buzzer in my project for alarm purpose.

Gantt Chart
A Gantt chart is a type of bar chart that illustrates a project schedule. This chart lists the tasks to be performed on the vertical axis, and time intervals on the horizontal axis. The width of the horizontal bars in the graph shows the duration of each activity.

Fig. 'Monitoring of Grey Water System' Project Gantt Chart.

Learning Outcomes:

1. Learned the process data uploading on gitlab cloud.
2. Understood basic commands for the 'html' development.

Original files download below:

(Click Here)