hey and welcome back to coffee time with
your host ex-google X Facebook
technically this is going to be a bit of
a technical episode we're actually going
to be doing some coding I'm going to
show you how I might build Twitter and
we're going to build this start to
finish from setting up the website the
domain getting the database set up
building the backend and then the
front-end as well so that's what we'll
be doing in this video why don't we just
start it alright so the first thing you
want to do is set up a web domain I
usually go to namecheap.com
and you can use any number of these
services and just search for a domain
name that you like tweet demo com
sure fine why don't we just go with that
you know you can rename it later no I'm
just joking you can't rename it but
we'll just go through with this and I'll
show you how you can get this set up
so I could come from order and yeah it's
gonna run me nine bucks but I'll make it
back through all the ads on this video
click some of those ads for me quick
pause thanks to our sponsor curiosity
stream a subscription video streaming
service that offers thousands of
documentaries and nonfiction titles from
some of the world's best filmmakers
including exclusive originals check them
out at curiosity stream comm slash tech
lead alright so now that I have this set
up I just go into the dashboard and you
know sometimes it might take a little
bit of time it's usually pretty quick
actually I can go into advanced DNS and
what you want to do is route this domain
name to your own web server so why don't
we go get a web server set up there are
many different web hosting services out
there like Amazon AWS digitalocean
Google cloud you can even use fully
managed services like firebase I'm going
to be using an IBM cloud because that's
just what I'm used to but all of these
interfaces are pretty similar I'm gonna
click create resource here and there's
things called virtual servers it's
essentially like a paper use server
there's one machine where many people
can rent and the computing power and
memory are just all divided up among
many people you can see here I can click
a multi-tenant public virtual server you
can choose the location I'm gonna have
mine and Dallas you can decide how much
power you want like for virtual CPUs and
32 gigabytes of RAM I'm just gonna pick
the most minimum one just to keep things
low on cost
choose the OS you want you know Red Hat
Debian Microsoft I personally use sent
OS
any of these are pretty much fine though
you can pick a storage this here I'm
gonna go with just 25 gigabytes and yeah
that pretty much looks good so I will
click
eight alright cool so now I have a web
server set up here I can click into it
and essentially they're getting this are
provisioned up now here in the bill you
can see at the cost of nine cents per
hour they're anticipating about twelve
hours of usage per day three hundred
ninety seven hours per month which comes
out to $33 71 cents or so and I'm
showing you how to set up a web server
and domain because I think this is one
of the most important things that any
self-respecting web developer can do you
really need a platform for you to
distribute your work if you don't have
that then it just gets really
demotivating coming up with pet projects
that you can't show to anybody now with
that said the server is all set up
already what we need is to figure out
what the IP address of it is and then
route the domain name over so if I go
into this dashboard I can see what the
IP address is I'm going to copy that go
into this advanced DNS and I will assign
that to the www and the @ addresses and
I will set these to be a records which
allows me to just assign IP addresses to
these click accept and by now this
domain name should be routing over so if
I access tweet demo comm now the site is
broken because it's probably going to
that virtual server I need to log into
it so in order to login you use SSH the
terminal to be able to log in to that so
yeah if I go into the password section I
can see what the username and password
are that they assigned and this keep
we're starting to get loud so I'll
switch over to something more quiet for
us alright where are we so I say SSH
root at the IP address alright nice
we're in now the first thing I like to
do is just copy my bash RC file in which
is essentially just a list of shortcuts
that I personally like and I recommend
that you can get something like this set
up as well.you and these are just random
settings that just make the terminal
more useful for me it says up the prompt
the way I like it so I will
SCP this over into these server alright
cool so I've copied that over and now I
figured out that I don't have
Emacs so the first thing we want to do
is start installing some programs yum
install Emacs should do it and now it's
just installing a bunch of packages
Emacs has so many crazy dependencies now
let's talk about the tech stack I
generally use Linux Apache my sequel or
mariadb and PHP with some memcache so
I'm going to show you how I might get
this
but you can easily adapt this to any
type of tech stack that you may want to
use you can use nodejs Python Django
flask Ruby on Rails
but this standard lamp tech stack is
probably one of the most simplest and
it's also very powerful many startups
are using lamp as well as even Facebook
is on the standard database PHP memcache
this type of tech stack so you can
definitely do a lot of damage just with
this setup in order to get Apache web
server set up you issue a command yum
install HTTP D which is short for HTTP
daemon so now if I run service HTTP D
status
I can see it is not running and now if I
run start well it should be running now
so now I can try accessing the website
tweet demo comm was it and yeah you can
see I've already have this website up
and running on my own machine with my
own web server the next thing we need to
do is actually configure this server so
I will go to slash httpd.conf so this is
a standard path where this is set up I
know this because you know if you just
dig around you'll be able to figure out
the documentation they tell you that
this is where it's all set up and you
can see ok the document root is var www
slash HTML so I think that works for us
so we can go over there alright so if I
add the index.html and then input like
hello there and save it and then access
tweet demo I can see that my custom
content is already starting to show up
now the next step we need to do is
install PHP so you run yum install PHP
and that is pretty much going to get PHP
all set up for you here and by the way
these days another common technique is
to use containerization through docker
to get web server set up so that you
don't even have to configure like
monolithic web servers but overall this
is still probably the simplest and
fastest way to get yourself going now we
can remove index.html that we have been
using and change this to a PHP file
which allows us to generate more dynamic
content if I use the special command
actually page P info then it will output
all the details and information about
those installations I can go through
here and check all right so we need a
database server so I'm going to install
Maria DB server and Maria DB which is
just a client of that this is
essentially like my sequel which is one
of the most basic and common forms of
databases so
Farren surface MariaDB status i can see
that it is not active I will start that
and now if I run my sequel okay you can
see I'm running this here let's create
database so create database so now we're
using the my SQL syntax and I'll create
a table like same create table users
we're gonna have a UID field which is an
integer we'll make that a primary key
auto increment and we need the IP
address which is like a varchar' we'll
say it's on low 64 characters and it
needs to be unique okay there you go
so we're going to try and create
connection connection comes my circle
connect the DB host equals localhost the
user is a root ok if I try to run this
my sequel connect doesn't exist so you
actually need to install the - extension
for PHP we just run yum install PHP - my
sequel and D so now if I run index type
PHP I can see that I am printing the
resource ID so this is all setup wizard
reconnecting and I can actually make a
query here as well
- sequel select database which is the
database name and then we can make a
query even select star from users given
the connection and then we can print the
result and if I were to go into the
database show tables I could say
describe users and insert into users
just Impa an IP address like 127.0.0.1
and it inserts a item select star from
users we can see what inserted now if I
have to run the script I go run print R
on the row which prints an array and I
can see I am updating that value so we
have the database connection setup now
now in practice what I like to do is
just create some wrapper functions
around this like our creo function
called the query where given the quarry
it will automatically make that query
into the database and return the values
so I just copy these values put the
inside of this function so now I'll be
able to make a number of different
database queries so let's talk about the
tables that we need here and the fields
we need the users table would say the
user ID and their IP address right and
we're not going to use user names or
just use IP addresses we need a table
for like tweet
right we're given a UID we also have
like a post right and then we also need
follows we're given a UID a user we also
know who the follower of that is so I
think these are the three primary tables
we need to get this set up so we'll go
into our database and get this stuff set
up and I'll issue some sequel statements
like I'll create the tweets database
create database tweets we have a UID
which is an integer
oh and this also need primary keys so
tweet ID would be like an integer it
would be a primary key this will also be
auto incrementing and we'll have a UID
which is another integer and then the
post which we can make like say varchar'
140 right because it's going to be 140
characters oh the date as well right
because we want to be able to sort this
that would be at date time so we'll add
some indices like key on the date and
then why have a key on the user ID and
the date so that's a compound key so
that give you a chronological feed of
every tweet as well as we want to be
able to filter by user IDs okay create
that Oh
create table and then we also need to
create a table for the follows where we
have a UID which is an int and a
follower which is an int and we can say
here maybe the primary key will just be
a compound key on the user ID and the
follower there you go so show tables I
can see these are the three tables that
I've created now we go back into our web
server back-end all right so now back to
this file I'm going to just use a single
file here we need a form write an input
form for tweeting use some HTML here and
we'll have like a text area give it a
name and then an input button alright we
are looking good here we have a text
area you can tweet that so now I'm going
to have portion at the top here which
brings in the request so this is the way
PHP handles this at least then we get
the tweet and we're going to parse it
and the IP address is actually in this
special variable called server remote
header and we can try to print these
okay
good so now I'm actually echoing back
the input that I want to insert into the
tweets table right all right so here's
what I have to do I need to obtain the
user ID if the user ID doesn't exist
then I'm going to create a user for it
and I'm going to insert that tweet right
so I'll say ok let me create a helper
function called like I like one called
get single which essentially issues a
query and returns a single value so
result equals query we're going to parse
that we get the row and then return the
first item in the row we get the UID a
select your ID from users where IP
equals IP right and one bit of advisor
anytime you're messing around with
database queries like this it's not
really safe so you want to make sure you
sanitize your inputs so you use like my
sequel real escape string to just
sanitize that if the user ID doesn't
exist we're going to create it right
insert into users the IP okay so now if
i refresh this if I were to go to the
table and select star from users you can
see I've already inserted a user ID
number two for my current IP address I'm
accessing this from and now I just need
to insert the tweet as well just say
insert into tweets and let me open up a
second terminal here so for tweets we
need a user ID the post and the date or
and put the post and the date and what
input the value is your ID well we'll
say that the date is equals to current
year month day hour minute seconds okay
so now I can just start tweeting a bunch
of stuff and I can check my tweets like
star from tweets I can see all that this
stuff is coming in under the proper user
ID the next step is I just need to come
in here and output all of the tweets
right so Cory select star from tweets
ordered by date descending and you know
since we're an index on date this is
going to be a fairly efficient query get
the result and then we need to iterate
through that while row equals my sequel
fetch associated array from the result
then we could just print the row right
it's coming in we extract the tweet
again here you don't want to do some
impulse analyzation so I will use HTML
special chars and I'm going to just put
this inside the table just to get this
formatted properly quickly and we'll
also put in the date right so you can
see here that this is already starting
to be fairly functional right like I can
tweet stuff they're sorted they're up in
descending chronological order we have
this whole website set up the only other
thing I need to do here is set up the
follow function as well as to make this
prettier right now for following we'll
just create a new entry maybe with a
follow link right and for this follow
link we're just passing a parameter
we'll have a route back to the same page
index that PHP will say follow equals
you know whichever user ID that you want
to follow so we have a link here you can
click on this stuff and over here I can
come in here and handle that like if you
get requests in the URL parameters for a
follow you know what will get the value
and again will escape that and then just
insert that into the database well and
we also need the user ID so I grab the
user ID again here insert it if
necessary and by this point maybe I'll
just make a function like get you ID
right query insert ignore into follows
your ID follow so there we go if you
click these values it does start
inserting values into the follows table
it may be nice to not show this link for
users who you've already follow so you
know before I render each of these I
could just do a quick check if get
single slag follower from follows where
your ID equals your ID so only if that
entry doesn't exist we will have a
follow link there you go that's looking
pretty good I can also follow these
users as well for the users who you
follow we want to also be able to show
only the posts there right not just show
other posts so maybe I just output a
second area here and we pretty much do
the same thing except the query is a
little bit different so we can actually
create like a function for a rendering
and all this stuff right and then you
can put all this stuff that's been
rendering this into a function called
render tweets so copy this code select
star from tweets where the user ID
is in and then I suppose this is going
to be an essay query actually select
follow where from follows where you are
the equals user right so this is a more
complicated sequel joint and yeah there
you go so now we're only seeing tweets
from the users who you're following
that's user three it is sorted by date
so obviously the site isn't very
beautiful now but you can easily clean
that up
bootstrap is a pretty popular HTML CSS
library that you can use to just style a
website quickly so I'm gonna come in
here you know import the style sheets
and just paste them in just like just
bring all this stuff in it's like four
lines of code here right as soon as I
put that in and then refresh you can see
that this page is already starting to
look better so this is where I'm
starting to get into HTML this is a text
field I can go into bootstrap look into
components and look up you know like
this example text area that looks pretty
nice so all I gotta do is come in here
and copy that styling paste it here give
it a name and yeah that text area is
starting to look good maybe I want this
button to look nicer too so I can go
into the buttons this primary button
looks good put that in there type equals
submit and then if I were to put this
inside a table for users who we followed
maybe we should allow users to unfollow
them right so I can come in here change
the link to say unfollow add an event
handler for if we get unfollow if
something comes in that says unfollow
then I will get the ID and I'll simply
delete that from the table now the leap
from follows yeah there you go over time
you can really build this out the sky's
the limit but I hope I showed you how to
get a basic web application started and
going here and as for tech stack there
are a number of different options as
well like instead of using the Morea DB
my sequel database we could've use like
MongoDB instead of using PHP we could
have used Python I built the UI using
standard HTML generated server-side it
could also have been done client-side
using say JavaScript purely hey excited
about learning more about our world well
check out curiosity stream comm slash
tech leap the world's first subscription
streaming video service about learning
care
and understanding our world created by
the founder of the Discovery Channel
it's content spent science nature
history technology society and lifestyle
I particularly liked the episode African
and the more rescue following our crews
saving some of the world's most exotic
and endangered animal species can
unlimited access their damages $2.99 a
month or $19.99 a year there's a special
promotion now where annual plans and
gift cards are 40% off and because I'm
the tech lead I'm getting you all your
first 30 days completely free a
curiosity stream calm slash tech lead so
yeah lots of different purchase here let
me know how you would have built a
Twitter application I'm really curious
to know in the comments below if you
liked the video give it a like and
subscribe I'll see you next time thanks
bye