Tuesday, March 5, 2013

Tweeeter Django Application and jQuery Masonry

I planned on doing a write up on how to use jQuery masonry.  The only experience I have had with javascript was one course in college and a little snippets here and there.  I am still going to do the write up but it was surprising how easy it was.

In the head put the links for your css and scripts:

<head>
<link href="/media/css/tweeeter.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/media/js/jquery.masonry.min.js" type="text/javascript"></script>
</head>

We are going to need a container div with an id that will be the columns and within that div we will need another div with a class.  The 2nd div with the class is going to be each individual element inside the columns.  I named my id container and the individual tweets class 'tweeeter'.  My template body now looks like this(I keep losing my spacing in blogger but you get the picture):


<div id="container">
{% if latest_python_tweets %}
    {% for ptweet in latest_python_tweets%}
        <div class="tweeeter">
        <div class="tweetUsr">
        {{ptweet.tweetUsr}} <br />
        </div> <!--End of tweetUsr-->
        <div class ="tweetText">
        <a  href="{{ ptweet.tweetUrl }}/">{{ ptweet.tweetText}}</a>
        </div> <!--End of tweetText-->
      </div> <!--End of tweeeter-->
    {% endfor %}
{% else %}
    <p>No Tweets Available</p>
{% endif %}
</div> <!--End of container-->

Now we have one last step and that is to create the script to use masonry.  We will need the id and the classes we defined in the template.  

<script>
$(function()
{
  $('#container').masonry(
  {
    itemSelector: '.tweeeter',
  columnWidth : 340
  });
});
</script>

There really wasn't much to it and this was a fun little project.  I plan on launching this on RonaldSnyder.net within the next couple of days and will try to remember to put a link into this blog post.

Monday, March 4, 2013

My First Real Django Application

I had been kicking around a project in my head and how to do it with Django.  I was inspired by Justin Duke who posted http://jmduke.net/post/39316262948/from-concept-to-completion-in-four-hours to reddit.  This seemed like a good project for a Django newbie like me.  This whole project that I am outlining below can be found on GitHub.

The first thing I did was write the code to use the Twitter API to get the information I wanted.  I had never worked with JSON before but after a little trial and error I was able to open the search page and get the user, the text and the tweet url.  I am searching for "Python Programming" in the code below.

import urllib2
import json

search_term = 'python+programming'
search_count= '25'
twitter_search = 'http://search.twitter.com/search.json?q=' + search_term + '&rpp=' + search_count + '&result_type=mixed&lang=en'

response = urllib2.urlopen(twitter_search)
json_feed = json.load(response)
parent = json_feed["results"]

for item in parent:
    print item["from_user"]
    print item["text"]
    print https://twitter.com/' + item["from_user"] + '/status/' + str(item["id"])



The Model


Now I needed to create a Django model off these fields.  Since I am searching for Python programming I named the model PythonTweets:

from django.db import models

class PythonTweets(models.Model):
    tweetUsr = models.CharField(max_length=200)
    tweetText = models.CharField(max_length=500)
    tweetUrl = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')


The View


The view was pretty straight forward and mostly what was learned in the Polls tutorial.

# Create your views here.
from django.shortcuts import render_to_response
from tweeeter.models import PythonTweets

def python_search(request):
    latest_python_tweets = PythonTweets.objects.all().order_by('-pub_date')
    return render_to_response('tweeeter/python.html', {'latest_python_tweets': latest_python_tweets})

The Template


The template is just a test page to show the tweets.  I will pretty it up in a future blog post.

<h1>Test Python Page</h1>

{% if latest_python_tweets %}
    <ul>
    {% for ptweet in latest_python_tweets%}
        <li><a href="{{ ptweet.tweetUrl }}/">{{ ptweet.tweetText}}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No Tweets Available</p>
{% endif %}

Adding the tweets to the database


Since I write PL/SQL and SQL for a living I thought I would just write an SQL script and run it as a cron job.  I actually wrote a little bit of this and then face palm.  This is OOP and not SQL.  The objects attributes live in the database, all I have to do is instantiate new objects.  So all I have to do is loop through each tweet and create a new PythonTweet object.  Way too easy!  My plan now is to cron the script below to run once an hour or so to make sure I stay within the Twitter limits.  I still have to add some clean up to delete data from the database when it gets to a certain age.    

import urllib2
import json
from tweeeter.models import PythonTweets
from time import gmtime, strftime

todays_date = strftime('%Y-%m-%d %H:%M:%S', gmtime())

#change below to customize the results
search_term = 'python+programming'
search_count= '25'
twitter_search = 'http://search.twitter.com/search.json?q=' + search_term + '&rpp=' + search_count + '&result_type=mixed&lang=en'

#open twitter and get what you want.
response = urllib2.urlopen(twitter_search)
json_feed = json.load(response)

#cycle through tweets, create objects and save.  
parent = json_feed["results"]
for item in parent:
    print item
    rds = PythonTweets(
    tweetUsr = (item["from_user"]),
    tweetText = (item["text"]),
    tweetUrl = ('https://twitter.com/' + item["from_user"] + '/status/' + str(item["id"])),
    pub_date = todays_date)
    rds.save()


What Else?

I had to add the new application to settings.py and update both urls.py.  If you need to see the code you can find it on my github account.  My next plan of attack on this is to add the cleanup of old data to the object creation script and pretty up the template. 




Friday, February 22, 2013

Using Pydev for Django

To get a little more practice I went through the 1.4 Polls tutorial on the official Django site.  I did it different this time.  I set it up on my local computer instead of the hosted site like last time, I used Eclipse with the PyDev plugin and I followed the same version of documentation throughout the tutorial.  

I would recommend to anyone trying to learn to setup it up on there home machine instead of anywhere else.   Eclipse with PyDev is also a huge help.  Instead of jumping back and forth directories I had the files open in different tabs in the IDE.  This was a huge time saver for me over using Vim.  The first time I went through the tutorial each section  took at least a couple of hours.  This time the whole tutorial took a couple of hours.  

I did a commit in Git and uploaded it to GitHub for each section of the tutorial.  That can be located at https://github.com/ronaldsnyder/developmentSite

Git out of here! Git Basics

One of my goals was to start using Git and Github which I started in earlier in the month.  I am starting to get the basics and move around my own projects so I will share what I have learned.  The Git and GitHub documentation are fantastic.

  1. Create the repo on GitHub
  2. On your local machine navigate to where you want to do the version control.
  3. To initialize git run:  git init
  4. Create a .gitignore file and add any files you want to ignore (I have been adding *.pyc)
  5. Create a file called README and tell us about the project.
  6. Add all the files, directories and sub files and directories: git add .
  7. Make your first commit:  git commit -m 'my first commit'
  8. Add the remote repo (the url can be found in the page of your github repo): git remote add origin https://github.com/ronaldsnyder/developmentSite.git
  9. Push the changes to GitHub:  git push origin master

Here are the commands I used after I created the GitHub repo called developmentSite.

  • cd /home/rsnyder/helloWorld/mysite
  • git init
  • touch README
  • vi .gitignore (add files you don't want to version control)
  • git add .
  • git commit - m 'cleand django project'
  • git remote add origin https://github.com/ronaldsnyder/developmentSite.git
  • git push origin master


Tuesday, February 19, 2013

Resume Application using Twitter Bootstrap

I designed a few pages using Twitter Bootstrap, found here,  to highlight my skills and make an attractive web presence on my homepage of RonaldSnyder.net.  This site used to have an ugly resume and the Django Polls tutorial.  I uploaded all of my files up and created a new app in my current Django Application.

While these pages are static right now and probably doesn't need to be a Django application it helped serve the purpose of learning and getting more familiar with Django.  Below are the steps I took to update my site with the new files, I feel there are better ways to accomplish this and when I learn them I will write a revision to this blog post.  On to the steps and some screenshots for fun.


I ran python manage.py startapp resume in the same directory as manage.py and the polls application from the official tutorial to create a new app called resume.

Updated settings.py INSTALLED_APPS to include the newly created resume application. 


Moved down one directory to where the main urls.py file is.  I updated urlpatterns to include the newly created resume app and make it the index page.  I don't feel this is probably the Django way to do it but it worked and as I learn I will create revisions and pointers on these blog posts.


After updating urls.py move to the resume directory you created a few steps back.  Edit urls.py and add the template urls and the views names that you will create in the next step.  It would probably make more sense to create the views first but I just jotted them down and made the appropriate views.


Now create the views.py file and add all of your views that you need to create.  The contexts aren't doing anything but for some reason the page doesn't render without them.  Obviously I am doing something wrong but again it works and I will update this post when I figure out what it is.


The next step was to unload all of the files into a resume directory inside your template directory. I am still having a hard time figuring out where I need to put my static files, CSS, pictures and javascript.  Right now I have put them inside of folders in the public_html.

I have a contact me page that was used with Twitter Bootstrap but I would like to look into using Django features for that and that would be a great opportunity.  I loved working with Bootstrap and it was easy to make a nice looking and professional page.  I can see myself using it in other areas and in other designs.  I have learned a lot from using it and uploading the page to my site.  I still feel I missing a lot of the fundamentals of Django though and hoping that comes with a little more practice and reading.  


Monday, February 11, 2013

Twitter Bootstrap

The last few days I have been working with Twitter Bootstrap and creating a site on my local machine that can be found on my GitHub account.  This project was to serve a couple of purposes, get familiar with Twitter Bootstrap, Git, GitHub and start working toward updating the hideous home page at ronaldsnyder.net.

I have had a bit of a learning curve with Git but not unexpected learning something new.  I am only committing things right now and haven't had to do any pulls or branching.  One tip I will relay is that if you are using a graphical text editor in Linux that you should put *~ in your gitignore file.  I was having a hard time with getting two files for each page I edited, one with a tilde at the end.  I believe this is because it is the backup version used by the text editor.  Adding the *~ fixed that problem.  I am still a bit clumsy with Git but it is getting easier day by day.

The next step in this project is going to be installing a Django site on my local machine and using the framework to create an app using the Twitter Bootstrap.  I have no idea how to do this or what Django is capable of helping.  This should be a great opportunity to get some more comfort with both Bootstrap and Django.

I will be documenting this process and posting about it here.

Thursday, February 7, 2013

Setting up Progress

To prepare for some of the projects I have in mind I needed to download some things on to my local Ubuntu machine, pip, django and python-twitter.

I had plans on using python-twitter in Django application.  The idea was to grab a selection of tweets and post them to a page.  After looking at the twitter search api documentation I decided that wasn't the way to go.  I wanted to use JSON and this project was going to be a good opportunity.  So the goal for using Python Twitter has changed and I will not use json for that project which I am looking forward to.  The moral of the story is that I don't have any plans of using the Python Twitter that I just downloaded.

I also installed Git on my machine and created a GitHub account, https://github.com/ronaldsnyder
The documentation from GitHub does a fantastic job of telling you how to quickly get up and running.

Now that the tools are installed where do we go next?  I would like to get started on writing an attractive resume to post on my website but I am wondering what is the best way to do that.  I am thinking that I will just make a template and use javascript.  This will all be done on my local machine and then uploaded when it is finished.  I will be using Git, GitHub and writing about it.