Şirket durum panolarını oluşturmak için React ve Laravel Lümen’i kullanın
Bu yüzden ikincil ekranımda bırakabileceğim küçük bir durum tahtası web uygulaması oluşturma fikriyle geldim, bu da bana işim için ihtiyacım olan her şeyin kısa bir resmini verecek. React’i öğrenmek istediğim için, React bileşeni tarafından desteklenen tek sayfalık bir web uygulaması oluşturmak mantıklı ve küçük bir arka uç ateş olarak lümeni kullanarak uygulamaya güç vermenin yeterince basit olacağına karar verdim. Delicious Brains’te, yaptığımız her şey için yeterince büyük bir güçle kullandığımız üç uygulama var: ekip iletişimi için Slack, Scout’un müşterilerimize destek sağlamasına yardımcı olun ve yazılımımızı oluşturmak için GitHub. Yararsız grafikler ve bilgilerle dolu bir gösterge tablosu istemiyorum, sadece bir bakışta yararlı bilgileri görmek istiyorum. Bu yüzden yönetim kurulunun üç unsurunun:
Slack “grafikler” kimin çevrimiçi olduğunu ve hangi saat diliminde olduklarını göster
Yardım İzci Mektubu Kutumuzun Listesi ve Durumu
Github Bildirimlerinin Listesi Ayrıntıları girmeden önce, yalnızca bu projelerin tümü GitHub’da mevcut olduğunu söyleyeceğim, bu yüzden lütfen kodu istediğiniz gibi göz atın, ödünç alın ve çalın. Arka uçla ateşin bir arka uçla yangın yapımı, yapılması gereken iki önemli iş vardır. Web uygulamamızı harici hizmetlerle (OAuth kullanarak) doğrulamalı ve ilgili veriler için hizmet istemeli ve yanıtlarını önbellekte kaydetmelidir. Açık kaynaklı bir projeyle çalışmakla ilgili en güzel şeylerden biri, ayağın çoğunun sizin için çalışmasını yapan birinin olasılığıdır ve bu hızlı bir yan proje olduğu için, API’daki üçüncü taraf kütüphanesine çok bağımlıyım.
Slack ve GitHub’ın her ikisi de bir OAuth kimlik doğrulama bitiş noktası vardır. Bu, her iki hizmetinde (Slack ve GitHub) bir “uygulama” yapmanız ve ardından yeni uygulamanızla kimlik doğrulaması yapmak için OAuth kullanmanız gerektiği anlamına gelir. Tüm OAuth kimlik doğrulama kodunu işlemek için OAUTH 2 istemcisi Ligi’yi kullanmaya karar verdim (bkz. AuthController.php). Yardım Scout’un OAuth’un son noktası yok, bu yüzden sadece yangın anahtarını kullanmam gerekiyor. Bu noktada, OAuth uygulamasının tüm ayrıntılarını ve API anahtarının tüm ayrıntılarını gerçek kod deposunda değil .env lümen dosyasında koyacağına dikkat edilmelidir. Bu, kodu daha güvenli hale getirir, tekrar kullanılabilir ve bakımı çok daha kolaydır.
Daha sonra, reaksiyonun veri yüklemek için kullanabileceği birkaç uç noktayı bileşenlere kaydetmeliyim. Bu bitiş noktası, ilgili hizmetlerini ve önbellek yanıtlarını gerektiği gibi isteyecektir. Bunu apicontroller.php adresinde nasıl yaptığımı görebilirsiniz. Yangın sorgularını işleyen bir dizi UTIL sınıfı oluşturarak her yangına soran gerçek süreci soyutlamaya karar verdim ve ayrıca hizmet yangını isterken kimlik doğrulama sorunları olup olmadığını bir OAuthtonError iade ettim. Bir kez daha bu UTIL sınıfı üçüncü taraf bir kütüphane kullanır: Github için Slack ve Knplabs/PHP-Github-Api için FRLNC/PHP-Slack. Scout için yardım için, ateşlerini istemek için kıvrım kullandım. Hepsi arka uç ateşi için. Bu noktada eklemediğim hizmetleri nasıl ekleyeceğinizi merak ediyorsanız, süreç şöyle görünecektir:
Route.php adresinden yeni bir rota ekleyin
Apicontroller.php’ye uygun yöntemi ekleyin
Hizmet kimlik doğrulama için OAuth kullanıyorsa, AuthController.php adresinden bunun için bir yöntem eklemeniz gerekir (rotalar.php adresinde uygun olan /yazar rotaları eklemeyi unutmayın)
Apicontroller.php yönteminizde kullanılabilecek gerekli verileri almak için bir UTIL sınıfı oluşturun.
“Eğlenceli Şeyler” e tepki ile ön uca bina. React’i hiç duymadıysanız, bu, modern bir kullanıcı arayüzü oluşturmak için Facebook tarafından oluşturulan bir çerçevedir. Fikir, omurga, kova ve açısal gibi kütüphaneler, uygulama-görüntüleme-görüntüleme-kontrol-denetleyici uygulamasının tüm yönleri için bir çerçeve sağlarken, REACT yalnızca MVC uygulamasının “ekran” bölümü için işlevsellik sağlar ve ne kullandığınızı umursamıyor Başvurunuza diğer güç sağlamak için. React, son zamanlarda “JS’deki Bina UI Odası” nın ana oyuncu olarak popülerlik ve büyük bir ivme kazandı ve bunu uygulamamız için UI oluşturmak için kullanmaya karar verdim. Ön uç işlevimizi yapmak için kullanmam gereken birkaç kütüphane var. Ajax, moment.js kullanarak ateşimizi sormak için iyi bir eski jQuery kullanmaya karar verdim. Zaman damgasını çözmek ve göreceli bir zaman dizesini görüntülemek için, normalleştir. ikonlar. Bu tek sayfalık bir uygulama olacağından, önce lümen tarafından verilecek bir sayfa yapmam gerekiyor. Bu, asıl amacı tüm JS ve CSS bağımlılıklarını içermek olan tek bir görünüm yapmak anlamına gelir. Bu, yerel makinemde çalıştırdığım küçük bir web uygulaması olacağından, optimize etme konusunda endişelenmiyorum, ancak birçok JS ve CSS dosyasının üretiminde genellikle bir yapı aracı kullanılarak birleştirilecek ve azaltılacaktır.
JS yapısı aşağıdaki gibidir:
Bootstrap.js – React uygulamamızı, işlevlerimizi ve bileşenlerimizi saklamak için kullanacağımız küresel bir uygulama değişkeni oluşturma. Ayrıca ihtiyacımız olan bir “yardımcı program” işlevine sahiptir. React/error.js – Yukarıda bahsettiğimiz OAutogenError’umuzu işleyen küresel hatamızın bileşeni.
React/[Slack | Yardım | GitHub]. JS – Bireysel Hizmet Bileşenleri.
React/App.js-Bu, uygulamamızı birbirine bağlayan Reactdom.render () yönteminin kullanıldığı yerdir.
React hizmet bileşeninin bileşimi aşağıdaki gibidir (örneğin github.js kullanılarak):
LoadNotationsFromServer: function () {this.setState ({yükleme: true}); $ .ajax ({url: this.props.url, datatype: ‘json’, önbellek: false, başarı: veri (veri) {if (typeof data.error! ): data.error, yükleme: false});} else {this.settate ({data: data, yükleme: false}); setTimeout (this.loadnotificationsFromServer, this.props.polLinkerer);} .bind (bu), Hata: function (xhr, status, err) {this.settate ({yükleme: false}); console.error (this.props.url, durum, err.tosting ());} .bind (this)}); }, {Data} fromserver yük fonksiyonu, gerekli veriler için arka uç ateşimizi ping yapmak için Ajax JQuery işlevini kullanır. Daha sonra kullanabilmemiz için herhangi bir veri ve hatayı bileşen durumunda saklıyoruz. Düzenli olarak verileri yenilemek için arka uç yangın anketimiz için SetTimeout’u da kullandığımızı unutmayın. Pollintval, App.js.’de tanımladığımız bir bileşen özelliğidir.
Bottlestate: function () {return {yükleme: false, hata: null, veri: []}; }, ComponentDidMount: function () {this.LodnotificationsFromServer (); }, BottlesTate React işlevini, API’ya ilk çağrımızı başlatmak için bileşenlerin ve bileşenlidmount işlevlerinin başlangıç durumunu ayarlamak için kullanıyoruz. Render: function () {var yükleme; if (this.state.loading) {loading =
} (this.state. Hata. ) {return (
{yükleme}
); } var retifications = this.state.data.map (function (bildirim) {var typeicon = if (nociation.subject.type == ‘pullrequest’ {typeicon = } return (
{typyicon }
{nocification.repository.full_name} td>
{nocification.subject.title}
{moment (notification.updated_at) .fromnow ( )}
);}); Return (
{yükleme} {retications}
} Son olarak, bileşenlerimiz için gerçekten çıktı yapmak için oluşturma işlevini kullanıyoruz.Hatalar varsa, modüler bileşenlerin nasıl kullanılacağının iyi bir örneği olan App.views.error bileşenini geri yükleriz.Bileşenin, başka bir yerde tanımlanan veya çalışma zamanı boyunca yukarıdaki {bildirimler} listesi gibi yapılan birkaç bileşen içerebileceğine dikkat edeceksiniz.Gördüğünüz gibi, bu durumda tablo satırlarının bir listesini oluşturmak için harita işlevini kullanıyorum.Masa çizgileri gerekirse kendi bileşenlerine kolayca ayrılabilir.Son olarak, oluşturma işlevi, bileşenlerimiz için kullanacağımız JSX’in yapısını geri yükler.
