Bina Aplikasi Web Sembang Node.js-berkuasa: UI Chatroom dengan Bootstrap

Takeaways Key

Tutorial ini menunjukkan cara membuat UI ruang sembang menggunakan bootstrap dalam aplikasi web yang berkuasa node.js, dengan fokus untuk mewujudkan reka bentuk responsif yang menyesuaikan diri dengan peranti yang berbeza.
• Proses ini melibatkan menambah bootstrap ke projek, mewujudkan susun atur UI sembang, dan menambah CSS untuk memaksa kawasan penyuntingan mesej ke bahagian bawah viewport.
• Tutorial menggariskan langkah -langkah khusus untuk memasukkan bootstrap ke dalam projek, termasuk mengubah suai fail susun atur. Untuk memasukkan pautan fail bootstrap CSS dan fail JavaScript.
• Susun atur UI sembang dibina menggunakan sistem grid bootstrap, dan peraturan CSS tersuai ditambah untuk memastikan kawasan penyuntingan mesej diposisikan di bahagian bawah viewport.

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Siri Tutorial Node.js ini akan membantu anda membina aplikasi web sembang masa nyata yang dikerahkan sepenuhnya di awan. Dalam siri ini, anda akan belajar bagaimana untuk menyiapkan node.js pada mesin Windows anda (atau hanya mempelajari konsep jika anda berada Azure, cara menggunakan socket.io untuk menambah lapisan masa nyata, dan bagaimana untuk menggunakannya bersama-sama.

Tutorial akan menggunakan pilihan Visual Studio dan alat Node.js untuk pemalam Visual Studio sebagai persekitaran pembangunan. Saya telah menyediakan pautan ke muat turun percuma kedua -dua alat. Ini adalah pemula untuk artikel peringkat pertengahan-anda dijangka mengetahui html5 dan javascript.

Bahagian 1 - Pengenalan kepada Node.js

bahagian 2 - selamat datang untuk menyatakan dengan node.js dan azure

Bahagian 3 - Membina backend dengan node.js, mongo dan socket.io

Bahagian 4 - Membangun UI Chatroom dengan Bootstrap

Bahagian 5 - Menghubungkan ruang sembang dengan WebSockets

Bahagian 6 - Akhir dan debug Remote Node.js Apps

Bahagian 4 - Membangun UI Chatroom dengan Bootstrap

Selamat Datang ke Bahagian 4 Siri Tutorial Node.js Hands-on: Membina aplikasi web chatroom-berkuasa node.js.

Dalam ansuran ini, saya akan menunjukkan kepada anda bagaimana untuk menambah frontend gaya bootstrap Twitter ke backend ruang sembang yang anda bina di Bahagian 2 dan Bahagian 3.

Apa itu Bootstrap?

Bootstrap adalah rangka kerja HTML dan CSS yang sangat popular untuk membina laman web dan aplikasi web. Ia adalah projek nombor satu di GitHub. Bootstrap menyokong reka bentuk web responsif, yang membolehkan susun atur halaman anda menyesuaikan diri dengan peranti (desktop, tablet, mudah alih).

Menambah bootstrap ke projek kami

Untuk menambah bootstrap ke projek kami, kami perlu memuat turun fail CSS dan JS yang minified untuk bootstrap. Anda boleh memuat turun bootstrap dari pautan ini. Selepas anda memuat turun bootstrap, unzip fail dan salin ke atas folder CSS, JS, dan fon ke folder awam dalam projek anda.

Anda akan melihat beberapa ketidakkonsistenan dengan struktur folder yang sedia ada. Kami akan menyatukan folder Stylesheets dan JavaScript. Saya lebih suka tatanama bootstrap CSS untuk Stylesheets dan JS untuk JavaScript kerana ia dikongsi dengan perpustakaan pihak ketiga yang lain. Salin fail dalam stylesheets ke CSS dan padamkan folder JavaScript kerana ia harus kosong. Seterusnya pergi ke susun atur.jade dan tukar baris berikut:

link(rel='stylesheet' href='/stylesheets/style.css')

to:

link(rel='stylesheet' href='/css/style.css')

Seterusnya, kami ingin menambah pautan fail CSS bootstrap ke header dan tag meta yang sesuai untuk aplikasi HTML5 dalam fail susun atur.jade. Anda perlu menambah baris berikut sebelum garis yang mengandungi pautan gaya.css.

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

Seterusnya, kami mahu menambah fail JavaScript yang diperlukan oleh bootstrap untuk komponen dan pluginnya. Tambahkan baris berikut ke akhir susun atur.jade:

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

susun atur.jade yang disiapkan

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript')

Membuat susun atur UI sembang

Sudah tiba masanya untuk membangunkan susun atur antara muka pengguna sembang. Pertama, anda mungkin mahu membaca tentang Bootstrap dan melihat tutorial panjang ini. Semua enjin sembang mempunyai kawasan untuk mesej yang baru diterima dan kawasan untuk pengguna menulis dan menghantar mesej. Dari segi sejarah, susun aturnya adalah untuk mempunyai kawasan penyuntingan yang dilampirkan ke bahagian bawah dan mesej di bahagian atas.

Tidak mudah untuk membetulkan elemen pada halaman HTML ke bahagian bawah viewport tanpa sedikit kerja. Saya akan mengikuti sampel ini untuk menetapkan footer ke bahagian bawah. Kami mahu mengubah suai fail index.jade, dan mengeluarkan semua baris kod di bawah blok kandungan.

Pertama, kami menambah kawasan halaman yang akan mengandungi mesej yang diterima. Mari kita mulakan dengan menambah div dengan bungkus kelas. Di Jade, semua yang anda perlukan untuk menulis adalah .Wrap untuk menghasilkan

. Dengan menggunakan lekukan, kita boleh memberi isyarat kepada enjin templating Jade yang lebih banyak unsur -unsur yang diindentasi akan masuk dalam unsur -unsur yang kurang diindentasi. Lihat tutorial Jade ini jika anda terlepas dalam tutorial lain.

Seterusnya, kami mahu menambah div lain dengan cfluid kelas kelas untuk menambah lebar bendalir ke halaman. Di dalam, saya akan membuat elemen H1 yang mengatakan "Selamat Datang ke Bilik Sembang Nod" dan div dengan mesej ID dan div akhir dengan push kelas yang akan kami gunakan untuk menolak kawasan penyuntingan mesej di ruang sembang ke bahagian bawah viewport.

.wrap
  .container-fluid
    h1 Welcome to the Node Chatroom
    #messages
    .push

Seterusnya, kami akan membangunkan kawasan penyuntingan mesej. Kami mahu menangkap kotak teks dan menghantar butang dalam div yang dipanggil footer dan div yang dipanggil cfluid kontena. Div footer akan mempunyai lekukan yang sama seperti bungkus div.

Seterusnya, saya akan menggunakan sistem grid bootstrap (baca tentangnya di sini) untuk memecah kawasan penyuntingan mesej menjadi dua. Salah satu lajur akan mengambil majoriti ruang dan akan mengandungi kotak teks untuk menulis mesej, lajur kedua akan mengandungi butang peringkat blok untuk menghantar mesej. Perhatikan bagaimana Jade membolehkan kita menentukan sifat -sifat elemen menggunakan notasi perenggan. Kod akan kelihatan seperti ini:

link(rel='stylesheet' href='/stylesheets/style.css')

siap index.jade

link(rel='stylesheet' href='/css/style.css')

Menambah CSS untuk memaksa kawasan penyuntingan mesej ke bahagian bawah Viewport

Kami mahu memaksa kawasan penyuntingan mesej ke bahagian bawah viewport, kami akan mahu menambah beberapa peraturan CSS tersuai di halaman awam/CSS/style.styl. Fail ini menggunakan preprocessor stylus CSS tetapi anda juga boleh menyisipkan CSS verbatim yang akan dimasukkan semula ke dalam fail CSS yang dihasilkan.

Pertama, kami ingin memastikan keseluruhan halaman mengambil 100% ketinggian.

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

Kedua, kami ingin memastikan kawasan bungkus mengambil ketinggian maksimum yang boleh tetapi meninggalkan margin 60px di bahagian bawah untuk kawasan pengeditan dan mesej kami.

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

Ketiga, kami ingin memastikan bahawa ruang ini untuk kawasan penyuntingan dihormati dan memberikannya kepada footer.

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript')

Akhirnya, atas sebab -sebab gaya, mari kita tambahkan warna latar belakang yang halus ke footer.

.wrap
  .container-fluid
    h1 Welcome to the Node Chatroom
    #messages
    .push

siap gaya.Styl

.footer
  .container-fluid
    .row
      .col-xs-8.col-sm-9
        input(type="text"   placeholder="Write a message here..." rows="3")
      .col-xs-4.col-sm-3
        button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

screenshot

Jika anda melakukan semuanya dengan betul, anda harus berakhir dengan UI yang kelihatan seperti ini:

Kesimpulan

voila! Kami telah menggunakan bootstrap dan preprocessor jed/stylus untuk menambah susun atur UI yang bagus untuk ruang sembang kami yang disampaikan oleh Node.js. Dalam ansuran seterusnya, saya akan menunjukkan kepada anda cara menyambungkan UI dan backend node.js melalui WebSockets.

Tunggu untuk Bahagian 5!

Bahagian 5 - Menghubungkan ruang sembang dengan WebSockets ada di sini. Anda boleh terus terkini mengenai artikel ini dan lain-lain dengan mengikuti akaun Twitter saya

lebih banyak pembelajaran node.js pada azure

Untuk pembelajaran lebih mendalam di Node.js, kursus saya boleh didapati di Microsoft Virtual Academy.

atau beberapa video yang lebih pendek pada Node.js Subjek yang serupa:

• siri enam bahagian: aplikasi bangunan dengan node.js

• bersiar -siar melalui nod (coding4fun)

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Kami teruja untuk berkongsi Projek Spartan dan enjin rendering baru dengan anda. Dapatkan Mesin Maya Percuma atau Ujian dari jauh pada peranti Mac, iOS, Android, atau Windows anda di Modern.ie .

Soalan Lazim (Soalan Lazim) Mengenai Membangun Aplikasi Web Chatroom-Powered Node.js

bagaimana saya boleh menyesuaikan UI sembang di aplikasi web chatroom-bertenaga node.js saya? fail yang berkaitan dengan UI sembang. Anda boleh menukar warna, fon, dan susun atur UI sembang untuk memenuhi keutamaan anda. Anda juga boleh menambah ciri tambahan seperti emojis, perkongsian fail, dan mesej suara dengan mengintegrasikan perpustakaan pihak ketiga atau menulis kod tersuai anda sendiri. Ingatlah untuk menguji perubahan anda dengan teliti untuk memastikan mereka berfungsi seperti yang diharapkan dan tidak memperkenalkan pepijat ke dalam aplikasi anda. , penting untuk memberi tumpuan kepada kebolehgunaan dan kesederhanaan. UI sembang harus intuitif dan mudah digunakan, walaupun untuk pengguna kali pertama. Ia juga harus responsif, bermakna ia harus kelihatan dan berfungsi dengan baik pada semua peranti dan saiz skrin. Amalan terbaik lain termasuk memberi maklum balas kepada pengguna (seperti menunjukkan apabila mesej telah dihantar atau dibaca), yang membolehkan penyesuaian (seperti mengubah saiz tema atau fon), dan memastikan kebolehaksesan (seperti menyediakan teks alt untuk imej dan membuat pasti UI boleh dilayari melalui papan kekunci).

Bagaimana saya boleh menambah fungsi masa nyata ke aplikasi web ruang sembang saya? App Menggunakan WebSocket, protokol yang menyediakan saluran komunikasi penuh-dupleks melalui satu sambungan TCP. Ini membolehkan komunikasi masa nyata antara klien dan pelayan. Dalam node.js, anda boleh menggunakan perpustakaan seperti socket.io untuk melaksanakan fungsi WebSocket dengan mudah. Ini akan membolehkan mesej dihantar dan diterima dengan serta-merta, memberikan pengalaman sembang yang lancar untuk pengguna anda. adalah aspek penting dari mana -mana aplikasi web. Dalam node.js, anda boleh mengendalikan kesilapan menggunakan fungsi middleware. Fungsi -fungsi ini boleh menangkap dan mengendalikan kesilapan yang berlaku semasa pelaksanaan kod anda. Anda juga boleh menggunakan blok Try/Catch untuk mengendalikan kesilapan dalam kod segerak. Penting untuk memberikan mesej ralat yang bermaklumat kepada pengguna dan untuk log kesilapan untuk tujuan debug. melibatkan beberapa langkah. Pertama, anda harus menggunakan HTTPS untuk menyulitkan data dalam transit. Kedua, anda harus membersihkan input pengguna untuk mencegah serangan skrip lintas tapak (XSS). Ketiga, anda harus menggunakan kuki yang selamat untuk mencegah rampasan sesi. Keempat, anda harus melaksanakan kadar yang mengehadkan untuk mencegah serangan kekerasan. Akhirnya, anda harus menyimpan node.js anda dan semua perisian lain yang terkini untuk mendapat manfaat daripada patch keselamatan terkini.

Bagaimana saya boleh skala aplikasi web chatroom node.js-berkuasa? Satu kaedah biasa adalah skala mendatar, yang melibatkan menambah lebih banyak pelayan untuk mengendalikan beban yang meningkat. Kaedah lain adalah skala menegak, yang melibatkan menambah lebih banyak sumber (seperti CPU atau RAM) ke pelayan yang sedia ada. Anda juga boleh menggunakan pengimbangan beban untuk mengedarkan lalu lintas secara merata di beberapa pelayan.

Bagaimana saya boleh menguji aplikasi web bilik sembang saya? pengalaman pengguna yang baik. Anda boleh menggunakan ujian unit untuk menguji fungsi individu, ujian integrasi untuk menguji bagaimana bahagian aplikasi anda berfungsi bersama-sama, dan ujian akhir-ke-akhir untuk menguji aplikasi anda dari perspektif pengguna. Anda juga boleh menggunakan ujian manual untuk menangkap sebarang masalah yang mungkin dilewatkan oleh ujian automatik. Aplikasi web boleh dilakukan menggunakan pelbagai platform, seperti Heroku, AWS, atau Google Cloud. Platform ini menyediakan alat dan perkhidmatan yang memudahkan untuk digunakan, skala, dan memantau aplikasi anda. Anda juga harus mempertimbangkan menggunakan alat penyepaduan berterusan/berterusan (CI/CD) untuk mengautomasikan proses penempatan dan memastikan aplikasi anda sentiasa terkini. 🎜>

Memantau prestasi aplikasi web ruang sembang anda adalah penting untuk memastikan ia tetap cepat dan responsif. Anda boleh menggunakan alat seperti New Relic atau Datadog untuk memantau prestasi aplikasi anda dalam masa nyata. Alat ini dapat memberikan pandangan ke dalam pelbagai metrik, seperti masa tindak balas, kadar ralat, dan beban pelayan. aplikasi web chatroom anda boleh dicapai melalui pelbagai kaedah. Pertama, anda harus memberi tumpuan kepada prestasi, sebagai aplikasi yang cepat dan responsif memberikan pengalaman pengguna yang lebih baik. Kedua, anda harus membuat aplikasi anda dapat diakses oleh semua pengguna, termasuk mereka yang kurang upaya. Ketiga, anda harus mendengar maklum balas pengguna dan membuat penambahbaikan berdasarkan cadangan mereka. Akhirnya, anda harus kerap mengemas kini aplikasi anda untuk menambah ciri -ciri baru dan memperbaiki sebarang pepijat.

Atas ialah kandungan terperinci Bina Aplikasi Web Sembang Node.js-berkuasa: UI Chatroom dengan Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!