تا حالا شده به این فکر کنی که چقدر فوق العاده می شود اگر برنامه ای بسازی که از هر گوشه دنیا به آن دسترسی داشته باشیم، یا اینکه نرم افزاری بسازی که روز و شب بتوانیم با لپتاب، موبایل، تبلت یا هر ابزار دیگری به آن دسترسی داشته باشیم ؟

یا حتی تا حالا شده خودت از برنامه هایی که باید روی کامپیوتر یا لپتابت نصب می کنی، زورت گرفته باشد؟

اگر می خواهی چنین برنامه هایی بسازی ، برنامه نویسی وب می تواند به تو کمک کند. نرم افزارهای تحت وب را می توانی در هر ساعتی در هر نقطه جغرافیایی با هر دستگاهی چک کنی !

اگر اهل اینترنت و وب گردی باشی احتمالا متوجه شدی که در بعضی از وب سایت ها فقط از چشمت برای خواندن مطالب آنها استفاده می کنی . در حالی که در بعضی وب سایت ها شاید اطلاعاتی وارد کنی و در مقابل از وب سایت چیزی به بگیری، مثل ثبت نام و دریافت کد. پس وبسایت ها را به دو دسته تقسیم می کنیم.

• استاتیک : وب سایت هایی که فقط به کاربر اطلاعات می دهند و کافی است برای ساخت آنها HTML و CSS بلد باشی.
• داینامیک : وب اپلیکیشن هایی که کاربر با آنها تعامل دارد 

در این مقاله بر اساس نقشه راه زیر به تو خواهم گفت برای ساخت وب اپلیکیشن ها چه کارهایی انجام دادم تا توانستم یک وب سایت خوب بسازم.

برنامه نویسی وب چیست؟

برنامه نویسی دریک جمله یعنی با نوشتن کدها به کامپیوتر بگوییم کار ما را چطور انجام دهد. کامپیوتر بعد از اتمام برنامه نویسی، با استفاده از نرم افزار تولید شده کارهای ما را بجای ما انجام می دهد.

ما نرم افزارها را می توانیم بر روی کامپیوتر، موبایل استفاده کنیم. با استفاده از برنامه نویسی وب می توان برنامه های تحت وب تولید کرد.

برنامه های تحت وب، برنامه هایی هستند که هم بر روی دسکتاپ و هم بر روی موبایل قابل اجرا هستند. کافی است برای دسترسی آنها از یک مرورگر (Browser) استفاده کنیم.

البته فراموش نکن که برای دسترسی به برنامه های تحت وب، کامپیوتر یا موبایل تو باید به اینترنت متصل باشند.   

با استفاده از برنامه نویسی وب چه نوع برنامه هایی تولید می شود ؟

بهتر است پیش از شروع برنامه نویسی تحت وب نیم نگاهی به انواع برنامه های تحت وب بیاندازیم.

برنامه های تحت وب را می توان به دو دسته وب سایت های استاتیک و وب اپلیکیشن ها تقسیم کرد:

وب سایت های استاتیک :

در وبسایت های استاتیک کاربر با سایت تعاملی ندارد و داده ای بین آنها ردوبدل نمی شود. مثلا در سایت های استاتیک فرم Login وجود ندارد. سایت های استاتیک صرفا جهت ارائه اطلاعات مورد استفاده قرار می گیرند.

 وبسایت شف طیبه  یک سایت استاتیک است. HTML و CSS ضروری ترین ابزارهای ساخت وب سایت های استاتیک هستند.

وب اپلیکیشن داینامیک :

کاربر با برنامه های تحت وب داینامیک یا پویا تعامل دارد. وب اپلیکیشن ها داده ای به سمت کاربر می فرستند و در پاسخ داده ای دریافت می کنند.

وب اپلیکیشن ها از دو قسمت کلاینت و سرور تشکیل می شوند. بنابراین در برنامه نویسی وبسایت های داینامیک شما برای ساخت Client side به HTML، CSS، جاوااسکریپت نیاز دارید.

سمت دیگر وب اپلیکیشن ها، سرور است که برای ساخت آن به مکانیزم طبیعی ذهن و یک زبان برنامه نویسی نیاز دارد.

فروشگاه آنلاین، پورتالها، وب اپلیکیشن با تصاویر متحرک، سیستم مدیریت محتوا (CMS) مانند وردپرس، و سیستم مدیریت ارتباط با مشتری  (CRM) در دسته وب اپلیکیشن ها قرار می گیرند.

شناخت نرم افزارهای تحت وب به تو کمک می کند تا بدانی قرار است با برنامه نویسی وب چکاری انجام دهی. همچنین به بهبود نرم افزار مشتری ات کمک خواهی کرد.

 

 

مزایای برنامه های تحت وب را بدان ، مشتری ات را راهنمایی کن 

• عدم نیاز به نصب بر روی سیستم
• برنامه های تحت وب بر روی انواع سیستم عامل ها قابل دسترسی هستند
•  برنامه های تحت وب  بر روی دستگاه های مختلف مانند موبایل، دسکتاپ و تبلت قابل اجرا هستند.  اجرای یک نرم افزار در سایز های مختلف می تواند به کاربر حس بهتری را منتقل کند. 
• کاربرهای شما می توانند در هر مکان و هر زمانی به نرم افزار تحت وب خود دسترسی داشته باشند

با توجه اگر مشتری شما می خواست هم از طریق موبایل و هم دسکتاپ به نرم افزارش دسترسی داشته باشد برنامه های تحت وب را به پیشنهاد بدهید.

برای ساخت وب اپلیکیشن ها به چه چیزهایی نیاز داریم ؟

وب اپلیکیشن های داینامیک دارای دو قسمت client و server هستند. کلاینت و سرور در واقع محل اجرای کدها هستند.

هرچیزی که کاربرها بر روی کامپیوتر خود می بینند “کلاینت ساید” است. از طرف دیگر هرچیزی که در سرور اتفاق بیفتد، server-side نامیده می شود. کدهای login و logout، کدهای ذخیره و بازیابی داده ها در بانک اطلاعاتی، احراز هویت در server-side رخ می دهد.

 

اما دانش مورد نیاز برای طراحی سمت کلاینت برنامه های تحت وب ،  چیست ؟

 

زبان نشانه گذاری HTML ، بدون HTML هیچ صفحه وبی در کار نخواهد بود

هر آنچه کاربر در مرورگر وب و صفحه وب می بینید توسط زبان نشانه گذاری HTML پیاده سازی شده است. HTML  مخفف Hyper Text Markup Language  به معنای زبان نشانه گذاری ابرمتن است.

گاهی به اشتباه از زبان نشانه گذاری HTML یا Hypertext Markup Language به عنوان یک زبان برنامه نویسی یاد می شود. در حالی که HTML زبان برنامه نویسی نیست و در واقع در پیاده سازی صفحات وب دو نقش اساسی برعهده دارد. 

• پیاده سازی ساختار
• نگهداری داده

 یک طراح وب  با استفاده از المان های HTML کار ساخت صفحه وب را انجام می دهد. برای اینکه بتوانی یک web page بسازی، کافی است تگ ها یا المان های HTML را بشناسی.مثلا بدانی برای گذاشتن یک عکس در یک صفحه وب از تگ <img> استفاده کنی.

 بنابراین HTML یک عنصر از پازل طراحی صفحات وب است که بدون آن عملا صفحه وبی ساخته نخواهد شد.

دانلود رایگان کتاب آموزش HTML

 تجربه کاربری یا UX در دست های CSS

وقتی وب سایت یا وب اپلیکیشنت را با HTML طراحی کردی، CSS وارد عمل می شود . CSS یا Cascading Style Sheets به رنگ آمیزی و رسپانسیو (responsive) بودن یک صفحه وب کمک می کند. بگذار راحت بگویم بدون استفاده از CSS به کاربر حس خوبی منتقل نمی شود. بیا با هم ببینیم که بدون css در زندگی تو به عنوان طراح وب چه اتفاقی خواهد افتاد؟

وقتی که یک وب اپلیکیشن یا وبسایت طراحی می کنی احتمالا صفحاتی با ظاهر یکسان وجود دارد.  CSS به تو کمک می کند تا کدهای اضافه ننویسی.

 

در دو عکس بالا تفاوت بین یک صفحه وب با CSS و بدون CSS را براحتی میبینی .

حتی احتمال اینکه یک صفحه وب بدون CSS، در موبایل یا لپتاپ مشتری به شکل های مختلف یا بی نظم نشان داده شود وجود دارد.  این اتفاق ها به همین سادگی در ذوق کاربر می زند و UX را از بین می برد.

یک صفحه وب بدون CSS مثل یک خانه بدون رنگ و نقاشی است.  و مردم خانه های زیبا را بهتر می خرند.

 

جاوا اسکریپت ، زبان برنامه نویسی جانبخشی به صفحات وب

جاوا اسکریپت در صفحات وب نقش روح در انسان را بازی می کند. بگذار اینطور نگاه کنیم، تفاوت یک انسان زنده و یک انسان مرده در چیست ؟ آفرین، انسان مرده روح ندارد. نمی تواند دست و پایش را تکان بدهد، نمی تواند حرف بزند. در یک کلام کسی نمی تواند با یک انسان مرده حرف بزند. اما همه می توانند با یک انسان زنده ارتباط بگیرند چون دارای روح و احساسات است.

تصویر معروف زیر به بهترین شکل نقش جاوا HTML ، CSS و JavaScript را به تصویر می کشد.

یک طراح وب از بکاربردن جاوااسکریپت چه هدفی دارد؟

1. تعاملات کاربر و server می تواند با استفاده از JavaScript انجام می شود.
2. مدیریت درخت DOM برای تغییر HTML
3. ایجاد پویایی در صفحه وب

آنچه باعث محبوب شدن جاوااسکریپت شده است، یکپارچگی آن با زبان HTML و CSS است. بعلاوه JavaScript بر روی همه ی مرورگرها اجرا می شود.

با استفاده از جی کوئری (JQuery)  راحت تر جاوا اسکریپت بنویس

کدهایی که توسط جاوا اسکریپت نوشته می شود ممکن است بسیار طولانی باشد. برای اینکه مشکل طولانی بودن اسکریپت های JavaScript حل شود جی کوئری ساخته شده است. کدهای جاوا اسکریپت بسته بندی می شوند و جی کوئری نامیده می شوند.

یک طورهایی می توان گفت جی کوئری، شکل جمع و جور شده JavaScript است. تو هر آنچه که در JQuery بنویسی، در نهایت بدون آنکه تو ببینی به جاوا اسکریپت تبدیل می شود.

یک طراح وب از بکاربردن جی کوئری چه هدفی دارد؟

• ساده سازی دستورهای جاوا اسکریپت
• استفاده از انیمیشن ها 
• تغییر مقادیر ویژگی های CSS
• کار با توابع Ajax

اگر جی کوئری نباشد تو برای انجام کارها با استفاده از جاوا اسکریپت باید مدت زمان زیادی وقت بگذاری و کدهای بیشتری بنویسی.

یکی از مزایای جی کوئری این است که  نیازی نیست نگران تطابق کدها با مرورگر ها باشی. در صورتی که در جاوا اسکریپت اینطور نیست.

با این حال اینکه بخواهی بخاطر وجود Jquery ، استفاده از JavaScript را کنار بگذاری تصور نادرستی است.

 

استفاده از BootStrap  در طراحی صفحات وب یا دیوانگی 

تا جایی که یادم می آید، طراح های وب قدیمی برای خودشان استانداردهایی داشتن. مثلا برای خودشان margin و padding مشخصی را تعیین میکردن . قلق های رسپانسیو بودن و واکنشگرا بودن را با استفاده از CSS پیاده سازی می کردند.

بنظر دیوانگی بود که برای هر پروژه یا هر برنامه بخواهند آن استاندارد ها را تکرار کنند. طراحان وب حرفه ای همیشه یک نسخه CSS از قبل نوشته شده را برای خودش آماده می کردند.نوشتن CSS استاندارد از پیش تعیین شده هم خوبی هایی داشت و هم بدی هایی.

در هر صورت آقای Bootstrap به بازار آمد تا تمام دردسرهای Responsive بودن یک صفحه وب را برطرف کند.

بوت استرپبه گفته سایت Bootstrap   معروف ترین فریمورک برای طراحی front end است. bootstrap با استفاده از HTML، جاوا اسکریپت، CSS می تواند کار طراحان وب را برای طراحی mobile-first هم راحت کند.

اگر از Bootstrap  استفاده نکنی، احتمالا لازم باشد یک سری از کدها را تکرار کنی. و استاندارد های Responsive بودن تو را اذیت خواهند کرد. همچنین لازم نیست نگران باشی که وب اپلیکیشن یا سایتت در ابزارهای مختلف تو بی نظم نمایش داده شوند.

 

برای طراحی سمت سرور وب اپلیکیشن ها به چه عناصری نیاز دارید ؟

 

مکانیزم طبیعی ذهن در برنامه نویسی وب

برنامه نویسی وب به یک زبان برنامه نویسی وب نیاز دارد اما پیش  از آن لازم است بتوانی از مکانیزم طبیعی ذهن استفاده کنی. برای بررسی اینکه کدام کدها در سمت سرور پیاده سازی می شوند از مکانیزم طبیعی ذهن استفاده می کنیم. اپلیکیشن اسنپ فود را در نظر بگیر.

یک سری کارها رامشتری ها برای سفارش دادن غذا در سمت کلاینت انجام می دهند، که متناظر با آنها عملی در server انجام می شود.

 

اینبار از اسنپ فود که یک مثال از دنیای واقعی است، برای به تصویر کشیدن اتفاقات سرور استفاده می کنیم.

در فرآیند سفارش دادن کارهایی مثل اضافه کردن و حذف کردن غذا از سبد خرید انجام داده ام. این کارها در سمت کلاینت انجام می شود اما بعد از زدن دکمه نهایی، سفارش های شما مثل یک فاکتور به سمت سرور می رود تا در آنجا ثبت شود.

عمل ثبت سفارش فعلی است که در سمت سرور با استفاده از کدها پیاده سازی می شود.

بطور خلاصه چه فعل هایی درBackend پیاده سازی می شوند ؟

1. فعل هایی که قوانین تجاری را بررسی می کند (مثل شرط تخفیف دادن)
2. فعل هایی که کار ذخیره و بازیابی داده ها در بانک اطلاعاتی را برعهده دارند.(crud)
3. فعل های ارسال داده ها به کلاینت و دریافت داده ها از سمت کلاینت(HTTP Requests)

کافی است برای برنامه نویسی سمت سرور یک نرم افزار تحت وب بتوانی، فعل های بالا را تشخیص بدهی.

اگر نتوانی فعل های بالا را در یک پروژه تجاری پیدا کنی، عملا نمی توانی برنامه نویسی server-side  انجام بدهی.

 

چرا برای انتخاب یک زبان برنامه نویسی وب نیازی به وسواس نیست؟ 

بعد از اینکه فعل های سمت سرور را در تحلیل نرم افزاری مشخص کردید، برای پیاده سازی فعل ها یک زبان برنامه نویسی نیاز دارید.

زبان های برنامه نویسی وب متفاوتی وجود دارد. خوبی متنوع بودن زبان های برنامه نویسی این است که به ما حق انتخاب می دهند. اما  ASP.Net و PHP  دوتا تا از قدرتمند ترین های بازی وب هستند.

هر زمانی که توانستی گام اول “ مکانیزم طبیعی ذهن در برنامه نویسی وب” را درست برداری، بدون وسواس یک زبان برنامه نویسی انتخاب کن. سپس در صورت نیاز می توانی در مدت زمان کوتاه هر زبان  دیگری که دوست داری را یاد بگیری.

چرا بهتر است یک برنامه تحت وب معماری داشته باشد ؟ معرفی معماری MVC

یک نرم افزار از بخش های مختلفی تشکیل می شود. مثل واسط کاربری، مدل های یک پروژه نرم افزاری و فعل های یک سیستم تجاری. فرض کن کدهای ساخت واسط کاربری، function ها و Model ها با هم قاطی شود. در این حالت توسعه نرم افزار مشکل خواهد بود.

اما احتمالا معماری نرم افزار، به تو کمک می کند تا آن را توسعه بدهی و شکست نخوری. مثلا یکی از معماری های معروف ، MVC یا Model- view – controller  است.  معماری MVC کدها را به سه دسته مدل، ویو، کنترلر تقسیم می کند.

اگر از MVC استفاده کنیم چه اتفاقی خواهد افتاد ؟

معماری MVC باعث می شود تا کارها در یک نرم افزار تحت وب به صورت موازی انجام شوند. بنابراین معماری MVC سرعت برنامه های شما را افزاریش می دهد.  همچنین قابلیت Asynchronous بودن نرم افزار توسط MVC پشتیبانی می شود که موجب می شود صفحات وب راحت تر load شوند. در صورتی که نرم افزارت دارای معماری MVC باشد، بدون اینکه نگران بهم ریختن نرم افزارت باشی می توانی تغییرات را ایجاد کنی.

نتیجه گیری :

برای شروع برنامه نویسی وب می توانی از HTML و CSS شروع کنی . اما این را بدان که HTML و CSS باعث ایجاد ساخت یک سایت دانامیک نمی شود. اگر در سفارش مشتری از شما می خواهد که کاربر با وبسایت آن تعامل داشته باشد، مثلا ثبت نام کند تو باید از زبان برنامه نویسی و مکانیزم طبیعی ذهن برای برنامه نویسی سمت سرور استفاده کنی.

بعلاوه برای پروژه ات حتما باید یک معماری مثل معماری MVC در نظر بگیری . در غیراینصورت در پشتیبانی دادن به مشتری ات و توسعه نرم افزار شکست خواهی خورد. 

منابع :

everystep

educba

dotnet.microsoft