Πώς να δημιουργήσετε εφαρμογές Ιστού φιλικές προς κινητά χρησιμοποιώντας το Django Framework - Μέρος 3


"Αυτό το άρθρο έχει αναθεωρηθεί και ενημερωθεί με την τελευταία έκδοση του Django – Μάιος 2016 "

Στο Μέρος 1 αυτής της σειράς μάθατε πώς να εγκαταστήσετε και να ρυθμίσετε το Django σε ένα εικονικό περιβάλλον και δημιουργήσατε τον σκελετό του πρώτου σας έργου.

Στη συνέχεια, στο Μέρος 2 δημιουργήσαμε μια εφαρμογή και ένα μοντέλο για αντικείμενα Post, τα οποία αργότερα μετεγκαταστήσαμε στη βάση δεδομένων. Τέλος, σας δείξαμε πώς να ενσωματώσετε την εφαρμογή που δημιουργήθηκε πρόσφατα στη διεπαφή χρήστη διαχείρισης Django.

Αυτά τα άρθρα αποτελούν μέρος της σειράς Django:

Εγκατάσταση και ρύθμιση παραμέτρων του Django Web Framework με εικονικά περιβάλλοντα – Μέρος 1

Ανασκόπηση των βασικών αρχών της Python και δημιουργία της πρώτης σας εφαρμογής Ιστού με το Django – Μέρος 2

Σε αυτόν τον τελικό οδηγό θα συζητήσουμε πώς να αποκτήσετε πρόσβαση στην εφαρμογή χρησιμοποιώντας τη διεπαφή χρήστη και πώς να την κάνετε φιλική προς κινητά για κάθε είδους συσκευές. Τούτου λεχθέντος, ας ξεκινήσουμε.

Δημιουργία αντικειμένων μέσω της διεπαφής διαχειριστή του Django

Για να δημιουργήσουμε αντικείμενα τύπου Post (θυμηθείτε ότι είναι το μοντέλο που ορίσαμε στο Μέρος 2 αυτής της σειράς), θα χρησιμοποιήσουμε τη διεπαφή διαχειριστή του Django.

Βεβαιωθείτε ότι ο ενσωματωμένος διακομιστής ιστού Django εκτελείται στη θύρα 8000 (ή σε άλλη της επιλογής σας) εκτελώντας την ακόλουθη εντολή από τον εξωτερικό κατάλογο myfirstdjangoproject:


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Τώρα ανοίξτε το πρόγραμμα περιήγησής σας και τοποθετήστε το δείκτη του ποντικιού στο http://ip-address:8000/admin, στη συνέχεια συνδεθείτε χρησιμοποιώντας τα διαπιστευτήρια που ρυθμίσατε στο προηγούμενο άρθρο και ξεκινήστε να γράφετε μια ανάρτηση (η οποία, ξανά, θα δημιουργήσει ένα αντικείμενο τύπου Δημοσίευση και θα εισαγάγει τα σχετικά δεδομένα στην υποκείμενη βάση δεδομένων):

Επαναλάβετε τη διαδικασία 2 ή 3 φορές:

Αφού δημιουργήσουμε μερικές αναρτήσεις, ας δούμε τι πρέπει να κάνουμε για να τις εμφανίσουμε χρησιμοποιώντας το πρόγραμμα περιήγησής μας.

Η αρχική μας άποψη

Η πρώτη μας προβολή (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) θα είναι υπεύθυνη για το φιλτράρισμα όλων των αντικειμένων Δημοσίευση και την επιστροφή εκείνων όπου η τιμή του whenPublished είναι μικρότερη ή ίση με την τρέχουσα ημερομηνία και ώρα (whenPublished__lte=timezone.now()) ταξινομούνται με φθίνουσα τιμή whenPublished, που είναι το ίδιο με το να λέμε " πρώτα τα τελευταία“.

Αυτά τα αντικείμενα αποθηκεύονται σε μια μεταβλητή με βολική ονομασία αναρτήσεις και επιστρέφονται (προσδιορίζονται ως allposts) για να ενσωματωθούν στο HTML, όπως θα δούμε στην επόμενη ενότητα:


from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
        posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
        return render(request, 'myblog/posts.html', {'allposts': posts})

Τέλος, η διπλή υπογράμμιση στο whenPublished__lte παραπάνω χρησιμοποιείται για τον διαχωρισμό ενός πεδίου βάσης δεδομένων (whenPublished) από ένα φίλτρο ή μια πράξη (lte=λιγότερο από ή ίσο).

Αφού ορίσουμε την αρχική μας προβολή, ας δουλέψουμε στο σχετικό πρότυπο.

Δημιουργήστε πρότυπο για το πρώτο μας έργο

Ακολουθώντας τις οδηγίες και τις διαδρομές που δόθηκαν στην προηγούμενη ενότητα, θα αποθηκεύσουμε το αρχικό μας πρότυπο στο myblog/templates/myblog. Αυτό σημαίνει ότι θα χρειαστεί να δημιουργήσετε έναν κατάλογο με το όνομα πρότυπα και έναν υποκατάλογο που ονομάζεται myblog:


cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog

Θα καλέσουμε το πρότυπο posts.html και θα εισάγουμε τον ακόλουθο κώδικα σε αυτό. Θα παρατηρήσετε ότι προσθέτουμε διαδικτυακές αναφορές σε γραμματοσειρές jQuery, Bootstrap, FontAwesome και Google.

Επιπλέον, έχουμε περικλείσει κώδικα Python μέσα σε σγουρές αγκύλες μέσα στο HTML. Λάβετε υπόψη ότι για κάθε αντικείμενο τύπου Post θα εμφανίζουμε τον τίτλο του, την ημερομηνία δημοσίευσής του και τον συγγραφέα του και τέλος το κείμενό του. Τέλος, με κόκκινο χρώμα θα δείτε ότι κάνουμε αναφορά στα αντικείμενα που επιστρέφονται μέσω του myblog/views.py:

Εντάξει, ορίστε το αρχείο posts.html:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
    <style>
      .title {
        font-family: 'Indie Flower', serif;
        font-size: 30px;
        color: #1E90FF;
      }
      h1 {
        font-family: 'Pacifico', serif;
        font-size: 45px;
        color: #1E90FF;
      }
    </style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
    <div>
        <div class="title">{{ post.title }}</div>
        <strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
</div>
</body>
</html>

Στο παραπάνω πρότυπο, το φίλτρο αλλαγής γραμμής χρησιμοποιείται για την αντικατάσταση αλλαγών γραμμής σε απλό κείμενο με το αντίστοιχο ισοδύναμο HTML (
ή

) για να μορφοποιήσετε κάθε ανάρτηση σωστά με διαχωρισμό παραγράφων.

Στη συνέχεια, πρέπει να δημιουργήσουμε μια αντιστοίχιση μεταξύ των διευθύνσεων URL στην εφαρμογή μας και των αντίστοιχων προβολών που επιστρέφουν τα δεδομένα. Για να το κάνετε αυτό, δημιουργήστε ένα αρχείο με το όνομα urls.py μέσα στο myblog με το ακόλουθο περιεχόμενο:


from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

Το r'^$' αξίζει λίγο περισσότερη εξήγηση. Το αρχικό r δίνει εντολή στον Django να χειριστεί τη συμβολοσειρά μέσα σε μεμονωμένα εισαγωγικά ως κανονική έκφραση.

Συγκεκριμένα, το r'^$' αντιπροσωπεύει μια κενή συμβολοσειρά έτσι ώστε όταν κατευθύνουμε το πρόγραμμα περιήγησής μας στο http://ip-address:8000 (και τίποτα άλλο), Τα δεδομένα που επιστρέφονται από τη μεταβλητή αναρτήσεις στο views.py (ανατρέξτε στην προηγούμενη ενότητα) θα παρουσιαστούν στην αρχική μας σελίδα:

Τελευταίο, αλλά εξίσου σημαντικό, θα συμπεριλάβουμε το αρχείο urls.py της εφαρμογής ιστολογίου μας (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) στο urls.py του κύριου έργου μας (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):


from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('myblog.urls')),
]

Στη συνέχεια, ας ξεκινήσουμε τον διακομιστή ιστού:


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Θα πρέπει τώρα να μπορούμε να δούμε τις λίστες των αναρτήσεων που δημιουργήσαμε νωρίτερα:

Χάρη στο Bootstrap, μπορείτε ακόμα να έχετε μια εξαιρετική οπτικοποίηση σε μια μικρότερη συσκευή:

Ανακεφαλαίωση

Ας εξετάσουμε τώρα τις έννοιες που έχουμε καλύψει σε αυτό το άρθρο και σε όλη αυτήν τη σειρά:

1. Κάθε μοντέλο ορίζει ένα αντικείμενο και αντιστοιχίζεται σε έναν πίνακα βάσης δεδομένων, τα πεδία του οποίου με τη σειρά τους αντιστοιχίζονται στις ιδιότητες αυτού του αντικειμένου. Από την άλλη πλευρά, ένα πρότυπο ορίζει τη διεπαφή χρήστη όπου θα εμφανίζονται τα δεδομένα που επιστρέφονται από την προβολή.

Ας υποθέσουμε ότι θέλουμε να τροποποιήσουμε το μοντέλο μας προσθέτοντας ένα πεδίο με το όνομα σύνοψη στο αντικείμενο Ανάρτηση, όπου θα αποθηκεύουμε μια προαιρετική σύντομη περιγραφή κάθε ανάρτησης. Ας προσθέσουμε την ακόλουθη γραμμή στο myblog/models.py:

summary = models.CharField(max_length=350, blank=True, null=True)

Όπως μάθαμε στο προηγούμενο άρθρο, πρέπει να μετεγκαταστήσουμε τις αλλαγές στη βάση δεδομένων:


python manage.py makemigrations myblog
python manage.py migrate myblog

Στη συνέχεια, χρησιμοποιήστε τη διεπαφή διαχειριστή για να επεξεργαστείτε τις αναρτήσεις και να προσθέσετε μια σύντομη περίληψη σε κάθε ανάρτηση. Τέλος, αντικαταστήστε την ακόλουθη γραμμή στο πρότυπο (posts.html):

<p>{{ post.text|linebreaks }}</p>

με

<p>{{ post.summary }}</p>

Ανανεώστε την αρχική σελίδα για να δείτε τις αλλαγές:

2. Μια συνάρτηση προβολή λαμβάνει ένα αίτημα HTTP και επιστρέφει μια απόκριση HTTP. Σε αυτό το άρθρο, το def posts( request) στο views.py καλεί την υποκείμενη βάση δεδομένων για να ανακτήσει όλες τις αναρτήσεις. Εάν θέλουμε να ανακτήσουμε όλες τις αναρτήσεις με τη λέξη ansible στον τίτλο, θα πρέπει να τις αντικαταστήσουμε.

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

με

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

Διαχωρίζοντας τη διεπαφή χρήστη από τη λογική της εφαρμογής στις εφαρμογές web, το Django διευκολύνει τις εργασίες συντήρησης και κλιμάκωσης των εφαρμογών.

3. Εάν ακολουθήσατε τις οδηγίες που παρέχονται σε αυτήν τη σειρά, η δομή του έργου σας θα πρέπει να είναι η εξής:


myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── templates
│   │   └── myblog
│   │       └── posts.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── myfirstdjangoproject
    ├── __init__.py
    ├── __init__.pyc
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

Σε περίπτωση που η παραπάνω λίστα δεν εμφανίζεται σωστά στο πρόγραμμα περιήγησής σας, ακολουθεί ένα στιγμιότυπο οθόνης της εξόδου της ακόλουθης εντολής:


tree myfirstdjangoenv/myfirstdjangoproject

Περίληψη

Αν και όλες αυτές οι έννοιες μπορεί να φαίνονται λίγο τρομακτικές στην αρχή, μπορώ να σας διαβεβαιώσω ότι το Django αξίζει όλες τις προσπάθειες που απαιτούνται για να το γνωρίσετε

Ελπίζω ότι το παράδειγμα που χρησιμοποιήσαμε σε αυτήν τη σειρά για να σας παρουσιάσουμε αυτό το εξαιρετικό πλαίσιο ιστού θα σας παρακινήσει να μάθετε περισσότερα. Αν ναι, η επίσημη τεκμηρίωση του Django (η οποία διατηρείται συνεχώς ενημερωμένη) είναι το καλύτερο μέρος για να ξεκινήσετε.

Μπορώ να σας διαβεβαιώσω ότι το Django έχει πολλά περισσότερα από όσα μπορούμε να καλύψουμε επαρκώς σε μια σειρά άρθρων, γι' αυτό μη διστάσετε να το εξερευνήσετε και να μάθετε κάνοντας!

Μη διστάσετε να μας στείλετε ένα σημείωμα με ερωτήσεις ή προτάσεις χρησιμοποιώντας την παρακάτω φόρμα.