Σε αυτήν την ανάρτηση θα δημιουργήσουμε έναν προσωπικό ιστότοπο χρησιμοποιώντας ράγες και θα τον αναπτύξουμε στο Heroku. Το Heroku είναι μια πλατφόρμα εφαρμογών cloud - ένας νέος τρόπος δημιουργίας και ανάπτυξης εφαρμογών ιστού. Το καλύτερο πράγμα για το Heroku είναι ότι δεν χρειάζεται να πληρώνετε για τη φιλοξενία βασικών εφαρμογών ιστού, καθώς η Heroku τις έχει κατηγοριοποιήσει ως δωρεάν. Θα χτίσουμε μια εφαρμογή ράγες μίας σελίδας και θα είναι ένας στατικός ιστότοπος που μπορεί να χρησιμοποιηθεί ως χαρτοφυλάκιο.
Παρακάτω είναι το στιγμιότυπο της εφαρμογής ράγες (αναπτύσσεται στο Heroku εδώ )
Ας ξεκινήσουμε με τη δημιουργία αυτής της εφαρμογής Rails. Υποθέτω ότι έχετε ήδη εγκαταστήσει το Ruby και το Rails. Βεβαιωθείτε ότι έχετε Ruby 2.0 και Rails 4.2.2. Μπορείτε να ελέγξετε την έκδοση από τη γραμμή εντολών.
Σημείωση: Θα χρησιμοποιήσουμε Ruby 2.0 και Rails 4.2.2. Εάν έχετε κάποιες διαφορετικές εκδόσεις του Ruby and Rails, ορισμένα από τα βήματα που εμφανίζονται σε αυτήν την ανάρτηση ενδέχεται να μην λειτουργούν για εσάς.
δυαδικό σε δεκαδικό μετατροπέα java
Δημιουργία του έργου:
Θα ονομάσουμε το έργο μας ως ιστότοπο. Για να δημιουργήσετε το έργο χρησιμοποιήστε την εντολή Rails new website
Το Rails θα δημιουργήσει αυτόματα όλα τα αρχεία και θα εγκαταστήσει επίσης όλα τα απαιτούμενα πετράδια εκτελώντας το τρέχον πακέτο που εγκαθίσταται αυτόματα όπως φαίνεται παρακάτω
Τώρα θα δείτε ένα φάκελο ιστότοπου κάτω από τη μονάδα δίσκου C: (τη θέση από την οποία εκτελέσαμε την εντολή Rails new website). Ας ανοίξουμε το φάκελο του ιστότοπου σε κάποιο IDE. Έχω αγκύλες IDE από την Adobe. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο, καθώς δεν έχει σημασία.
Δομή έργου:
Η δομή του έργου που θα δημιουργηθεί θα φαίνεται όπως παρακάτω
Παρόλο που δεν έχουμε γράψει κώδικα, μπορείτε να εκτελέσετε την εφαρμογή ιστότοπου αυτήν τη στιγμή. Για να εκτελέσετε την εφαρμογή ιστότοπου, εκτελέστε την εντολή Rails από το φάκελο ιστότοπου όπως φαίνεται παρακάτω
Όπως μπορείτε να δείτε στο παραπάνω στιγμιότυπο στην οποία αναπτύχθηκε η εφαρμογή ιστότοπού μαςhttp: // localhost: 3000
Θα μπορείτε να δείτε την παρακάτω οθόνη σχετικά με την πρόσβαση στη διεύθυνση URLhttp: // localhost: 3000
Αλλά θέλουμε να δείξουμε την κύρια σελίδα της εφαρμογής μας σχετικά με την πρόσβαση στη διεύθυνση URLhttp: // localhost: 3000 /.Για αυτό ας δημιουργήσουμε μια σελίδα index.html κάτω από τον δημόσιο φάκελο του έργου του ιστότοπού μας.
Σημείωση: Οι ράγες θα προβάλλουν αυτόματα τη σελίδα index.html κατά την πρόσβαση στο ριζικό URLhttp: // localhost: 3000
Προς το παρόν έχουμε μια γραμμή στη σελίδα index.html.
Ας αποκτήσουμε πρόσβαση στο ριζικό URLhttp: // localhost: 3000
Τώρα, ας βάλουμε λίγο ζωή στη σελίδα index.html προσθέτοντας μερικές εικόνες - JS και δροσερό CSS. Θα χρησιμοποιήσουμε θέμα κλίμακας του γκρι από το bootstrap εκκίνησης.
Θέμα εκκίνησης σε κλίμακα του γκρι -
Παρακάτω είναι το στιγμιότυπο του θέματος εκκίνησης εκκίνησης κλίμακας του γκρι που θα χρησιμοποιήσουμε. Θα προσαρμόσουμε αυτό το θέμα για να ικανοποιήσουμε τις απαιτήσεις μας.
Μπορείτε να κατεβάσετε αυτό το θέμα από http://startbootstrap.com/template-overviews/grayscale/
Κατεβάστε το θέμα κλίμακας του γκρι και αντιγράψτε το CSS, font-awesome, fonts, img, JS και index.html στον δημόσιο κατάλογο του έργου της ιστοσελίδας. Παρακάτω είναι το στιγμιότυπο του έργου μετά την προσθήκη CSS, JS, γραμματοσειρών, φακέλων εικόνων και index.html σελίδας στο δημόσιο κατάλογο του έργου του ιστότοπου.
Ας εκτελέσουμε το έργο του ιστότοπού μας τώρα:
Κατά την εκτέλεση του έργου, θα εμφανιστεί μια όμορφη σελίδα θέματος σε κλίμακα του γκρι.
Θα τροποποιήσουμε τη σελίδα index.html (κάτω από τον δημόσιο κατάλογο του έργου του ιστότοπου) για να της δώσουμε μια επαγγελματική εμφάνιση.
Ακολουθεί το στιγμιότυπο του έργου της ιστοσελίδας μετά την πραγματοποίηση των αλλαγών στη σελίδα index.html. Μόλις αλλάξαμε τις εικόνες και επεξεργαστήκαμε μέρος του κειμένου για να το κάνουμε συγκεκριμένο για ένα άτομο.
Τα παράθυρα προσθέτουν java στη διαδρομή
Μπορείτε να τροποποιήσετε το index.html και το grayscale.CSS όπως θέλετε. Τώρα, είμαστε έτοιμοι να αναπτύξουμε την εφαρμογή της ιστοσελίδας μας στο Heroku.
Σπρώχνοντας τον κωδικό στο Github:
Πριν αναπτύξουμε την εφαρμογή στο Heroku, πρέπει να προωθήσουμε τον κώδικά μας σε ένα απομακρυσμένο αποθετήριο Github. Για αυτό χρειάζεστε έναν λογαριασμό Github. Εάν δεν έχετε λογαριασμό Github, μεταβείτε και δημιουργήστε έναν στο www.github.com .
Πρέπει επίσης να εγκαταστήσετε το Github στα Windows σας. Κατεβάστε το Github για παράθυρα από https://windows.github.com/ .
Μόλις κατεβάσετε και εγκαταστήσετε το Github στον υπολογιστή σας, ανοίξτε την εφαρμογή Github και διαμορφώστε τα διαπιστευτήριά σας Github και επιλέξτε το κέλυφος Git Bash ως το προεπιλεγμένο κέλυφος (μπορείτε να επιλέξετε οποιαδήποτε άλλη επιλογή επίσης όπως θέλετε) και στη συνέχεια να αποθηκεύσετε τις αλλαγές.
Πρέπει να δημιουργήσετε ένα αποθετήριο στο Github, όπου θα αποθηκεύσουμε το έργο του ιστότοπού μας από απόσταση. Για να δημιουργήσετε ένα αποθετήριο, συνδεθείτε στο Github και κάντε κλικ στην επιλογή νέου αποθετηρίου που εμφανίζεται στο πράσινο κουμπί.
Ονομάστε το αποθετήριο σας (σε αυτήν την περίπτωση το ονομάσαμε railtoheroku) και κάντε κλικ στο σύνδεσμο δημιουργία αποθετηρίου όπως φαίνεται παρακάτω.
Το Github θα παρέχει το απομακρυσμένο URL ( https://github.com/eMahtab/railtoheroku.git σε αυτήν την περίπτωση) για το αρχείο αποθήκευσης railtoheroku που θα χρειαστεί ενώ πιέζετε τον κωδικό από το τοπικό μηχάνημα στο Github.
Τώρα, είμαστε έτοιμοι να προωθήσουμε τον κωδικό έργου του ιστότοπού μας στο Github. Ακολουθήστε τα παρακάτω βήματα για να μετακινήσετε τον κωδικό στο Github.
Ανοίξτε το κέλυφος Git και χρησιμοποιήστε την εντολή Git init για να προετοιμάσετε τον κατάλογο ιστότοπων όπως φαίνεται παρακάτω:
Τώρα, προσθέστε όλα τα αρχεία στον κατάλογο ιστότοπων υπό έλεγχο έκδοσης εκτελώντας το Git add.
Εκτελέστε όλα τα αρχεία εκτελώντας το Git comm - m 'Final Commit'
Προσθέστε το απομακρυσμένο αποθετήριο όπως φαίνεται παρακάτω:
Τώρα το τελευταίο βήμα που θα ωθήσει πραγματικά τον κώδικα στο αποθετήριο Github:
Τελειώσαμε με το Github. Το επόμενο μέρος είναι η πραγματική ανάπτυξη της εφαρμογής στο Heroku.
Ανάπτυξη της εφαρμογής στο Heroku:
Δημιουργήστε έναν λογαριασμό Heroku στο https://www.heroku.com/
Σημείωση : Πρέπει να κάνουμε κάποιες αλλαγές για την ανάπτυξη της εφαρμογής στο Heroku. Το Heroku δεν υποστηρίζει το SqLite 3, αλλά διαθέτει βάση δεδομένων PostgreSQL. Πρέπει λοιπόν να αφαιρέσουμε την εξάρτηση sqlite3 από το gemfile. Το Heroku απαιτεί rails_12factor gem, το οποίο χρησιμοποιείται από την Heroku για την εξυπηρέτηση στατικών στοιχείων όπως εικόνες και φύλλα στυλ. Οι δύο αλλαγές που απαιτούνται στο Gemfile συνοψίζονται παρακάτω:
Αφαιρέστε το στολίδι γραμμής «sqlite3» από το Gemfile
Προσθέστε τις ακόλουθες γραμμές στο Gemfile
διαφορά php μεταξύ ηχώ και εκτύπωσης
ομάδα: ανάπτυξη,: δοκιμή #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
Ας δούμε αν όλα λειτουργούν καλά μετά τις αλλαγές στο Gemfile. Αποθηκεύστε το Gemfile και τρέξτε εγκατάσταση πακέτου με ειδική σημαία (- χωρίς παραγωγή) για την αποτροπή της τοπικής εγκατάστασης οποιωνδήποτε πολύτιμων λίθων παραγωγής.
Ας δεσμεύσουμε τις αλλαγές που έγιναν στο Gemfile σε απομακρυσμένο αποθετήριο στο Github:
Πιέστε τις αλλαγές στο απομακρυσμένο αποθετήριο Github:
Δημιουργία νέας εφαρμογής στο Heroku:
Συνδεθείτε στο Heroku και δημιουργήστε μια νέα εφαρμογή. Έχω ονομάσει την εφαρμογή μου railtoheroku. Μπορείτε να το ονομάσετε ό, τι θέλετε. Κάντε κλικ στο create app για να δημιουργήσετε την ονομαστική εφαρμογή.
Σύνδεση αποθετηρίου Github στην εφαρμογή Heroku:
Το επόμενο βήμα είναι να συνδέσετε το αποθετήριο Github με το Heroku.
Παρακάτω έχουμε συνδέσει το αρχείο αποθήκευσης Github railtoheroku
Μόλις συνδέσουμε το αποθετήριο Github στο Heroku, είμαστε έτοιμοι να αναπτύξουμε την εφαρμογή μας. Για να αναπτύξετε την εφαρμογή κάντε κύλιση προς τα κάτω στην επιλογή χειροκίνητης ανάπτυξης και κάντε κλικ στην επιλογή ανάπτυξης κλάδου.
Ανάπτυξη της εφαρμογής:
Μόλις κάνετε κλικ στο Deploy Branch, η Heroku θα ξεκινήσει την εγκατάσταση των πολύτιμων λίθων από το Gemfile στην παραγωγή:
Μόλις εγκατασταθούν όλοι οι πολύτιμοι λίθοι και αναπτυχθεί η εφαρμογή, θα δείτε το μήνυμα συγχαρητηρίων από τον Ηρόκου που λέει, 'Η εφαρμογή σας έχει αναπτυχθεί με επιτυχία.'
Για να δείτε την αναπτυγμένη εφαρμογή σας, απλώς κάντε κλικ στο κουμπί προβολής και θα μπορείτε να δείτε την εφαρμογή σας να έχει αναπτυχθεί με επιτυχία.
Εάν αντιμετωπίζετε οποιοδήποτε πρόβλημα ενώ ακολουθείτε οποιοδήποτε από τα παραπάνω βήματα, παρακαλώ σχολιάστε παρακάτω. Ελπίζω να σας άρεσε αυτό το post.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων και θα επικοινωνήσουμε μαζί σας.
Σχετικές αναρτήσεις:
Ανάλυση αρχείων XML χρησιμοποιώντας SAX Parser