ایجاد رزومه با React یا سایر فناوری‌های فرانت‌اند اغلب به عنوان یک کار ساده برای آزمایش مهارت‌های فرانت‌اند در نظر گرفته می‌شود. اما در حالی که این پروژه ساده است، به هم ریختن و مهندسی بیش از حد آن نیز بسیار آسان است.
در این راهنمای گام به گام، یاد خواهید گرفت چگونه با Next.js یک وب سایت رزومه بسازیم با داده های رزومه میزبانی شده در BCMS، یک CMS بدون سر.
چگونه با رویکرد هدلس یک وب سایت رزومه بسازیم؟
ممکن است بپرسید چرا این رویکرد؟ خوب، چند دلیل برای استفاده از CMS بدون هد به عنوان سازنده وب سایت رزومه وجود دارد، که به چند مورد اشاره می کنیم:
-
به روز رسانی آسان تر محتوا: با میزبانی محتوای رزومه شما به طور جداگانه از برنامه شما، می توانید رزومه خود را تغییر دهید بدون دست زدن به پایگاه کد شما.
-
به روز رسانی در زمان واقعی: می توانید تغییراتی را در CMS خود ایجاد کنید و آنها فوراً در وب سایت Next.js منعکس می شوند.
-
سفارشی سازی و یکپارچه سازی: CMS های بدون سر اغلب دارای API هایی هستند که امکان سفارشی سازی عمیق را فراهم می کند. اگر نیاز به ادغام با سایر سرویس‌ها (مانند APIهای برنامه شغلی، و رسانه‌های اجتماعی مانند LinkedIn یا GitHub) دارید، یک CMS می‌تواند این ادغام‌ها را به‌طور یکپارچه‌تر از داده‌های کدگذاری سخت تسهیل کند.
این ویژگی‌ها با هیچ CMS استانداردی ارائه نمی‌شوند، بنابراین استفاده از یک CMS بدون هد با این ویژگی‌ها و سایر ویژگی‌ها ضروری است. به همین دلیل BCMS بهترین انتخاب برای ساخت رزومه حرفه ای در کنار Next.js است.
در پایان این آموزش، می‌توانید از قدرت Next.js و ویژگی‌های فوق‌العاده‌ای که BCMS ارائه می‌کند برای ایجاد یک وب‌سایت رزومه کاملاً کاربردی استفاده کنید.
فهرست مطالب: نحوه ساخت یک وب سایت رزومه با BCMS
- راه اندازی برنامه Next.js
- راه اندازی BCMS و ایجاد محتوای رزومه
- واکشی محتوای رزومه از BCMS و رندر در برنامه Next.
- استقرار
- مراحل بعدی
راه اندازی برنامه Next.js
حالا بیایید صفحه اصلی Next.js را راه‌اندازی کنیم، یک استایل اضافه کنیم و فیلدهای رزومه را با داده‌های ساختگی پر کنیم.
برای شروع، به Next CMS بروید، دستور ترمینال را کپی کنید و آن را روی ترمینال خود بچسبانید تا با استفاده از یکی از راه‌اندازهای بعدی موجود، یک پروژه ساده BCMS Next ایجاد کنید.
برای این آموزش، من از قالب ساده وب سایت وبلاگ استفاده خواهم کرد:
npx @thebcms/cli create next starter simple-blog
این فرمان یک پروژه next.js ایجاد می کند، شروع کننده ساده بلاگ را در داخل آن شبیه سازی می کند، و سپس به یک نمونه BCMS متصل می شود (در ادامه در این مورد بیشتر توضیح خواهیم داد).
اینجاست که از شما می‌خواهد وارد شوید، بنابراین وقتی از شما می‌خواهد با استفاده از مرورگر خود وارد شوید یا اگر هنوز حساب BCMS ندارید، به سادگی وارد شوید.
پس از ورود، دستور از شما خواسته می شود تا نام پروژه را بنویسید و سپس آن را با موفقیت ایجاد کنید، همانطور که در تصویر زیر نشان داده شده است.
به پوشه پروژه بروید، دستور install را اجرا کنید و npm run dev دستور، پس از آن، صفحه شما زنده خواهد شد localhost:3000.
اکنون پروژه Next.js شما آماده راه اندازی است و به یک Backend BCMS پیوند داده شده است، جایی که این پست های وبلاگ از آنجا می آیند. اگرچه نیازی به این پست های وبلاگ ندارید، زیرا نیازهای شما متفاوت است. بنابراین، بیایید صفحه را تمیز کنیم.
پاکسازی صفحه
در پروژه جدید Next.js خود به پوشه src و سپس برنامه بروید. page.tsx وجود دارد، که صفحه فهرست است، و این تنها صفحه ای است که ما برای این آموزش استفاده خواهیم کرد، زیرا یک رزومه یک صفحه ای است و هیچ پیوندی به صفحات دیگر ندارد.
ابتدا، قالب‌های BlogCard و Tag را که استفاده نمی‌کنم، و همچنین انواع BlogEntry را که هنگام استفاده از دستور bcms CLI به‌طور خودکار برای من ایجاد شده‌اند، حذف می‌کنم.
//Delete
import { BlogEntry, BlogEntryMetaItem } from '../../bcms/types/ts';
import BlogCard from '@/components/blog/Card';
import Tag from '@/components/Tag';
پس از آن می توانید عنوان صفحه را به هر عنوان دلخواه تغییر دهید.
با رفتن به تابع HomePage، همه توابع را حذف کنید و عبارت بازگشت را پاک کنید و فقط یک div را با یک “رزومه من” ساده باقی بگذارید.
کد page.tsx در این مرحله باید چیزی شبیه به این باشد:
import React from 'react';
import { bcms } from './bcms-client';
import { Metadata } from 'next';
const pageTitle="Resume - My Simple Resume";
export const metadata: Metadata = {
title: pageTitle,
openGraph: {
title: pageTitle,
},
twitter: {
title: pageTitle,
},
};
const HomePage: React.FC = async () => {
return My Resume
;
};
export default HomePage;
و در مرورگر، این چیزی است که نمایش داده می شود:
عالی است، شما با موفقیت صفحه را پاکسازی کردید.
اما هنوز فایل های دیگری در پروژه وجود دارد که ما به آنها نیازی نداریم، بنابراین من فقط آنها را با خیال راحت حذف می کنم. آنها عبارتند از:
src/app/blog-
src/components
هر فایل دیگری را در این پوشه به جز پوشه layout که پاورقی را نگه می دارد حذف کنید.
پس از حذف این پوشه ها یا فایل های موجود در آنها، ساختار برنامه شما باید به شکل زیر باشد:
عالی است، با پاکسازی پروژه، زمان تنظیم رابط کاربری برای رزومه فرا رسیده است.
طراحی رابط کاربری صفحه
اکنون، صفحه رزومه را راه‌اندازی می‌کنم و در حال حاضر، داده‌های رمزگذاری شده ساختگی را در خود نگه می‌دارم.
این کار مستلزم ایجاد ساختار HTML صفحه و سپس استایل دادن به آن با Tailwind CSS است. من به جزئیات در مورد CSS یا Tailwind CSS مورد استفاده برای استایل صفحه نمی پردازم زیرا این یک آموزش CSS نیست. در عوض، به سادگی صفحه را کپی کرده و موجود خود را جایگزین کنید page.tsx کد با آن
import React from 'react';
import { bcms } from './bcms-client';
import { Metadata } from 'next';
import Image from 'next/image';
const pageTitle="Resume - My Simple Resume";
export const metadata: Metadata = {
title: pageTitle,
openGraph: {
title: pageTitle,
},
twitter: {
title: pageTitle,
},
};
const HomePage: React.FC = async () => {
return (
Senior Product Designer
Experience
Enterprise Name
Aug 2018 - Present - 1 year, Paris
Directly collaborated with CEO and Product team to
prototype, design and deliver the UI and UX
experience with a lean design process: research,
design, test, and iterate.
Enterprise Name
Aug 2013 - Aug 2018 - 5 years, Paris
Lead the UI design with the accountability of the
design system, collaborated with product and
development teams on core projects to improve
product interfaces and experiences.
Enterprise Name
Aug 2012 - July 2013, Paris
Designed mobile UI applications for Orange R&D
departement, BNP Paribas, La Poste, Le Cned...
Enterprise Name
Sept 2010 - jul 2012 - 2 years, Paris
Designed print and web applications for Pau Brasil,
Renault, Le théatre du Mantois, La mairie de Mantes
la Ville...
Education
School Name
2009 - 2010, Bagnolet
School Name
2007 - 2009, Bagnolet
yourmail@gmail.com
+33 6 33 33 33 33
Vernouillet
Industry Knowledge
Industry Knowledge
Product Design
User Interface
User Experience
Interaction Design
Tools & Technologies
Figma, Sketch, Protopie, Framer, Invision, Abstract,
Zeplin, Google Analytics, Amplitude, Fullstory...
Other Skills
HTML, CSS, jQuery
Languages
French (native)
English (professionnal)
Social
yoursite.com
linkedin.com/in/yourname
dribbble.com/yourname
);
};
export default HomePage;
از کد بالا می بینید که به یک عکس نیاز دارید، فعلاً در پروژه Next.js میزبانی می شود اما بعداً تغییر می کند، بنابراین به سادگی به آدرس زیر بروید public پوشه، یک پوشه جدید به نام ایجاد کنید images و یک پرتره انتخابی خود را برای استفاده به عنوان نمونه عکس پروفایل ذخیره کنید.
در حال حرکت، به layout.tsx در زیر پوشه برنامه قرار دهید و رنگ پس زمینه را تغییر دهید تا حس زیباتری داشته باشیم و روی قسمت رزومه تمرکز کنیم.
پس از آن، صفحه شما باید زنده می شد:
عالی است، اکنون زمان راه اندازی BCMS و ایجاد داده های رزومه است.
راه اندازی BCMS و ایجاد محتوای رزومه
برای ورود به حساب BCMS خود به BCMS Cloud بروید. در سمت چپ داشبورد خود، یک منوی کشویی حاوی لیستی از نمونه‌های BCMS خود (که پروژه‌ها نیز نامیده می‌شود) را مشاهده می‌کنید.
نمونه BCMS درست مانند یک جعبه یا مخزن حاوی داده های برنامه شما است، بنابراین این پشتیبان برای آن برنامه خاص است. شما می توانید نمونه های مختلفی را برای برنامه های مختلف ایجاد کنید.
اگر این اولین بار است که از BCMS استفاده می کنید، باید فقط یک نمونه را در آنجا ببینید.
بنابراین چگونه می توانید داده ها را برای برنامه خود ایجاد کنید؟
اصل ایجاد داده‌های BCMS هیچ تفاوتی با مواردی که استفاده می‌کردید ندارد، خواه این بک‌اند سفارشی شما با PHP یا Nodejs یا CMS دیگری در صورت وجود باشد: شما یک مدل داده ایجاد می‌کنید، اینجا جایی است که ورودی‌های خود را مشخص می‌کنید. نیاز، و انواع خاصیت برای آن ورودی و سپس داده ها را بر اساس آن مدل های داده ایجاد می کنید.
در سمت چپ داشبورد BCMS شما یک پنل مدیریتی حاوی قالب‌ها، ابزارک‌ها و گروه‌ها….، و سپس پایین‌تر، ورودی‌ها را خواهید دید.
همه اینها به چه معناست و چگونه با هم جمع می شوند؟
قالب ها – این ساختار محتوای شما، بلوک سازنده شماست. اینجا جایی است که می‌توانید مشخص کنید چه فیلدهایی برای بخشی که در حال ایجاد یک الگو هستید، نیاز دارید.
ورودی ها – Entry یک رکورد ساده از یک قالب است، یک قطعه محتوای پویا که از ساختار محتوایی که در قالب خود تعریف کرده اید پیروی می کند.
گروه ها – گروه ها در BCMS بلوک های ساختمانی قابل استفاده مجدد هستند که از چندین ویژگی ساخته شده اند. گروه ها را می توان در هر قالب، ویجت یا گروه دیگری گنجاند.
****بیایید این را در عمل ببینیم.
مدل سازی داده ها در BCMS
در برگه قالب‌های خود، یک الگوی وبلاگ را می‌بینید که به‌طور خودکار پس از ایجاد این پروژه با استفاده از دستور CLI بالا ایجاد شده است. از آنجایی که شما از شر همه فایل های مرتبط با وبلاگ در برنامه frontend خود خلاص شده اید، به این معنی است که قالب وبلاگ دیگر برای شما مفید نیست.
بنابراین، روی این قالب کلیک کنید و سپس روی ویرایش قالب در سمت راست بالای صفحه کلیک کنید و سپس با خیال راحت آن را حذف کنید.
حالا بیایید داده هایی را که برای رزومه نیاز دارم مدل کنیم.
ابتدا یک قالب جدید با نام رزومه ایجاد کنید. یک ورودی واحد را انتخاب کنید زیرا فقط یک رزومه خواهید داشت، برخلاف وبلاگی که می توانید چندین وبلاگ داشته باشید.
بنابراین اطلاعات مورد نیاز برای این رزومه چیست؟
- نام – رشته – الزامی است
- عنوان – به طور خودکار توسط BCMS ایجاد می شود
- عکس پروفایل – رسانه – الزامی است
این یک گروه خواهد بود. گروه‌ها در BCMS قسمت‌های قابل استفاده مجدد از فیلدها را با هم گروه‌بندی می‌کنند. برای ایجاد یک گروه، به تب گروه در داشبورد خود بروید و روی “ایجاد یک گروه جدید” کلیک کنید.
من نام این گروه را “تجربه کاری” می گذارم زیرا اطلاعات مربوط به تجربه کاری را در خود دارد. اطلاعاتی که نگه می دارد عبارتند از:
- عنوان شغلی – رشته – الزامی است
- نام شرکت – رشته – الزامی است
- مدت زمان کار – رشته – الزامی است
- شرح کار – متن غنی – الزامی است
اکنون به الگوی Resume برگردید، می توانید با موفقیت به این گروه پیوند دهید، و باید یک آرایه باشد زیرا دارای چندین تجربه کاری است.
- تحصیلات: مانند تجربیات کاری، این نیز گروهی خواهد بود که داده های مشابهی را در اختیار دارد.
گروه را ایجاد کنید و آن را به قالب رزومه پیوند دهید.
اطلاعات فرم تماس – این یک گروه خواهد بود که اطلاعات تماس را در اختیار دارد
گروه را ایجاد کنید و آن را به قالب رزومه پیوند دهید.
- دانش صنعت – رشته، آرایه
- ابزارها و فناوری ها – متن غنی
- مهارت های دیگر – متن غنی
- زبان ها – رشته، آرایه
- اجتماعی – رشته، آرایه
تبریک می‌گوییم، الگوی شما در این مرحله باید چیزی شبیه به این باشد:
در مرحله بعد، به تب ورودی ها بروید و سپس روی رزومه کلیک کنید تا یک ورودی ایجاد کنید، اکنون می توانید داده های رزومه واقعی را طبق ساختاری که در قالب تعریف کرده اید بنویسید.
به سادگی فیلدها را در آنجا ویرایش کنید و پس از انجام این کار روی کشویی وضعیت در سمت راست صفحه کلیک کنید، آن را به منتشر شده تغییر دهید و سپس به روز کنید.
با این کار، داده‌های خود را با موفقیت نوشتید و آماده هستید که آنها را در برنامه Next.js خود داشته باشید.
اما قبل از آن، باید مجوزهای کلید API خود را به روز کنید. به تنظیمات و سپس کلید API بروید، روی ویرایش کلیک کنید و باید مجوزهای قالب رزومه تازه ایجاد شده را ببینید.
مواردی را که به آن نیاز دارید تغییر دهید، برای این آموزش که «می توان دریافت» خواهد بود. بدون این مجوز، نمی‌توانید داده‌های رزومه را در صفحه‌نمایش Nextjs خود دریافت کنید.
واکشی محتوای رزومه از BCMS و رندر در برنامه Next.
بنابراین چگونه می توانید داده ها را از BCMS در برنامه Next.js خود واکشی کنید؟
خب، در ابتدای پروژه با مثال شروع وبلاگ، یک اوج مخفی دیدید. اکنون می‌خواهید همان چیزی را تکرار کنید، اما این بار، داده‌ها را برای رزومه دریافت می‌کنید.
ابتدا باید انواع رزومه‌ها را ایجاد کنم تا به Typescript بفهمم هنگام واکشی داده‌ها چه چیزی را انتظار دارم. وقتی برای اولین بار داده ها را ایجاد کردم، BCMS CLI به طور خودکار به نمونه BCMS متصل شد، ورودی وبلاگ را دریافت کرد، و سپس انواع را برای من تولید کرد که عالی است.
اما این تمام نیست… CLI به تولید انواع به طور خودکار برای من ادامه می دهد وقتی که من قالب ها و ورودی های جدید را اضافه می کنم.
برای دریافت این انواع تولید شده به طور خودکار از BCMS، تنها کاری که باید انجام دهید این است که سرور توسعه‌دهنده را متوقف کرده و دوباره آن را راه‌اندازی کنید، و BCMS آن الگوها و ورودی‌های جدید را انتخاب کرده و انواعی را برای آنها تولید می‌کند.
این یکی از ویژگی‌های فوق‌العاده‌ای است که BCMS به توسعه‌دهندگان ارائه می‌کند تا وظایف خود را آسان‌تر کنند، بنابراین نیازی نیست به‌طور دستی انواع داده‌های خود را ایجاد کنید، آن را قبلاً برای شما مدیریت می‌کند. واقعا باحاله :).
واکشی داده ها
برای واکشی داده‌های BCMS برای برنامه Nextjs خود در فایل page.tsx، انواعی را که به‌طور خودکار توسط BCMS برای شما تولید می‌شوند، وارد کنید.
import { ResumeEntry, ResumeEntryMetaItem } from '../../bcms/types/ts';
و سپس در تابع HomePage خود، قبل از عبارت بازگشت، رزومه را با استفاده از سرویس گیرنده bcms که هنگام راه اندازی برنامه برای شما نصب شده است، دریافت می کنید.
const resume = (await bcms.entry.getAll('resume')) as ResumeEntry[];
console.log(resume);
و باید بتوانید داده های برگشتی را در ترمینال خود مشاهده کنید.
همچنین می توانید فیلدهای بیشتری را وارد کنید تا ببینید چه چیزی می توانید دریافت کنید. به عنوان مثال، من می‌خواهم متا شی را ثبت کنم زیرا این شی است که ورودی ما را نگه می‌دارد.
عالی است، اکنون می توانید از داده ها در برنامه خود استفاده کنید. بنابراین من می خواهم داده های ساختگی را با داده های BCMS جایگزین کنم. می توانید کد تمام شده را در زیر کپی کنید.
import React, { Fragment } from 'react';
import { bcms } from './bcms-client';
import { ResumeEntry, ResumeEntryMetaItem } from '../../bcms/types/ts';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import { BCMSImage } from '@thebcms/components-react';
const pageTitle="Resume - My Simple Resume";
export const metadata: Metadata = {
title: pageTitle,
openGraph: {
title: pageTitle,
},
twitter: {
title: pageTitle,
},
};
const HomePage: React.FC = async () => {
const resume = (await bcms.entry.getAll('resume')) as ResumeEntry[];
if (!resume) {
return notFound();
}
const data = {
meta: resume[0].meta.en as ResumeEntryMetaItem,
};
const imgObj = resume[0].meta.en?.profile_picture;
return (
{data.meta.title}
Experience
{data.meta.work_experience.map((experience, index) => {
return (
{experience.enterprise_name}
{experience.work_duration}
);
})}
Education
{data.meta.education.map((degree, index) => {
return (
{degree.school_name}
{degree.duration_and_location}
);
})}
{data.meta.contact_information.email}
{data.meta.contact_information.phone_number}
{data.meta.contact_information.location}
Industry Knowledge
{data.meta.industry_knowledge.map(
(knowledge, index) => {
return {knowledge}
;
},
)}
Tools & Technologies
Other Skills
Languages
{data.meta.languages.map((language, index) => {
return {language}
;
})}
Social
{data.meta.social.map((social, index) => {
return (
{social}
);
})}
);
};
export default HomePage;
با این کار، شما با موفقیت داده ها را از باطن BCMS پرس و جو کرده و آن را در وب سایت خود ارائه کرده اید. اگر اکنون مرورگر خود را بررسی کنید، محتوای نمایش داده شده را خواهید دید.
استقرار
برای استقرار برنامه Next.js خود، باید از سرویسی به نام Vercel استفاده کنید. این یک راه ساده برای زنده کردن وب سایت شما در اینترنت است. برای یادگیری نحوه استفاده از Vercel این آموزش را دنبال کنید.
مراحل بعدی
به طور خلاصه، ایجاد یک رزومه با استفاده از NextJS هدلس CMS ساده و قدرتمند است. BCMS هدلس CMS به شما کمک می کند محتوای رزومه خود را مدیریت کنید، در حالی که Next.js اطمینان حاصل می کند که وب سایت شما به خوبی کار می کند.
رزومه ای که ایجاد کرده اید فقط برای نمایش نیست – نقطه شروعی است برای کشف آنچه BCMS می تواند انجام دهد. با BCMS به راحتی می توانید وب سایت خود را با نیازهای مختلف تطبیق دهید و آن را با ابزارهای دیگر متصل کنید.
شما این رزومه یک صفحه‌ای را ایجاد کرده‌اید، اما می‌توانید با چند برابر کردن آن، آن را بیشتر کنید. این بدان معناست که در قالب رزومه، می توانید آن را به عنوان یک ورودی غیر تکی برای ایجاد چندین رزومه برای نیازهای مختلف تبدیل کنید. به عنوان مثال، می توانید یک رزومه جاوا و سپس یک رزومه طراحی رابط کاربری ایجاد کنید که به استخدام کنندگان مختلف نشان می دهید.
BCMS این فرآیند را بسیار ساده می کند، فقط با خاموش کردن یک ورودی در قالب، می توانید چندین رزومه ایجاد کنید و سپس در برنامه Nextjs خود، آن رزومه های مختلف را دریافت می کنید و آنها را در URL های مختلف نمایش می دهید، درست مانند یک وبلاگ. .
خوب، با آن، من می گویم کدنویسی مبارک، و بیایید ببینیم با Nextjs و BCMS چه چیزی می توانید به دست آورید.
