-
The Twitter Clone – Witter
The app will be made up of three pages
A home page, that displays all the weets of the user as well as those of anyone they follow
A wall page, that displays profile details of a given user as well as their weets
A search page that can be used to find others users and follow and unfollow
-
Configuraci’ion inicial:
-
En la interface de web2py crea una “Nueva aplicaci’on” / New simple application.
commit/push
-
Register a new user
From https://127.0.0.1:8181/witter Click ‘Login’ on the top right and then ‘Register’, enter your detail into the form and hit submit. Welcome! You are the first ever user of your application.
nota que no tuviste que crear la p’agina de login ni de registro de usuarios, todo eso ya viene con web2py
-
a table to store posted weets
db.define_table(‘weets’,
Field(‘body’,’text’,requires=IS_LENGTH(140,1),label=”What’s going down?”),
Field(‘posted_on’,’datetime’,readable=False,writable=False),
Field(‘posted_by’,’reference auth_user’,readable=False,writable=False))Add to the bottom of the db.py Model file
-
#a table to store follower relationships
db.define_table(‘followers’,
Field(‘follower’,’reference auth_user’),
Field(‘followee’,’reference auth_user’))Add to the bottom of the db.py Model file
-
#Convenience methods to make code more compact
me = auth.user_id
def name_of(user): return ‘%(first_name)s %(last_name)s’ % user
Add to the bottom of the db.py Model file
-
we need to edit the menu.py Model file.
This file configures the look of the menu and also houses meta data about the application.
Remove the existing content and enter the following in menu.py
response.title = “Witter”
response.subtitle = “Super Awesome Twitter Clone in Web2py”
response.menu = [
(T(‘Home’), False, URL(‘default’,’home’)),
(T(‘Wall’), False, URL(‘default’,’wall’)),
(T(‘Search’), False, URL(‘default’,’search’)),
]This code sets the apps name and sub-title as well as defining the links on the navigation bar.
-
just to check create a method home to the default.py controller.
def home(): return “Hello from Witter App”
Now point your browser to http://127.0.0.1:8000/witter/default/home
You should see a page empty but for your message. -
Create the form with which the user con submit tweets
def home():
‘’’This method allows you to send your weets and see the ones you follow’’’ #configure defaults, so they not appear on the form
db.weets.posted_by.default = me
db.weets.posted_on.default = request.now #create the form
crud.settings.formstyle = ‘table2cols’
form = crud.create(db.weets)
return locals() -
Force login to be able to se default/home
*para que la p’agina de home pida permisos es muy senciollo s’olo se agrega la decoracion @auth arriba del m’etodo que queremos sea restringido.
@auth.requires_login()
def home():
‘’’First point of call, contains all weets and all weets of those you follow’’’ #configure defaults, so they not appear on the form
db.weets.posted_by.default = me
db.weets.posted_on.default = request.now #create form with which the user can submit weets
crud.settings.formstyle = ‘table2cols’
form = crud.create(db.weets)
return locals() -
In the controller replace the index method with:
def index():
if auth.user: redirect(URL(‘home’))
return locals()This method simply checks if you are logged in and if so redirects to the ‘home’ page. If not you are presented with the default landing page that you saw when you first started up Web2py.
-
#In Views section and create a new file called default/home.html
The path of the file denotes that it is the View of the default/home Controller.
Replace the default code with the following:
{{extend ‘layout.html’}}
{{=form}}<script>$(‘textarea’).css(‘width’,’600px’).css(‘height’,’50px’);</script>
-
Now lets get all the weets of the current user and all his friends.
*In the controller default.py method home at the end append this code:
form = crud.create(db.weets) #determine who the user follows
my_followees = db(db.followers.follower==me)
me_and_my_followees = [me]+[row.followee for row in my_followees.select(db.followers.followee)] #Pull all weets to be displayed
weets = db(db.weets.posted_by.belongs(me_and_my_followees)).select(orderby=~db.weets.posted_on,limitby=(0,100))
return locals() -
in views/deafult/home.html display all the weets
add this for loop to the end of file:
{{for weet in weets:}}
<div style="background: #f0f0f0; margin-bottom: 5px; padding: 8px;">
<h3>{{=name_of(weet.posted_by)}} on {{=weet.posted_on}}:</h3>
{{=MARKMIN(weet.body)}}
</div>
{{pass}}If you visit 127.0.0.1:8181/witter/default/home you should see
something like this:
-
Show user’s wall, showing profile and posts
The next page to look at is the Wall. The Wall is specific to a given user and contains their profile details as well as their weet history.
In controller write this method
def wall(): #Determine which user’s wall is to be displayed
user = db.auth_user(request.args(0) or me) #If user is invalid, return to the home page
if not user:
redirect(URL(‘home’))
weets = db(db.weets.posted_by==user.id).select(orderby=~db.weets.posted_on,limitby=(0,100))
return locals() -
Create the view for the wall
{{extend ‘layout.html’}}
<h2>Profile</h2>
{{=crud.read(db.auth_user,user)}}<h2>Messages</h2>
{{for weet in weets:}}<div style="background: #f0f0f0; margin-bottom: 5px; padding: 8px;">
<h3>{{=name_of(weet.posted_by)}} on {{=weet.posted_on}}:</h3>
{{=MARKMIN(weet.body)}}
</div>
{{pass}}the page will look like this:
-
a page for searching for other users
The purpose of this page is to allow a user to search for their friends and then follow them.
Firstly, let’s take a look at the Controller, add the following to default.py
@auth.requires_login()
def search():
form = SQLFORM.factory(Field(‘name’,requires=IS_NOT_EMPTY()))
if form.accepts(request):
tokens = form.vars.name.split()
query = reduce(lambda a,b:a&b,
[db.auth_user.first_name.contains(k)|db.auth_user.last_name.contains(k) \
for k in tokens])
people = db(query).select(orderby=db.auth_user.first_name|db.auth_user.last_name,left=db.followers.on(db.followers.followee==db.auth_user.id))
else:
people = []
return locals() -
#The Search View
Create a file called default/search.html{{extend ‘layout.html’}}
<h2>Search for people to follow</h2>
{{=form}}{{if people:}}
<h3>Results</h3>
{{for user in people:}}
<div class="row">
<div class="span3 offset1">{{=A(name_of(user.auth_user), _href=URL(‘wall’,args=user.auth_user.id))}}</div>
<div class="span1">
{{if user.followers.followee:}}<button onclick="ajax('{{=URL('follow',args=('unfollow',user.auth_user.id))}}',[],null);$(this).parent().html('Unfollowed')">Unfollow</button>
{{else:}}<button onclick="ajax('{{=URL('follow',args=('follow',user.auth_user.id))}}',[],null);$(this).parent().html('Followed')">Follow</button>
{{pass}}
</div>
</div>
{{pass}}
{{pass}}This view should look like this:
-
#Implement the follow action in the Controller
this is the Ajax callback
@auth.requires_login()
def follow():
if request.env.request_method!=’POST’: raise HTTP(400)
if request.args(0) ==’follow’ and not db.followers(follower=me,followee=request.args(1)):# insert a new friendship request db.followers.insert(follower=me,followee=request.args(1))elif request.args(0)==’unfollow’:
# delete a previous friendship request db(db.followers.follower==me)(db.followers.followee==request.args(1)).delete()