Skip to content

✨🐘 A material-angular interface for SPARK-HADOOP application with a node API [FRONTEND]

License

Notifications You must be signed in to change notification settings

MigeruDev/Sparkend

Repository files navigation

SPARKEND

✨🐘 Web application with Angular-Material for a multinode cluster in SPARK-HADOOP

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors License Badge

Interested in the project? Please visit my website


This repository was created as a final project of the Big Data subject at the University of Cuenca. The objective was to demonstrate the knowledge acquired throughout the semester with the development of an application that queries about the data of historical flights of United States airlines. This project was designed to work as a front-end on a lambda architecture implemented with Hadoop-Spark on the backend. Check out the Demo!

Logo


If you like this Repo, Please click the ⭐

Contents

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

List of things that you need to have configured for the correct operation of the project. For more specific details go to Usage.

  • npm
  • Hadoop Distributed File System as a Batch Layer
  • SPARK as a Service Layer

Installation

  1. Configure the HDFS and Spark enviroments, check this doc.
  2. Clone the repo
    git clone https://github.com/TheWorstOne/Sparkend.git
  3. Install NPM packages
    npm install

Usage

In order to hosting the current project in Firebase Hosting Service we need to do several changes into the SPARK backend API. We use static JSON to upload data into the dashboard. Also, the HDFS and SPARK enviroment must be correctly configured.

For more detail explaination, please check this doc

  1. Change the endpoint for you master node IP in src\app\rest.service.ts

     // Cambiar por API de pyspark
     const endpoint = 'http://25.10.13.68:3200/';
  2. Uncomment these lines in src\app\rest.service.ts

     //getDelayCount(arr_dep): Observable<any>{
     getDelayCount(arr_dep): any[]{
         /*
         return this.http.get(endpoint + 'consulta' + arr_dep).pipe(
         map(this.extractData));
         */
         return (arr_dep === "8") ? arr : dep;
     }

    The code should look like this

     getDelayCount(arr_dep): Observable<any>{
         return this.http.get(endpoint + 'consulta' + arr_dep).pipe(
         map(this.extractData));
     }

    Repeat the same step for the rest of the services

  3. Uncomment these lines in src\services\query-primera.service.ts

     //public getConsulta1(): Observable<ConsultaRutas[]> {
     public getConsulta1(): any[] {
         var uri = `http://25.10.13.68:3200/consulta1`;
         /*
         return this.httpClient.get<ConsultaRutas[]>(uri).pipe(
         map(data => data.map(data => new ConsultaRutas().deserialize(data)))
         );
         */
         return q1.map(q1 => new ConsultaRutas().deserialize(q1));
     }

    The code should look like this

     public getConsulta1(): Observable<ConsultaRutas[]> {
         var uri = `http://25.10.13.68:3200/consulta1`;
         return this.httpClient.get<ConsultaRutas[]>(uri).pipe(
         map(data => data.map(data => new ConsultaRutas().deserialize(data)))
         );
     }

    Repeat the same step for the rest of the services

  4. Now for consuming the services you need to uncomment these lines in src\app\dashboard\dashboard.component.ts

     public getConsulta1() {
         /*
         this.queryPrimeraService.getConsulta1().subscribe(_consultaLlegadaRutas => {
         this.consultaRutasLlegada = _consultaLlegadaRutas;
         this.dataSource1.data = _consultaLlegadaRutas;
         });
         */
         this.consultaRutasLlegada = this.queryPrimeraService.getConsulta1();
         this.dataSource1.data = this.queryPrimeraService.getConsulta1();
     }

    The code should look like this

     public getConsulta1() {
         this.queryPrimeraService.getConsulta1().subscribe(_consultaLlegadaRutas => {
         this.consultaRutasLlegada = _consultaLlegadaRutas;
         this.dataSource1.data = _consultaLlegadaRutas;
         });
     }

    Repeat the same step for the rest of methods

  5. Repeat the same previous process now into src\app\flight-report\flight-report.component.ts and src\app\usa-map\usa-map.component.ts

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Miguel Ángel Macías - 👨‍💻Linkedin

My Personal Website: ✨mangelladev.com

Acknowledgements

About

✨🐘 A material-angular interface for SPARK-HADOOP application with a node API [FRONTEND]

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •