Viste e stili esterni a Sinatra

Sebbene sia possibile realizzare un sito web con Sinatra in un unico file questa è davvero una pessima idea, poiché il problema è che più il nostro sito è complesso, più sarà difficile navigare in quel file e quindi quando si verifica un errore, più sarà difficile correggerlo .
L'idea alla base dell'utilizzo di un framework come Sinatra è poter semplificare il nostro lavoro mentre sfruttiamo tutti gli strumenti che ci vengono offerti nel pacchetto, incorporando anche il nostro modo di lavorare, il che rende molto probabile che utilizzare un unico file per tutto non sia qualcosa che è nella nostra filosofia.
Ecco perché possiamo iniziare a lavorare su viste e stili esterni, in modo che ogni vista di cui abbiamo bisogno sia in un file separato con il quale possiamo in primo luogo essere in grado di rilevare più facilmente gli errori e in secondo luogo organizzare in modo molto più pratico la struttura del nostro progetto .
1- Dobbiamo avere prima la lingua Rubino scaricato, installato e configurato nel nostro ambiente di sviluppo.
2- Accesso a Internet per poter scaricare alcune delle risorse che indicheremo negli esempi.
3- Autorizzazioni sufficienti per scrivere nuovi file e creare cartelle, oltre a poter eseguire file con Rubino.
4- Un editor di testo per poter scrivere il codice che useremo per i file, può essere Testo sublime o NotePad ++, ma qualunque cosa abbiamo familiarità serve al nostro scopo.
Il HTML Nel file principale del progetto non è raccomandato a meno che il nostro sito non sia statico o temporaneo e abbiamo bisogno di andare immediatamente al mercato con qualcosa, poiché come abbiamo detto, questa pratica rende il nostro codice non leggibile e che non può essere mantenuto in tempo correttamente.
Per superare questo problema che si presenta, Sinatra ci offre la possibilità di creare viste esterne, che altro non sono che file .erb dove collocheremo il HTML corrispondente al nostro punto di vista, dove Sinatra Quando instrada la vista creata, cercherà immediatamente questi file e con questo verrà generata la risposta per l'utente.Vediamo nel codice seguente come abbiamo creato una vista esterna in modo che il nostro progetto mostri all'utente alcune informazioni.
Per prima cosa quello che faremo è creare un file chiamato principale.rb e lì creiamo la nostra struttura di base come vedremo di seguito:

 require 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Finora questo non rappresenta nulla di nuovo se abbiamo già visto il tutorial dei primi passi con Sinatra, qui quello che facciamo è importare la libreria con richiedere e infine definiamo i percorsi che ritorneranno le viste, il tutto con il metodo OTTENERE HTTP.
Ora creeremo un file chiamato layout.erb e lo collocheremo in una nuova cartella chiamata visualizzazioni che deve trovarsi nella stessa directory in cui abbiamo creato il nostro file principale.rb, vediamo il codice che conterrà il nostro file layout.erb:

Cominciare
Riguardo a me
Contatto

Ora nella stessa cartella visualizzazioni che abbiamo appena creato genereremo un nuovo file per poter testare il nostro esempio, in questo caso lo chiameremo questo file home.erb e ha questo nome perché uno dei nostri percorsi definiti in principale.rb ha questo nome, per finire in questo file inseriremo il seguente codice:

Benvenuti nel mio sito web, qui vediamo come funziona la nostra prima vista esterna Sinatra

Se osserviamo bene ci accorgiamo che non è altro che HTML. Fatto questo, ora andiamo semplicemente alla console dei comandi ed eseguiamo la nostra nuova applicazione, per questo dobbiamo solo eseguire quanto segue:

 ruby principal.rb

Ciò che fa questo comando è sollevare il server Web di sviluppo integrato WEBrick come vediamo nell'immagine seguente:

Una volta eseguita questa azione possiamo navigare alla nostra pagina con una vista esterna, per questo andremo all'indirizzo host locale: 4567, che ci dà un risultato come quello che possiamo vedere nell'immagine seguente:

INGRANDIRE

Dato che abbiamo creato la nostra prima vista esterna abbiamo ancora alcune cose da spiegare, e questa è la struttura del progetto, poiché di default Sinatra aspettatevi una struttura che se la seguiamo non dovremmo fare altro, invece se non è di nostro gradimento possiamo cambiarla.
Struttura di baseLa struttura di base è un file principale che è dove viene incluso il framework e vengono creati i percorsi, quindi abbiamo due cartelle aggiuntive, una chiamata visualizzazioni che è quello che usiamo per archiviare i nostri file .erb che corrispondono alle viste e a una cartella pubblico che è dove memorizzeremo i diversi file statici come .css o .js.
Se vediamo l'immagine seguente possiamo apprezzare la struttura di base che abbiamo generato per l'applicazione dell'esempio precedente:

Qui vediamo che la cartella principale del nostro progetto si chiama sinatra, quindi alla radice di questo abbiamo il nostro file principale.rb, e infine abbiamo le due cartelle che abbiamo menzionato, con la cartella visualizzazioni visualizzato per mostrare i due file che abbiamo creato nell'esempio precedente.
Ora cosa succede se non vogliamo usare i nomi predefiniti di Sinatra poiché per qualche motivo la nostra applicazione deve avere altre cartelle, come semplicemente lo indichiamo nel file principale.rb come segue:
set: public_folder, 'statico'Con questa istruzione diciamo Sinatra che ora invece di cercare una cartella pubblico, dovresti cercare una cartella denominata Static.
set: viste, "modelli"Con questa istruzione diciamo a Sinatra che invece di cercare visualizzazioni cercare modelli.
Con questo abbiamo già sovrascritto il modo in cui il framework gestisce quei file, dandoci più libertà sul nostro progetto.
Ora che abbiamo capito come funziona la struttura della nostra applicazione, includeremo gli stili, per questo possiamo applicare diversi approcci, tuttavia il più consigliato è creare un file generale che si applichi a tutte le viste. Sebbene possiamo applicare l'approccio di creare il nostro CSS manualmente, spiegheremo in questo esempio come aggiungere Bootstrap e quindi avere un punto di partenza più solido.
Prima di tutto dobbiamo scaricare il framework di Bootstrap e salva la cartella risultante nella nostra directory pubblico o statico nel caso in cui abbiamo seguito le istruzioni per il cambio nome nella spiegazione della struttura delle cartelle. Poi nel nostro file disposizione Cambieremo un po' il contenuto dell'etichetta per poter includere le librerie necessarie per il funzionamento di Bootstrap, vediamo le modifiche applicate:

Una volta incluse le librerie di Bootstrap modificheremo il nostro HTML Per dargli una struttura più in linea con il framework, con questo possiamo notare più direttamente il cambio di stili sul nostro sito:

Cominciare
Riguardo a me
Contatto

Se guardiamo abbiamo cambiato alcune cose, prima di tutto nell'etichetta abbiamo inserito le librerie di Bootstrap, quindi abbiamo creato uno stile che si applica solo all'interno layout.erb per gli elementi che hanno l'id stile, nel caso di questo esempio lo applichiamo all'elemento e infine utilizzando i componenti di Bootstrap aggiungiamo la classe nav schede di navigazione per visualizzare il nostro menu sotto forma di schede.
Riavviamo il nostro server da WEBrick e entriamo nel percorso fornito in cui viene eseguita la nostra applicazione, che dovrebbe apparire come segue con le modifiche applicate:

Come possiamo vedere abbiamo effettivamente applicato uno stile alla nostra applicazione web realizzata con SinatraCerto, c'è ancora molto lavoro da fare affinché questa applicazione sia più in linea con un ambiente di produzione, tuttavia con questa base è molto più semplice sperimentare e aggiungere funzionalità che ci daranno uno sviluppo molto più completo.
Concludiamo così questo tutorial, con il quale abbiamo imparato a organizzare il nostro progetto utilizzando viste esterne definendo una struttura di cartelle e rendendo la nostra applicazione molto più attraente incorporando stili, ma non solo semplici CSS, ma abbiamo incorporato il framework Bootstrap che ci aiuta a creare interfacce utente molto più attraenti senza molti grattacapi.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo