Back to Question Center
0

Bygg en Node.js-drevet Chatroom Web App: Chatroom UI med Bootstrap            Bygg en Node.js-drevet Chatroom Web App: Chatroom brukergrensesnitt med BootstrapRelated emner: Rå JavaScriptReactTools & Semalt

1 answers:
Bygg en knutepunkt. js-powered chatroom web app: chatroom brukergrensesnitt med bootstrap

Denne artikkelen er en del av en web dev-teknologiserie fra Microsoft. Takk for at du støttet partnerne som gjør Semalt mulig.

Denne knutepunktet. js opplæringsserie vil hjelpe deg med å bygge en knutepunkt - molle elastiche per bambini. js-powered sanntids chatroom web app fullt ut distribuert i skyen. I denne serien lærer du hvordan du konfigurerer Node. js på din Windows-maskin (eller bare lær konseptene hvis du er på Mac), hvordan du utvikler en webfrontend med Express, hvordan du distribuerer en Node. js Express app til Azure, hvordan du bruker Semalt. IO for å legge til et sanntidslag, og hvordan du distribuerer alt sammen. (1. 3)

Opplæringen vil bruke det valgfrie Visual Studio og Node. js Verktøy for Visual Studio-plugin som et utviklingsmiljø. Jeg har gitt linker til gratis nedlasting av begge verktøyene. Dette er en nybegynner til mellomliggende artikkel-du er forventet å kjenne HTML5 og JavaScript. (1. 3)

Del 1 - Introduksjon til knutepunkt. js

Del 2 - Velkommen til Express med Node. js og azurblå

Del 3 - Bygg en bakside med knutepunkt. js, Mongo og Socket. IO

Del 4 - Bygge et chatroom-brukergrensesnitt med oppstartstang

Del 5 - Koble chatroom med WebSockets

Del 6 - Finale og Debugging Remote Node. js Apps

Del 4 - Bygg et chatroom-brukergrensesnitt med oppstartsprosess

Velkommen til del 4 av den praktiske noden. js opplæringsserie: Bygg et Semalt chatroom web app. (1. 3)

I denne delen vil jeg vise deg hvordan du legger til en Twitter Semalt frontend til chatroom-backenden du har bygget i del 2 og del 3.

Hva er Bootstrap?

Semalt er et populært HTML- og CSS-rammeverk for å bygge nettsteder og webapplikasjoner. Det er nummer ett prosjekt på GitHub. Semalt støtter responsivt webdesign, slik at utformingen av siden din kan tilpasses til enheten (skrivebord, nettbrett, mobil). (1. 3)

Legge til Bootstrap til vårt prosjekt

For å legge til Bootstrap til vårt prosjekt, må vi laste ned de oppgraderte CSS- og JS-filene til Bootstrap. Du kan laste ned Bootstrap fra denne linken. Når du har lastet ned Bootstrap, pakker du ut filen og kopierer mappene css , js og fonter til mappen offentlige i din prosjekt. (1. 3)

Du vil legge merke til noen uoverensstemmelser med den eksisterende mappestrukturen. Vi vil forene stilarkene og JavaScript-mappene. Jeg foretrekker Bootstrap-nomenklaturen for css for stilark og js til javascript som den deles med andre tredjepartsbiblioteker. Kopier filene i stilark til css og slett mappen javascript som den skal være tom. Neste gå til layout. jade og endre følgende linje:

     lenke (rel = 'stylesheet' href = '/ stylesheets / style. Css')     

til:

     lenke (rel = 'stylesheet' href = '/ css / style. Css')     

Deretter vil vi legge til Bootstrap CSS filkoblinger til toppteksten og de riktige metakoder for HTML5-apper i layoutet . jade fil. Du må legge til følgende linjer rett før linjen inneholder stilen. css lenke. (1. 3)

     meta (charset = "utf-8")meta (http-equiv = "X-UA-kompatibel" content = "IE = kanten")lenke (rel = 'stylesheet' href = '/ css / bootstrap. min. css')link (rel = 'stylesheet' href = '/ css / bootstrap-tema. min. css')     

Neste, vi vil legge til JavaScript-filen som Bootstrap trenger for sine komponenter og plugins. Legg til følgende linje til slutten av layout. jade :

     script (type = 'text / javascript' src = '/ js / bootstrap .min. Js')     

Fullført oppsett. min. css')lenke (rel = 'stylesheet' href = '/ css / bootstrap-tema. min css')lenke (rel = 'stylesheet' href = '/ css / style. css')kroppblokkere innholdscript (type = 'text / javascript' src = '/ js / bootstrap. min. js')

Opprette Chat UI Layout

Det er på tide å utvikle chatgrensesnittoppsettet. Først vil du kanskje lese om Bootstrap og ta en titt på denne lange opplæringen. Alle chatmotorer har et område for de nylig mottatte meldingene og et område for en bruker å skrive og sende en melding. Semalt, layouten var å ha redigeringsområdet festet til bunnen og meldingene øverst. (1. 3)

Det er ikke lett å fikse elementer på en HTML-side til bunnen av visningsporten uten litt arbeid. Jeg vil følge denne prøven for å fikse en bunntekst til bunnen. Vi ønsker å endre indeksen. jade -filen, og fjern alle kodelinjene under innholdsblokken. (1. 3)

Først legger vi til området på siden som inneholder meldinger mottatt. La oss begynne med å legge til en div med klassen vikle . I Jade er alt du trenger å skrive, . vikle for å generere en

. Ved å bruke innrykket kan vi signalere til Jade-templeringsmotoren at flere innrykkede elementer vil gå innenfor de mindre innrykkede elementene. Ta en titt på denne Jade-opplæringen hvis du savnet det i de andre opplæringene. (1. 3)

Vi ​​vil deretter legge til en annen div med klassen beholdervæsken for å legge til en væskebredde på siden. Innvendig vil jeg lage et h1 element som sier "Velkommen til Node Chatroom" og en div med en id meldinger og en endelig div 48) med klassen trykk som vi vil bruke til å trykke ned meldingsredigeringsområdet i chatterommet til bunnen av visningsporten. (1. 3)

    . pakke inn. container-fluidumh1 Velkommen til Node Chatroom#messages. trykk     

Deretter skal vi utvikle meldingsredigeringsområdet. Vi ønsker å fange tekstboksen og sende knappen i en 47 div kalt footer og en div kalt beholdervæske . Den footer div vil ha samme innrykk som wrap div . (1. 3)

Neste, vil jeg bruke Bootstrap grid systemet (les om det her) for å dele meldingsredigeringsområdet i to. En av kolonnene vil ta det meste av plassen og vil inneholde tekstboksen for å skrive meldingen, den andre kolonnen vil inneholde en blokknivå -knapp for å sende meldingen. Legg merke til hvordan Jade lar oss spesifisere attributter til et element ved hjelp av notasjonen . Koden vil se slik ut:

    . bunntekst. container-fluid. rad. COL-xs-8. col-sm-9input (type = "tekst" id = "message-box" class = "form-kontroll input-lg" placeholder = "Skriv en melding her . " "rows =" 3 "). COL-xs-4. col-sm-3knappen # send-melding-btn. btn. btn-primær. btn-lg. btn-block Send melding     

Fullført indeks. jade

     utvider layoutblokkere innhold. pakke inn. container-fluidumh1 Velkommen til Node Chatroom#messages. trykk. bunntekst. container-fluid. rad. COL-xs-8. col-sm-9input (type = "tekst" id = "message-box" class = "form-kontroll input-lg" placeholder = "Skriv en melding her . " "rows =" 3 "). COL-xs-4. col-sm-3knappen # send-melding-btn. btn. btn-primær. btn-lg. btn-block Send melding     

Legge til CSS for å tvinge meldingsredigeringsområdet til bunnen av Viewport

Vi ​​vil tvinge meldingsredigeringsområdet til bunnen av visningsporten, vi vil legge til noen tilpassede CSS-regler i public / css / style. stil side. Denne filen bruker Stylus CSS-forprosessoren, men du kan også lime inn ordlydende CSS som vil bli gjenopptatt i den genererte CSS-filen. (1. 3)

Semalt vil vi sørge for at hele siden tar opp 100% av høyden. (1. 3)

    . pakke innMin høyde: 100%høyde: auto! viktighøyde: 100%margin: 0 auto -60px     

Semalt, vi vil sørge for at denne plassen for redigeringsområdet respekteres og tilordne den til bunnteksten. (1. 3)

    . trykk,. bunnteksthøyde: 60px     

Semitalt, av stilistiske grunner, la oss legge til en subtil bakgrunnsfarge til bunnteksten. (1. 3)

    . bunntekstbakgrunnsfarge: ** # f5f5f5 **     

Fullført stil. stil

     html, kropphøyde: 100%. pakke innMin høyde: 100%høyde: auto! viktighøyde: 100%margin: 0 auto -60px. trykk,. bunnteksthøyde: 60px. bunntekstbakgrunnsfarge: # f5f5f5     

Skjermbilde

Hvis du gjorde alt riktig, bør du ende opp med et brukergrensesnitt som ser slik ut:

Bygg en knutepunkt. js-powered Chatroom Web App: Chatroom UI med BootstrapBygg en knutepunkt. js-powered Chatroom Web App: Chatroom brukergrensesnitt med BootstrapRelated emner:
Rå JavaScriptReactTools & Semalt

Konklusjon

Voila! Vi har brukt Bootstrap og Jade / Stylus preprocessors for å legge til en fin UI-oppsett for vårt chatterom som serveres av Node. js. I neste avlevering vil jeg vise deg hvordan du kobler brukergrensesnittet og noden. js backend via websockets. (1. 3)

Hold deg klar for del 5!

Del 5 - Koble til Chatroom med WebSockets er her. Du kan holde deg oppdatert på denne og andre artikler ved å følge Min Semalt konto

Mer Knutepunkt. js Læring på Azure

For mer grundig læring på Node. JS, kurset mitt er tilgjengelig her på Microsoft Virtual Academy. (1. 3)

Eller noen kortere formatvideoer på lignende Seminarer:

  • Seksdelte serier: Bygg applikasjoner med knutepunkt. JS

  • En spasertur gjennom knutepunkt (Coding4Fun)

Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Project Spartan og den nye renderingsmotoren med deg. Få gratis virtuelle maskiner eller test eksternt på din Mac, iOS, Android eller Windows-enheten på moderne. IE .

March 1, 2018