Latio-Team: Eine Community für gemeinsam aufbauende Tech-Hacker

Dies ist eine Einreichung für die Wix Studio Challenge: Community Edition.

Meine Community-Plattform

Latio Team ist eine Community für Technologieentwickler mit Sitz in LATAM. Es ist ein Ort, an dem man sich bei der Teilnahme an Hackathons engagieren, lernen, wachsen und vernetzen kann. Die Community-Seite enthält die nächsten Funktionen:

1. Ein Talentpool: Mitglieder erhalten ihr Profil auf einer öffentlichen Seite, die darauf abzielt, von Personalvermittlern oder anderen Unternehmern gesehen zu werden.
2. Stellenangebote: eine Jobbörse, die die neuesten Remote-Jobs für unsere Mitglieder präsentiert (API von RemoteOK bereitgestellt), Mitglieder können Stellenangebote auf der Community-Seite sehen und sich darauf bewerben.
3. Hackathon-Einträge: Der Ort, an dem wir neue Hackathon-Möglichkeiten für unsere Mitglieder teilen und veröffentlichen können.
4. Verbinden: ein Raum, um mit anderen Mitgliedern zu sprechen, Arbeitsaktualisierungen zu veröffentlichen und auch neue Mitarbeiter zu finden.
5. Arbeitsanfragen: Jedes Mitgliederprofil verfügt über eine Kontaktschaltfläche, über die Personalvermittler ihnen eine Nachricht senden oder eine Arbeitsanfrage stellen können. Mitglieder können dann die empfangenen Nachrichten auf einer benutzerdefinierten Listenseite sehen, ohne ihre privaten Daten preisgeben zu müssen.

Demo

Projektlink: https://fredoist.wixstudio.io/latio-team

Homepage:

Talentpool:

Stellenbörse und Stellenausschreibung

Hackathon-Einträge:

Verbinden:

Mitgliederprofil:

Arbeitsanfrageformular und Auflistungen:

Entwicklungsreise

Das Erstellen mit den Studio- und Velo-APIs von Wix war recht einfach, wenn Sie bereits über JavaScript verfügen.

Die gesamte Dokumentation für Velo-APIs ist klar und sehr vollständig. Außerdem verfügt der Editor in Wix Studio über einige großartige Funktionen zur automatischen Vervollständigung, die die Verwendung sehr einfach machen. Sobald Sie mit dem Erstellen und Testen des Editors beginnen, verstehen Sie, wie er funktioniert, und können schnell neue APIs implementieren.

Zusätzlich können Sie mit den Vorlagen von Wix sehr schnell eine beeindruckende Website erstellen. Das Design passt sich für jedes Element, das Sie hinzufügen, an jede neue App an, was ziemlich cool ist, da Sie nichts anderes anfassen müssen.

Dies sind die Codeblöcke für einige der Funktionen, damit Sie sie replizieren können:

Stellenausschreibungen

import { Permissions, webMethod } from "wix-web-module";
import { getJSON } from "wix-fetch";

const formatPrice = (p) =>
    new Intl.NumberFormat('en-US', {
        notation: 'compact',
        maximumFractionDigits: p < 1 ? 3 : 1,
    }).format(Number(p));

// GET call using getJSON
export const getJobs = webMethod(Permissions.Anyone, async () => {
    const response = await getJSON(
        "https://remoteok.com/api",
    );
    const jobs = response.slice(1).map(job => {
        job._id = job.id;
        job.salary_range = `$ ${formatPrice(job.salary_min)}-${formatPrice(job.salary_max)}`
        job.company_logo = job.company_logo ? `https://remoteok.com/cdn-cgi/image/format=auto,fit=contain,width=100,height=100,quality=50/${job.company_logo}` : null;
        job.logo = job.logo ? `https://remoteok.com/cdn-cgi/image/format=auto,fit=contain,width=100,height=100,quality=50/${job.logo}` : null;
        job.image = job.company_logo ?? job.logo ?? `https://ui-avatars.com/api/?name=${job.company}`
        return job;
    })
    return jobs;
});

Jobseite

import { ok, notFound, WixRouterSitemapEntry } from "wix-router";
import { getJobs } from "backend/fetch-jobs.web"

export async function job_Router(request) {

    // Get item name from URL request
    const slug = request.path[0];

    // Get the item data by name
    const jobs = await getJobs();
    const data = jobs.filter(job => job.slug === slug)

    if (data.length) {
        const job = data[0];

        // Define SEO tags 
        const seoData = {
            title: job.position,
            description: "This is a description of " + job.position + " page",
            noIndex: false,
            metaTags: [{
                "property": "og:title",
                "content": job.position
            }, ]
        };

        // Render item page 
        return ok("job-page", job, seoData);
    }

    // Return 404 if item is not found 
    return notFound();
}

export async function job_SiteMap(sitemapRequest) {
    const jobs = await getJobs()

    // Convert the data to site map entries
    const siteMapEntries = jobs.map((job) => {
        const data = job;
        const entry = new WixRouterSitemapEntry(job.slug);
        entry.pageName = "job-page"; // The name of the page in the Wix editor to render
        entry.url = "/job/" + job.slug; // Relative URL of the page
        entry.title = data.position; // For better SEO - Help Google
        return entry;
    });

    // Return the site map entries
    return siteMapEntries;
}

Senden von Anfragen für jedes Mitglied

import { Permissions, webMethod } from "wix-web-module";
import wixData from "wix-data";

export const sendInquiry = webMethod(
    Permissions.Anyone,
    async (username, email, details, budget) => {
        const results = await wixData.query("Members/PrivateMembersData").eq('slug', username).find()
        const member = results.items.length > 0 ? results.items[0] : null;
        if(member) {
          const memberId = member._id;
          const result = await wixData.save("WorkInquiries", {
            recipientId: memberId,
            contactEmail: email,
            details,
            budget
          })
          if(result) {
            return true
          }
        }
        return false;
    }
);

Mitgliederanfragen abrufen

import { Permissions, webMethod } from "wix-web-module";
import { query } from "wix-data";
import { currentMember } from "wix-members-backend"

export const getInquiries = webMethod(
  Permissions.SiteMember, 
  async () => { 
    const member = await currentMember.getMember();
    const data = await query("WorkInquiries").eq('recipientId', member._id).find();

    return data.items;
  }
);

Velo-APIs

1. Wix-Daten: werden zum Speichern, Abrufen und Rendern von benutzerdefinierten Sammlungsdaten und auch Mitgliedsdaten in öffentlichen/privaten Funktionen verwendet.
2. wix-fetch: Stellenanzeigen werden von der API von RemoteOK bereitgestellt und mit den Abrufmethoden von Wix abgerufen, dann werden Jobs in Repeater-Blöcken gerendert.
3. wix-router: Stellenanzeigen werden auch auf einer eigenen Seite gerendert, für die der Router von Wix verwendet wird.
4. wix-members-backend: wird verwendet, um das Anfrageformular mit einer benutzerdefinierten Sammlung zu verknüpfen. Sobald Daten gesendet wurden, wird die Mitglieds-ID mithilfe dieser API durch Abgleich mit dem Profil-Slug abgerufen und dann mit den Formulardaten an die Sammlung übergeben.
5. wix-location-frontend und wix-window-frontend: Diese werden einfach verwendet, um URL-Daten wie den Pfad oder den Member-Slug abzurufen.

Wix-Apps

1. Wix-Mitgliederbereich: Wird für Benutzerprofile und Authentifizierung verwendet.
2. Wix Groups: Wird für die Verbindungsfunktion verwendet.
3. Wix FAQ: um eine FAQ in die Homepage einzubinden.
4. CMS: Ich habe einige CMS-Verbindungen verwendet, um Daten innerhalb von Seiten anzuzeigen.

Das obige ist der detaillierte Inhalt vonLatio-Team: Eine Community für gemeinsam aufbauende Tech-Hacker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!