Σε αυτήν εδώ την ενότητα στόχος μου είναι να σου δείξω πως να κατασκευάσεις ενα Website το οποίο θα εχει βάση και μέθοδο κατασκευής την χρήση του Bootstrap Framework και το οποίο θα τρέχει στον Server και φυσικά μέσα απο την Node JS. Κάτι δηλαδή πολύ διαφορετικό απο αυτό που έχουμε συνηθίσει με την εννοια της Front-Εnd κατασκευής των ιστοσελίδων. Αυτή την φορά η σελίδα μας θα τρέξει στον server μας όπου εκεί μπορεί να εφαρμόσουμε και μια ποικιλία απο Open Source Packages (Έτοιμα Πακέτα Κώδικα) τα οποία θα εγκαταστήσουμε με τον NPM package manager ωστε να γίνει η σελίδα μας περισσότερο χρηστική αλλα και διαδραστική στον χρήστη που θα την επισκεφθεί.
Πάμε λοιπόν να δούμε τα βήματα μας ενα πρός ένα
ΒΗΜΑ 1
1. Δημιουργώ τον φακελο εκείνο (π.χ projects) που θα φιλοξενήσει το project μας και κανω εγκατάσταση του Express* και Express Generator δίνοντας τις παρακάτω εντολές στην κονσόλα μας:
$mkdir projects
$cd projects
ΚΑΙ
$ npm install -g express
$ npm install -g express generator
*Το Express.js, ή απλά Express, είναι ένα πλαίσιο εφαρμογών ιστού για το Node.js, που κυκλοφορεί ως δωρεάν λογισμικό ανοιχτού κώδικα με άδεια MIT. Έχει σχεδιαστεί για τη δημιουργία διαδικτυακών εφαρμογών και API Αν για τον οποιοδηποτε λόγο προκύψει προβλημα με την εγκατάσταση κλείνω την τρέχουσα συνεδρία κονσόλας και ανοίγω εκ νέου ενα παράθυρο κονσόλας μέσα απο τον φάκελο projects.
Να σημειώσουμε οτι προσθέτοντας το -g στην εντολή μας ουσιαστικά κάνουμε εγκατάσταση του Express "Globally" που σημαίνει ότι το πακέτο εγκαταστάθηκε στο σύστημα μας (όπως πχ η Node JS) και όχι ξεχωριστά στο project που τρέχουμε οπότε και δεν χρειαζεται να εγκαταστήσουμε ξανά οταν φτιάξουμε μια νέα εφαρμογή.
ΒΗΜΑ 2
Άφου ολοκληρώσαμε την εγκατάσταση του Express Framework, Θα πρέπει να δημιουργήσουμε το πλαίσιο έκεινο στο οποίο θα κατασκευάσουμε το Website μας δίνοντας την εντολή (μέσα στον φάκελο projects).
$ express express_website
Αυτή η εντολή δημιουργησε τον φάκελο express_website και μεσα στον οποίο υπάρχει και το αρχείο package.jason του οποίου την χρήση είδαμε σε προήγούμενο post (https://nodejs-build-web-apps.blogspot.com/2021/09/web-server-nodejs.html).
Στη λίστα με τις εξαρτήσεις (dependencies) υπαρχουν οι επεκτάσεις (modules), εκείνα τα εργαλεία που θα μας βοηθήσουν να χτίσουμε το πρότζεκτ μας. Στην λίστα αυτή θα προσθέσουμε και το παρακάτω module που θα χρειαστούμε για την δημιουργία της φόρμας επικοινωνίας της ιστοσελίδας μας.
"nodemailer": "*"
Όταν δεν γνωρίζουμε την τρέχουσα έκδοση ενος module χρησιμοποιώ την έκφραση "*" και το framework θα την εντοπίσει.
Ολοκληρώνουμε το σετάρισμα του framework και κάνουμε εγκατάσταση τον NPM (μεσα στον φάκελο που πριν δημιουργήσαμε) με την εντολή
$npm install
Με τα Βήματα 1 και 2 ολοκληρώσαμε την εγκατάσταση του Express Framework φτιάξαμε δηλαδή εκείνο το πλαίσιο μέσα στο οποίο θα χτίσουμε την ιστοσελίδα μας. Για να τρέξουμε τον server και να δούμε το αποτελεσμα στην οθόνη μας πληκτρολογούμε:
$npm start
Με αυτήν την εντολή ο server μας θα τρέξει σε local host:3000 και η σελίδα μας-εαν ολα πάνε καλά- θα δείχνει έτσι:
ΒΗΜΑ 3
Εδω θα εισάγουμε ενα πρότυπο Bootstrap το οποίο θα χρησιμοποιήσουμε για να μορφοποιήσουμε την σελίδα μας. Στον φακελο views που δημιουργηθηκε σε προηγούμενα βήματα, βρίσκεται το αρχειο layout που είναι ουσιαστικά ενα περίγραμμα html γραμμένο αποκλειστικά για την NodeJS στη πλατφορμα Jade (https://jade-lang.com/).
Αυτό που ουσιαστικά θα κάνουμε είναι να εισάγουμε κώδικα Bootstrap στο προτζεκτ μας. Άρα πηγαίνουμε στην σελίδα του Bootstrap (https://getbootstrap.com) , κατεβάζουμε το αρχείο Bootstrap στον τοπικο μας δίσκο, κάνουμε εξαγωγή τον φάκελο και απο ολα τα αρχεία του επιλέγουμε τα :
1. bootstrap/css/bootstrap.css
και το αντιγράφουμε στο πρότζεκτ μας στην διαδρομή
projects/public/stylesheets
KAI
2. bootstrap/js/bootstrap.css
και το αντιγράφουμε στο πρoτζεκτ μας στην διαδρομή
projects/public/javascript
και τέλος αντιγράφουμε τον φάκελο fonts του Bootstrap στον φάκελο Public του πρότζεκτ μας.
Άφού εχουμε ολοκληρώσει την εισαγωγή του Bootstrap μας ήρθε η η ώρα να εισάγουμε επίσης ένα πρότυπο σελίδας Bootstrap.Έτσι λοιπόν πάμε ξανά στην σελίδα του Bootstrap
getbootstrap.com/examples/starter-template
κάνουμε αντιγραφή του κώδικα του starter-template, δημιουργούμε ένα αρχειο txt στον υπολογιστή μας, κάνουμε επικόλληση , και προχωράμε σε μετατροπές όσο αναφορά τις πηγές των αρχείων μας και συγκεκριμένα:
1.Αλλάζουμε το Bootstrap core CSS σε
stylesheets/bootstrap.css
2. Αλλάζουμε το Custom style for this template σε
stylesheets/style.css
3. Αλλάζουμε το Bootstrap core Javascript σε
javascript/bootstrap.min.js (Δεύτερο script)
ΒΗΜΑ 4
Επίλέγουμε τον κώδικα που παραμετροποιήσαμε, κάνουμε αντιγραφή ώστε να τον μετατρέψουμε σε κωδικα Jade Template Engine που θα μας επιτρέψει να τρέξει σε περιβάλλον Node JS. Για τον λόγο αυτό επιλέγουμε την σελίδα
http://html2jade.aaron-powell.com/
όπου και κάνουμε μετατροπή του κώδικα μας τον οποίο θα χρειαστούμε στο επόμενο βήμα.
ΒΗΜΑ5
Συνεχίζουμε με αλλαγές που θα πρέπει να κάνουμε στο αρχειο layout jade ώστε να είναι συμβατό με τα στοιχεία του Bootstrap.
α. μετατρέπουμε στοιχεία του head όπως δείχνει η παρακάτω εικόνα
β. Στο πεδίο body, αντιγράφουμε και κάνουμε επικόλληση τον κωδικα του menu απο το Bootstrap. Ετσι λοιπον έχουμε:
γ. Στο τελος του αρχείου , αντιγράφουμε και κάνουμε επικόλληση τον κώδικα Javascript απο το Bootstrap. Ετσι λοιπον
και αν τρέξουμε τον σερβερ μας στην γνωστή τοπική διευθυνση η σελίδα μας θα είναι έτσι
Σχόλια
Δημοσίευση σχολίου