Membuat Sebuah Aplikasi Web Kolaboratif dengan PubNub, React.js dan ES6

() translation by (you can also view the original English article)

Dalam tutorial saya sebelumnya, saya tunjukkan bagaimana prototipe Internet of Things devices, dan juga visualisasi data dibuat dari sensor hardware, menggunakan PubNub's Data Stream jaringan. Dalam tutorial ini, aku akan menunjukkan kepada Anda bagaimana menggunakan PubNub untuk membangun aplikasi real-time web kolaboratif menggunakan React.js, yang memungkinkan Anda memanipulasi DOM sangat efisien, dan generasi berikutnya dari JavaScript, ES6.

Live Demo: Kolaboratif perekat

Saya telah menciptakan dua versi dari aplikasi Stickie catatan yang sama: yang saya host di CodePen ini menggunakan versi host CDN react, dan lainnya adalah di GitHub, menggunakan Manajer paket. Dalam tutorial ini, saya menggunakan "lite" versi yang kedua. Saya akan berjalan melalui cara membangun app, menggunakan semua barang: npm, webpack, Babel untuk indeks harga saham, dan ES6!

Prasyarat

Untuk Mengikutinya, Anda perlu:

pemahaman dasar tentang React
pengetahuan manajer paket npm untuk men-download, menginstal, dan mengelola dependensi
bekerja pengetahuan tentang builder modul webpack, untuk bundel JavaScript dan aset lainnya untuk browser (kerjanya mirip mendengus atau menelan)
Node.js dan npm yang terpasang pada mesin Anda

Tutorial ini tidak mencakup bagaimana untuk memulai dengan bereaksi. Namun, Anda dapat mempelajari lebih dari baik Envato Tuts + tutorial lain.

Apa yang Anda akan lakukan

Anda akan membangun aplikasi web sederhana menggunakan PubNub sekarang. PubNub adalah Data Stream jaringan (DSN) yang menyediakan infrastruktur global yang memungkinkan Anda untuk membangun dan skala real-time aplikasi dan perangkat IoT dengan mudah. Di sini, Anda akan menciptakan shareable "stickie notes". Ini adalah app alur pengguna:

Pengguna log in.
Segera setelah pengguna memasukkan nama, app mengambil catatan terakhir 50, jika ada.
Pengguna mengetik sesuatu di stickie pad, dan menekan tombol kembali untuk mengirimkan.
Catatan stickie baru muncul bersama dengan catatan lain pada browser Anda, serta setiap browser lain dari semua pengguna yang sedang online.

Sekarang, mari kita mulai!

React

Aplikasi modern Web dengan bereaksi dan Redux

Andrew Burgess

Instalasi paket

Dalam direktori aplikasi Anda, jalankan npm init untuk mengatur file package.json Anda, dan kemudian menginstal modul-modul ini.

Instal webpack modul builder, yang mengkompilasi, concatenates, minifies, dan kompres statis aset untuk front-end:

$ npm install webpack --save-dev

Menginstal webpack web server untuk menjalankan server lokal:
$ npm install webpack-dev-server --save-dev

Instal React, React DOM dan CSS animation add-ons:
$ npm install react react-dom react-addons-css-transition-group --save

Menginstal Babel menggunakan BEJ dan ES6. Kami akan menulis dengan ES6 (ES 2015), yang merupakan generasi JavaScript, dengan bantuan dari Babel, kompiler:
$ sudo npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save

Instal PubNub untuk real-time komunikasi:
$ npm install pubnub --save

Mengkonfigurasi App struktur dan Web Server

Buat struktur app Anda mirip dengan ini:

├── /app
 │   ├── app.jsx
 │   ├── stickie.jsx
 │   ├── stickieList.jsx
 ├── /dist
 ├── /css
 ├── /images
 ├── /node_modules
 ├── index.html
 ├── package.json
 └── webpack.config.js

Dan mengkonfigurasi webpack.config.js:

var webpack = require('webpack');
 module.exports = {
   entry: './app/app.jsx',
   output: {path: './dist', filename: 'bundle.js'},
   watch: true,
   module: {...}
 }

Lihat file konfigurasi seluruh di repo GitHub ini.

Pada dasarnya, Anda menetapkan catatan file (top-level file) dan tujuan output yang mana semua Anda js (dan .jsx) file akan dibangun ke satu file, setelah Anda menjalankan perintah webpack. Juga, dengan menetapkan watch:true, Anda memastikan bahwa webpack akan melihat perubahan file Anda dan membangun kembali output file secara otomatis.

Membuat File index.html

Termasuk script bundle.js di file index.html Anda:

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Collaborative Stickies</title>
     <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
     <section id="container"></section>
     <script src="dist/bundle.js"></script>
   </body>
 </html>

Juga, melihat elemen dengan id="container" dalam tubuh. Ini adalah dimana Anda React app akan dimasukkan.

Menjalankan Server Dev Webpack

Anda dapat menjalankan dev server dengan perintah,
$ ./node_modules/.bin/webpack-dev-server

Atau Anda dapat mengatur it up di package.json Anda dengan menambahkan baris ini:

1	"scripts": {
2	"start": "webpack-dev-server"
3	},
4

Sehingga Anda dapat menjalankan server dengan perintah npm start sebagai gantinya.

Di browser Anda, pergi ke http://localhost:8080/webpack-dev-server, dan Anda akan melihat aplikasi Anda (halaman HTML kosong sejauh) berjalan ada.

Membuat komponen bereaksi dengan ES6

Membuka file app.jsx baru di bawah direktori app, karena Anda dikonfigurasi untuk masuk di webpack.config.js Anda. Seperti yang Anda lihat dari ekstensi file, kita akan menggunakan ekstensi sintaks JavaScript BEJ.

Pertama, mengimpor modul dan file yang diperlukan untuk app.jsx:

1	import React from 'react';
2	import ReactDOM from 'react-dom';
3	import StickieList from './stickieList';
4	import 'pubnub';

Pernyataan impor, baru diperkenalkan di ES6, digunakan untuk impor fungsi, objek atau primitif yang telah diekspor dari modul eksternal atau script.

Kemudian menentukan kelas, CollabStickies, yang meluas kelas React.Component, menggunakan Deklarasi ini kelas ES6. Ini setara dengan metode React.createClass dengan ES5:

class CollabStickies extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       stickieList: []
     }
   }
 
   componentWillMount() {
     … // will explain later
   }
 ...
   render() {
     return (
       <div>
         <StickieWritable username={this.props.username} color={this.props.color} />
         <StickieList stickieList={this.state.stickieList} />
       </div>
     );
   }
 }

Dalam fungsi Konstruktor, Anda menetapkan keadaan awal dari data ini bisa berubah, stickieList array. Kami akan memperbarui array setiap kali kita mendapatkan catatan stickie baru, menggunakan this.setState().

Dalam fungsi render, menggunakan BEJ untuk mendefinisikan elemen DOM HTML virtual DOM elements. Dalam kasus ini, komponen kustom StickieWritable dan StickieList disertakan. Anda dapat melewati dengan props bisa berubah dan Serikat ke komponen untuk menggunakan. Kita akan menentukan nasib mereka nanti.

Ketika Anda membangun aplikasi, Babel akan transpile semua sintaks ini ES6 dan BEJ ke ES5 yang browser dapat membuat saja.

Render DOM Node dengan Data yang mengikat

Dengan ReactDOM.render(), yang datang dengan paket react-dom, membuat komponen CollabStickies di DOM node dalam HTML.

1	ReactDOM.render(
2	<CollabStickies username={username} color={color} />,
3	document.getElementById('container')
4	);

sini, Anda melihat username dan color props. Data ini digunakan untuk CollabStickies komponen dan dilewatkan ke komponennya anak.

Nilai-nilai harus diperoleh dari login pengguna; Namun, untuk memudahkan app untuk latihan ini, mari kita hanya menggunakan window.prompt() sederhana untuk mendapatkan nama pengguna, dan kemudian memberikan warna acak catatan stickie ketika aplikasi di-load.

1	var username = window.prompt('Your name');
2
3	const colors = ['yellow', 'pink', 'green', 'blue', 'purple'];
4	var color = colors[~~(Math.random() * colors.length)];

The localhost Server asking for your name

Walaupun saya menggunakan dialog prompt browser-asli di sini, pada kenyataannya, saya sarankan Anda membuat komponen UI yang lain dengan fungsi login, atau menggunakan komponen kotak dialog pihak ketiga. Ada banyak komponen dapat digunakan kembali yang Anda dapat menemukan, seperti Modal elemen UI, dan Dialog bahan UI.

Menggunakan PubNub untuk Collaboration

Sekarang, Anda akan menggunakan PubNub untuk membuat aplikasi kolaboratif.

PubNub adalah jaringan aliran data yang didistribusikan secara global yang memungkinkan Anda untuk membangun aplikasi real-time mudah. Fitur inti, pub/sub, mengirim dan menerima data antara beberapa pengguna secara bersamaan.

App ini, siapa pun yang "masuk" dapat memposting pesan pada stickie catatan dan berbagi mereka dengan pengguna lain.

Untuk menggunakan PubNub dalam aplikasi Anda, pastikan bahwa pubnub modul telah terinstal dan diimpor di atas dari file Anda.

Initializing PubNub

Pertama, Anda perlu untuk menginisialisasi untuk menciptakan instance objek Pubnub. Anda perlu API Anda kunci selama Instansiasi, jadi harap mendaftar untuk PubNub untuk mendapatkan kunci Anda sendiri.

const publish_key =  'pub-c-1d17120...'; // your pub key
 const subscribe_key  = 'sub-c-85bdc...'; // your sub key
 
 const pubnub = require('pubnub').init({                         
   publish_key   : publish_key,
   subscribe_key : subscribe_key,
   ssl: true,
   uuid: username
 });
 
 const channel = 'stickie-notes';

Di sini, Anda menentukan pengguna yang Diperoleh dari proses "login" sebagai uuid, pengenal unik. (Dalam latihan ini, kita mengambil setiap string yang dimasukkan oleh pengguna sebagai uuid, tetapi dalam kenyataannya, Anda memerlukan sistem login nyata sehingga uuid setiap benar-benar unik, dengan tidak ada duplikasi!)

Perhatikan juga, saya menggunakan Deklarasi const ES6, bukan var untuk nilai-nilai konstan ini global. Dalam ES6 const bertindak sebagai variabel hanya-baca dan mewakili konstan referensi ke nilai. Dalam contoh kemudian, Anda juga akan melihat yang baru diperkenalkan let, yang merupakan blok lingkup variabel lokal.

Berlangganan ke pesan

Untuk membuat catatan sharable app, Anda akan menggunakan PubNub's publish() metode untuk mengirim catatan Anda ke semua orang, sementara subscribe() memungkinkan pengguna lain menerima semua catatan. Metode subscribe() disebut secara otomatis setiap kali seseorang menerbitkan catatan baru.

Di app bereaksi, mari kita sebut subscribe() dalam componentWillMount(), yang dipanggil segera sebelum render awal terjadi pada siklus hidup app.

componentWillMount() {
   pubnub.subscribe({
     channel: channel,
     restore: true,
     connect: () => this.connect(),
     message: (m) => this.success(m)
   });
 }

Berlangganan metode asynchronous, dan ketika setiap operasi berhasil selesai, callback message dipanggil. Di callback, mari kita memperbarui daftar catatan stickie dengan menetapkan keadaan array stickieList, yang didefinisikan dalam konstruktor pada awal.

Di bereaksi, memodifikasi data Anda dengan setState otomatis update tampilan.

1	success(m) {
2	let newList = [m].concat(this.state.stickieList);
3	this.setState({stickieList: newList});
4	}

Kami menciptakan tampilan (komponen UI) kemudian.

Di callback berlangganan, Anda mungkin telah memperhatikan sintaks yang tampak lucu dengan Panah, =>. Ini disebut fungsi Panah, yang memiliki sintaks yang lebih pendek daripada ekspresi fungsi ES5. Selain itu, ungkapan ini secara leksikal mengikat nilai this. Sekali lagi, dengan Babel, kita dapat memanfaatkan semua keangkeran ES6!

Juga, kami menggunakan opsional connect panggilan balik berlangganan metode untuk mengambil "sejarah". Ini akan mengambil masa lalu data ketika koneksi ke PubNub didirikan untuk pertama kalinya.

connect() { 
   pubnub.history({
     channel: channel,
     count: 50,
     callback: (m) => {
       m[0].reverse();
       for (var v of m[0]) {
         let newList = this.state.stickieList.concat(v);
         this.setState({stickieList: newList});
       }
     }
   });
 }

History() adalah bagian dari PubNub's fitur Penyimpanan dan Pemutaran, dan dalam kasus ini, itu mengambil pesan terakhir 50 dari PubNub. Di callback success , update tampilan dengan menetapkan keadaan stickieList array di sini juga.

Penerbitan pesan

Mari kita membuat kelas, StickieWritable. Ini adalah catatan stickie komponen yang mengambil input pengguna.

Menjadikan seperti ini:

render() {
   return (
     <div className={'stickie-note writable ' + this.props.color}>
       <textarea type='text' placeholder='Your new note...' onKeyUp={this.handleTextChange.bind(this)} />
     </div>  
   );
 }

Dalam textarea, perhatikan acara onKeyUp, dan setiap kali peristiwa dipicu, memanggil fungsi handleTextChange untuk memeriksa jika kuncinya adalah kembali/masukkan kunci. Perhatikan bahwa saya sedang mengikat ini saat memanggil fungsi. Tidak seperti React.createClass(), yang merupakan bereaksi 's ES5 metode untuk menciptakan kelas, kelas ES6 tidak tidak autobind metode untuk contoh objek, sehingga Anda perlu untuk mengikat itu sendiri. (Ada beberapa cara yang berbeda untuk mencapai hal yang sama.)

Dalam fungsi handleTextChange, mempublikasikan data teks dan pengguna untuk PubNub:

var data = {
   username: this.props.username,
   color: this.props.color,
   text: e.target.value,
   timestamp: Date.now()
 };
 
 pubnub.publish({
   channel: channel, 
   message: data, 
   callback: e.target.value = '' // resetting the text field
 });

Sekarang, ketika pengguna jenis beberapa teks di notepad dan menekan kembali, pesan akan dikirim ke PubNub, dan semua pengguna menerima pesan secara bersamaan (dalam ¼ sec!).

Membuat komponen UI

App UI terdiri dari beberapa komponen UI, yang terlihat seperti ini:

1. CollabStickies
2. StickieWritable
3. Stickie
4. StickieList

Komponen 1 dan 2 memiliki telah telah diambil dari perawatan, jadi mari kita membuat komponen 3, komponen catatan stickie individu.

Buat file stickie.jsx baru untuk membuat UI menggunakan BEJ. Tidak seperti komponen StickieWritable, ini adalah komponen UI hanya-baca dengan fungsi UX tidak. Hanya memiliki fungsi render() menggambar stickie catatan dengan teks menggunakan prop data.

Pada dasarnya, setiap kali pengguna menerima pesan baru dari pengguna lain, pesan dituliskan dalam komponen stickie baru.

import React from 'react';
 import ReactDOM from 'react-dom';
 
 export default class Stickie extends React.Component {
   render() {
     return (
       <div className={'stickie-note ' + this.props.color} >
         <p className='note'>{this.props.text}</p>
         <p className='username'>{this.props.username}</p>
       </div>  
     );
   }
 }

Selanjutnya, kita akan membuat komponen UI yang lain, stickieList.jsx, yang merupakan wadah untuk komponen ini dan berisi banyak catatan stickie bersama-sama.

Menghidupkan komponen

Mengimpor Stickie.jsx dan semua dependensi lain StickieList.jsx. Di sini, saya menggunakan sebuah addon ReactCSSTransitionGroup dan font web kustom.

import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
 import Stickie from './stickie';
 import webfontloader from 'webfontloader'

Anda dapat menginstal Web font loader dengan npm:
$ npm install webfontloader

Kemudian Anda dapat memuat setiap font kustom pilihan Anda. Anda bisa melihat kode sumber untuk melihat bagaimana font Google kustom yang diimpor.

Di render(), menggunakan ES6 fungsi panah dan map() untuk array, dan menggunakan stickieList untuk membuat setiap komponen Stickie yang baru saja dibuat:

export default class StickieList extends React.Component {
   render() {
     let items = (this.props.stickieList || []).map((item) => 
       <li key={item.username + '-' + item.timestamp} >
         <div className="stickieWrapper">
           <Stickie text={item.text} color={item.color} username={item.username}/>
         </div>
       </li>);
 
     return (
       <ReactCSSTransitionGroup transitionName='animation' transitionEnterTimeout={500} transitionLeaveTimeout={500} component='ul' id="stickiesList">
         {items}
       </ReactCSSTransitionGroup>  
     )
   }
 }

Komponen didefinisikan dapat animasi menggunakan <ReactCSSTransitionGroup>. Menetapkan transitionName, yang Anda butuhkan untuk menggunakan CSS Anda untuk menentukan gaya animasi. Juga, perhatikan atribut utama di <li>. Anda perlu menggunakan kunci yang unik untuk setiap daftar untuk menghidupkan setiap komponen bila Anda menggunakan <ReactCSSTransitionGroup>.

Bereaksi menambahkan nama kelas tambahan. Sebagai contoh, ketika Anda transitionName 'animation', Anda juga akan memiliki 'animation-enter', 'animation-enter-aktif', 'animation-leave', dan 'animation-leave-aktif'.

Berikut adalah kode di /css/style.css:

.animation-enter {
   opacity: 0.1;
   transform: scale(1.3);
   transition: all 1s ease-out;
  }
 .animation-enter.animation-enter-active {
   opacity: 1;
   transform: scale(1);
  }
 ...

Sekarang, Anda telah membangun sebuah aplikasi kolaborasi real-time dengan bereaksi dan PubNub! Saya harap Anda menikmati tutorial!

Anda dapat melihat seluruh kode, termasuk CSS, di repo GitHub ini. Meskipun, dalam tutorial ini, saya menggunakan versi "lite", app-lite.jsx, Anda dapat mengambil lihat app.jsx untuk lebih banyak fitur.

Jika Anda tertarik dalam membangun aplikasi real-time yang lain, seperti aplikasi chatting, multiplayer game, perdagangan apps, dll, pergi ke PubNub dan menemukan lebih banyak sumber daya!

Ingin React lebih?

Kami punya kursus diarahkan secara khusus mengambil keterampilan bereaksi sejauh mungkin. Dalam kursus ini, Anda akan mendapatkan Anda mulai membangun aplikasi modern web bereaksi dengan Redux. Mulai dari apa-apa, Anda akan menggunakan dua pustaka untuk membangun aplikasi web lengkap.

Anda akan mulai dengan arsitektur mungkin yang paling sederhana dan perlahan-lahan membangun aplikasi, fitur oleh fitur. Anda akan belajar tentang konsep dasar seperti tooling, reducer, dan routing. Anda juga akan belajar tentang beberapa teknik yang lebih maju seperti komponen yang pintar dan bodoh, komponen murni dan tindakan asinkron. Pada akhir, Anda akan telah menciptakan sebuah aplikasi lengkap flashcards untuk belajar oleh pengulangan spasi.

Tertarik? Periksa!

Referensi

PubNub: global real-time Data Stream jaringan untuk IoT, ponsel, dan aplikasi web
PubNub JavaScript SDK Tutorial
React: perpustakaan JavaScript untuk menciptakan user interface
ES6: ECMAScript spesifikasi bahasa 2015
webpack: modul Builder