Vederi și stiluri externe în Sinatra

Deși este posibil să creați un site web cu Sinatra într-un singur fișier aceasta este într-adevăr o idee proastă, deoarece problema este că cu cât site-ul nostru este mai complex, cu atât va fi mai dificil să navigați în acel fișier și, prin urmare, atunci când apare o eroare, cu atât va fi mai dificil să îl corectați .
Ideea din spatele folosirii unui cadru de genul Sinatra este să ne putem simplifica munca în timp ce profităm de toate instrumentele care ni se oferă în pachet, încorporând și modul nostru de lucru, ceea ce face foarte probabil ca utilizarea unui singur fișier pentru orice să nu fie ceva care este în filozofia noastră.
De aceea putem începe să lucrăm la vizualizări și stiluri externe, astfel încât fiecare vizualizare de care avem nevoie se află într-un fișier separat cu care să putem în primul rând să detectăm erorile mai ușor și, în al doilea rând, să organizăm într-un mod mult mai practic structura proiectului nostru .
1- Mai întâi trebuie să avem limbaj Rubin descărcat, instalat și configurat în mediul nostru de dezvoltare.
2- Acces la internet pentru a putea descărca unele dintre resursele pe care le vom indica în exemple.
3- Permisiuni suficiente pentru a scrie fișiere noi și a crea foldere, pe lângă faptul că puteți executa fișiere cu Rubin.
4- Un editor de text pentru a putea scrie codul pe care îl vom folosi pentru fișiere, poate fi Text sublim sau NotePad ++, dar cu oricine suntem familiarizați ne servește scopul.
HTML În fișierul principal al proiectului nu este recomandat decât dacă site-ul nostru este static sau temporar și trebuie să mergem imediat pe piață cu ceva, deoarece așa cum am menționat, această practică face ca codul nostru să nu poată fi citit și că nu poate fi menținut în timp corespunzător.
Pentru a depăși această problemă care apare, Sinatra ne oferă posibilitatea de a crea vizualizări externe, care nu sunt altceva decât fișiere .erb unde vom plasa HTML corespunzând vederii noastre, unde Sinatra Atunci când direcționați vizualizarea creată, aceasta va căuta imediat aceste fișiere și odată cu aceasta va fi generat răspunsul pentru utilizator. Să vedem în următorul cod cum am creat o vizualizare externă, astfel încât proiectul nostru să arate utilizatorului câteva informații.
Mai întâi ceea ce vom face este să creăm un fișier numit principal.rb și acolo ne creăm structura de bază așa cum vom vedea mai jos:

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

Până acum acest lucru nu reprezintă nimic nou dacă am văzut deja tutorialul primilor pași cu Sinatra, aici ceea ce facem este să importăm biblioteca cu solicita și, în cele din urmă, definim rutele pe care le vor reveni vizualizările, toate cu metoda OBȚINE HTTP.
Acum vom crea un fișier numit layout.erb și o vom plasa într-un folder nou numit vederi care trebuie să fie în același director în care am creat fișierul nostru principal.rb, să vedem codul pe care îl va conține fișierul nostru layout.erb:

start
Despre mine
a lua legatura

Acum, în același folder vederi că tocmai am creat, vom genera un fișier nou pentru a putea testa exemplul nostru, în acest caz îl vom numi acest fișier acasă.erbă și are acest nume deoarece unul dintre traseele noastre este definit în principal.rb are acest nume, pentru a termina în acest fișier vom plasa următorul cod:

Bine ați venit pe site-ul meu, aici vedem cum funcționează prima noastră vizualizare externă Sinatra

Dacă ne uităm cu atenție ne dăm seama că nu este altceva decât HTML. Odată terminat acest lucru, acum mergem pur și simplu la consola de comandă și rulăm noua noastră aplicație, pentru aceasta trebuie doar să executăm următoarele:

 principal rubin.rb

Ce face această comandă este să ridice serverul web de dezvoltare integrat WEBrick așa cum vedem în următoarea imagine:

Odată ce această acțiune este efectuată, putem naviga la pagina noastră cu o vizualizare externă, pentru aceasta vom merge la adresa localhost: 4567, care ne oferă un rezultat ca cel pe care îl putem vedea în următoarea imagine:

MARI

De când am creat prima noastră vizualizare externă, mai avem câteva lucruri de explicat, iar aceasta este structura proiectului, deoarece implicit Sinatra ne așteptăm la o structură care, dacă o urmăm, nu ar trebui să facem altceva, cu toate acestea, dacă nu este pe placul nostru, o putem schimba.
Structura bazeiStructura de bază este un fișier principal în care este inclus cadrul și sunt create rutele, apoi avem două foldere suplimentare, unul numit vederi care este cel pe care îl folosim pentru a stoca fișierele noastre .erb care corespund vizualizărilor și unui folder public unde vom stoca diferite fișiere statice precum .css sau .js.
Dacă vedem următoarea imagine, putem aprecia structura de bază pe care am generat-o pentru aplicarea exemplului anterior:

Aici vedem că se numește folderul principal al proiectului nostru sinatra, apoi la rădăcina acestui lucru avem fișierul nostru principal.rbși, în cele din urmă, avem cele două foldere pe care le-am menționat, împreună cu folderul vederi afișat pentru a afișa cele două fișiere pe care le-am creat în exemplul anterior.
Acum, dacă nu vrem să folosim numele implicite ale Sinatra deoarece din anumite motive aplicația noastră trebuie să aibă alte foldere, așa cum o indicăm pur și simplu în fișier principal.rb după cum urmează:
set: public_folder, 'staticCu această instrucțiune spunem Sinatra că acum în loc să caute un folder public, ar trebui să căutați un folder numit Static.
set: views, 'șabloaneCu această instrucțiune îi spunem Sinatra că, în loc să căutăm vederi căutați șabloane.
Cu aceasta am suprascris deja modul în care cadrul gestionează acele fișiere, oferindu-ne mai multă libertate asupra proiectului nostru.
Acum că înțelegem cum funcționează structura aplicației noastre, vom include stilurile, pentru aceasta putem aplica mai multe abordări, cu toate acestea cea mai recomandată este crearea unui fișier general care să se aplice tuturor vizualizărilor. Deși putem aplica abordarea creării noastre CSS manual, vom explica în acest exemplu cum să adăugăm Bootstrap și astfel să avem un punct de plecare mai solid.
În primul rând trebuie să descărcăm cadrul de Bootstrap și salvați folderul rezultat în directorul nostru public sau static în cazul în care am urmat instrucțiunile pentru schimbarea numelui în explicația structurii folderelor. Apoi în dosarul nostru aspect Vom schimba puțin conținutul etichetei pentru a putea include bibliotecile necesare pentru funcționarea Bootstrap, să vedem modificările aplicate:

Odată ce am inclus bibliotecile din Bootstrap urmează să ne modificăm HTML Pentru a-i oferi o structură mai conformă cu cadrul, cu aceasta putem observa mai direct schimbarea stilurilor pe site-ul nostru:

start
Despre mine
a lua legatura

Dacă ne uităm, am schimbat unele lucruri, în primul rând în etichetă am inclus bibliotecile din Bootstrap, apoi am creat un stil care se aplică numai în interior layout.erb pentru elementele care au id-ul stil, în cazul acestui exemplu, îl aplicăm elementului și, în cele din urmă, folosim componentele lui Bootstrap adăugăm clasa nav nav-tabs pentru a afișa meniul nostru sub formă de file.
Ne repornim serverul de la WEBrick și introducem calea furnizată în care rulează aplicația noastră, care ar trebui să arate după cum urmează cu modificările aplicate:

După cum putem vedea, am aplicat în mod eficient un stil pe aplicația noastră web realizat cu SinatraDesigur, mai este mult de lucru pentru ca această aplicație să fie mai potrivită cu un mediu de producție, cu toate acestea, cu această bază este mult mai ușor să experimentăm și să adăugăm funcționalități care să ne ofere o dezvoltare mult mai completă.
Astfel încheiem acest tutorial, cu care am învățat să ne organizăm proiectul folosind vizualizări externe definind o structură de dosare și făcând aplicația noastră mult mai atractivă prin încorporarea stilurilor, dar nu numai CSS simplu, ci am încorporat cadrul Bootstrap ceea ce ne ajută să creăm interfețe de utilizator mult mai atractive, fără prea multe dureri de cap.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv