homefinance blog
Hace unos meses compré una pantalla de Apple Cinema para usarla con MacBook Pro. Mi plan era usar ambas pantallas, pantalla de cine como pantalla de servicio principal y aplicaciones importantes y MBP como una pantalla secundaria para aplicaciones de fondo menos importantes, como Spotify. Rápidamente quedó claro que casi nunca usé la pantalla secundaria en el MBP, porque tenía más que suficiente espacio en la pantalla de cine. Casi al mismo tiempo, decidí que me gustaría mucho obstruir los dedos de los pies en el maravilloso mundo de React y descubrir qué era la exageración.
Así que se me ocurrió la idea de construir una pequeña aplicación web para que el panel estatal dejara en la pantalla secundaria, lo que me dará una visión general rápida de todo lo que necesitaba para mi trabajo. Debido a que quería aprender a React, era lógico construir una aplicación web de una sola página alimentada por los componentes React y decidí que sería bastante fácil alimentar la aplicación usando Lumen como un pequeño backyp. En los deliciosos cerebros hay tres aplicaciones que utilizamos y que ofrecen casi todo lo que hacemos: holgura para la comunicación del equipo, ayuda a Scout a brindar asistencia a nuestros clientes y GitHub para construir nuestro software. No quería que el tablero estuviera lleno de gráficos e información innecesarios, solo quería ver información útil. Entonces decidí que los tres elementos del consejo serían:
Una holgura “gráfica” que muestra quién estaba en línea y qué zona horaria era
Una lista de nuestras cajas postales de Help Scout y sus estados
Una lista de notificaciones recientes de Github
Antes de entrar en detalles, solo mencionaré que todo el proyecto está disponible en GitHub, así que no dude en navegar, pedir prestado y robar el código como desee. API de backend de construcción con API de backend Lumen tiene dos tareas importantes que hacer. Debe autenticar nuestra aplicación web con servicios externos (utilizando OAuth) y tener que interrogar los servicios para datos relevantes y memorizar las respuestas. Una de las mejores cosas del trabajo con proyectos de código abierto es que existe las posibilidades de que alguien ya haya hecho la mayor parte de su trabajo para usted y, debido a que este fue un proyecto secundario rápido, confié mucho en las bibliotecas de terceros en API .Slack y GitHub tienen ambos puntos finales de autenticación. Esto significa que debe crear una “aplicación” para ambos servicios (Slack y GitHub) y luego usar OAuth para autenticarse con las nuevas aplicaciones. Decidí usar el cliente OAUTOTH 2 League of Extraordinary Packages para administrar todo el código de autenticación OAPT (ver AuthControl.php). Ayuda Scout no tiene puntos finales, así que solo tuve que usar una clave API. En este momento, vale la pena señalar que el lugar para poner todos los detalles de la aplicación Oautoth y las claves API están en el archivo Lumen .nv y no en el almacén de código en sí. Esto hace que el código sea más seguro, reutilizable y mucho más fácil de mantener.
Luego tuve que crear algunos puntos finales que React pudiera usar para cargar datos en componentes. Estos puntos finales interrogarán sus respectivos servicios y almacenarán la respuesta según sea necesario. Puedes ver cómo hice esto en apicontroller.php. Decidí abstraer el proceso de cuestionar las API respectivas creando clases útiles que administran la consulta API y también devuelve un solo OAUTOTOKER. Nuevamente, estas clases útiles utilizaron bibliotecas de terceros: frlnc/php-slack para Slack y Knplabs/Php-GitHub-API para GitHub. Para Help Scout, acabo de usar Curl para interrogar su API. Esto es para la API de backend. Si se pregunta en este momento cómo agregar un servicio que no incluía, el proceso se vería así:
Agregue una nueva ruta a rutas.php
Agregue el método apropiado a apicontroller.php
Si el servicio usa OAuth para la autenticación, deberá agregar un método en authcontrol.php (no olvide agregar la ruta /autenticación apropiada
Cree una clase útil para hacerse cargo de los datos necesarios que se pueden usar en su método apicontroller.php.
La construcción del front-end con React va a “cosas divertidas”. Si no ha oído hablar de React, es un marco de Facebook para crear interfaces de usuario modernas. La idea es que, si bien bibliotecas como Backbone, Ember y Angular proporcionan un marco para todos los aspectos de una aplicación frontend modelo-visión-controladora, React solo ofrece funcionalidad para la parte de “vista” de una aplicación MVC y no le importa lo que utiliza Para alimentar al resto de su aplicación React ha ganado una popularidad e impulso recientes como el jugador principal en el espacio “Building UI en JS” y decidí usarla para construir la interfaz de usuario para nuestra aplicación. Que hay algunas bibliotecas I I. Tuve que usar para hacer que nuestro front-end funcione. Decidí usar jQuery viejo y bueno para interrogar nuestra API usando Ajax, momento.js para analizar las marcas del tiempo y eliminar el tiempo relativo, normalizar.css a … bueno … normalizar CSS y fuente impresionante para proporcionar nuestros íconos. Debido a que esta sería una aplicación de una sola página, tuve que crear una sola página que la Lúmina represente. Esto significaba crear una visión única cuyo único propósito es cargar todas las adicciones JS y CSS. Debido a que esta sería una pequeña aplicación web que estaba ejecutando en mi automóvil local, no me preocupaba la optimización, pero en la producción muchos archivos JS y CSS generalmente se concatenarían y reducirían usando una herramienta de compilación.
La estructura JS es la siguiente:
Bootstrap.js: crea la variable de aplicación global que usaremos para mantener los objetos de aplicación, funciones y componentes. También contiene cualquier función “útil” que pudiéramos.
React/[Slack | HelpScout | GitHub] .js – Los componentes individuales del servicio.
React/App.js: aquí el método ReactDom.render () que conecta nuestra aplicación va.
El componente de los componentes del servicio React es el siguiente (usando github.js como ejemplo):
LoadnotificationsFromServer: function () {this.setsate ({Loading: true}); $ .AJAX ({url: this.props.url, dumatype: ‘json’, caché: falso, éxito: function (date) {if (typeof data.error !: date.error, cargando: falso});} más {this.setsate ({date: date, Loading: false}); setTimeOut (this.loadnotiosFromserver, this.props.pollinvalval);}} .bind (this), error: function (xhr, status, err) {esto. Setsate ({alojamiento: falso}); console.error (this.props.url, status, err.toString ());} .bind (this)}); }, La función de carga {data} utiliza la funcionalidad AJAX A jQuey para enviar ping a nuestra API de backend para los datos que necesita. Almacenamos cualquier dato y error en el estado del componente para poder usarlos más tarde. Tenga en cuenta que usamos SetTimeout aquí para interrogar nuestra API de backend para actualizar los datos a un intervalo regular. PollInterval es una propiedad del componente que definimos en App.js.
GetInitialState: function () {return {carging: false, error: null, date: []}; }, componentDidmount: function () {this.loadnotationsFromServer (); }, Utilizamos la función getInitialState de React para configurar la condición inicial del componente y la función ComponentDidMount para iniciar nuestra apelación inicial a la API. render: function () {var carga; If (this.steate.loading) {loading = } if (this.steate. Error) {return (
{carging}
); } Var notificaciones = this.state.data.map (function (notificación) {var typeicon = if (notificación.subject.type == ‘PullRequest’) { Typeicon = } return (
);} ); Return (
{carging}
