Django for Designers: Difference between revisions
imported>Aldeka No edit summary |
imported>Aldeka |
||
Line 36: | Line 36: | ||
The first step is to open your terminal window, navigate to the folder where you plan to store your app code (where you set up your virtualenv for this tutorial earlier) and activate your env: |
The first step is to open your terminal window, navigate to the folder where you plan to store your app code (where you set up your virtualenv for this tutorial earlier) and activate your env: |
||
<source>$ source env/bin/activate</source> |
<source lang="bash">$ source env/bin/activate</source> |
||
You'll know it worked because afterwards, you'll see <source>(env)</source> at the front of all your terminal lines in that terminal window! |
You'll know it worked because afterwards, you'll see <source>(env)</source> at the front of all your terminal lines in that terminal window! |
||
Line 44: | Line 44: | ||
If you're following this tutorial at PyCon, in your terminal, run: |
If you're following this tutorial at PyCon, in your terminal, run: |
||
<source>$ git clone git://github.com/aldeka/pycon-django-tutorial.git</source> |
<source lang="bash">$ git clone git://github.com/aldeka/pycon-django-tutorial.git</source> |
||
This will download a few files that we'll be using in this tutorial. |
This will download a few files that we'll be using in this tutorial. |
||
Line 56: | Line 56: | ||
To make your first branch, first enter the pycon-django-tutorial directory: |
To make your first branch, first enter the pycon-django-tutorial directory: |
||
<source>$ cd pycon-django-tutorial</source> |
<source lang="bash">$ cd pycon-django-tutorial</source> |
||
Then enter: |
Then enter: |
||
<source>$ git branch my-branch-1</source> |
<source lang="bash">$ git branch my-branch-1</source> |
||
Congratulations! You're now in a branch named my-branch-1! |
Congratulations! You're now in a branch named my-branch-1! |
||
Line 66: | Line 66: | ||
You can see what branch you are in (and what branches are in your repository) at any time by typing: |
You can see what branch you are in (and what branches are in your repository) at any time by typing: |
||
<source>$ git branch</source> |
<source lang="bash">$ git branch</source> |
||
====Set up your settings and database==== |
====Set up your settings and database==== |
Revision as of 23:05, 23 February 2013
Introduction
In this tutorial, we will explain topics and provide commands for you to run on your own computer. You will leave with a working social bookmarking web app!
This is a tutorial on web programming, so we will go beyond just Django and discuss third-party Django apps and other real-world web development tools. We'll also be emphasizing areas of Django that particularly affect designers, such as static files, template inheritance, and AJAX.
Things you should know already
- HTML familiarity
- Basic Python proficiency
- Basic or better Javascript proficiency
- Pre-requisites that we will help with
We expect you to have git, Python, and a few other elements ready on your laptop before the tutorial. We will publish a laptop setup guide that steps you through:
- Installing Python, git, pip, virtualenv, and a reasonable text editor
- Setting up your env with Django, South, and django-debug-toolbar
- Basic command line knowledge (cd, ls, etc)
- Basic git knowledge
- Setting up your git repo for the tutorial
Things you do not need to know already:
- Django :)
- What an ORM is
- Anything database related
Curriculum
Part 1: Starting our project
This tutorial goes through the process of building a simple social bookmarking application, where users can save various URLs and tag those bookmarks to make them easier to find later. Our bookmarks application will be built on top of Django, a full-featured web framework written in Python.
Activate your env
The first step is to open your terminal window, navigate to the folder where you plan to store your app code (where you set up your virtualenv for this tutorial earlier) and activate your env:
$ source env/bin/activate
You'll know it worked because afterwards, you'll see
(env)
at the front of all your terminal lines in that terminal window!
Start your project
If you're following this tutorial at PyCon, in your terminal, run:
$ git clone git://github.com/aldeka/pycon-django-tutorial.git
This will download a few files that we'll be using in this tutorial.
Additionally, this sets us up to use a program called git to save our progress and sync up later, in case any of you get stuck. If you're not familiar with git, git is a version control system that tracks changes you make to files within a git repository (the folder you just cloned). You make commits in git, which are like save points in video games -- the commit messages tell you what changes are included in this commit. If later on you make some changes and delete something or mess something up, you can always go back to a previous commit and try again.
Git also has "branches"--parallel timelines where you can go off from the main branch (called "master") and try something out. It's often a good idea to start a new branch when you're writing a new feature. You can make as many commits as you want inside the branch, and it won't affect the main master timeline. You can make as many branches as you want, and branches of branches. You can even share branches with others (though we won't be doing that today). Git's branching system (and its non-centralized architecture generally) make it easy to try out new ideas in code without having to ask permission of everyone else who might be working on the same code as you. Then, when your new feature is done, you can then merge (or rebase--the exact process would take a much longer explanation) the changes back into the master timeline.
We'll be using the master branch (the default name for the main branch of code, which you're in right now) for syncing up throughout the class in case you get lost. You'll need to make your own branches for playing with the code on your computer, so that it doesn't interfere w. re-syncing later.
To make your first branch, first enter the pycon-django-tutorial directory:
$ cd pycon-django-tutorial
Then enter:
$ git branch my-branch-1
Congratulations! You're now in a branch named my-branch-1!
You can see what branch you are in (and what branches are in your repository) at any time by typing:
$ git branch
Set up your settings and database
Projects vs. apps distinction
Set up tests, watch them fail
Start your first app
Syncdb
Part 2: URLs, basic views, templates, static files
M-V-C separation concept
Writing our URLs
Handling those URLs with placeholder views
Django templates 101
Static files
Part 3: Models, our database, and making it visible
Introduction to databases and the ORM, or: finally, something we couldn't've done with plain HTML/CSS/JS!
Creating a basic model, in models.py
Creating tables (carefully, with South)
Add data to your app via the command line
Database migrations and South, part 2
Modify views and templates to use model data
Part 4: Reusing others' apps
Users and authentication
CRUD with Django forms
Part 5: AJAX and style time
Adding and updating bookmarks with JSON and asynchronous Javascript
(sync up here)
Time to make our CSS and/or JS more awesome!
Part 6: Sharing with others
Surfing to classmates' "runserver" instances
Deployment on Heroku
Brief discussion of other deployment options
Part 7: Exercises for the reader
Writing your own tests
Write your own styles / JS frontend behavior
Handling user-uploaded media
Accessing a Django-powered API (Tastypie)
Learn about regular expressions (those crazy things we used in URLs)
Learn about relational databases