نصب و پیکربندی MongoDB

در این مقاله قصد داریم نحوه نصب و پیکربندی MongoDB را به شما آموزش دهیم.

قبل از اینکه کار با MongoDB را شروع کنیم، ابتدا آن را نصب و پیکربندی می کنیم. در این مقاله، آن را روی سیستم عامل ویندوز نصب می کنیم. در ابتدا آخرین نسخه منتشر شده MongoDB برای ویندوز را از اینجادانلود می کنیم.

دانلود MongoDB:

نصب MongoDB:

تنها روی فایل setup دابل کلیک کرده و مراحل نصب زیر را دنبال کنید.

سرور MongoDB در مسیر زیر، قرار گرفته است:

پیکربندی MongoDB و کار باshell مربوط به آن:

بعد از نصب MongoDB روی ویندوز، باید MongoDB Shell را باز کنیم تا MongoDB Server را مدیریت کنیم. برای کار با Shell مراحل زیر را انجام می دهیم.

1. مسیر MongoDB را با استفاده از متغیر محلی Path برای کاربر تنظیم می کنیم.

در مقدار این متغیر، فقط با استفاده از یک سمی کالن، مسیر نصب MongoDB خود را به همراه فولدر bin اضافه می کنیم، مانند نمونه ای که وارد کردیم:

C:\Program Files\MongoDB\Server\3.0\bin

2. Command Prompt را باز کرده و به فولدر bin در دایرکتوری محل نصب MongoDB می رویم.

1	cd C:\Program Files\MongoDB\Server\3.0\bin

3. سرور MongoDB را با تایپ mongod.exe اجرا می کنیم.

اگر این کار را درست انجام داده باشیم، سرور MongoDB به صورت زیر اجرا می شود.

4. Command Prompt دیگری باز کرده و کامند زیر را وارد می کنیم:

1

mongo

Shell مربوط به MongoDB به صورت زیر می باشد:

با استفاده از کامند help می توانید اطلاعات بیشتری درباره MongoDB Shell به دست آورید.

به این ترتیب، MongoDB برای مدیریت و کوئری زدن روی دیتابیس آماده است.

PHP مخفف PHypertext Preprocessor یک زبان قدرتمند ( Cross-Platform , Html embeded ) برای ساخت وب سایت های پویا و داینامیک است .  یک زبان سمت سرور که اسکریپت های آن بر روی سرور اجرا می شود . با استفاده از زبان php ، شما می توانید سایت ها و پورتال های بزرگ سازمانی را با قدرت طراحی و برنامه نویسی کنید . php در نسخه های مختلفی به بازار عرضه شد که در حال حاضر نسخه ۵ آن توسط توسعه دهندگان php به کاربران و برنامه نویسان ارائه شده است . با آمدن php 5 تحول جدیدی در php ایجاد شد به صورتی که Microsoft سازنده زبان Asp بار دیگر از رقیب خود یعنی php عقب افتاد.

سمت سرور یا server side بدین معنی است که دستورات بر روی سرور اجرا می شود و کاربر نمی تواند در آن دخیل باشد . یک سرویس دهنده در حقیقت یک کامپیوتر مخصوص می باشد که صفحات وب در آنجا نگهداری می شوند و از آنجا به مرورگر وب کاربران منتقل می شوند. (مثال : زبان php)

سمت مشتری یا  client side بدین معنی است که دستورات بر روی مرورگر اجرا می شود و کاربر می تواند در آن دخالت کند .  (مثال : زبان جاوااسکریپت)

منظور از Cross-Platform بودن این زبان این است که بروی هر سیستم و با هر سیستم عاملی از قبیل Unix, Windows NT,  Macintosh, Os/2  اجرا میشوند. توجه کنید که منظور از سیستم عامل، سیستم عامل هایی می باشند که بر روی سرویس دهنده نصب می شوند . PHP نه تنها قابلیت اجرا بر روی هر سیستم عاملی را دارا می باشد بلکه برای منتقل کردن برنامه های آن از یک سیستم عامل به سیستم عامل دیگر احتیاج بــه تغییرات اندکی خواهید داشت و حتی در بعضی از موارد بدون احتیاج به هیچ تغییری می توانید یک برنامه به زبان php را از یک سیستم عامل به سیستم عامل دیگر منتقل کنید.

منظور از Html embeded بودن PHP این است که دستورات این زبان در بین کدهای html  قرار می گیرند. بنابراین برنامه نویسی به زبان PHP کمی پیچیده تر از برنامه نویسی به زبان Html به حساب می آید.

PHP با چه پایگاه داده هایی کار می کند؟

پایگاه داده هایی که جهت ذخیره سازی و بازیابی اطلاعات در زبان php استفاده می شود ، MySql , Oracle , Sybase , Solid , PostgreSQL , Generic ODBC است که معروف ترین و پرکاربردترین انها MySql است .

یک فایل  PHP چیست؟

فایل های php می توانند حاوی متن ، تگ های HTML و اسکریپت ها باشند ، کاربر در هنگام اجرای اسکریپت نمی تواند کدهای php را مشاهده کند و تنها تگ های HTML را مشاهده می کند ، بدین معنی که کدهای php روی سرور تفسیر میشوند و خروجی html و یا خروجی های دیگری تولید میکند که توسط کاربر قابل مشاهده است.

اس کیوال لایت

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

اس کیوال لایت
اس کیوال لایت یا سی کوئل لایت)به انگلیسی : SQLite ( یک سامانه مدیریت پایگاه داده رابطه ای کم حجم )در حدود 951 کیلو
بایت(که به زبان سی در قالب یک کتابخانه نوشته شده است و یک پایگاه داده های رابطه ای به حساب می آید .کد اس کیوال لایت در
مالکیت عمومی ،بدون هیچ مجوز و متن باز است.از ویژگی های اس کیو ال لایت آن است که پایگاه داده ای متشکل از یک پرونده ،با
حجم کم و عدم وابستگی به سیستم عامل،دارای محیط مدیریتی خوب که تمامی امکانات آن را پوشش می دهد دراختیار کاربر می
گذارد.با این حال اس کیو ال لایت از تمامی امکانات اس کیو ال پشتیبانی نمی کند.برخلاف انواع دیگر پایگاه داده ،اس کیوال لایت
یک پروسه جداگانه نیست که توسط برنامه ی اصلی فراخوانی شود،بلکه جزئی از خود برنامه ی اصلی است .
اسکیولایت اجازه خوانده شدن همزمان چند قسمت از پایگاه داده را میدهد اما نوشتن در پایگاه داده به طور همزمان ممکن نیست .
مرورگرهای وب به طور متداول از اسکیوال لایت برای ذخیره تاریخچه بازدید وب استفاده میکنند. با توجه به کاربرد وسیع آن در
مرورگرهای وب، سیستمهای عامل و غیره، گمان میرود که اسکیوال لایت پرکاربردترین پایگاه داده موجود باشد.

 

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

 

تاریخچه
دکتر ریچارد هیپ اسکیوال لایت را در سال 1111 در زمانی که از طریق جنرال داینامیکس با نیروی دریایی ایالات متحده آمریکا کار
میکرد طراحی کرد. او در آن زمان مشغول کار روی برنامههای مربوط به ناوشکنهایی بود که به موشکهای هدایتشونده مجهز بودند و
تا آن زمان از پایگاه داده آیبیام اینفورمیکس )به انگلیسی IBM Informix: (استفاده میکردند. هدف از ساخت اسکیوال لایت این
بود که این برنامهها بتوانند بدون نصب یا مدیریت پایگاه داده مستقل اجرا شوند. نسخه اول نرمافزار در اوت 1111 انتشار یافت. در
نسخه 1٫1 ساختار داخلی اسکیوال لایت تغییر یافت و از یک درخت بی در آن استفاده گردید. در نسخه 9٫1 که قسمتی از
هزینههایش توسط ایاوال تامین شد، پشتیبانی چندزبانی و چند تغییر بزرگ دیگر در اسکیوال لایت رخ داد .

 

کاربرد
موزیلا فایرفاکس و موزیلا تاندربرد انواع مختلفی از تنظیمات )نظیر چوبالفها، کوکیها، تاریخچه بازدید وب و غیره( را در یک پایگاه
داده اسکیوال لایت ذخیره میکنند . اسکایپ هم از پایگاه داده اسکیوال لایت بهره میبرد . ادوبی)به انگلیسی: Adobe ) از اسکیوال
لایت در برنامههای مختلف از جمله ادوبی ریدر و ادوبی ایر بهره میگیرد . دراپباکس نیز از اسکیوال لایت در نرمافزار سمت کلاینت
خود استفاده میکند .
با توجه به حجم کم و عملکرد بالا، اسکیوال لایت در بسیاری از سیستمهای عامل از جمله iOS اپل، سیمبیان، آندروید گوگل، میگو
بنیاد لینوکس و وباواس پالم به کار رفته است .

ساخت فرم نام نویسی ساده با php

یکی از سوالات رایج دوستانی که تازه با php آشنا شدن نحوه ذخیره و خواندن اطلاعات از بانک mysql می باشد. در این پست قصد داریم ساخت یک فرم ثبت نام ساده در php رو آموزش بدیم. برای این منظور به دو تا فایل نیاز داریم یه فایل برای دریافت اطلاعات از کاربر (index.html) و یه فایل برای پردازش اطلاعات دریافت شده از کاربر و ثبت مقادیر در بانک اطلاعاتی(register.php). خب اجازه بدین آموزش رو شروع کنیم: در این آموزش فرم ثبت نام ما دارای سه فیلد (نام کاربری، رمز عبور و آدرس ایمیل) می باشد. فرم ما شکلی مانند تصویر زیر خواهد داشت.

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Login form</title>
    <link rel="stylesheet" type="text/css" href="style.css"> </head>

<body>
    <div id="form">
        <form action="register.php" method="post">
            <p>نام:
                <input type="text" name="userName">
            </p>
            <p>رمز عبور:
                <input type="password" name="passWord">
            </p>
            <p>ایمیل:
                <input type="text" name="eMail">
            </p>
            <input type="submit" name="submit" value="ثبت نام"> </form>
    </div>
</body>

</html>

در خط ۱۰ از تگ Form استفاده کردیم. خاصیت action در تگ form مشخص می کنه وقتی کاربر روی دکمه ثبت نام کلیک کرد، اطلاعات موجود در فرم به کدام صفحه ارسال بشه و در ادامه متد POST نیز نحوه ارسال اطلاعات رو به صفحه تعیین شده مشخص می کنه. پس از پر کردن فرم و کلیک بر روی دکمه ثبت نام، اطلاعات دریافتی باید بررسی شده و خطاهای احتمالی اصلاح بشه و در صورت ورود اطلاعات بصورت کامل، داده ها در بانک اطلاعاتی ذخیره بشه. خب حالا نوبت میرسه به ایجاد صفحه ای که در متد action تعیین کردیم تا این عملیات رو انجام بده. برای این منظور یه فایل به نام register.php ایجاد کرده و کدهای زیر رو درون آن ذخیره کنید:

 

<?php 
$server = "localhost";  //your servername
$db_user = "root"; //database username
$db_pass = ""; //database Password 
$db_name = "userdb01"; //insert your batabase name 
$tbl_name = "hb_users"; //insert your table name 
$user = $_POST['userName']; 
$pass = $_POST['passWord']; 
$email = $_POST['eMail']; 
if(!$user) {
	die('لطفا نام کاربری را وارد نمایید');
} 
if(!$pass) {
	die('رمز عبور نمی تواند خالی باشد');
} 
if(!$email) {
	die('ادرس ایمیل معتبر نیست');
} 
if(!preg_match('/[a-zA-z0-9._-]+@[a-zA-z0-9\.-]+\.[a-zA-z\.]+/', $email)) {
	die('آدرس ایمیل معتبر نمی باشد'); 
} 
$conn = mysql_connect($server, $db_user, $db_pass);
if(!$conn) { 
	die('connection error, connection not found');
} 
if(!mysql_select_db($db_name)) {
	die("database not found");
}
$pass_hash = md5($pass);
$query = mysql_query("insert into '$tbl_name' (user_Name, user_Pass, user_Email) values ('$user', '$pass_hash', '$email')"); 
if(mysql_affected_rows()>0) {
	die('متشکریم! ثبت نام شما با موفقیت انجام شد'); 
}
else {
	die('ثبت نام با مشکل مواجه شد، لطفا مجددا سعی نمایید'); 
} 
?>

خب اینجا تو ۶ خط اول اطلاعات مربوط به بانک رو تو متغیرهایی ذخیره کردیم تا در صورتیکه خواستین رو بانک دیگه ای اجرا کنین فقط مقادیر این متغیرها رو تغییر بدین 🙂 و در ادامه با استفاده از POST_$ مقادیر ارسال شده از صفحه index.html رو در متغیرهایی ذخیره می کنیم تا پس از بررسی های لازم اونا رو درون بانک اطلاعاتی ذخیره کنیم.

تو خط بعدی با استفاده از تابع preg_match مقدار فیلد ایمیل بررسی می شود تا آدرس ایمیل وارد شده دارای ساختار استاندارد باشد (مثل Email@Domain.xyz) در ادامه تو خط ۲۳ ارتباط با بانک اطلاعاتی mysql رو بررسی کردیم در صورتیکه ارتباط بر قرار نباشد پیغام خطایی نمایش داده می شود و در صورت برقراری ارتباط نام جدولی که اطلاعات باید در آن ذخیره شود رو بررسی می کنیم اگر جدول مورد نظر وجود نداشته باشد نیز پیغام خطایی نمایش داده می شود.

برای حفظ امنیت مقادیر پسورد را با استفاده از تابع md5 بصورت رمز شده در بانک اطلاعاتی ذخیره می کنیم. در انتها query مورد نظر که درج اطلاعات در بانک می باشد را فراخوانی می کنیم در صورت ثبت اطلاعات پیغام مناسب مبنی بر ثبت نام موفقیت آمیز و در صورت بروز خطا نیز پیغام خطا نمایش داده می شود.   امیدوارم این آموزش رو بپسندید

تفاوت بین آرایه (Array) و لیست آرایه (ArrayList)

یک آرایه (Array)، در زمان تعریف دارای اندازه مشخص می باشد. امکان اضافه کردن یا حذف کردن آیتم به آن وجود ندارد. همچنین تمام آیتم ها می بایست از یک نوع (Type) باشند. در نتیجه آرایه ها دارای نوع مطمئن و مشخص هستند که عامل مهمی در اجرا و اختصاص حافظه ی مورد نیاز می باشد.

چنانچه در هنگام تعریف آرایه، مانند مثال فوق آرایه را از نوع خاصی مثلا int تعریف کنیم، در آنصورت آرایه مورد نظر تنها مقادیر از نوع int را قبول می کند و در خارج از این حالت خطا می دهد. برای رفع این مشکل می تواند آرایه را از نوع object تعریف کرد.

از دیگر ویژگی های آرایه اینست که می تواند چندین بعد (Dimension) داشته باشد، در حالیکه لیست آرایه (ArrayList) از این ویژگی برخوردار نیست.

لیست آرایه  (ArrayList)، یک لیست انعطاف پذیر است که می تواند لیستی از اشیاء را در بر گیرد. امکان اضافه و یا حذف کردن آیتم ها در آن وجود دارد و در خصوص در اختیار گرفتن فضای مورد نیاز، به صورت خودکار تصمیم گیری می کند. انواع مختلف به صورت فضاهای باز و بسته درون لیست آرایه قرار می گیرند که این موضوع کارایی لیست آرایه را تا حدی کاهش می دهد. همچنین نوع لیست آرایه از انواع غیر مطمئن به شمار می رود.

رفع مشکل تبدیل حروف فارسی به علامت سوال (؟)

امروز متوجه شدم مدتی ست که بعضی از متن های فارسی وبلاگ به شکل علامت سوال (؟؟؟…) نشان داده می شوند. این متن ها آنهایی نبودند که از دیتابیس خوانده می شدند، بلکه آنهایی بودند که مستقیما در فایل های php نوشته شده بودند. نمایش آنها تا چند روز پیش درست بود و نمیدانم چه اتفاقی افتاد که این خرابی پیش آمد، اما بهرحال به دنبال راه حل گشتم. در اینترنت هرچه جستجو کردم (چه فارسی و چه انگلیسی) همه راه حل ها برای تصحیح encoding جدول های درون دیتابیس و یا connection مربوطه بود. هیچکدام از تصحیح فرمت encoding فایل ها چیزی نگفته بود. خودم با نرم افزار Notepad++ راهی را امتحان کردم و مشکل حل شد. از آنجاییکه ممکن است این مشکل برای هر فارسی زبان دیگری نیز پیش بیاید و راه حلی در اینترنت به سادگی پیدا نکند تصمیم گرفتم آنرا اینجا منتشر کنم.

ابتدا اگر نرم افزار Notepad++ را ندارید، این نرم افزار رایگان را از اینجا دانلود کنید. انصافا نرم افزار ساده و سبک و بسیار بدردبخوری ست! فرقی نمی کند که به چه زبانی برنامه نویسی کنید، احتمالا این نرم افزار به دردتان می خورد.

سپس آن فایل هایی را که کاراکترهای فارسی درونشان به صورت علامت سوال نمایش داده می شوند را با این نرم افزار باز کنید، از منوی بالا وارد Encoding شوید و Encoding in UTF-8 without BOM را انتخاب کنید. فایل را Save کنید و دوباره باز کنید (اگر با سرور کار می کنید آنرا بر فایل روی سرور overwrite کنید). همانطور که می بینید به همین سادگی مشکل برطرف شد!

نکته فنی: نرم افزار Notepad ویندوز هم در پنجره Save As قابلیت انتخاب کدگذاری UTF-8 را دارد، اما حتما از BOM استفاده می کند. در این حالت یک کاراکتر اضافی مزاحم در ابتدای فایل وجود خواهد داشت که هم ممکن است صفحات HTML را بهم بزند و هم ممکن است باعث شود در صفحات PHP هنگام کار با Cookie یا Session با خطای "Headers already sent" مواجه شوید، چرا که این کاراکتر اضافی قبل از هرچیز برای Client ارسال شده است.

اردلان نقش

معرفی React Native: آسان ترین و بهترین راه برنامه نویسی موبایل و وب؟

الان حدود ۱۵ ساله که برنامه نویسی تحت وب می کنم. هرروز سری به Smashing Magazine و TechCrunch و سایت های دیگه از این دست می زنم و راجع به استارتاپ های جدید و کمپانی ها و اشخاص موفق مرتبط با IT تحقیق می کنم. با این مطالعات میشه خیلی زود فهمید که صنعت IT با سرعتی باورنکردنی در حال پیشرفت و تحوله. اگر می خوای در این صنعت بمونی باید هرروز مطالعه داشته باشی و مفاهیم جدید یاد بگیری. شاید یکی از علل علاقه بسیار من به این صنعت همینه. هیچوقت یکنواخت نمیشه!

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

یکی از آرزوهای برنامه نویسان اینه که بتونن با یک زبان برنامه نویسی برنامه هایی بنویسن که روی دستگاه های مختلف (کامپیوتر، موبایل، تبلت، تلویزیون هوشمند، ساعت مچی هوشمند، …) قابل اجرا باشه. اینطوری بجای اینکه بخوان وقتشون رو صرف یادگیری ۱۰ زبان کنن که هرکدوم هزارجور تکنیک مختص خودش رو داره، وقتشون صرف یادگیری یک زبان مادر می کنن که در همه دستگاه ها قابل اجراست.

تابحال خیلی تلاش ها در این زمینه شده (فلش و تا حدی جاوا در این زمینه ناموفق بودن). از فریم ورک های محبوبی که امروزه به شما امکان برنامه نویسی وب و موبایل اپلیکیشن رو میدن میشه اینها رو نام برد: PhoneGap، Ionic، Appcelerator Titanium، Xamarin

PhoneGap و Ionic خوبیشون اینه که توشون از زبان های وب (HTML، CSS، JS) استفاده می کنید. پس نیازی به یادگیری زبان جدید ندارید (مثل اینه که وب اپلیکیشنتون رو در مرورگر موبایل باز می کنن، اما Full-screen). بدیشون اما اینه که Performanceشون اصلا خوب نیست. اگر اپلیکیشنی که با اینها می سازید «خیلی ساده» نباشه، از سرعت پایین و پریدن های تصویر و انیمیشن های لَگ دار خیلی راحت میشه فهمید که اپلیکیشن Native نیست. به این اپلیکیشن ها Hybrid میگن، و به اپلیکیشن هایی که با زبان مخصوص سیستم عامل نوشته شده باشن Native میگن. (زبان مخصوص دستگاه های کمپانی اپل Objective-C و Swift هست و زبان مخصوص اندروید جاوا.)

Appcelerator Titanium و Xamarin می تونن Performance بهتری ایجاد کنن. بخاطر اینکه از یک زبان برنامه نویسی خاص (جاوااسکریپت و C#) المان های Native رو خروجی می گیرن. اما هردو پولی هستن. همین باعث میشه که طرفداران و منابعشون کم بشه.

حالا می رسیم به این جوجه کوچکی که موضوع این نوشته ست! این جوجه کوچک React Native نام داره.

بذارید یکم برم به عقب. فیس بوک ابتدای سال ۲۰۱۵ اولین نسخه stable یک کتابخانه جاوااسکریپت open-source رو منتشر کرد برای توسعه رابط کاربری (user interface) وب اپلیکیشن ها. اسم این کتابخانه React (یا ReactJS) بود. این کتابخانه با ساختار بسیار ساده و سرعت بسیار بالایی که داشت خیلی سریع مورد توجه قرار گرفت. طوری که با وجود اینکه مدت کوتاهی از اومدنش گذشته، بجز فیس بوک کمپانی هایی از قبیل یاهو، Airbnb و Netflix هم دارن ازش استفاده می کنن.

اواخر مارچ ۲۰۱۵ (دو و نیم ماه پیش) یک فریم ورک جدید از فیس بوک منتشر شد. یک فریم ورک که به شما اجازه میده با استفاده از زبان جاوااسکریپت (و تنها جاوااسکریپت!) و کتابخانه React اپلیکیشن موبایل بسازید! فعلا فقط برای iOS ولی بزودی برای iOS و Android. اسم این فریم ورک React Native ه!

همونطور که از اسمش پیداست، مزیت بزرگش اینه که خروجیش تشکیل شده از المان های Native سیستم عامله. در نتیجه Performance خوبی داره. سیستم کاریش خیلی شباهت ها به Appcelerator Titanium داره. من قبلا اون رو کمی یاد گرفتم. اما وقتی مطالعه درباره React و React Native رو شروع کردم مجذوب سادگی و نظمشون شدم! مجانی و open-source بودن و پشتیبانی شدن توسط فیسبوک رو هم که به اینها اضافه کنید می فهمید که چرا در این مدت کوتاه انقدر پرطرفدار شدن.

من یک اپلیکیشن ساده برای iOS با استفاده از React Native ظرف چند روز ساختم. همه چیز ساده و بی دردسر پیش رفت و Performance اپلیکیشن هیچ فرقی با Native نداشت. الان هم مشغول کار روی دو اپلیکیشن دیگه هستم که تا بحال خیلی خوب پیش رفته.

یکی از جالب ترین کاربرد های React اینه که با استفاده از Node میشه برای برنامه نویسی سمت سرور و نرم افزار تحت سیستم عامل کامپیوتر هم ازش استفاده کرد. یعنی اگر یک موبایل اپ و وب اپ با یک اپ سمت سرور می سازید، می تونید توی همش از زبان جاوااسکریپت استفاده کنید! اولش که این رو می شنوید شاید خیلی به نظرتون نیاد. اما بیشتر بهش فکر کنید مجذوب ایده ش میشید! همین باعث شده که خیلی ها پیش بینی کنن که جاوااسکریپت در آینده دنیای IT رو تسخیر می کنه (البته قبلا با دیدن Node هم همین رو می گفتن، اما حالا با ورود React و React Native به میدان احتمالش بیشتر شده).

خب حالا با وجود همه اینها، به نظر شما الان یادگیری چه زبان برنامه نویسی و فریم ورکی می تونه آینده خیلی خوبی داشته باشه؟

پاسخ من JavaScript و ReactJS و React Native هست. اما یک علامت سوال هم در انتهای تیتر این نوشته گذاشتم، چون هنوز یک رخداد بسیار مهم باقی مونده: انتشار React Native برای اندروید. من فکر می کنم اگر فیس بوک اون قدم رو هم درست برداره و مثل قبل به بروزرسانی مرتب این فریم ورک ادامه بده محبوبیت React Native به سرعت چند برابر میشه و ۳ سال آینده حداقل ‍۱۰ درصد اپلیکیشن های جدید موبایل با React Native ساخته میشن.

نظر شما چیه؟

منابع خوب برای یادگیری

• برای منابع جاوااسکریپت به این نوشته من مراجعه کنید: منابع یادگیری خوب برای طراحی و برنامه نویسی وب و رشته های مختلف دیگه
• سایت ReactJS
• سایت React Native
• ویدیوهای معرفی React Native در کنفرانس ReactJS (دیدنشون رو بسیار توصیه می کنم)
• اخبار (غیررسمی) React Native

مزایای React.js برای SEO

React.js یک کتابخانه است که شبکه های اجتماعی مهمی چون فیسبوک و telegram از آن استفاده کرده اند.البته این کتابخانه اساسا در فیسبوک توسعه داده شده است .

React.js یک کتابخانه است که شبکه های اجتماعی مهمی چون فیسبوک و telegram از آن استفاده کرده اند.البته این کتابخانه اساسا در فیسبوک توسعه داده شده است .

یکی از ویژگی های منحصر به فرد این تکنولوژی این است که هم در سمت سرور و هم در سمت کاربر به صورت هماهنگ و سازگار کار می کند.

تعریف Dom: وقتی یک صفحه وبی بارگذاری میشود مرورگر یک مدل شی گرا از المان های موجود در صفحه می سازد.این مدل Dom و یا Document Object Model نام دارد .این نمودار یک نمودار درختی از اشیا موجود در صفحه است .برنامه هایی مانند جاوااسکریپت با استفاده از مدل یک صفحه Html را به صورت پویا ایجاد می کنند.درتکنولوژی React.js از مفهومی به نام Virtual DOM استفاده می شود .این حالت زیر گروه های انتخابی را بر اساس شرایط ارائه می کند.این کار را به این صورت انجام می دهد که تا جای ممکن از دستکاری Dom جلوگیری می کند.

Virtual DOM به این صورت کارمیکند که برای هر شی Dom که ویژگی جدیدی قرار است برای آن ساخته شود نیازی نیست که آن شی دوباره ساخته شود تنها نیاز است که آن ویژگی مورد نظر را تغییر داد و یا افزود.

بعد از آشنایی کلی با React.js راجع به مزیت هایی که این روش در SEOبرای ما ایجاد می کند صحبت می کنیم .

مشکلی که جاوااسکریپت داشت این است که به طور کامل Search Engin Freindly نیست  .با وجود اینکه  Crawl و index های گوگل ، محتواهای Ajax را هم می فهمند ولی خیلی قابل اعتماد نیست .امتیاز React.js این است که شما می توانید آن را سمت سرور اجرا کنید و virtual DOM ها در سمت سرور Renden میشوند و بعد به سمت کلاینت ارسال می شوند

قصد داریم یک پروژه ساده به کمک React.js بنویسیم

ابتدا Visual Studio را باز کرده و یک پروژه asp.net MVC از نوع Empty باز می کنیم .سپس در Tools=>Install package Manager Consol دستور زیر را تایپ می کنیم

Install-Package react.js

 با این دستور کتابخانه React.js به پروژه ما اضافه می شود.در قسمت Solution Explorer در داخل فولدر Scripts یک فولدری به نام react ایجاد شده است که در داخل آن اسکریپت های جاوااسکریپت قرار دارد .بعد از این کار باید React.Web.Mvc4 را نصب کنیم .دوباره در کنسول مربوط به Nuget دستور زیر را وارد میکنیم

Install-Package React.Web.Mvc4

حال یک کنترلر خالی ایجاد کنید.کد زیر را به Actionمورد نظر اضافه کنید.
 

123456789

public ActionResult Index(){var employees = new[]{new  {id= "1", name= "ایمان ", department= "IT", phone= "555-1212"},new {id="2", name= "سجاد", department= "Sales", phone= "555-1213"},new  {id= "3", name= "رحمان", department= "HR", phone= "123-456"}};return View(employees);}

کامپوننت Grid:

یک فایل جاوااسکریپت به نام Grid.jsx در داخل فولدر Scripts ایجاد می کنیم و کد های زیر را به آن اضافه کنید .این کد برای نمایش دیتا است .

123456789101112131415161718192021222324252627282930

var Cell = React.createClass({   render: function () {var data = this.props.data;return <div className="cell">{this.props.data}</div>}}); var Row = React.createClass({render: function () {return (<div className="row"><Cell data={this.props.data.name} /><Cell data={this.props.data.department} /><Cell data={this.props.data.phone} /></div>);}});var Grid = React.createClass({render: function () {var headerRow = <div className="row"><Cell data="Name" /><Cell data="Department" /><Cell data="Phone" /></div>; var rows = this.props.data.map(function (rowData, index) {return <Row key={index} data={rowData}>Row</Row>;});return <div className="table">{headerRow}{rows}</div>;}});

Rendering سمت سرور

وارد مسیر App_Start\ReactConfig.cs شوید و کامپوننت Grid را رفرنس دهید.

12345678

public static class ReactConfig{public static void Configure(){ReactSiteConfiguration.Configuration = new ReactSiteConfiguration().AddScript("~/Scripts/Grid.jsx");}}

این کد به React.js می گوید که جاوااسکریپت سمت سرور را لود کند .

در مرحله بعد در داخل View مربوط به ایندکس کد های زیر را کپی کنید

12345678910

<h2>React Demo:</h2> @Html.React("Grid", new{data = Model}) <script src="~/Scripts/react/react-0.12.2.min.js"></script><script src="~/Scripts/Grid.jsx"></script>@Html.ReactInitJavaScript()

بعد از اجرا شکل زیر را خواهید دید

فایل های ضمیمه

•  4164_React.rar

React چیست ؟

استفاده از کتابخانه‌های تولید رابط کاربری بر پایه جاوااسکریپت در کار طراحی سایت رو به افزایش است. یکی از محبوب‌ترین این کتابخانه‌ها React یا ReactJS نام دارد. این کتابخانه توسط فیسبوک ایجاد شده است و با همکاری جمعی در حال بهبود و توسعه است.

JSX در React

یکی از امکانات مفید که در React موجود است، JSX یا JavaScript XML است. JSX شیوه‌ای جدید از نوشتن کدها است که هم می‌تواند شامل HTML و هم جاوااسکریپت باشد. با ترکیب این دو، کار توسعه رابط کاربری آسان‌تر می‌شود. فایل‌های JSX سپس توسط کامپایلر به فایل‌های جاوااسکریپت معمول تبدیل می‌شوند و در مرورگر به اجرا در می‌آیند.

استفاده از JSX الزامی نیست ولی اغلب توسعه‌دهندگان استفاده از آن را نسبت به نوشتن فایل‌های جاوااسکریپت و HTML به صورت جداگانه ترجیح می‌دهند.

یک نمونه کد JSX به صورت زیر است:

1234567

const name = ‘Ali’;const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById(‘root’));

کتابخانه رابط کاربری چیست ؟

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

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

نرم‌افزار هوشمند اینترنتی چیست ؟

نرم‌افزارهای سنتی تحت وب، با هر کلیک یا برای برخی از فرآیندها نیازمند بارگزاری مجدد صفحه هستند. با کمک فناوری AJAX برخی از بخش‌های نرم‌افزار توانایی پاسخگویی بدون تازه‌سازی صفحه فراهم می‌شود. ایجاد یک نرم‌افزار هوشمند تحت وب مانند آنچه در وبسایت GMail رخ می‌دهد بدون استفاده از کتابخانه‌های رابط کاربر نسل جدید کاری بسیار سخت و توسعه‌ی چنین ابزارهایی به مراتب با دشواری‌های بیشتر همراه خواهد بود.

یک نرم‌افزار هوشمند تحت وب، با یک بار بارگزاری، تمامی یا اغلب فعالیت‌های لازم را بدون تازه‌سازی( Refresh ) صفحه به انجام می‌رساند و اطلاعات ارسالی و دریافتی کاربر را همگی با استفاده از فناوری AJAX با سرور رد و بدل می‌کند.

نرم‌افزارهای هوشمند و سئو

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

در خصوص گوگل نیز، انجام پیش‌بینی‌های لازم در جهت تغییر نشانی صفحه به صورت پویا برای ایجاد تمایز بین محتواهای مختلف موجود در سایت، ضروری خواهد بود.

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

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

کتابخانه‌های مشابه

در ادامه فهرستی از مشهورترین جایگزین‌های React مشاهده خواهید کرد. هر یک از این کتابخانه‌ها مزایا و معایب خود را دارا هستند که انتخاب بهینه از میان آن‌ها به مطالعه و بررسی کافی نیازمند خواهد بود.

• Vue.js
• AngularJS
• Ember
• Knockout
• Polymer
• Riot