Şirket Durum Panosu Oluşturmak için React ve Laravel Lümen Kullanımı

Birkaç ay önce Macbook Pro'mla kullanmak için bir Apple Cinema ekranı satın aldım. Planım her iki ekranı da kullanmaktı, Sinema ekranımı iş ve önemli uygulamalar için birincil ekranım ve MBP'mi Spotify gibi daha az önemli arka plan uygulamaları için ikincil ekran olarak kullanmaktı. Sinema ekranımda fazlasıyla yeterli alana sahip olduğum için MBP'mde ikincil ekranı neredeyse hiç kullanmadığım hemen anlaşıldı. Hemen hemen aynı zamanda, parmaklarımı React'in harika dünyasına daldırmak ve tüm o yutturmacanın ne hakkında olduğunu öğrenmek istediğime karar verdim.

Böylece, ikincil ekranımda bırakabileceğim ve işim için ihtiyacım olan her şeye hızlı bir genel bakış sağlayacak küçük bir durum panosu web uygulaması oluşturma fikrini buldum. React'i öğrenmek istediğim için, React bileşenleri tarafından desteklenen tek sayfalı bir web uygulaması oluşturmak mantıklıydı ve küçük bir arka uç API'si olarak Lumen'i kullanarak uygulamayı güçlendirmenin yeterince basit olacağına karar verdim.

Delicious Brains'te kullandığımız ve yaptığımız her şeye güç veren üç uygulama var: Ekip iletişimi için Slack, müşterilerimize destek vermek için Help Scout ve yazılımımızı oluşturmak için GitHub. Kontrol panelinin grafiklerle ve gereksiz bilgilerle dolup taşmasını istemedim, sadece bir bakışta faydalı bilgileri görebilmek istedim. Bu yüzden kurulun üç unsurunun şunlar olacağına karar verdim:

1. Kimin çevrimiçi olduğunu ve hangi saat diliminde olduklarını gösteren bir Gevşek “grafik”
2. Help Scout posta kutularımızın ve durumlarının listesi
3. En son GitHub bildirimlerinin listesi

Ayrıntılara girmeden önce, tüm bu projenin GitHub'da mevcut olduğundan bahsedeceğim, bu yüzden istediğiniz gibi göz atmaktan, ödünç almaktan ve kod çalmaktan çekinmeyin.

Lumen ile arka uç API'sini oluşturma

Arka uç API'sinin yapması gereken iki önemli iş vardır. Web uygulamamızın dış hizmetlerle (OAuth kullanarak) kimliğini doğrulaması ve ilgili veriler için hizmetleri sorgulaması ve yanıtları önbelleğe alması gerekir. Açık kaynaklı projelerle çalışmanın en güzel yanlarından biri, muhtemelen birilerinin sizin için ayak işinin çoğunu zaten yapmış olması ve bu hızlı bir yan proje olduğu için API'deki üçüncü taraf kitaplıklarına büyük ölçüde güvendim.

Slack ve GitHub'ın her ikisi de OAuth kimlik doğrulama uç noktalarına sahiptir. Bu, her iki hizmette de (Slack ve GitHub) bir "uygulama" oluşturmanız ve ardından yeni uygulamalarınızla kimlik doğrulaması yapmak için OAuth'u kullanmanız gerektiği anlamına gelir. Tüm OAuth yetkilendirme kodunu işlemek için The League of Extraordinary Packages OAuth 2 İstemcisini kullanmaya karar verdim (bkz. AuthController.php). Help Scout'un OAuth uç noktaları olmadığı için bir API anahtarı kullanmam gerekti.

Bu noktada, tüm OAuth uygulama ayrıntılarını ve API anahtarlarını koyacağınız yerin gerçek kod deposunda değil, Lumen .env dosyasında olduğunu belirtmekte fayda var. Bu, kodu daha güvenli, yeniden kullanılabilir ve bakımı çok daha kolay hale getirir.

Ardından, React'in verileri bileşenlere yüklemek için kullanabileceği bazı API uç noktaları oluşturmam gerekiyordu. Bu uç noktalar, ilgili hizmetlerini sorgular ve yanıtı gerektiği gibi önbelleğe alır. Bunu nasıl yaptığımı ApiController.php içinde görebilirsiniz. API sorgularını işleyen bazı Util sınıfları oluşturarak ve hizmet API'sini sorgularken bir kimlik doğrulama sorunu varsa tek bir OauthTokenError döndürerek ilgili API'leri gerçekten sorgulama sürecini soyutlamaya karar verdim. Yine bu Util sınıfları üçüncü taraf kitaplıklarından yararlandı: Slack için Frlnc/php-slack ve GitHub için KnpLabs/php-github-api. Yardım İzci için API'lerini sorgulamak için cURL kullandım.

Arka uç API'si için bu kadar. Bu noktada dahil etmediğim bir hizmeti nasıl ekleyeceğinizi merak ediyorsanız, süreç şöyle görünecektir:

• route.php dosyasına yeni bir rota ekleyin
• ApiController.php dosyasına karşılık gelen yöntemi ekleyin
• Hizmet, kimlik doğrulama için OAuth kullanıyorsa, bunun için AuthController.php içine bir yöntem eklemeniz gerekir ( ilgili /auth yolunu routes.php içine eklemeyi unutmayın)
• ApiController.php yönteminizde kullanılabilecek gerekli verileri getirmek için bir Util sınıfı oluşturun.

React ile önyüz oluşturma

“Eğlenceli şeylere” geçelim. Henüz React'i duymadıysanız, Facebook tarafından modern kullanıcı arayüzleri oluşturmak için oluşturulmuş bir çerçevedir. Buradaki fikir, Backbone, Ember ve Angular gibi kitaplıklar bir ön uç Model-View-Controller uygulamasının tüm yönleri için bir çerçeve sağlarken, React bir MVC uygulamasının yalnızca “Görünüm” kısmı için işlevsellik sağlar ve ne yaptığınız umrumda değil. uygulamanızın geri kalanına güç sağlamak için kullanın. React, “JS'de kullanıcı arayüzü oluşturma” alanında ana oyuncu olarak son zamanlarda büyük bir popülerlik ve ivme kazandı ve ben bunu uygulamamız için kullanıcı arayüzü oluşturmak için kullanmaya karar verdim.

Önyüzümüzün çalışmasını sağlamak için kullanmam gereken birkaç kütüphane daha var. AJAX kullanarak API'mizi sorgulamak için eski güzel jQuery kullanmaya karar verdim, zaman damgalarını ayrıştırmak ve göreli zaman dizelerini çıkarmak için Moment.js, Simgelerimizi sağlamak için CSS'mizi ve Harika Yazı Tipini normalleştirmek için Normalize.css.

Bu tek sayfalık bir uygulama olacağı için önce Lumen tarafından çıkacak tek sayfayı oluşturmam gerekiyordu. Bu, tek amacı tüm JS ve CSS bağımlılıklarını yüklemek olan tek bir görünüm oluşturmak anlamına geliyordu. Bu, yerel makinemde çalıştırdığım küçük bir web uygulaması olacağından, optimizasyon konusunda endişelenmedim, ancak üretimde birçok JS ve CSS dosyası, bir derleme aracı kullanılarak tipik olarak birleştirilir ve küçültülür.

JS'nin yapısı aşağıdaki gibidir:

• bootstrap.js – Uygulama nesnelerimizi, işlevlerimizi ve React bileşenlerini tutmak için kullanacağımız global App değişkenini oluşturur. Ayrıca ihtiyaç duyabileceğimiz herhangi bir “yardımcı” işlevi de barındırır.
• tepki/error.js – Yukarıda bahsettiğimiz OauthTokenError işleyen global bir hata bileşeni.
• tepki/[slack|helpscout|github].js – Bireysel hizmet bileşenleri.
• tepki/app.js – Uygulamamızı birbirine bağlayan ReactDOM.render() yönteminin gittiği yer burasıdır.

React hizmet bileşenlerinin bileşimi aşağıdaki gibidir (örnek olarak github.js kullanılarak):

 loadNotificationsFromServer: function() { this.setState({loading: true}); $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { if (typeof data.error !== 'undefined') { this.setState({error: data.error, loading: false}); } else { this.setState({data: data, loading: false}); setTimeout(this.loadNotificationsFromServer, this.props.pollInterval); } }.bind(this), error: function(xhr, status, err) { this.setState({loading: false}); console.error(this.props.url, status, err.toString()); }.bind(this) }); },

load{Data}FromServer işlevi, ihtiyaç duyduğu veriler için arka uç API'mize ping göndermek için jQuery'nin AJAX işlevini kullanır. Tüm verileri ve hataları daha sonra kullanabilmemiz için bileşenin durumunda saklarız. Verileri düzenli aralıklarla yenilemek için arka uç API'mizi yoklamak için burada setTimeout kullandığımızı da unutmayın. pollInterval , app.js'de tanımladığımız bir bileşen özelliğidir.

 getInitialState: function() { return { loading: false, error: null, data: [] }; }, componentDidMount: function() { this.loadNotificationsFromServer(); },

Bileşenin ilk durumunu ayarlamak için getInitialState işlevini ve API'ye ilk çağrımızı başlatmak için componentDidMount işlevini kullanırız.

 render: function() { var loading; if (this.state.loading) { loading = <div className="box-loading"><i className="fa fa-spinner fa-spin"></i></div> } if (this.state.error) { return ( <div className="github-status box box-has-error"> {loading} <App.Views.Error type={this.state.error.type} data={this.state.error.data} /> </div> ); } var notifications = this.state.data.map(function(notification) { var typeIcon = <i className="fa fa-exclamation-circle"></i> if(notification.subject.type == 'PullRequest') { typeIcon = <i className="fa fa-code-fork"></i> } return ( <tr key={notification.id}> <td className={'type type-' + notification.subject.type.toLowerCase()}>{typeIcon}</td> <td className="name"><a href={notification.repository.html_url} target="_blank">{notification.repository.full_name}</a></td> <td className="title">{notification.subject.title}</td> <td className="time">{moment(notification.updated_at).fromNow()}</td> </tr> ); }); return ( <div className="github-status box"> {loading} <table className="github-notifications"> {notifications} </table> </div> ); }

Son olarak, bileşenimiz için çıktı oluşturmak için render işlevini kullanırız. Bir hata varsa, modüler bileşenlerin nasıl kullanılacağına iyi bir örnek olan App.Views.Error bileşenini döndürmemiz yeterlidir. Bileşenlerin, yukarıdaki {notifications} listesi gibi, başka bir yerde tanımlanmış veya çalışma zamanında oluşturulmuş birden çok bileşen içerebileceğini şimdiye kadar fark etmişsinizdir. Gördüğünüz gibi, bu durumda tablo satırlarının bir listesini oluşturmak için map işlevini kullanıyorum. Tablo satırı, gerekirse kendi bileşenine kolayca bölünebilir. Son olarak render işlevi, bileşenimiz için kullanacağımız JSX'in yapısını döndürür.

Burada React'in inceliklerine girmeyeceğim, belgelere göz atmanız ve kendiniz öğrenmeniz gerektiğini söylemek yeterli. Dikkat edilmesi gereken tek şeyin class className değil className kullanması olduğuna dikkat çekeceğim.

Hepsini bir araya koy

Artık hem arka uca hem de ön uca sahip olduğumuza göre, onu kurmanın ve çalıştırmanın zamanı geldi. Durum panosunu kişisel olarak ikincil ekranımda kullanıyorum, ancak ofisinizin duvarındaki özel bir monitörde benzer bir pano görüntülemenizi engelleyen hiçbir şey yok, ancak bu tamamen size kalmış.

MAMP zaten makinemde çalıştığından, durum panomu çalıştırmak için kullanmak mantıklıydı. PHP >= 5.5.9 çalıştıran, statusboard.dev adında yeni bir sanal ana bilgisayar kurdum. Depoyu kendiniz kuruyorsanız, benioku içindeki talimatları izlemelisiniz. Daha çok bir "uygulama" gibi hissettirmek için Fluid'i kullanmanızı ve onu dock'unuza eklemenizi öneririm. Akışkanı web adresinize ( statusboard.dev ) yönlendirin ve isterseniz bir simge ekleyin.

Herhangi bir yorumunuz veya öneriniz varsa, bunları yorumlarda duymak isterim. Durum panosunu herhangi bir yerde kullanıp kullanmadığınızı ve üzerinde ne gibi özelleştirmeler yaptığınızı özellikle duymak isterim.