Mustafa Suleiman
-
المساهمات
10359 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
305
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
أجوبة بواسطة Mustafa Suleiman
-
-
بتاريخ 3 دقائق مضت قال Ahmed Allawi:
اخي هذا الخيار ماعاد متوفر
ذلك ما ذكرته لأنك فعلت 2FA، عليك الوصول بالطريقة التي ذكرتها بالخطوات التي أشرت إليها في حسابك.
-
1
-
-
هناك العديد من المكتبات المتاحة، ولكن إحدى أفضل المكتبات هي Laravel Audit Trail، وهي مكتبة مجانية ومفتوحة المصدر تسمح لك بمراقبة جميع الأنشطة التي يقوم بها المستخدمون على موقعك.
وبإمكانك استخدامها لمراقبة الطلبات التي يقوم بها المستخدمون، والملفات التي يقومون بتنزيلها، والصفحات التي يشاهدونها.
لإعداد Laravel Audit Trail، تحتاج إلى إضافة الحزمة إلى مشروعك، باستخدام Composer:
composer require laravel/audit-trailبمجرد إضافة الحزمة، تحتاج إلى تكوينها، عن طريق نشر ملف التكوين الخاص بالمكتبة باستخدام الأمر:
php artisan vendor:publish --provider "OwenIt\Auditing\AuditingServiceProvider" --tag="config"ثم، قم بتكوين الملف في المسار config/audit.php وفقًا لاحتياجاتك، وتستطيع تعيين النموذج الذي ترغب في تتبع الأنشطة عليه وتحديد التفاصيل التي ترغب في تسجيلها.
وبالطبع عليك تجهيز النموذج الذي تريد تتبع الأنشطة عليه بواجهة Auditable، من خلال إضافة الاستخدام التالي إلى نموذجك:
use OwenIt\Auditing\Contracts\Auditable; class YourModel extends Model implements Auditable { use \OwenIt\Auditing\Auditable; // ... }
بمجرد تجهيز نموذجك للمراقبة، ستبدأ المكتبة بتسجيل الأنشطة تلقائيًا، وبإمكاتك استدعاء دالة audit() على النموذج لتسجيل أنشطة إضافية بشكل يدوي.
ومتاح لك استخدام واجهة المستخدم التي تقدمها المكتبة أو استعراض السجلات مباشرة من قاعدة البيانات، باستخدام النموذج Audit المقدم من المكتبة للاستعلام عن السجلات وتحليلها.
وستجد شرح مفصل في المستند الرسمي:
-
1
-
-
عند تسجيل الدخول لحسابك، ستجد تبويب باسم دوراتي، اضغط عليه ومن المفترض أن تجد الدورات التي اشتركت بها كالتالي:
ثم اختر الدورة التي تريدها وسيتم عرض محتواها لك.
- وستجد هنا شرح مفصل: كيف أصل للدورات التي اشتركت بها
وفي حال لم تجد أي دورات لديك، فعليك بالتحدث لمركز المساعدة في أكاديمية حسوب وإخبارهم بالمشكلة التي التي لديك لكن يجب التحدث من الحساب الذي قمت من خلاله بالإشتراك في الدورات، وسيتم الرد عليك خلال 24 إلى 48 ساعة.
-
بسبب أن createStore أصبحت غير مدعومة أي deprecated والكود سيعمل بدون مشكلة لكن كتحذير فقط ومن الأفضل استخدم Redux Toolkit بدلاً من Redux.
وإذا أردت استيراد createStore فعليك استيرادها بالشكل التالي:
import { legacy_createStore as createStore } from 'redux';
و Redux Toolkit هو نهج موصى به لكتابة منطق Redux حاليًا، بما في ذلك إعداد المخزن (store)، والمنشئين (reducers)، واسترجاع البيانات، والمزيد.
حيث أن Redux Toolkit يقدم واجهة برمجة التطبيق (API) تُسمى configureStore والتي هي النسخة المحسنة من createStore والتي تبسط عملية إعداد المخزن وتساعد في تجنب الأخطاء الشائعة، وconfigureStore تكون بمثابة غمد (wrapper) حول واجهة البرمجة الأساسية لـ Redux وهي createStore، وتتولى الكثير من عمليات إعداد المخزن تلقائيًا، كالتالي:
import { configureStore } from "@reduxjs/toolkit";
-
1
-
-
ما المشكلة التي تحدث معك؟
-
1
-
-
لا داعي للقلق إطلاقًا، ذلك إجراء روتيني من أجل حماية حقوق الطرفين وتسجيل المحادثة في المشروع ضمن منصة مستقل.
بالطبع التواصل كان على واتساب، تستطيعي فتح نسخة المتصفح منه ثم استخدام الإضافة التالية لأخذ لقطة لكامل المحادثة:
عند الضغط بزر الفأرة الأيمن في الصفحة التي تريدين إلتقاطها وهي صفحة المحادثة ستجدي أيقونة الإضافة اختاري منها capture entire page.
وبالطبع يجب أن لا تحتوي المحادثة على ما يخالف شروط استخدام منصة مستقل، وفي أي مشروع بعد ذلك تستطيعي التواصل خارج المنصة لكن مع رفع المحادثات بالكامل في المشروع وتسليم الملفات أيضًا وأي شيء من حق العميل في المشروع.
-
الأمر لا يسير بتلك الطريقة بل عليك تحديد وجهتك، وبالطبع أقدر أن ليس لديك الدراسة بالمجالات البرمجية المتاحة وما الفرق بينها وما الفرق بين اللغات المختلفة، وذلك ما توفره لك دورة علوم الحاسوب بتأهيلك لدخول مجال البرمجة.
وأمامك أحد الدورات التالية:
- دورة تطوير واجهات المستخدم
- دورة تطوير التطبيقات باستخدام لغة Python
- دورة تطوير التطبيقات باستخدام لغة JavaScript
- دورة تطوير تطبيقات الويب باستخدام لغة PHP
كيف تختار من بينهم؟
عليك بتحديد ما تريده، هل تريد العمل على مواقع العمل الحر؟
إذن عليك بتفقد المشاريع المطلوبة وما هي اللغات والتقنيات التي تحتاجها لتنفيذ تلك المشاريع، ابحث على موقع مستقل وخمسات وبعيد.
هل تريد العمل بشركة؟
إذن عليك بالبحث في سوق العمل عن إعلانات الوظائف الخاصة بالبرمجة لمستوى Junior أو Entry أو Fresh وتفقد أكثر الوظائف طلبًا والمتطلبات الخاصة بها ثم قرر ما الذي تريد تعلمه.
وتستطيع البحث عن الوظائف في مواقع التوظيف في بلدك ومنها LinkedIn وIndeed وGlassdoor، وبالطبع عليك بتحديد هل تريد العمل في السوق المحلي أو عن بعد، من أجل البحث بشكل دقيق في الوظائف والتقرير على أساس ذلك.
وأنصحك بقراءة التالي:
-
قمت بتكبير وتصغير الشاشة فظهرت المشكلة بالفعل، لكن كان علي تفقد جميع العناصر بالصفحة لتفقد ما سبب المشكلة وتبين أنه القسم التالي في الصفحة:
ولحل المشكلة عليك باستخدام overflow: hidden على القسم section.works .gallary-work كالتالي:
section.works .gallary-work { background-image: url(../images/hero-bg/app.jpg); background-position: center; background-attachment: fixed; background-size: cover; margin-top: 120px; overflow: hidden; }
وبخصوص التصميم هو جيد أحسنت، لكن بخصوص التأثيرات عند التمرير فعليك بتقليص الوقت بحيث لا يشعر بها المستخدم فلا يجب أن ينتظر المستخدم أن تظهر العناصر أي يجب تحقيق التوازن بين هذا وذاك.
-
1
-
-
أنت تقصد المشاريع الخاصة بمنصتي زد وسلة، وتلك المنصات توفر إنشاء متاجر إلكترونية بكل سهولة من خلال إشتراك شهري أو سنوي، ويتم توفير قوالب وبوابة دفع ونظام لإدارة الطلبات والشحن والتسويق وخلافه من لوحة التحكم.
وفي إشتراك سلة برو يتاح تعديل على القوالب المتاحة من خلال CSS وjs، وذلك من أجل تخصيص الواجهة إلى حدٍا كبير بما يتناسب مع هوية متجرك، لكن بالطبع هناك قيود بسبب هيكلية القالب نفسه أي عناصر HTML، لذلك عليك بإختيار قالب قريب من التصميم الذي تريده، ثم تحاول التعديل عليه.
وأغلب التعديلات يكون من خلال إنشاء بانرات وصور ثم إنشاء تصميم جيد من خلالها، وعليك بتفقد العناصر من خلال أداة المطور في المتصفح وتفقد التنسيقات الإفتراضية الخاصة بها ثم التعديل عليها وسيتعين عليك أحيانًا استخدام !important من أجل فرض التنسيق الخاص بك.
وطالما أنك جيد في CSS وHTML فلن تجد صعوبة في ذلك، لكن يجب عليك إتقان استخدام أداة المطور في المتصفح وستجد شرح لها هنا:
وسيفيدك حقًا تعلم أساسيات فوتوشوب من أجل إنشاء الصور أو التعديل عليها وعليك بالبحث عن "أساسيات الفوتوشوب مصطفى مكرم" وستجد شرح دممتاز.
وأيضًا ابحث على اليوتيوب عن تصميم وتخصيص متجر سلة CSS.
-
عليك بتفعيل خاصية Less secure app access من خلال الرابط التالي:
لكن في حال أنك قمت بتفعيل خاصية المصادقة الثنائية من قبل two-factor-authentication فعليك بتعطيلها أو التوجه إلى:
- إعدادات الأمان Security في حساب جوجل لديك.
- ثم اختر Signin in to Google أو تسجيل الدخول لجوجل.
- ثم اختر App passwords أو كلمات المرور للتطبيقات.
- ستجد خيار باسم app أو التطبيق ثم Other أو أخرى، ثم اختر Custom name and click Generate أو اسم مخصص وانقر فوق إنشاء.
ثم في الكود لديك قم بتغيير كلمة المرور لللإيميل بكلمة المرور التي حصلت عليها من الخطوات السابقة.
-
1
-
بتاريخ 36 دقائق مضت قال Zyad Alhrbi:
لقد وجدتها لكن لا استطيع ان احذفها فقط حذف علامه الصح عليها
هل تظهر لك أي إضافة في خانة الإضافات هنا وليس من الإعدادات:
-
عليك بتفقد الإضافات لديك وحذف أي إضافة متعلق بـ Twig ثم إعادة تشغيل المحرر، وفي حال استمرت المشكلة عليك بالتوجه إلى الإعدادات كما أخبرك عمر، ثم الضغط الأيقونة الخاصة بعرض ملف settings.json ثم البحث عن أي إعدادات خاصة بـ Twig ثم حذفها ثم الحفظ وإعادة تشغيل المحرر.
وفي حال استمرت المشكلة من الأفضل حذف VScode تمامًا ثم إعادة تثبيت آخر إصدار مرة أخرى، وبخصوص Twig عليك باستخدام الإضافة التالية حيث لا يوجد بها مشكلة التعليقات التي ظهرت لديك:
وأيضًأ تأكد من الأسفل في المحرر أنه تم إختيار الصيغة الصحيحة للملف وهي HTML كالتالي:
-
أهلاً بك أمير، الأمور المالية لا يمكن لأحد مساعدتك بها سوى مركز الدعم الخاص بأكاديمية حسوب، أرجو منك التحدث إليهم وإخبارهم بما تريد وسيتم مساعدتك.
وسيتم الرد عليك في غضون 24 إلى 48 ساعة فلا تقلق بخصوص ذلك.
-
1
-
-
طالما أنك حددت وجهتك وهي العمل على مواقع العمل الحر، فعليك بتفقد المطلوب أي المهارات المطلوبة لتنفيذ المشاريع المعروضة، وذلك ما يجب أن تفعله دائمًا عندما تريد العمل في مجال معين حيث تبحث عن المشاريع أو وصف الوظيفة ثم تنظر لنوعية المشاريع الأكثر طلبًا أو المهارات واللغات الأكثر طلبًا في سوق العمل والخبرة المطلوبة ثم تقرر ما الذي تريد تعمله والعمل به لا العكس.
وبخصوص مصادر لتعلم بايثون فقد شرحت الأمر بشكل مفصل هنا:
وبعد تعلم المهارات المطلوبة، عليك بإنشاء معرض أعمال إحترافي، ولكن ما هي طبيعة تلك الأعمال؟ بالطبع أعمال مشابهة أو مماثلة للمشاريع المطلوبة على الموقع الذي تريد العمل عليه، فأنت تريد اكتساب ثقة صاحب المشروع وهو يريد رؤية نماذج سابقة لأعمال مشابهة وليس مجرد نماذج تدريبية صغيرة ليست إحترافية.
ثم عليك تعلم كيف تقوم بكتابة عرض إحترافي على المشاريع وقد أوضحت الأمر هنا:
-
السؤال غير واضح، هل تقوم بإنشاء قالب، أم تعمل على تعديل الموقع من خلال CSS؟
في حال كنت تعمل على تعديل الموقع من خلال CSS في متجر سلة فليس متاح لك تعديل أكواد HTML، أي تعديل الكلاسات، بل تستطيع إختيار العناصر من خلال الكلاسات ثم تنسيقها كما تريد من خلال CSS.
أما في حال كنت تعمل على تطوير قالب فعليك استخدام محرك Twilight الخاص بمنصة سلة وبالطبع معرفة بالآتي:HTML, CSS, JS ثم معرفة بمحرك قوالب Twig، وهو نظام قوالب يستخدم في برمجة الويب للمساعدة في إنشاء وإدارة قوالب HTML، وتم تطوير Twig بلغة برمجة PHP وهو جزء من إطار عمل Symfony لتطوير تطبيقات الويب.
وستجد مزيد من التوضيح هنا:
وأيضًا من خلال المستند الرسمي:
-
تستطيع استخدام دالة map لإنشاء مصفوفة جديدة من الرموز المحفوظة، وبعد ذلك استخدام تلك المصفوفة لإنشاء قائمة من عناصر <li> وجعل عناصر <li> قابلة للنقر عن طريق إضافة سمة onClick إليها، ثم استخدام وظيفة onClick لإدخال الرمز تلقائيًا في حقل إدخال <input>.
وإليك مثال:
const codes = [ "1234567890", "abcdeghijklmnopqrstuvwxyz", "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ]; const codeList = codes.map((code) => ( <li key={code} onClick={() => { // إدخال الرمز تلقائيًا في حقل الإدخال input.value = code; }}> {code} </li> )); return ( <div> <ul>{codeList}</ul> <input id="input" /> </div> );
وسيعرض الكود قائمة من عناصر <li>. يمكن النقر على كل عنصر <li> لإدخال الرمز تلقائيًا في حقل الإدخال <input>.
وإليك مثال كامل آخر مع استخدام حالة State للمكون:
import React, { useState } from 'react'; function App() { const [items, setItems] = useState([]); // حالة لتخزين العناصر المحفوظة const [selectedItem, setSelectedItem] = useState(''); // حالة لتخزين العنصر المحدد const handleAddItem = () => { if (selectedItem) { setItems([...items, selectedItem]); setSelectedItem(''); } }; const handleItemClick = (item) => { setSelectedItem(item); }; return ( <div> <div> <input type="text" value={selectedItem} onChange={(e) => setSelectedItem(e.target.value)} /> <button onClick={handleAddItem}>إضافة</button> </div> <ul> {items.map((item, index) => ( <li key={index} onClick={() => handleItemClick(item)}> {item} </li> ))} </ul> <input type="text" value={selectedItem} onChange={(e) => setSelectedItem(e.target.value)} /> </div> ); } export default App;
-
1
-
-
رسالة الخطأ تخبرك أنه لم يتم التعرف على قاعدة البيانات Unknown database 'stdz'، قم بالتأكد من قاعدة البيانات موجودة بالفعل وإن لم تجدها عليك إنشائها، وأظن أنها كانت لديك باسم std وليس stdz.
وأتفهم ما تريد الوصول إليه، لكن لن يتم عرض الرسالة not connected والصحيح هو استخدام الكود التالي لعرض رسالة Database 'hsubgram' does not exist في حالة لم يتم إيجاد قاعدة بيانات بذلك الاسم :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <?php if(isset($_POST["con"])){ $servername = 'localhost:3306'; // Hostname only $username = 'root'; $password = ''; $database = 'hsubgram'; // Connect to the server $conn = mysqli_connect($servername, $username, $password); if (!$conn){ die("Connection failed: " . mysqli_connect_error()); } // Check if the selected database exists $db_check_query = "SELECT SCHEMA_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME = '$database'"; $db_check_result = mysqli_query($conn, $db_check_query); if (!$db_check_result) { die("Database check failed: " . mysqli_error($conn)); } if (mysqli_num_rows($db_check_result) == 0) { die("Database '$database' does not exist."); } mysqli_close($conn); echo "Connected to database: $database"; } ?> <form method="POST"> <center> <input type="submit" value="connect" name="con"> </center> </form> </body> </html>
-
1
-
-
استبدل الجزء الخاص بتوليد الأسئلة بالتالي:
// Generate 3 random questions const randomQuestions = []; const repeatedQuestions = []; while (randomQuestions.length < 3) { const randomIndex = Math.floor(Math.random() * questions.length); if (randomQuestions.indexOf(questions[randomIndex]) === -1 && repeatedQuestions.indexOf(questions[randomIndex]) === -1) { randomQuestions.push(questions[randomIndex]); } }
وأنت بحاجة إلى تعلم أساسيات HTML و JS ستفيدك المقالات التالية:
-
الأمر بسيط أنت بحاجة إلى إنشاء عنصر وليكن div في HTML ثم ضع له كلاس من أجل إختياره فيما بعد من خلال جافاسكريبت وعرض الأسئلة به.
وفي جافاسكريبت نقوم بإنشاء مصفوفة من الأسئلة ثم إنشاء حلقة للإختيار عشوائيًا من بين الأسئلة كالتالي:
<!DOCTYPE html> <html> <head> <title>Quiz</title> </head> <body> <div class="questions"></div> <script > // Create an array of questions const questions = [ "ما هي عاصمة فرنسا؟", "ما هي عدد سكان الصين؟", "ما هو اسم الرئيس الحالي للولايات المتحدة؟", "ما هو الرمز الكيميائي للمياه؟", "ما هو جذر 16؟", "ما هي مجموع 1 + 1؟", "ما هو اسم الكوكب الأقرب إلى الشمس؟", "ما هو اسم أكبر محيط في العالم؟", "ما هو اسم أعلى جبل في العالم؟", "ما هو اسم أعمق خندق في المحيط في العالم؟" ]; // Generate 3 random questions const randomQuestions = []; for (let i = 0; i < 3; i++) { const randomIndex = Math.floor(Math.random() * questions.length); randomQuestions.push(questions[randomIndex]); } // Display the random questions document.querySelector(".questions").innerHTML = randomQuestions.join("<br>"); </script> <body> </html>
-
1
-
-
المشكلة بسبب وجود عنصر <section> كفرع مباشر لعنصر <Routes> داخل الكود، وفي React Router v6، يجب أن تحتوي عناصر <Routes> على عناصر <Route> فقط أو <React.Fragment> كعناصر داخلية أو كأطفال childrens.
لذلك عليك باستخدام <Route> للـ <section> أيضًا بدلاً من وضع <Routes> داخل <section>.
import { Route, Routes } from 'react-router-dom'; function App() { return ( <> <Navbar /> <Routes> <Route path="/" element={<Landing />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> </Routes> </> ); }
وبالتالي ولم يعد هناك <Routes> داخل <section> وتم وضع جميع الـ <Route> مباشرة داخل <Routes> الرئيسي، مما سيحل مشكلة الخطأ الذي كنت تواجهه.
-
1
-
-
ما علاقة موقع سلة بالأمر، سلة هي منصة لإنشاء مواقع التجارة الإلكترونية وتوفر قوالب للتعديل عليها من خلال CSS وJS.
لا يوجد منصة توفر لك أنت ترفع موقعك الخاص وتوفير بوابة دفع لك، وإذا أردت يمكنك تطوير قالبك على متجر سلة وقد تم شرح الأمر هنا:
أما إذا أردت إنشاء موقع من خلال HTML, CSS, JS فعليك برفعه على استضافة حتى لو مجانية، ثم استخدام أحد بوابات الدفع وقد تم شرح الأمر بالتفصيل هنا:
-
1
-
-
أرجو منك تعديل السطر الخاص بعنوان قاعدة البيانات حيث أن المنفذ لديك هو 82 بينما المنفذ الإفتراضي لقاعدة بيانات MySQL هو 3306، لذلك أولاً حاول تعديل الرابط ليصبح كالتالي:
$servername = 'localhost'; // اسم المستضيف فقط
ومن المفترض أن يتم الإتصال لكن أنا في الصورة أن المنفذ هو 4306 لذلك عليك بتعديل الرابط إلى التالي:
$servername = 'localhost:4306';
-
1- نطاق المعامل this ليس محليًا أو عالميًا أو أي شيء آخر بل يعتمد على السياق الذي يتم استخدامها فيه.
أي إذا استخدمنا this في دالة محلية، فستيشير إلى الكائن الذي تم استدعاء الدالة منه، وإذا تم استخدام this في دالة عالمية، فستيشير إلى الكائن window لأنه الكائن العالمي.
2- هناك عدة طرق لمعرفة قيمة المعامل this دون طباعته في ال console.
- الطريقة الأولى هي استخدام دالة typeof، مثلاً حاول تجربة كتابة:
typeof this
سيعيد نوع الكائن الذي تشير إليه this.
- طريقة أخرى هي استخدام دالة Object.prototype.toString، فعند كتابة التالي:
Object.prototype.toString.call(this)
سيعيد سلسلة تمثل الكائن الذي تشير إليه this.
وإليك بعض الأمثلة على كيفية استخدام المعامل this:
- في دالة محلية، تشير this إلى الكائن الذي تم استدعاء الدالة منه، ففي المثال التالي، تشير this إلى الكائن myObject.
var myObject = { name: "Muhannad " }; function myFunction() { console.log(this.name); // Logs "Muhannad " } myFunction(); // Logs "Muhannad "
- في دالة عالمية، تشير this إلى الكائن window وفي الكود التالي، تشير this إلى الكائن window.
function myFunction() { console.log(this.name); // Logs "window" } myFunction(); // Logs "window"
- أما في دالة كائن، تشير this إلى الكائن نفسه، وفي المثال التالي، تشير this إلى الكائن myObject.
const myObject = { name: "Muhannad ", myFunction: function() { console.log(this.name); // Logs "Muhannad " } }; myObject.myFunction(); // Logs "Muhannad "
وكنصيحة لتفهم طبيعة كلمة this عليك أن تفهم ماذا يعني الـ prototype في جافاسكريبت فهى نقطة هامة وأساسية في اللغة يغفل عنها الكثير.
وقد قمت بشرح الأمر بشكل مفصل هنا:
-
1
-
ستحتاج إلى استخدام ميزة HTML5 Geolocation والتي تسمح لك بطلب موقع المستخدم الحالي من متصفح الويب الخاص به، وبمجرد الحصول على الموقع، يمكنك استخدامه للقيام بأشياء مثل عرض الخريطة في الموقع الحالي للمستخدم أو إرسال إشعار للمستخدم بأن موقعه معروف.
وإليك مثال للكود:
<!DOCTYPE html> <html> <head> <title>Geolocation Example</title> </head> <body> <script> // This code will get the user's current location function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { alert("Your browser does not support geolocation."); } } // This function will be called when the user's location is retrieved function showPosition(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; // You can do something with the user's location here, // such as display it on a map or send an alert alert("Your location is: " + lat + ", " + lng); } // This function will be called if an error occurs while getting the user's location function showError(error) { switch (error.code) { case 1: alert("The user did not grant permission to get their location."); break; case 2: alert("The user's browser does not support geolocation."); break; case 3: alert("The user's browser is unable to get the user's location."); break; } } </script> <input type="button" value="Get Location" onclick="getLocation();"> </body> </html>
عند النقر فوق الزر "الحصول على الموقع"، سيطلب الكود موقع المستخدم الحالي. إذا منح المستخدم الإذن، فسيستخدم الكود الموقع لعرضه على الخريطة أو إرسال إشعار للمستخدم بأن موقعه معروف.
وإذا لم يمنح المستخدم الإذن، فسيعرض الكود رسالة تشير إلى أن المستخدم لم يمنح الإذن.
,هناك طريقة أخرى لتحديد موقع شخص ما باستخدام جافاسكربت تتضمن استخدام خاصية navigator.geolocation.watchPosition() والتي تسمح لك بمراقبة موقع المستخدم الحالي وتلقي الإشعارات عندما يتغير الموقع.
وإليك مثال للكود:
<!DOCTYPE html> <html> <head> <title>Geolocation Example</title> </head> <body> <script> // This code will watch the user's location and notify you when it changes function watchPosition() { navigator.geolocation.watchPosition(showPosition, showError); } // This function will be called when the user's location changes function showPosition(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; // You can do something with the user's location here, // such as display it on a map or send an alert alert("Your location is: " + lat + ", " + lng); } // This function will be called if an error occurs while getting the user's location function showError(error) { switch (error.code) { case 1: alert("The user did not grant permission to get their location."); break; case 2: alert("The user's browser does not support geolocation."); break; case 3: alert("The user's browser is unable to get the user's location."); break; } } </script> <input type="button" value="Get Location" onclick="watchPosition();"> </body> </html>
وwatchPosition() تعمل على مراقبة تغييرات الموقع الجغرافي للمستخدم وتقديم تحديثات مستمرة بشأن الموقع الجديد، وتعمل الواجهة على مراقبة الموقع عبر جهاز GPS أو شبكات Wi-Fi أو تقنيات الهاتف المحمول.
وهي مفيدة في التالي:
- تتبع حركة المستخدم وتحديث التطبيق بناءً على موقعه الحالي.
- تخصيص تجربة المستخدم عندما يتحرك بين مواقع مختلفة، مثل تقديم محتوى متعلق بالموقع أو توجيهات للتنقل.
- تحديد موقع جهاز مفقود أو مسروق.
- يمكن استخدامها في تطبيقات لتتبع النشاطات البدنية مثل الجري أو ركوب الدراجات.
- يمكنك تحسين دقة الموقع بمرور الوقت حيث يمكن للتطبيق التفاعل مع تحسينات أفضل لتحديد الموقع عندما تصبح متاحة.
-
1
خطأ "535-5.7.8 Username and Password not accepted" عند إرسال بريد إلكتروني من تطبيق Node.js Express
في جافا سكريبت
نشر
إذن عليك بإتباع الخطوات التي ذكرتها بالتوجه إلى:
ثم اتبع باقي الخطوات التي ذكرتها.