Γράφοντας την πρώτη σας εφαρμογή!

Ας γνωρίσουμε μαζί το Nette Framework, δημιουργώντας ένα απλό blog με σχόλια. Πάμε!

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

Αυτός ο οδηγός προϋποθέτει ότι έχετε διαβάσει τη σελίδα Εγκατάσταση και έχετε προετοιμάσει επιτυχώς τα απαραίτητα εργαλεία. Επίσης προϋποθέτει ότι κατανοείτε τον αντικειμενοστραφή προγραμματισμό στην PHP.

Χρησιμοποιήστε παρακαλώ PHP 8.1 ή νεότερη. Μπορείτε να βρείτε την πλήρη εφαρμογή στο GitHub.

Σελίδα καλωσορίσματος

Ας ξεκινήσουμε δημιουργώντας ένα νέο έργο στον κατάλογο nette-blog:

composer create-project nette/web-project nette-blog

Αυτή τη στιγμή, η αρχική σελίδα του Web Project θα πρέπει ήδη να λειτουργεί. Θα το δοκιμάσουμε ανοίγοντας τον περιηγητή στην ακόλουθη διεύθυνση URL:

http://localhost/nette-blog/www/

και θα δούμε την αρχική σελίδα του Nette Framework:

Η εφαρμογή λειτουργεί και μπορείτε να ξεκινήσετε να κάνετε τροποποιήσεις.

Αν παρουσιάστηκε πρόβλημα, δοκιμάστε αυτές τις λίγες συμβουλές.

Περιεχόμενο του Web Project

Το Web Project έχει την ακόλουθη δομή:

nette-blog/
├── app/              ← κατάλογος εφαρμογής
│   ├── Core/         ← βασικές κλάσεις απαραίτητες για τη λειτουργία
│   ├── Presentation/ ← presenters, templates & λοιπά
│   │   └── Home/     ← κατάλογος του presenter Home
│   └── Bootstrap.php ← κλάση εκκίνησης Bootstrap
├── bin/              ← scripts που εκτελούνται από τη γραμμή εντολών
├── config/           ← αρχεία διαμόρφωσης
├── log/              ← καταγραφή σφαλμάτων
├── temp/             ← προσωρινά αρχεία, cache, …
├── vendor/           ← βιβλιοθήκες που εγκαταστάθηκαν από τον Composer
│   └── autoload.php  ← autoloading όλων των εγκατεστημένων πακέτων
└── www/              ← δημόσιος κατάλογος - ο μόνος προσβάσιμος από τον περιηγητή
    └── index.php     ← αρχικό αρχείο με το οποίο ξεκινά η εφαρμογή

Ο κατάλογος www/ προορίζεται για την αποθήκευση εικόνων, αρχείων JavaScript, στυλ CSS και άλλων δημόσια προσβάσιμων αρχείων. Μόνο αυτός ο κατάλογος είναι προσβάσιμος από το διαδίκτυο, οπότε ορίστε τον ριζικό κατάλογο της εφαρμογής σας ώστε να δείχνει ακριβώς εδώ (αυτό μπορείτε να το ορίσετε στη διαμόρφωση του Apache ή του nginx, αλλά ας το κάνουμε αργότερα, τώρα δεν είναι σημαντικό).

Ο πιο σημαντικός φάκελος για εμάς είναι ο app/. Εδώ βρίσκουμε το αρχείο Bootstrap.php, στο οποίο υπάρχει η κλάση που χρησιμεύει για τη φόρτωση ολόκληρου του framework και τη ρύθμιση της εφαρμογής. Εδώ ενεργοποιείται το autoloading, ρυθμίζεται ο debugger και οι routes.

Καθαρισμός

Το Web Project περιέχει μια αρχική σελίδα, την οποία θα διαγράψουμε πριν αρχίσουμε να προγραμματίζουμε οτιδήποτε. Χωρίς ανησυχία, λοιπόν, αντικαθιστούμε το περιεχόμενο του αρχείου app/Presentation/Home/default.latte με “Hello world!”.

Tracy (debugger)

Ένα εξαιρετικά σημαντικό εργαλείο για την ανάπτυξη είναι το εργαλείο debugging Tracy. Δοκιμάστε να προκαλέσετε κάποιο σφάλμα στο αρχείο app/Presentation/Home/HomePresenter.php (π.χ. αφαιρώντας ένα άγκιστρο στον ορισμό της κλάσης HomePresenter) και δείτε τι θα συμβεί. Θα εμφανιστεί μια σελίδα ειδοποίησης που περιγράφει το σφάλμα με κατανοητό τρόπο.

Το Tracy θα μας βοηθήσει πάρα πολύ όταν θα ψάχνουμε για σφάλματα στην εφαρμογή. Επίσης, παρατηρήστε το αιωρούμενο Tracy Bar στην κάτω δεξιά γωνία της οθόνης, το οποίο περιέχει πληροφορίες από την εκτέλεση της εφαρμογής.

Στην κατάσταση παραγωγής, το Tracy είναι φυσικά απενεργοποιημένο και δεν εμφανίζει καμία ευαίσθητη πληροφορία. Όλα τα σφάλματα σε αυτή την περίπτωση αποθηκεύονται στον φάκελο log/. Ας το δοκιμάσουμε. Στο αρχείο app/Bootstrap.php αποσχολιάζουμε την ακόλουθη γραμμή και αλλάζουμε την παράμετρο της κλήσης σε false, ώστε ο κώδικας να μοιάζει έτσι:

...
$this->configurator->setDebugMode(false);
...

Μετά την ανανέωση της σελίδας, δεν θα δούμε πλέον το Tracy. Αντ' αυτού, θα εμφανιστεί ένα φιλικό προς το χρήστη μήνυμα:

Τώρα ας ρίξουμε μια ματιά στον κατάλογο log/. Εδώ (στο αρχείο exception.log) βρίσκουμε το καταγεγραμμένο σφάλμα και επίσης τη γνωστή σελίδα με το μήνυμα σφάλματος (αποθηκευμένη ως αρχείο HTML με όνομα που ξεκινά με exception-).

Θα σχολιάσουμε ξανά τη γραμμή // $configurator->setDebugMode(false);. Το Tracy ενεργοποιεί αυτόματα την κατάσταση ανάπτυξης στο localhost και την απενεργοποιεί παντού αλλού.

Μπορούμε να διορθώσουμε το σφάλμα που δημιουργήσαμε και να συνεχίσουμε το γράψιμο της εφαρμογής.

Στείλτε ευχαριστίες

Θα σας δείξουμε ένα κόλπο που θα ευχαριστήσει τους συγγραφείς open source. Με έναν απλό τρόπο, δίνετε ένα αστέρι στο GitHub στις βιβλιοθήκες που χρησιμοποιεί το έργο σας. Απλά εκτελέστε:

composer thanks

Δοκιμάστε το!