Unikalios darbo tarybos žiniatinklio programos kūrimas naudojant Node.js, MUI, SerpApi ir React.js

Įvadas į Darbo tarybos programos kūrimą

Įspūdingame darbo skelbimų lentos žiniatinklio programos kūrimo nuo nulio projektas sujungia šiuolaikines priekinės ir galinės technologijos. Galite sukurti reaguojančią ir dinamišką programą, derindami Node.js serverio logikai su React.js vartotojo sąsajai. Naudodami API, pvz., SerpApi, galite pasiūlyti vartotojams naujausias galimybes, realiuoju laiku paskelbdami darbo skelbimus.

Naudosime Vite, norėdami greitai nustatyti React.js kūrimo aplinką, kad sukurtume šį projektą. „SerpApi“ veiks kaip tiltas norint gauti darbo skelbimus iš „Google Jobs“, o „Node.js“ vykdys serverio operacijas per „Express“. Turėsime prieigą prie didžiulės bibliotekos iš „Material-UI“ (MUI), kuri padės mums sukurti savo vartotojo sąsajos stilių, kad ji atrodytų patobulinta ir intuityvi.

Šis metodas parodys, kaip sutvarkyti visą žiniatinklio programą, be to, kaip įtraukti išorines API. Priekinio ir galinio programavimo derinimas gali padėti suprasti svarbias idėjas, kurios būtinos kuriant keičiamo dydžio žiniatinklio programas. Darbas su MUI taip pat pagerins jūsų vartotojo sąsajos galimybes, todėl bus sukurta vizualiai stulbinanti ir naudinga programa.

Šios pamokos pabaigoje turėsite veikiančią darbo biržos žiniatinklio programą, kurią naudodami galėsite lengvai nuskaityti, rodyti ir formuoti darbų sąrašus. Panagrinėkime, kaip sujungti visas šias priemones, kad būtų sukurta visapusiška kūrimo aplinka.

Kaip veikia mūsų darbo tarybos žiniatinklio programa

Pirmiau minėti scenarijai parodo, kaip sukurti žiniatinklio programą, skirtą visos krūvos darbo lentai. React.js naudojamas frontend sukurti dinamišką sąsają, kuri nuskaito darbų sąrašus ir pateikia juos tvarkingu, jautriu išdėstymu. „React“ naudojant „JobList“ ir kitus komponentus palengvina vartotojo sąsajos valdymą ir organizavimą. Kabliukas „useEffect()“ leidžia gauti darbų sąrašus, kai sudedamas komponentas. Galime asinchroniškai iškviesti savo API su šiuo kabliu, kuris palaiko vartotojo sąsają, kai įkeliami duomenys. Be to, tvarkome išdėstymą ir stilių naudodami Material-UI komponentus, pvz., „Container}“, „Card}“ ir „Tipography}“, todėl sąsaja yra estetiška ir naudinga.

Mes naudojame Express ir Node.js užpakalinėje sistemoje, kad sukurtumėte paprastą API serverį. Užklausų iš „React“ sąsajos valdymas ir sąveika su išorinėmis API, tokiomis kaip „SerpApi“, yra pagrindinės užpakalinės sistemos pareigos. Funkcija „axios.get()“ mūsų „Express“ programoje naudoja „SerpApi“, kad gautų informaciją apie darbą siųsdama užklausas. Naudojant `res.json()}, rezultatai siunčiami atgal į React programą JSON formatu. Aplinkos kintamųjų saugumas yra svarbi užpakalinės programos dalis. Saugant SerpApi raktą `process.env.SERP_API_KEY}, konfidencialūs duomenys yra apsaugoti nuo tiesioginio poveikio kode. Programos priekinė ir užpakalinė dalis yra padalintos, todėl kiekvienam komponentui galima atlikti savarankišką priežiūrą ir mastelio keitimą.

Be to, būsimi funkcijų papildymai yra paprastesni dėl scenarijų modulinio dizaino. Pavyzdžiui, būtų paprasta pridėti filtravimo ir rūšiavimo parinktis naudotojams priekinėje sistemoje arba išplėsti API maršrutus, kad būtų galima gauti tam tikrų rūšių užduotis. Išsaugome aiškų atsakomybės atskyrimą, struktūrizuodami logiką į daugkartinio naudojimo komponentus ir maršrutus, o tai palengvina derinimo ir programos mastelio keitimą. Be to, saugumui teikiama pirmenybė užtikrinant, kad išoriniai API raktai būtų saugiai saugomi aplinkos kintamuosiuose, o ne būtų užkoduoti projekte, ir tikrinant API atsakymus.

Neatsiejama šio kūrimo proceso dalis yra testavimas. Numatoma sąsajos elgsena patikrinama vieneto testavimo scenarijumi, kuris buvo sukurtas naudojant Jest ir React Testing Libraries. Pavyzdžiui, „screen.getByText()“ naudojamas patvirtinti, kad, atsižvelgiant į gautus duomenis, pareigybių pavadinimai pateikiami tiksliai. Šie vienetų testai yra kliūtis prieš būsimus kodo pakeitimus, kurie gali sutrikdyti esamą funkcionalumą, be to, patikrinama, ar programa veikia taip, kaip numatyta. Kuriame patikimesnę ir patvaresnę darbo skelbimų lentą, išbandydami pagrindinius API maršrutus ir „React“ komponentus.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Container, Card, CardContent, Typography } from '@mui/material';

// Job listing component
const JobList = () => {
  const [jobs, setJobs] = useState([]);
  useEffect(() => {
    fetchJobs();
  }, []);

  const fetchJobs = async () => {
    try {
      const response = await axios.get('/api/jobs');
      setJobs(response.data.jobs);
    } catch (error) {
      console.error('Error fetching jobs:', error);
    }
  };

  return (
    <Container>
      {jobs.map((job) => (
        <Card key={job.id}>
          <CardContent>
            <Typography variant="h5">{job.title}</Typography>
            <Typography>{job.company}</Typography>
          </CardContent>
        </Card>
      ))}
    </Container>
  );
};

export default JobList;

const express = require('express');
const axios = require('axios');
const app = express();
const port = process.env.PORT || 5000;

// SerpApi key stored in environment variable for security
const serpApiKey = process.env.SERP_API_KEY;

app.get('/api/jobs', async (req, res) => {
  try {
    const response = await axios.get(
      `https://serpapi.com/search.json?q=software+developer&api_key=${serpApiKey}`
    );
    res.json({ jobs: response.data.jobs });
  } catch (error) {
    console.error('Error fetching jobs:', error);
    res.status(500).send('Server error');
  }
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Unit test for React component using Jest and React Testing Library
import { render, screen } from '@testing-library/react';
import JobList from './JobList';

test('renders job listings', () => {
  const jobs = [{ id: 1, title: 'Frontend Developer', company: 'TechCorp' }];
  render(<JobList jobs={jobs} />);
  const jobTitle = screen.getByText(/Frontend Developer/i);
  expect(jobTitle).toBeInTheDocument();
});

API integravimo vaidmens Job Board programose tyrinėjimas

Norint gauti dabartinius darbo skelbimus iš išorinių šaltinių, kuriant šiuolaikinę darbo biržos programą būtina integruoti trečiųjų šalių API, pvz., SerpApi. Kūrėjai gali pasinaudoti tokiomis paslaugomis kaip „Google“ darbai rinkti atnaujintus sąrašus, o ne rankiniu būdu kuruoti darbo skelbimus, užtikrinant, kad vartotojai visada turėtų prieigą prie naujausių perspektyvų. Šis automatizavimas ne tik taupo laiką, bet ir padidina pasiekiamų darbo skelbimų skaičių, o tai suteikia vartotojams išsamesnę darbo paieškos patirtį.

Galite pasiekti savo mastelio ir lankstumo Node.js backend integruojant API, pvz., SerpApi. API skambučiai gali būti pritaikyti norint gauti užduotis, atitinkančias konkrečius reikalavimus, pvz., pareigų pavadinimą arba vietą. Užduočių lenta gali būti interaktyvesnė ir patogesnė vartotojui, dinamiškai perduodant šiuos parametrus per sąsają kaip paieškos užklausas. Naudojant asinchroninius iškvietimus programoje Node.js, API rezultatai apdorojami ir grąžinami į React sąsają, kad būtų rodomas – visa tai užtikrina greitą atsako laiką.

Be to, API ryšys sukuria papildomų funkcijų, tokių kaip darbo žymėjimas, vartotojo autentifikavimas ir darbdavio informacijos suvestinės darbo skelbimams, galimybių. Paprasčiau plėsti projektą, kai programa skirta efektyviai valdyti vartotojo sąveiką ir duomenų gavimą. Naudodami „WebSockets“ kūrėjai gali įtraukti sudėtingas funkcijas, pvz., momentinius pranešimus apie darbo skelbimus ir atnaujinimus realiuoju laiku. Šiandieninėje sparčiai besivystančioje rinkoje toks dinamiškumas yra būtinas konkurencingoms darbo biržų platformoms.