Shopify

قطعت نصف الطريق بالفعل من خلال تعلمك MERN stack بعدها ستحتاج تعلم لغة محرك القوالب الخاصة بالمنصة وهي Liquid أي أشبه بمحرك القوالب EJS أو Handlebars.

وشوبيفاي نفسها منصة تجارة إلكترونية سحابية SaaS - Software as a Service أي بدلاً من أن تقوم أنت ببناء متجر كامل من الصفر من خلال بناء قاعدة بيانات، تأمين الدفع، إدارة المخزون، لوحة التحكم، السيرفرات وشهادات SSL، يوفر شوبيفاي كل البنية التحتية جاهزة ومحمية وتتحمل ملايين الزيارات، مع واجهات برمجية تتيح للمطورين التعديل عليها والتوسع فيها.

وأمامك 3 خيارات للتطوير، أولهم  Headless Commerce وبه ستستخدم شوبيفاي كـ Backend فقط (لإدارة المنتجات، الدفع، الطلبات)، وبناء الواجهة الأمامية بالكامل بواسطة React أو Next.js.

ستتصل بالـ Storefront API (GraphQL) من تطبيق الـ React لعرض المنتجات وإتمام عمليات الشراء.

وللعلم لديهم إطار عمل مبني على React وRemix يسمى Hydrogen مخصص لذلك الغرض.

• https://shopify.dev/docs/storefronts

الخيار الثاني  بناء تطبيقات شوبيفاي والتي  تضيف ميزات إضافية للمتجر مثل نظام ولاء مخصص، تكامل مع شركات شحن محلية أو تقارير متقدمة.

وهنا ستعتمد على  Node.js و React، بحيث تُعرض لوحة تحكم التطبيق داخل الـ Admin Dashboard لـ شوبيفاي باستخدام مكتبة UI رسمية من شوبيفاي اسمها Polaris وهي مكتبة مكونات React جاهزة.

• https://shopify.dev/docs/apps/build

والخيار الثالث هو تطوير القوالب بتعديل وتصميم قوالب المتجر التي تعمل مباشرة على خوادم شوبيفاي، وهي بحاجة إلى لغة Liquid وهي سهلة جداً طالما لديك خبرة بجافاسكريبت، ويمكن تعلم أساسياتها في يومين فقط.

وهنا المستند الرسمي:

• https://shopify.dev/docs/api/liquid

بتاريخ 8 دقائق مضت قال Mustafa Suleiman:

قطعت نصف الطريق بالفعل من خلال تعلمك MERN stack بعدها ستحتاج تعلم لغة محرك القوالب الخاصة بالمنصة وهي Liquid أي أشبه بمحرك القوالب EJS أو Handlebars.

وشوبيفاي نفسها منصة تجارة إلكترونية سحابية SaaS - Software as a Service أي بدلاً من أن تقوم أنت ببناء متجر كامل من الصفر من خلال بناء قاعدة بيانات، تأمين الدفع، إدارة المخزون، لوحة التحكم، السيرفرات وشهادات SSL، يوفر شوبيفاي كل البنية التحتية جاهزة ومحمية وتتحمل ملايين الزيارات، مع واجهات برمجية تتيح للمطورين التعديل عليها والتوسع فيها.

وأمامك 3 خيارات للتطوير، أولهم  Headless Commerce وبه ستستخدم شوبيفاي كـ Backend فقط (لإدارة المنتجات، الدفع، الطلبات)، وبناء الواجهة الأمامية بالكامل بواسطة React أو Next.js.

ستتصل بالـ Storefront API (GraphQL) من تطبيق الـ React لعرض المنتجات وإتمام عمليات الشراء.

وللعلم لديهم إطار عمل مبني على React وRemix يسمى Hydrogen مخصص لذلك الغرض.

• https://shopify.dev/docs/storefronts

الخيار الثاني  بناء تطبيقات شوبيفاي والتي  تضيف ميزات إضافية للمتجر مثل نظام ولاء مخصص، تكامل مع شركات شحن محلية أو تقارير متقدمة.

وهنا ستعتمد على  Node.js و React، بحيث تُعرض لوحة تحكم التطبيق داخل الـ Admin Dashboard لـ شوبيفاي باستخدام مكتبة UI رسمية من شوبيفاي اسمها Polaris وهي مكتبة مكونات React جاهزة.

• https://shopify.dev/docs/apps/build

والخيار الثالث هو تطوير القوالب بتعديل وتصميم قوالب المتجر التي تعمل مباشرة على خوادم شوبيفاي، وهي بحاجة إلى لغة Liquid وهي سهلة جداً طالما لديك خبرة بجافاسكريبت، ويمكن تعلم أساسياتها في يومين فقط.

وهنا المستند الرسمي:

• https://shopify.dev/docs/api/liquid

والاحسن استخدام Shopify أم بناء الموقع نن الصفر كبرمجة حرة 

وعندما بحثت الان وجدت أن هناك اشتراكات على Shopify ما هى نظام الاشتراكات وهذه الأشياء 

بتاريخ 14 دقائق مضت قال Ibrahim Almahdy:

والاحسن استخدام Shopify أم بناء الموقع نن الصفر كبرمجة حرة 

وعندما بحثت الان وجدت أن هناك اشتراكات على Shopify ما هى نظام الاشتراكات وهذه الأشياء 

هو عنده حساب ببيع احذيه وهكذا وعايز يعمل موقع على Shopify ، طبعا لسا هيجهز  المحتوى والصور وهكذا ، يعني قدامي فتره نصف شهر ولا حاجه لما ابدا المشروع ، ف أنا مش فاهم نظام Shopify لحد دلوقتي 

وبردو كمبرمج لما اتفق معاه على سعر بيبقى في حدود كام لبناء موقع على Shopify 

وايضا وجدت أن هناك اشتراكات خاصه ب Shopify وهكذا

بتاريخ 11 ساعة قال Ibrahim Almahdy:

والاحسن استخدام Shopify أم بناء الموقع نن الصفر كبرمجة حرة 

وعندما بحثت الان وجدت أن هناك اشتراكات على Shopify ما هى نظام الاشتراكات وهذه الأشياء 

هو عنده حساب ببيع احذيه وهكذا وعايز يعمل موقع على Shopify ، طبعا لسا هيجهز  المحتوى والصور وهكذا ، يعني قدامي فتره نصف شهر ولا حاجه لما ابدا المشروع ، ف أنا مش فاهم نظام Shopify لحد دلوقتي 

وبردو كمبرمج لما اتفق معاه على سعر بيبقى في حدود كام لبناء موقع على Shopify 

وايضا وجدت أن هناك اشتراكات خاصه ب Shopify وهكذا

شوبيفاي هي خدمة سحابية (Software as a Service)، مما يعني أن الموقع لا يشترى كنسخة نهائية توضع على سيرفر خاص، بل يستأجر مقابل اشتراك شهري أو سنوي. هذا الاشتراك يدفعه العميل مباشرة لشركة شوبيفاي، وللتوضيح أكثر حول المنصة يمكنك الإطلاع على المقالة التالية

وبالنسبة لتخصصك وبناء الموقع من الصفر فتحتاج لبناء Backend كامل (Node/Express أو غيره)، تصميم قاعدة بيانات، تأمين بيانات الدفع وغيرها كما وضحها مصطفى في التعليق السابق وهذه كلها مهارات باك-إند وDevOps لا علاقة لها بتخصص Frontend، 

أما من ناحية شوبيفاي فيمكنك تخصيص القالب عبر Liquid (وهو أقرب إلى HTML/CSS/JS) دون أي حاجة للBackend أو الأمان أو قواعد البيانات إطلاقاً، فكل ذلك جاهز ومدار من المنصة. 

بتاريخ On 19‏/8‏/2026 at 14:17 قال Ibrahim Almahdy:

Alhamdulillah for completing this journey.
(وَمَا تَوْفِيقِي إِلَّا بِاللَّهِ ۚ عَلَيْهِ تَوَكَّلْتُ وَإِلَيْهِ أُنِيبُ)
سورة هود – الآية 88

I have completed the Front-End Web Development course at Hsoub Academy | أكاديمية حسوب.
It was a long journey filled with learning, projects, and hard work. I learned HTML, CSS, JavaScript, and Bootstrap, and built more than 5 Landing Pages for products, companies, applications, and personal websites.
I then learned Sass (SCSS), built an e-commerce store, developed an Admin Dashboard, a YouTube-like UI, and a news website.
After completing the training, I took the final exam, where the trainer evaluated my knowledge of the technologies I learned and the projects I built. I was then asked to create a graduation project for a coffee shop.
Graduation Project — BrewNest
The project had to be an 8-page coffee shop website. The required page names were provided, but no Figma design or ready-made template was given.
Instead, the trainer gave me complete freedom to think and create, saying:
"I’ll leave the project to your imagination."
So I planned and built the entire project myself — from the structure, colors, and UI to the sections, pages, and implementation.
BrewNest is a fully responsive, multi-page coffee shop website consisting of:
Home
Products
About
Coffee
Cappuccino
Turkish Coffee
Distributors
Contact
The website supports Arabic and English, with RTL/LTR layouts and dynamic language switching. I also used Local Storage to save the user's language preference for future visits.
Key features include responsive design, multilingual support, Hero Carousel, product sections, individual product pages, customer reviews, similar products, form validation, Google Maps integration, Bootstrap components, organized SCSS architecture, and modular JavaScript.
What I value most about this project is that it was not based on a ready-made Figma design or template. I planned, designed, and developed it from scratch, including the colors, UI, layout, and functionality.
This experience taught me how to turn an idea into a complete project from planning to implementation, rather than simply reproducing an existing design.
Special thanks to Hsoub Academy and the trainers for this valuable experience.
Alhamdulillah for completing this milestone.
BrewNest — Graduation Project
Live Demo:
https://lnkd.in/eBzw_PUP
GitHub Repository:
https://lnkd.in/eBZ_JJYM
#FrontendDevelopment #FrontendDeveloper #JavaScript #WebDevelopment #Programming

بتاريخ 4 ساعة قال عبدالباسط ابراهيم:

شوبيفاي هي خدمة سحابية (Software as a Service)، مما يعني أن الموقع لا يشترى كنسخة نهائية توضع على سيرفر خاص، بل يستأجر مقابل اشتراك شهري أو سنوي. هذا الاشتراك يدفعه العميل مباشرة لشركة شوبيفاي، وللتوضيح أكثر حول المنصة يمكنك الإطلاع على المقالة التالية

وبالنسبة لتخصصك وبناء الموقع من الصفر فتحتاج لبناء Backend كامل (Node/Express أو غيره)، تصميم قاعدة بيانات، تأمين بيانات الدفع وغيرها كما وضحها مصطفى في التعليق السابق وهذه كلها مهارات باك-إند وDevOps لا علاقة لها بتخصص Frontend، 

أما من ناحية شوبيفاي فيمكنك تخصيص القالب عبر Liquid (وهو أقرب إلى HTML/CSS/JS) دون أي حاجة للBackend أو الأمان أو قواعد البيانات إطلاقاً، فكل ذلك جاهز ومدار من المنصة. 

انا دخلت وبحثت شويه في شوبيفاي وعرفت الفرق بين الاشتركات وكل الحجات دي ، دلوقتي في Theme مجاني و مدفوع بالنسبة للمدفوع العميل بيشتريه ونعدل عليه ونحط عليه المنتجات بتاعته ? وهل يعرف يعمل دا من غير ميشتري Theme مدفوع وبردو عرفت إن اعرف اثبت Shopify CLI على VS وابنيله المشروع بدل ميشتري Theme عايز شرح اكثر عن المواضيع دي بالنسبة ل Backend فهو الموقع  موفر كل ما يخص عمليات الدفع وBackend وكل دا يعني انا اقدر اخش ابنيه ك Front وخليه مخصص اكتر للعميل ومن خلال شوبيفاي استخدم Backend اللي موفره صح كدا ولا انا فهمت غلط ؟