FULL STACK WEB APPLICATION
DEVELOPMENT
INTRODUCTION
CONTENTS
WHAT IS AN WEB APPLICATION?
THE CLIENT-SERVER ARCHITECTURE
WHAT IS MODEL, VIEW AND CONTROLLER?
NEED FOR RESPONSIVE DESIGN
INTRODUCTION TO GIT/GITHUB
HANDS-ON
WEB APPLICATION
A WEB APPLICATION OR WEB APP IS A CLIENTSERVER SOFTWARE APPLICATION IN WHICH
THE CLIENT (OR USER INTERFACE) RUNS IN A WEB BROWSER.
THE DISTINCTION BETWEEN A DYNAMIC WEB PAGE AND A "WEB APPLICATION" IS UNCLEAR.
WEB SITES REFERRED TO AS "WEB APPLICATIONS" HAVE SIMILAR FUNCTIONALITY TO A
DESKTOP SOFTWARE APPLICATION, OR TO A MOBILE APP.
SINGLE-PAGE APPLICATIONS REJECT THE MORE TYPICAL WEB PARADIGM OF MOVING
BETWEEN DISTINCT PAGES WITH DIFFERENT URLS. SINGLE-PAGE FRAMEWORKS LIKE SENCHA
TOUCH AND AngularJS ARE USED TO SPEED DEVELOPMENT OF SUCH A WEB APP FOR A
MOBILE PLATFORM.
CLIENT-SERVER ARCHITECHTURE
THE CLIENT-SERVER MODEL IS A DISTRIBUTED
APPLICATION STRUCTURE THAT PARTITIONS
TASKS OR WORKLOADS BETWEEN THE
PROVIDERS OF A RESOURCE OR SERVICE,
CALLED SERVERS, AND SERVICE REQUESTERS,
CALLED CLIENTS.
THE SERVER COMPONENT PROVIDES A
FUNCTION OR SERVICE TO ONE OR MANY
CLIENTS, WHICH INITIATE REQUESTS FOR
SUCH SERVICES. Pic credits: en.wikipedia.org
MODEL, VIEW AND CONTROLLER
Pic Credits: www.waqar.me
RESPONSIVE DESIGN
Pic Credits: www.sfamarketing.com Pic Credits: www. envisionitagency.com
WHAT IS GIT/GITHUB?
GIT IS THE MOST WIDELY USED MODERN VERSION CONTROL SYSTEM
GIT WAS ORIGINALLY DEVELOPED IN 2005 BY LINUS TORVALDS, THE FAMOUS CREATOR OF
THE LINUX OPERATING SYSTEM KERNEL.
VERSION CONTROL PROTECTS SOURCE CODE FROM BOTH CATASTROPHE AND THE CASUAL
DEGRADATION OF HUMAN ERROR AND UNINTENDED CONSEQUENCES.
VERSION CONTROL HELPS TEAMS SOLVE PROBLEMS BY TRACKING EVERY INDIVIDUAL CHANGE
BY EACH CONTRIBUTOR AND HELPING PREVENT CONCURRENT WORK FROM CONFLICTING.
ADVANTAGES OF GIT
WORKING ON MULTIPLE EACH DEVELOPER HAS FULL
FEATURES REPOSITORY
Pic Credits: www.atlassian.com
GETTING STARTED
OPEN COMMAND PROMPT OR GIT BASH AND ENTER FOLLOWING COMMANDS REPLACING
DETAILS WITH YOUR OWN.
git config --global user.name Your Name"
git config --global user.email yourEmail@example.com"
CREATE A GITHUB ACCOUNT
WWW.GITHUB.COM
PLEASE GIVE YOUR USERNAME TO VOLUNTEERS SO THAT WE CAN ASSIGN DIFFERENT PROJECTS TO YOU
SETTING UP A REPOSITORY
METHOD 1: GIT INIT
USAGE
git init
git init <directory>
TRANSFORM THE DIRECTORY INTO A GIT REPOSITORY. THIS ADDS A .git FOLDER TO THE CURRENT
DIRECTORY AND MAKES IT POSSIBLE TO START RECORDING REVISIONS OF THE PROJECT.
YOU HAVE TO MANUALLY ADD A REMOTE
git remote add origin https://github.com/user/repo.git
SETTING UP A REPOSITORY
METHOD 2: GIT CLONE
CREATE A NEW REPOSITORY ON GITHUB (OR VISIT THE REPOSITORY YOU WANT TO WORK ON),
CLICK ON CLONE OR DOWNLOAD AND COPY REPOSITORY ADDRESS.
USAGE
git clone <repo>
git clone <repo> <directory>
CLONE THE REPOSITORY LOCATED AT <REPO> ONTO THE LOCAL MACHINE. THE ORIGINAL
REPOSITORY CAN BE LOCATED ON THE LOCAL FILESYSTEM YOU ARE CURRENTLY IN.
INSPECTING A REPOSITORY
COMMAND1: GIT STATUS
USAGE
git status
LIST WHICH FILES ARE STAGED, UNSTAGED, AND UNTRACKED
# On branch master changes in working directory)
# Changes to be committed: #
# (use "git reset HEAD <file>..." to unstage) #modified: main.py
# #
#modified: hello.py # Untracked files:
# # (use "git add <file>..." to include in what will
# Changes not staged for commit: be committed)
# (use "git add <file>..." to update what will #
be committed) #hello.pyc
# (use "git checkout -- <file>..." to discard
INSPECTING A REPOSITORY
COMMAND2: GIT LOG
USAGE
git log
THE GIT LOG COMMAND IS GIT'S BASIC TOOL FOR EXPLORING A REPOSITORYS HISTORY. ITS
WHAT YOU USE WHEN YOU NEED TO FIND A SPECIFIC VERSION OF A PROJECT OR FIGURE OUT
WHAT CHANGES WILL BE INTRODUCED BY MERGING IN A FEATURE BRANCH.
commit 3157ee3718e180a9476bf2e5cab8e3f1e78a73b7
Author: John Smith
SAVING CHANGES
COMMAND1: GIT ADD
USAGE
git add <file>
git add <directory>
THE GIT ADD COMMAND ADDS A CHANGE IN THE WORKING DIRECTORY TO THE STAGING AREA. IT
TELLS GIT THAT YOU WANT TO INCLUDE UPDATES TO A PARTICULAR FILE IN THE NEXT COMMIT.
SAVING CHANGES
COMMAND2: GIT COMMIT
USAGE
git commit
git commit a
git commit a m commit message
THE GIT COMMIT COMMAND COMMITS THE STAGED SNAPSHOT TO THE PROJECT HISTORY.
COMMITTED SNAPSHOTS CAN BE THOUGHT OF AS SAFE VERSIONS OF A PROJECTGIT WILL
NEVER CHANGE THEM UNLESS YOU EXPLICITY ASK IT TO.
SAVING CHANGES
COMMAND3: GIT STASH
USAGE
git stash
git stash apply
GIT STASH TEMPORARILY SHELVES (OR STASHES) CHANGES YOU'VE MADE TO YOUR WORKING COPY SO
YOU CAN WORK ON SOMETHING ELSE, AND THEN COME BACK AND RE-APPLY THEM LATER ON.
STASHING IS HANDY IF YOU NEED TO QUICKLY SWITCH CONTEXT AND WORK ON SOMETHING ELSE, BUT
YOU'RE MID-WAY THROUGH A CODE CHANGE AND AREN'T QUITE READY TO COMMIT.
COLLABORATION
COMMAND1: GIT PULL
USAGE
git pull <remote>
MERGING UPSTREAM CHANGES INTO YOUR LOCAL REPOSITORY IS A COMMON TASK IN GIT-BASED
COLLABORATION WORKFLOWS. WE FETCH THE SPECIFIED REMOTES COPY OF THE CURRENT
BRANCH AND IMMEDIATELY MERGE IT INTO THE LOCAL COPY.
COLLABORATION
COMMAND2: GIT PUSH
USAGE
git push <remote> <branch>
git push <remote> --all
PUSHING IS HOW YOU TRANSFER COMMITS FROM YOUR LOCAL REPOSITORY TO A REMOTE REPO.
PUSHING EXPORTS COMMITS TO REMOTE BRANCHES. THIS HAS THE POTENTIAL TO OVERWRITE
CHANGES, SO YOU NEED TO BE CAREFUL HOW YOU USE IT.
AND A LOT MORE
GIT ALLOWS YOU TO CREATE BRANCHES AND WORK ON VARIOUS VERSIONS OF THE CODE
IT CAN ALLOW YOU TO GO TO ANY PREVIOUS COMMITTED VERSION OF THE CODE
IT ALSO ALLOWS YOU TO COLLABORATE WITH YOUR PEERS WHILE WORKING ON ANY
PROJECT
FOR MORE DETAILS AND TUTORIALS ON GIT VISIT
HTTPS://WWW.ATLASSIAN.COM/GIT/TUTORIALS/LEARN-GIT-WITH-BITBUCKET-CLOUD
HTTPS://GIT-SCM.COM/DOCS/
NEXT STEPS
CREATE YOUR ACCOUNT ON GITHUB AND GIVE US YOUR USERNAME
YOU WILL BE ASSIGNED A PROJECT AND A TEAM
CLONE THE REPOSITORY ON YOUR LOCAL MACHINE
CREATE A FOLDER AUTHOR. INSIDE AUTHOR, CREATE A TEXT FILE WITH YOUR NAME, ADD YOUR
BIO-DATA TO IT AND PUSH IT ON THE ACCOUNT.
EVERYONE SHOULD UPDATE THEIR REPOSITORIES SO THAT ALL THE FILES ARE PRESENT ON
EACH PERSONS LOCAL MACHINE
