لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 07/22/24 in أجوبة
-
4 نقاط
-
السلام عليكم. عند رفع المشروع على vercel، ظهرت الأخطاء التالية: q [Error]: Dynamic server usage: Route /api/properties/search couldn't be rendered statically because it used `request.url`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error at W (/vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:21106) at Object.get (/vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:28459) at c (/vercel/path0/.next/server/app/api/properties/search/route.js:1:607) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async /vercel/path0/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36258 description: "Route /api/properties/search couldn't be rendered statically because it used `request.url`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error", digest: 'DYNAMIC_SERVER_USAGE' للتوضيح: هذه بعض المكونات التي أشير لي بأنها تحتوي أخطاء علما وأن المشروع يعمل بصفة عادية على المتصفح api/properties import cloudinary from "@/config/cloudinary"; import connectDB from "@/config/database"; import Property from "@/models/Property"; import { getSessionUser } from "@/utils/getSessionUser"; /** * method: GET * route : /api/properties */ export const GET = async (request) => { try { await connectDB(); const page = request.nextUrl.searchParams.get("page") || 1; const pageSize = request.nextUrl.searchParams.get("pageSize") || 5; const skip = (page - 1) * pageSize; const total = await Property.countDocuments({}); const properties = await Property.find({}).skip(skip).limit(pageSize); const result = { total, properties, }; return new Response(JSON.stringify(result), { status: 200 }); } catch (error) { console.log(error); return new Response("Something went wrong", { status: 500 }); } }; /** * method: POST * route : api/properties/add */ export const POST = async (request) => { try { await connectDB(); const sessionUser = await getSessionUser(); if (!sessionUser || !sessionUser.userId) { return new Response("UserId is required", { status: 401, }); } const { userId } = sessionUser; const formData = await request.formData(); const amenities = formData.getAll("amenities"); const images = formData.getAll("images").filter((img) => img.name !== ""); const propertyData = { type: formData.get("type"), name: formData.get("name"), description: formData.get("description"), location: { street: formData.get("location.street"), city: formData.get("location.city"), state: formData.get("location.state"), zipcode: formData.get("location.zipcode"), }, beds: formData.get("beds"), baths: formData.get("baths"), square_feet: formData.get("square_feet"), amenities, rates: { weekly: formData.get("rates.weekly"), monthly: formData.get("rates.monthly"), nightly: formData.get("rates.nightly"), }, seller_info: { name: formData.get("seller_info.name"), email: formData.get("seller_info.email"), phone: formData.get("seller_info.phone"), }, owner: userId, }; // Upload Images To Cloudinary const imageUploadPromises = []; for (const image of images) { const imageBuffer = await image.arrayBuffer(); const imageArray = Array.from(new Uint8Array(imageBuffer)); const imageData = Buffer.from(imageArray); // Convert The Image Data To Base64 const imageBase64 = imageData.toString("base64"); // Make request to upload to cloudinary const result = await cloudinary.uploader.upload( `data:image/png;base64,${imageBase64}`, { folder: "propertypulse", secure: true, rejectUnauthorized: false, } ); imageUploadPromises.push(result.secure_url); // Wait for all images to upload const uploadedImages = await Promise.all(imageUploadPromises); // Add Uploaded images to propertyData object propertyData.images = uploadedImages; } const newProperty = new Property(propertyData); await newProperty.save(); return Response.redirect( `${process.env.NEXTAUTH_URL}/properties/${newProperty._id}` ); // return new Response(JSON.stringify({message: 'success'}), { status: 200 }) } catch (error) { console.error("This is the error we are looking for: ", error); return new Response("Failed to add property", { status: 500 }); } }; /api/properties/search import connectDB from "@/config/database"; import Property from "@/models/Property"; /** * method: GET * route : /api/properties/search */ export const GET = async (request) => { try { await connectDB(); const { searchParams } = new URL(request.url); const location = searchParams.get("location"); const propertyType = searchParams.get("propertyType"); const locationPattern = new RegExp(location, "i"); // Match location pattern against database fields let query = { $or: [ { name: locationPattern }, { description: locationPattern }, { "location.street": locationPattern }, { "location.city": locationPattern }, { "location.state": locationPattern }, { "location.zipcode": locationPattern }, ], }; // Only check for property if its not 'All' if (propertyType && propertyType !== 'All') { const typePattern = new RegExp(propertyType, "i"); query.type = typePattern } const properties = await Property.find(query) return new Response(JSON.stringify(properties), { status: 200 }); } catch (error) { console.log(error); return new Response("Something went wrong => Search Properties", { status: 500, }); } }; package.json { "name": "next_app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@maptiler/leaflet-maptilersdk": "^2.0.0", "cloudinary": "^2.2.0", "leaflet": "^1.9.4", "leaflet-control-geocoder": "^2.4.0", "leaflet-defaulticon-compatibility": "^0.1.2", "mongodb": "^6.8.0", "mongoose": "^8.4.4", "next": "14.2.4", "next-auth": "^4.24.7", "opencage-api-client": "^1.0.7", "react": "^18", "react-dom": "^18", "react-icons": "^5.2.1", "react-leaflet": "^4.2.1", "react-photoswipe-gallery": "^1.3.9", "react-share": "^5.1.0", "react-spinners": "^0.14.1", "react-toastify": "^10.0.5" }, "devDependencies": { "postcss": "^8", "tailwindcss": "^3.4.1" } } شكرا لكم.2 نقاط
-
هل يجب ان تكون مشاريعي العملية بنفس طريقة المدرب؟ او يمكنني استخدام منهجية مختلفة تعطي نفس النتيجة2 نقاط
-
2 نقاط
-
2 نقاط
-
2 نقاط
-
,why my git hub website look bad I used Main branch, /(root) https://github.com/JOhnSm1th900/Youcef-kias-github Recording 2024-07-22 072940.mp42 نقاط
-
2 نقاط
-
السلام عليكم ورحمة الله وبركاته, لقد قمت بإنشاء صفحة web وأريد أن اجعلها متجاوبة مع أحجام الشاشات المختلفة فقمت بعمل التالي: وضعت الخاصية font-size للعنصر الجذر (root) وأعطيتها قيمة متجاوبة باستخدام الوحد vw كما موضح في الصورة التالية: ثم قمت باستخدام الوحدة rem لجميع العناصر الاخرى التي في الصفحة كما موضح في الصورة التالية: وبعد ذلك سأستخدم ال media queries وأقوم بتغيير قيمة الخاصية font-size للعنصر الجذر (root) بحسب احجام الشاشات المختلفة مع بعض التعديلات الأخرى لكي يتناسب التصميم مع حجم الشاشة. استفساراتي هيا: هل هذه الطريقة التي فعلتها تعتبر من أفضل الممارسات (Best practices) أم لا ؟ ولماذا ؟ هل يوجد طريقة أفضل منها ؟ وشكرًا لكم وإذا لديكم أي نصائح لي بخصوص التصاميم المتجاوبة (responsive designs) أكون لكم شاكر ومقدر1 نقطة
-
1 نقطة
-
رسالة الخطأ معناها إن Next.js غير قادر على توليد صفحة ثابتة static render للمسار /api/properties/search وذلك لأنه يستخدم request.url وهو قيمة ديناميكية لا يمكن تحديدها وقت بناء المشروع. مسارات الـ API يتم تشغيلها على السيرفر عند طلبها بشكل افتراضي server-side rendered ولكن عندما تنشر التطبيق على Vercel، يحاول Next.js توليد مسارات الـ API بشكل ثابت وقت البناء، وهو أمر غير ممكن بسبب استخدام request.url. قم باستخدام دالة getStaticProps لتوليد المسار بشكل ثابت وقت البناء وستحتاج لتوفير قيمة افتراضية لـ request.url لأنها غير متاحة وقت البناء، وبإمكانك محاولة استخدام خيار revalidate في getStaticProps لإعادة توليد المسار عند كل طلب، فذلك يسمح لـ Next.js بإعادة توليد المسار بشكل ديناميكي عند كل طلب.1 نقطة
-
يجب عليك ادخال كل سطر على حدا وليس مجموعة الأسطر مع بعض : أي كالتالي : أولاً أدخل الأمر التالي ثم اضغط enter import os ثانياً أدخل الامر التالي ثم enter os.system('cls' if os.name == 'nt' else 'clear')1 نقطة
-
وعليكم السلام ورحمة الله وبركاته . للأسف لا توجد أي طريقة لمسح شاشة ال IDLE في بايثون . ولكن يمكنك الضغط على CTRL + J وسيقوم بإضافة أسطر فارغة إلى أن تصل لأسفل الصفحة ويمكنك بعد ذلك الكتابة كما تريد.1 نقطة
-
قمت بشراء دورة نعلم لغة بايثون و لاكن لا يمكنوني الوصول الى الدوره ارجو المساعده1 نقطة
-
لا تقلق من فضلك قم بمراسلة الدعم من خلال الرابط التالي وسيساعدونك في الوصول إلى الدورة : https://support.academy.hsoub.com/conversations1 نقطة
-
1 نقطة
-
1 نقطة
-
ليس هناك مشكلة في ذلك . والتبليغ عن الفيديو يستخدم في الحالات التي يكون بها مشكلة في الفيديو مثلاً وتريد إضافة هذا التقرير وإرسالة إلى الفريق المختص بذلك ولكن يفضل كتابة تعليق بالمشكلو وسيتم حل المشكلة في اسرع وقت أو توجيهك للفريق المختص بذلك إذا لم يستطع المدرب حل المشكلة1 نقطة
-
السلام عليكم ورحمة الله وبركاته, اريد ان استفسار ماهي الطريقة الصحيحة لقراءة documentation لمكتبه معينه او هل هناك طرق مختلفة لكل مكتبه وماهي تلك الطرق؟ وشكراً1 نقطة
-
الطريقة التي اتبعتها تعتبر من أفضل الممارسات للتصاميم متجاوبة في بداية بناء الموقع وكما أخبرك محم د في التعليق السابق فإنه لتخطي المشكلات التي تظهر يمكنك استخدام الدالة calc كالتالي html { font-size: calc(1em + 1vw); } كما أنه يفضل اتباع النصائح في الإجابات التالية1 نقطة
-
شكرا على جميع الردود، تأكدت من عدم وجود أسباب عدم الظهور اللتي ذكرتها، إذا هوا بشكل طبيعي الموقع سيظهر على محركات البحث، ولكن كونه على استضافه مجانيه، قد يمنع الزحف على الموقع، كنت أحاول ان اتدرب على مسأله إظهار الموقع، ووجدت ان مشروعي النهائي لا يظهر بالبحث في قوقل، ستكون مصيبه إذا قمت بمشروع لعميل وفالنهايه الموقع لا يظهر، خلاصة المفهوم "إذا اشتركت في استضافه للموقع، المتوقع أن يظهر الموقع على محركات البحث"، بغض النظر إذا كان مبنى على React أو غيره، وكون الاستضافه المجانيه لا تظهر الموقع هذا يعني انها لا تصلح للمشاريع الحقيقية، وشكرا1 نقطة
-
1 نقطة
-
الطريقة التي قمت بها بالتعامل مع التصميم المتجاوب تعد مقبولة ولكن هناك بعض النقاط التي يجب مراعاتها لضمان أفضل الممارسات وتجربة مستخدم متميزة: استخدام vw و rem: استخدام vw لتحديد حجم الخط للعنصر الجذر (root) يعتبر مناسبًا، حيث يعتمد حجم الخط على عرض الشاشة. استخدام rem للعناصر الأخرى يجعلها تعتمد على حجم الخط المحدد للعنصر الجذر. استخدام Media Queries: تغيير حجم الخط للعنصر الجذر وبعض التعديلات الأخرى باستخدام Media Queries هو خطوة جيدة لضمان أن التصميم يتكيف بشكل جيد مع مختلف أحجام الشاشات. يمكنك تعديل أي جوانب أخرى من التصميم أيضًا كالهوامش والأبعاد بناءً على الاحتياجات. النقاط التي يجب مراعاتها: القراءة والنصوص: تأكد من أن النصوص مقروءة بشكل جيد على جميع الأحجام، حيث يجب أن تكون كافية للقراءة دون تكبير. بعض المشاكل التي تتواجهها تلك الطريقة : لن يتمكن الأشخاص الذين يستخدمون ميزة التكبير/التصغير في متصفحهم أو يقومون بزيادة حجم خط النظام من القيام بذلك حيث أن vw لا تحترم تلك القيم فمن الممكن أن الشخص صاحب الهاتف أو الشاشة الصغيرة لديه مشكلة في القراءة ويقوم بتكبير الخط على هاتفه ولذلك فإن vw ستظهر الخط صغيرا بناء على عرض الشاشة وليس على قيمة الخط الذى يستخدمها المستخدم والتي تحترمها وحدة قياس rem و em . هل هناك طريقة أفضل؟ نعم من الممكن إستخدام الدالة calc() للحسابات الرياضية في الأبعاد واحجام الخطوط إذا أردت حيب باختصار، الطريقة التي اتبعتها تعد مناسبة ولكنها ستجعل حجم الخط يعتمد على القيم التي وضعتها بناء على عرض الشاشة وليست القيمة التي يستخدمها المستخدم.1 نقطة
-
مرحبًا فريق أكاديمية حسوب، أود أن أعبر عن خالص شكري وامتناني لكم جميعًا على الدعم الكبير والتفاني الذي أظهرتموه خلال دورة تطوير التطبيقات باستخدام Python. كانت تجربة التعلم رائعة ومثمرة بفضلكم. لقد استفدت كثيرًا من الدورة، وتقدمت بشكل ملحوظ بفضل التوجيهات والنصائح التي كنتم تقدمونها باستمرار. كنتم دائمًا موجودين لمساعدتي وحل المشاكل التي واجهتها، وهذا كان له تأثير كبير على تقدمي وتحقيقي لهذه الشهادة. أشكر كل فرد من فريق أكاديمية حسوب على المجهودات الكبيرة والتفاني في العمل لضمان حصولنا على تجربة تعليمية ممتازة. تعاملكم اللطيف والدعم المستمر كانا محل تقدير كبير لدي. أتطلع لمواصلة التعلم والتطوير، وأرجو لكم جميعًا كل التوفيق والنجاح في مسيرتكم. تحياتي وتقديري، محمد فرحات1 نقطة
-
يوجد الكثير من المواقع التي يمكنك رفع الفيديوهات عليها و منها: YouTube. Vimeo. DailyMotion. PeerTube. و لكن يبقى اليوتيوب هو الأشهر بينها , يمكنك أن ترفع الفيديوهات على حسابك الشخصي و تجعلها خاصة. ثم بعد أن تقوم برفع الفيديوهات عليك أن تقوم بحفظ روابط الفيديوهات في التطبيق الخاص بك ضمن مصفوفة كالتالي: public class Lesson { private String name; private String videoUrl; public Lesson(String name, String videoUrl) { this.name = name; this.videoUrl = videoUrl; } public String getName() { return name; } public String getVideoUrl() { return videoUrl; } } List<Lesson> lessons = new ArrayList<>(); lessons.add(new Lesson("اسم_الدرس_1", "رابط_مقطع_الفيديو_1")); lessons.add(new Lesson("اسم_الدرس_2", "رابط_مقطع_الفيديو_2")); // أضف المزيد من الدروس حسب الحاجة هنا قمنا بإنشاء صف جديد اسمه Lesson و لهذا الصف خاصيتين هما اسم الدرس و رابط الدرس و تابعين يعيدان الاسم و الرابط, ثم أنشأنا قائمة لنخزن فيها الدروس. و الأن عليك أن تعرض الفيديوهات للمستخدم , هناك عدة طرق لعرض الفيديوهات و هذا الأمر يعتمد على ماذا تريد أنت, ومن هذه الطرق مثلا أن تقوم بعرض لائحة بأسماء الدروس للمستخدم و عندما يقوم المستخدم بالضغط على الدرس تقوم بعرض الفيديو.1 نقطة