Salah Eddin Beriani2

بتاريخ 3 ساعات قال Samer Alashqar:

السلام عليكم ..

لدي هذه المصفوفة في mongodb واريد ان اقوم بتعديل متغير الكائن price :198 الى 300  من مصفوفة products :

_id: ObjectId ("6252911686465f30a89dbcbd")
userEmail:////
products: Array
0: Object
_id:ObjectId ("6252911686465f30a89dbcbe")
name:عود فاخر
proImg:/images/624480321f46c714d0d1dc46.jpg
quantity:1
price:198
quantityPrice:198
__v:0

كيف استطيع تحقيق ذلك ؟  عن طريق express node js

 

مرحيبا يمكنك البحث أولا على ال doc الذي تريد تحديثه ثم يمكنك تعديله و هناك typeorm يسمى mongoose يمكنه تسهيل العمل عليك 

await Product.findByIdAndUpdate(6252911686465f30a89dbcbe ,{price:200})

product هو ال model الخاص بالمنتوجات والطريقة findByIdAndUpdate تساعدك في ايجاد doc معين بالاستعانة بال _id الخاص به وتعديله في نفس الوقت

يمكنك جلب الماك عن طريق NODEJS بالاستعانة بالمكتبة getmac

npm install -g getmac

طريقة الاستخدام مباشرة 

import getMAC, { isMAC } from 'getmac'

// جلب الماك الخاص بالكمبيوتر
console.log(getMAC())

// جلب الماك الخاص ب واجهة معينة
console.log(getMAC('eth0'))

هناك تكوينات مختلفة لـ webpack 4 و webpack 5 نبدأ بـ webpack 4  إذا كنت تستخدم webpack 5  فانتقل لأسفل إلى قسم webpack 5

أول شيء سنفعله هو تثبيت file-loader

npm install --save-dev file-loader

ثم تعديل اعدادت webpack لتستخدم file loader

{

  test: /\.(png|svg|jpg|jpeg|gif)$/i,

    use: [

      {

        loader: "file-loader",

        options: {

          name: "[name].[ext]",

          outputPath: "images",

        },

      },

    ],
},

اعدادات ملف webpack 5

لقد ألغى Webpack 5 أداة تحميل file-loader إذا كنت تستخدم webpack 5  فيجب إجراء بعض التعديلات على الاعدادات الخاصة بك.

module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      }
    ]
  }

أيضًا  لم تعد بحاجة إلى إضافة file-loader في package.json.

عندما تقوم بتعديل اعدادات webpack config الخاص بك  يمكنك الوصول إلى ملفات PNG (أو أي ملحقات ملفات قمت بتكوينها) تمامًا كما هو موضح سابقًا.

يمكنك ببساطة معرفة الاستعلامات التي قام بها django في جلسة عن طريق 

>>> from django.conf import settings
>>> settings.DEBUG = True
>>> from django.db import connection
>>> Model.objects.count()
>>> print(len(connection.queries))
1

كلا التكنولوجيتين fetch و ajax تمكنانك من ارسال طلبات للسيرفر لكن fetch يعد النسخة العصرية لفعل ذلك 

يتمتع Fetch بالعديد من المزايا مقارنة بـ ajax للعديد من المطورين.

أولاً ، واجهة برمجة التطبيقات أبسط. إذا كنت تقارن Fetch بـ XHR القديم البسيط ، فستعرف مدى سهولة الوصول إلى استجابة الطلب.

إنها مبنية على promise وهي طريقة رائعة حقًا للعمل  فهي تساعد في كتابة كود نظيف وتسمح لك باستخدام أشياء جديدة مثل غير async/await.

يحتوي على تعريف دقيق لما هو الطلب وما هو الرد  هذا يعني أنه يمكنك كتابة دالة "لتعديل" طلب قبل إرساله. على سبيل المثال ، يمكن أن يكون لديك وظيفة تأخذ كائن طلب init وتعيده مع إضافة بيانات الاعتماد.

بشكل افتراضي   لا يرسل ملفات تعريف الارتباط يجب التعامل مع المصادقة يدويًا.

بشكل عام  يبدو أن Fetch يتناسب بشكل أفضل مع طريقة عمل الأشخاص مقارنة بـ XHR.

لا يوجد أمر مدمج ولكن يمكنك القيام بذلك بسهولة عبر

> python manage.py shell
$ from django.contrib.auth.models import User
$ User.objects.get(username="name", is_superuser=True).delete()

حدث النسخة 

sudo apt update

sudo apt upgrade

أعد تفعيل واجهة الرسوميات

sudo systemctl set-default graphical

ثم قم بعمل restart ل gdm

sudo systemctl start gdm3

ثم قم باعادة التشغيل 

يتم تزويد كل مكون شاشة في تطبيقك بعنصر التوجيه تلقائيًا يحتوي على معلومات متنوعة تتعلق بالمسار الحالي وهذا في react-navigation  النسخة 6 من المكتبة يمكنك جلب اسم الشاشة ب

function HomeScreen({ route }) {
  return (
    <View>
      <Text>This is the profile screen of the app</Text>
      <Text>{route.name}</Text>
    </View>
  );
}

أو يمكنك استخدام طريقتك لكن في مكون الشاشة وليس في Navigation لأنه ليس داخل navigator

import { useRoute } from '@react-navigation/native';


function HomeScreen() {
 const route = useRoute();

  return (
    <View>
      <Text>This is the profile screen of the app</Text>
      <Text>{route.name}</Text>
    </View>
  );
}

تُستخدم خاصية الطفو لتحديد موضع المحتوى وتنسيقه على سبيل المثال دع الصورة تطفو إلى اليسار على النص الموجود في الحاوية.

يمكن أن تحتوي الخاصية float على إحدى القيم التالية:

left - يطفو العنصر إلى يسار الحاوية الخاصة به
right - يطفو العنصر على يمين الحاوية الخاصة به
none - لا يطفو العنصر (سيتم عرضه في مكان ظهوره في النص فقط)
inherit - يرث العنصر القيمة العائمة للعنصر الأصل
في أبسط استخدام لها ، يمكن استخدام خاصية الطفو لالتفاف النص حول الصور.

في العموم يجب عليك التجربة بنفسك لتأخذ فكرة أفضل كما يمكنك تجنب استخدام float واستخدام تقنيات عصرية أكثر ك flexbox و grid

موضوع ال authentication جد معقد ويلزم له برمجة فلو فرضنا انك تريد تسجيل الدخول للمستخدمين لموقعك فقبل ذلك يجب أولا تسجيلهم كمستخدمين ضمن قاعدة بيانات 

الموقع وهذا يضمن تسجيل معلوماتهم وتشفير كلمة السر الخاصة بهم وحفضها في قاعدة البيانات من ثم يمكنك التفكير في كيفية تسجيل الدخول وهذا أيضا يتطلب جلب 

المستخدم من قاعدة البيانات من ثم اعادة فك تشفير كلمة السر من قاعدة البيانات لمقارنتها مع كلمة السر التي ادخلها المستخدم لتسجيل الدخول اذا تطابقت يبقى أن تفتح له session او تولد له توكن كي يبقى مجسلا للدخول لفترة يحددها المبرمج فاذا كنت مبرمج وتجيد لغة ما ابحث عن كيفية بناء authentication فستجد حتما المصادر أما اذا كنت مالك للموقع ولا تجيد البرمجة فلابد من توظيف مستقل يجيد البرمجة ليتكفل هو ببناءه لك 

يمكن استخدام make_random_password بهذه الطريقة مثلا

for user in users_list:
    password = User.objects.make_random_password()
    user.set_password(password)
    user.save(update_fields=['password'])

بهذه الطريقة يمكنك أن تعين لكل مستخدم كلمة سر عشوائية

يمكن تحديد مسار مجلد التحميل الافتراضي والحجم الأقصى للملفات التي تم تحميلها في إعدادات التكوين لكائن Flask.

حدد المسار إلى مجلد التحميل

app.config['UPLOAD_FOLDER']

يحدد الحجم الأقصى (بالبايت) للملفات المراد تحميلها

app.config['MAX_CONTENT_PATH']

تحتوي الشفرة التالية على قاعدة عنوان URL "/ upload" التي تعرض’upload.html "في مجلد النماذج وقاعدة عنوان URL" / upload - file "لاستدعاء وظيفة upload لمعالجة عملية التحميل.

يحتوي "upload.html" على زر اختيار ملف وزر إرسال.

<html>
   <body>
      <form action = "http://localhost:5000/uploader" method = "POST" 
         enctype = "multipart/form-data">
         <input type = "file" name = "file" />
         <input type = "submit"/>
      </form>   
   </body>
</html>

بمجرد تحديد ملف ، انقر فوق إرسال. تستدعي طريقة نشر النموذج عنوان URL "/ upload_file". ينفذ برنامج تحميل الوظيفة uploader عملية حفظ.

 كود Python لتطبيق Flask.

from flask import Flask, render_template, request
from werkzeug import secure_filename
app = Flask(__name__)

@app.route('/upload')
def upload_file():
   return render_template('upload.html')
	
@app.route('/uploader', methods = ['GET', 'POST'])
def upload_file():
   if request.method == 'POST':
      f = request.files['file']
      f.save(secure_filename(f.filename))
      return 'file uploaded successfully'
		
if __name__ == '__main__':
   app.run(debug = True)

يمكنك استخدام ال query لهذه العملية

@app.route("/")
def hello():
    return request.args.get("page")

app.run(host="0.0.0.0", port=8080)

مع تغيير في ال url

http://localhost:8080?page=1
http://localhost:8080?page=2
http://localhost:8080?page=3
http://localhost:8080?page=4

هدفنا هو استخدام عنوان URL مثل هذا

/v1/magazines?page=1&per-page=50

لإنشاء نتائج JSON مثل هذا:

{
    "results": [
        {
            "Programming Today",
            "publisher": "Harper Collins"
        },
        {
            "title": "Mountain Biking",
            "publisher": "Outdoors Limited"
        }
    ],
    "pagination": {
        "count": 2,
        "page": 1,
        "per_page": 50,
        "pages": 1
    }
}

@app.route("/magazines")
def magazines():
    # process query parameters
    page = request.args.get("page", 1, type=int)
    per_page = request.args.get("per-page", 100, type=int)

    # query
    magazines = Magazine.query.paginate(page, per_page)

    # combine results with pagination
    results = {
        "results": [{"title": m.title, "publisher": m.publisher} for m in magazines.items],
        "pagination": {
            "count": magazines.total,
            "page": page,
            "per_page": per_page,
            "pages": magazines.pages,
        },
    }
    return jsonify(results)

هذا هو! تمنحنا طريقة ترقيم الصفحات في استعلام sqlalchemy الكثير من المرونة مع القليل جدًا من التعليمات البرمجية  وإرجاع مجموعة نتائج محدودة  وعرض إجمالي السجلات المتاحة  أثناء حساب الصفحات المتبقية بناءً على إعدادنا لكل صفحة.

السبب هو الباب 81 هو باب مخصص في linux جرب تغييره الى 3000 أو 5000

app.run(host="127.0.0.1", port=3000, debug=True)

لقد نسيت حرف r بحيث تكون created_at يعني اذا كنت تدخلها على اساس created_at فذلك هو سبب الخطأ

created_at = models.DateField(_("Date"), default=datetime.now)

from rest_framework import status
from rest_framework.response import Response

def empty_view(self):
    content = {'please move along': 'nothing to see here'}
    return Response(content, status=status.HTTP_404_NOT_FOUND)

يمكنك ارجاع ال status بالطريقة الموافقة لفوق ويمكنك استيراد status من rest_framwork و هو يحتوي كل الاكواد مثلا الاكواد المتعلقة ب 500

HTTP_500_INTERNAL_SERVER_ERROR
HTTP_501_NOT_IMPLEMENTED
HTTP_502_BAD_GATEWAY
HTTP_503_SERVICE_UNAVAILABLE
HTTP_504_GATEWAY_TIMEOUT
HTTP_505_HTTP_VERSION_NOT_SUPPORTED
HTTP_506_VARIANT_ALSO_NEGOTIATES
HTTP_507_INSUFFICIENT_STORAGE
HTTP_508_LOOP_DETECTED
HTTP_509_BANDWIDTH_LIMIT_EXCEEDED
HTTP_510_NOT_EXTENDED
HTTP_511_NETWORK_AUTHENTICATION_REQUIRED

هذه فقط تحذيرات متعلقة بعدم توافق المكتبة مع نسخة react native الجديدة وسيتم في القريب اصلاح الأمر من قبل مطوري المكتبة يمكنك تجاهل التحذير أو اخفاءه بهذه الطريقة 

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['new NativeEventEmitter']);

تتعلم reactjs لمدة شهر أو شهرين حتى تتمكن من اطار العمل ثم

• تبدأ بإنشاء مكونات React الأساسية لمطابقة HTML الأصلي  والذي كان عبارة عن الكثير من عناصر div 
• تحويل المتغيرات الى state أو استعمال state manger لذلك
• تحويل كل event listener الى احداث مكونات react
• بالنسبة لل styles الابقاء على classes في المكونات سيجنبك تعديل ملفات ال style القديمة

بتاريخ 7 ساعات قال محمد فهد خالد:

ت

تسلم عملت اخر وحدة وزبطت لكن في مساحة بيضاء اخذت من الصورة من اليمين كيف بقدر ازيلها حتى لو كبرت الصورة بتظلها 

هذا في اغلب الظن ال margin الذي استعملته من اجابة المدرب السابقة لو لاحظت الاجابة جيدا ستجد أنه قال لك استعمل اما margin او translate وليس الاثنين يمكنك ازالة ازالة ال margin

footer{
  margin-right:50px
}

الخطأ ربما يكون صادر من هنا

@app.route('/my-form')        
def my_form():
    posts = []
    for post in session.query(models.Post):
        posts.append((post.title, post.content))
    return render_template('posts.html', posts=posts)

جرب اضافة methods في app.route

@app.route('/my-form', methods=['GET', 'POST'])        
def my_form():
    posts = []
    for post in session.query(models.Post):
        posts.append((post.title, post.content))
    return render_template('posts.html', posts=posts)

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

exports.loginRequired = (req, res, next) => {
  const refreshToken = req.cookies['refresh-token'];
  const token = req.cookies['access-token'];

  if (!refreshToken) res.status(401).sendFile(path.join(__dirname, '../views/index.html'));

  try {
    const refexp =  jwt.verify(refreshToken, process.env.REFRESH_TOKEN_SECRET);
    if (refexp) {
      const refAcToken = createToken(User.email);
      res.cookie('refresh-token', refAcToken);
    } else {
      if (!token) res.status(401).sendFile(path.join(__dirname, '../views/index.html'));
      const tokexp =  jwt.verify(token, process.env.ACCESS_TOKEN_SECRET);
      if (tokexp) {
        const accessToken = createToken(User.email);
        res.cookie('access-token', accessToken);
        next();
      } else {
        next();
      }
    }
  } catch (error) {
    res.status(401).sendFile(path.join(__dirname, '../views/index.html'));
  }
};

كل العمليات الحسابية المكلفة والمعقدة يتم عادة التعامل معها في سيرفر وليس في الواجهة لاسباب كثيرة

• لا يمكنك معرفة قدرات حواسيب المستخدمين لديك وقد يسبب لهم هذا تجربة مستخدم كارثية بتجمد المتصفح لديهم كل ما دخلو للموقع
• يجب العمل داءما على ابقاء واجهة المستخدم سلسة وخفيفة 
• توفر أدوات تساعد في أداء العمليات الحسابية في السيرفر
• تخفيض حجم request و response
• تنفيذ error handling للعمليات الحسابية في السيرفر

يمكنك استخدام مكتبة django-redis

python -m pip install django-redis

لبدء استخدام django-redis  يجب عليك تغيير إعدادات ذاكرة التخزين المؤقت لـ Django إلى شيء مثل:

CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/1",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    }
}

يمكنك القراءة حول استخدامات المكتبة ككيفية حماية redis بكلمة سر وخصائص أخرى في التوثيق الرسمي للمكتبة

django redis

دورة علوم حاسوب دورة ممهدة لمجال الحاسوب والبرمجة وهي مكان جيد للبدء في طريقك محو التعمق في المجال ويمكنك اعتبارها دورة عامة لذلك هي مناسبة للجميع أما عن ماذا يمكنك ان تشتغل ففي هذا المجال كونك أصبحت متمكن منه فيمكنك ان تشتغل أي شئ لديه علاقة بالحواسب والبرمجة وهذا العمل عادة يكون من امنزل كمتعاقد حر أو في شركة ومجال الحاسوب والبرمجة مجال ذو مستقبل وفرص كثيرة لذا أنصحك به كمجال أساسي لك