Pasukan Latio: Komuniti untuk penggodam teknologi membina bersama

Ini ialah penyerahan untuk Cabaran Wix Studio: Edisi Komuniti.

Platform Komuniti Saya

Latio Team ialah komuniti yang dibina untuk pembina teknologi yang berpangkalan di LATAM, ia merupakan tempat untuk melibatkan diri, belajar, berkembang dan berhubung bersama semasa menyertai hackathon. Halaman komuniti termasuk ciri seterusnya:

1. Kumpulan bakat: ahli menyenaraikan profil mereka pada halaman awam yang bertujuan untuk dilihat oleh perekrut atau usahawan lain.
2. Peluang pekerjaan: papan kerja yang mempamerkan pekerjaan jauh terkini untuk ahli kami (API disediakan oleh RemoteOK), ahli boleh melihat dan memohon pada jawatan kerja dalam halaman komuniti.
3. Penyenaraian Hackathon: tempat untuk berkongsi dan menyiarkan peluang hackathon baharu untuk ahli kami.
4. Sambung: ruang untuk bercakap dengan ahli lain, menyiarkan kemas kini kerja dan juga mencari rakan usaha sama baharu.
5. Pertanyaan Kerja: setiap profil ahli mempunyai butang hubungan di mana perekrut boleh menghantar mesej kepada mereka atau meminta pertanyaan kerja. Ahli kemudiannya boleh melihat mesej yang diterima di dalam halaman penyenaraian tersuai tanpa perlu mendedahkan butiran peribadi mereka.

Demo

Pautan projek: https://fredoist.wixstudio.io/latio-team

Halaman utama:

Kolam Bakat:

Lembaga Jawatan dan Jawatan

Penyenaraian Hackathon:

Sambung:

Profil Ahli:

Borang Pertanyaan Kerja dan penyenaraian:

Kembara Pembangunan

Membina dengan Wix's Studio dan Velo API adalah agak mudah jika anda sudah mengetahui JavaScript.

Semua dokumentasi untuk API Velo adalah jelas dan sangat lengkap, juga, editor di dalam Wix Studio mempunyai beberapa ciri autolengkap yang hebat yang menjadikannya sangat mudah untuk digunakan. Sebaik sahaja anda mula membina dan menguji editor, anda memahami cara ia berfungsi dan anda boleh melaksanakan API baharu dengan cepat.

Sebagai titik tambahan, templat Wix membolehkan anda membina tapak web yang menakjubkan dengan sangat pantas, reka bentuk menyesuaikan diri dengan setiap Apl baharu untuk elemen yang anda tambahkan yang mana ia cukup hebat kerana anda tidak perlu menyentuh apa-apa lagi.

Ini ialah blok kod untuk beberapa ciri supaya anda boleh menirunya:

Penyiaran kerja

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;
});

Halaman kerja

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;
}

Menghantar pertanyaan untuk mana-mana ahli

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;
    }
);

Mengambil pertanyaan ahli

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;
  }
);

API Velo

1. wix-data: ia digunakan untuk menyimpan, mengambil dan memaparkan data koleksi tersuai dan juga data ahli dalam ciri awam/peribadi.
2. wix-fetch: jawatan kerja disediakan oleh API RemoteOK dan ini diambil menggunakan kaedah pengambilan Wix, kemudian kerja diberikan kepada blok pengulang.
3. wix-router: jawatan kerja juga dipaparkan ke halamannya sendiri yang digunakan penghala Wix.
4. wix-members-backend: ia digunakan untuk memautkan borang pertanyaan kepada koleksi tersuai, setelah data dihantar, memberId diambil menggunakan API ini dengan memadankan slug profil, kemudian dihantar ke koleksi dengan data borang.
5. wix-location-frontend dan wix-window-frontend: ini hanya digunakan untuk mendapatkan data URL seperti laluan atau slug ahli.

Apl Wix

1. Kawasan Ahli Wix: digunakan untuk profil pengguna dan pengesahan.
2. Kumpulan Wix: digunakan untuk ciri sambung.
3. Soalan Lazim Wix: untuk memasukkan Soalan Lazim ke dalam halaman utama.
4. CMS: Saya menggunakan beberapa sambungan CMS untuk memaparkan data di dalam halaman.

Atas ialah kandungan terperinci Pasukan Latio: Komuniti untuk penggodam teknologi membina bersama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!