bhanwari devi

بهانواري ديفي

Bhanwari Devi هي امرأة من الطبقات المضطهدة تجرأت على محاربة الهياكل الإقطاعية والطائفية والبطوية لريف راجاستان. بدأت كعامل اجتماعي كجزء من مشروع تنمية المرأة التي تديرها الحكومة. في عام 1992 ، شاركت في حملات محددة ضد زواج الأطفال. نصحت النساء في تنظيم الأسرة ، وتعليم الطفل ، ضد الإناث الإناث ، ومهر ، وزواج الأطفال. بالفعل ، نتيجة لنشاطها ، تعرضت هي وعائلتها لتهديدات مستمرة وتخويف من قبل الرجال الطبقيين المهيمنين في القرية.

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

في سعيها اللاحق للعدالة ، كل خطوة على طول الطريق واجهت عقبات شديدة. في مركز الشرطة ، في مركز الرعاية الصحية الأولية ، والسلطة القضائية. اقرأ المزيد عنها هنا.

دعنا نعود إلى رمز ونبني شيئًا جميلًا معًا

نرحب بالجميع. ؟

إرشادات البدء والمساهمة

يرجى الرجوع إلى دليل المساهمة لدينا.

روح التنمية

• لا بأس في كسر الأشياء عن التطوير. خذ الملكية وأرسل الإصلاح.
• مساعدة الآخرين أثناء مراجعة العلاقات العامة. وكن محترمًا إذا احتاج شخص ما إلى تحسين شيء ما على رمزه. الهدف هو العمل معًا والاستمتاع ببعض المرح.
• إذا استطعت ، استخدم طنًا من الرموز التعبيرية أثناء مراجعة العلاقات العامة أو الرد على التعليقات في العلاقات العامة.
• لا تخجل من إرسال العلاقات العامة ، نحن أكثر من سعداء لمساعدتك في هذه العملية.

هيكل الكود

• فلسفة الكود Strucutre هي الحفاظ على الأشياء الصغيرة قدر الإمكان. الحفاظ على الوظائف الصغيرة ، والمكونات صغيرة ، وملفات صغيرة. في الأساس الحفاظ على كل شيء صغير كما يمكن أن يكون. مثل التوابع ، نحن نحب التوابع. من لا.

لنرى بنية الملف الآن.

بنية الملف تبدو مثل هذا.

    ├── src                     # Source files
        ├──asset                # assets that belongs commonly in all components.
        ├──components           # Components and their child components. 
           ├──Course            # Course component and it's child components
              ├──index.js
              ├──styles.scss
              ├──constants.js
              ├──CreateCourse   #Course realted child component
                 ├──CourseForm  
                 ├──index.js
                 ├──styles.scss
              ├──CourseList
              ├──redux          # all the redux and api related things to Course, we will do under redux directory.
                ├──action.js    # We will define redux actions here
                ├──api.js       # All the course related APIs(axios requests) will happen here
                ├──reducer.js   # All the course related state management will happen here
                ├──saga.js      # All the middlewares for redux state management or api calls we will put here
                ├──util.js      # Mapper functions or any utility function for data manipulation
           ├──common            # All the common components which might be used anywhere in the app.
              ├──Notification
                 ├──index.js
                 ├──styles.scss
              ├──Spinner
                 ├──index.js
                 ├──styles.scss
          ├──pages              # root level containers for each page(Individual component wrapper for different url rotue)
            ├──CourseList       # these are basically wrappers, they should't me more than 30-40 lines.
               ├──index.js
               ├──styles.scss
          ├──routing           # Creating public and private routes for different pages.
          ├──services          # Tools and utilities for date, time, string and numbmers
          ├──sass              # app color css reference and mixins.
    ├──docs                    # Some documentation about code and other things.
    ├──.env.development        # development environment variables.
    ├──package.json
    ├──package-lock.json
    ├── README.md

من فضلك لا تخلط وتهرب. نحن نعرف أن الهيكل أعلاه كان طويلًا بعض الشيء. لكن عليك أن توافق على أنه تم تفصيله ، وإذا نظرت عن كثب ، فهذا أمر بسيط بالفعل

على سبيل المثال ، لدينا دليل مكون يسمى Course . جميع API و Redux و Redux-Saga و Constant والتي ترتبط مباشرة مع كيان الدورة التدريبية ستذهب داخل دليل مكون Course . لذلك إذا كان أي شخص يعمل مع الأشياء ذات الصلة بالدورة ، فإننا نريدهم أن يبقوا دائمًا داخل دليل Course . أساسا في الملف أدناه.

 ├──components           
    ├──Course            
      ├──index.js
      ├──styles.scss
      ├──constants.js
      ├──ChildComponent
      ├──CourseList 
      ├──redux          
        ├──action.js    
        ├──api.js       
        ├──reducer.js   
        ├──saga.js      
        ├──util.js
      ├──AnotherChildComponent

ملاحظة: ستذهب الثوابت العالمية في ملف src/constant.js العالمي.

فهم أجزاء قليلة من قاعدة الكود

مكدس التكنولوجيا

• رد فعل
• Redux (إذا كنت جديدًا على Redux ، يمكنك أن تتعلم قليلاً هنا.)
• Redux-Saga (نحن نحب Redux-Saga ، لا أعرف عن Redux-Saga ، لا تقلق. يمكنك التعرف على ذلك قليلاً هنا.)

ملاحظة: يمكننا المشي بك من خلال كيفية استخدامنا Redux و Redux-Saga. يرجى الاتصال ، يمكننا أن نقدم لك مقدمة قصيرة لـ Redux و Redux-Saga.

كيفية إجراء مكالمة API وإدارة الحالة

سنقوم Redux و Redux-Saga بإجراء مكالمة API والتعامل مع ردهم. يجعل المكونات الحياة سهلة ويبقيها صغيرة وأقل تعقيدًا.

• الهدف الكامل من استخدام Redux هو التعامل مع Mangagement حالة التطبيق بطريقة أسهل بكثير. جديد في Redux تعلم هنا
• باستخدام Redux-Saga ، نقوم بإبعاد تعقيد إجراء مكالمة API وتسليم الاستجابة في ملف معين (IE saga.js ) بعيدًا عن منطق واجهة المستخدم. جديد في Redux ، ابدأ من هنا لمعرفة ذلك

هناك أربعة ملفات/مفهوم نحتاج إلى تحديث أو تغيير لإجراء مكالمة API.

• الإجراءات (AKA action.js )
• حالة Redux (AKA reduceer.js )
• مكالمات API مع Axios (AKA api.js ) [ملاحظة: لا ينطبق عند القيام بشيء مع التخزين المحلي.]
• Redux Middlewares (AKA saga.js )

TODO: أضف صورة مرئية كيف تتفاعل الأشياء أعلاه مع بعضها البعض.

يمكنك التفكير في هذا التدفق ، عندما تقوم بتنفيذ مكالمة API.:->

Create actions

↓

Create redux state

↓

Create the API function

↓

Create middlewares(saga)

إنشاء إجراءات Redux

الإجراءات هي وسيلة لإخبار Redux بالدولة التي يجب تحديثها حول الحدث. في الأساس لديهم هيكل ، شيء مثل أدناه.؟

 { type: 'INCREASE_COUNT', data: 5}

This above object will passed to redux through some function/API(aka Disptacher), 
and the intuitive behaviour of this `action` should be that it increments `counter` variable in redux by 5.

عندما نقوم بإجراء مكالمة API ، هناك بشكل عام ثلاثة أنواع من الإجراءات التي نتعامل معها.

• ماذا تفعل عندما نسمي نقطة نهاية API.
• ماذا تفعل عندما نحصل على استجابة ناجحة من نقطة نهاية API.
• ماذا تفعل عندما نحصل على استجابة غير ناجحة من نقطة نهاية API. نحدد الإجراءات إلى دليل Redux الرئيسي المقابل. يبدو مسار الملف شيئًا مثل ملف src/components/componentName/redux/action.js . لنأخذ مثالاً على الحصول على معلومات المستخدم. وكيف يمكننا تحديد الإجراءات للحصول على معلومات المستخدم. يجب أن تبدو الإجراءات هكذا.؟

 export const types = {
  GET_USER_INTENT: 'GET_USER_INTENT',
  GET_USER_INTENT_RESOLVED: 'GET_USER_INTENT_RESOLVED',
  GET_USER_INTENT_REJECTED: 'GET_USER_INTENT_REJECTED',
}

export const actions = {
  getUser(data) {
    return {
      type: types.GET_USER_INTENT,
      data,
    }
  },
  getUserResolved(data) {
    return {
      type: types.GET_USER_INTENT_RESOLVED,
      data,
    }
  },
  getUserRejected(error) {
    return {
      type: types.GET_USER_INTENT_REJECTED,
      error,
    }
  },
}

إنشاء حالة Redux (AKA مخفض)

بالنسبة للأشياء المتعلقة بالدولة (الحفاظ على بيانات API Rensponse ومراجع الخطأ) ، نقوم بإنشاء وإدارة الحالة في src/components/componentName/redux/reducer.js . الرمز يشبه هذا. ؟

 import { types } from './action'

const initialState = {
  loading: false,
  error: false,
  data: null,
}

export default (state = initialState, action) => {
  switch (action.type) {
    case types.GET_USER_INTENT:
      return {
        ...state,
        loading: true,
        error: false,
        data: null,
      }
    case types.GET_USER_INTENT_RESOLVED:
      return {
        ...state,
        loading: false,
        error: false,
        data: action.data, // mapped user data.
      }

    case types.GET_USER_INTENT_REJECTED:
      return {
        ...state,
        loading: false,
        error: action.error, // keeping reference of the error, When API call fails.
        data: null,
      }

    default:
      return state
  }
}

إنشاء وظائف API

للحصول على بيانات من الخادم ، نقوم بإنشاء مكالمات API هنا. في الغالب نحن نفعل مع مكتبة axios . يبدو مسار الملف لإنشاء واجهات برمجة التطبيقات مثل src/components/componentName/redux/api.js . تبدو مكالمة API هكذا. ؟

 import axios from 'axios'
import { METHODS, HeaderFactory } from '../../../services/api'

/**
 * gets user data from the server.
 *
 * @param {opts} 
 * @param {object} opts
 * @returns {Promise}
 */
export const getUserData = (opts, tokens) => {
  return axios({
    url: `${process.env.REACT_APP_MERAKI_URL}/users/${opts.userId}`,
    method: METHODS.GET,
    headers: HeaderFactory(tokens)
  })
}

Redux Middlewars (AKA Redux-Saga)

الأوساط المتوسطة مفيدة للغاية ، عندما نتحدث عن التعامل مع مكالمات ASYNC/API. نضع Saga Middlewares في ملف src/components/componentName/redux/saga.js . يجعل التعامل مع حالة Redux سهلة ومروية. في البداية قد تبدو مرهقة بعض الشيء أو طويلة. ولكن بعد إنشاء مكالمتين أو ثلاث مكالمات API ، سوف تحصل على تعليق منه. هذه هي الطريقة التي نتعامل بها مع الحصول على بيانات المستخدم من خلال Redux Saga Middleware.

 import { takeLatest, put, call } from 'redux-saga/effects'

import { types, actions } from './action'
import { authorizeRequest, httpStatuses } from '../../../services/auth'
import { getUserData } from './api'

/**
 * This handles gets user data from the server
 * @param {object} data user information
 * @param {object} data.userId user id which will be used to get user information
*/
function* handleGetUserData({ data }) {
  const res = yield call(authorizeRequest, getUserData, data)
  if(httpStatuses.SUCCESS.includes(res.status)) {
    // if the api call was succesful, let's change the status according // to that. also setting `loading` as false. 
    yield put(actions.getUserResolved(res.data))
  } else {
    // if the api call wasn't successful, let's set the error in redux /// for refernce.also setting `loading` as false. 
    yield put(actions.getUserRejected(res))
  } 
}

export default function* () {
  // This action `types.GET_USER_INTENT` is also handled in the redux
  // it sets `loading` as true. so we can show some loader when the API call
  // is happening.
  yield takeLatest(types.GET_USER_INTENT, handleGetUserData)
}

كيف نفعل التصميم/CSS

ملاحظة: قريبًا ، سنضيف طريقة تصميم CSS هنا.

في حالة الشك

إذا كان لا يزال لديك بعض الشك أو الاقتراحات ، حول كيفية عمل الأشياء في هذا المشروع. لا تتردد في الاتصال بـ Vikash أو Saquib أو Komal أو Abhishek. نحن أكثر من سعداء بالاتصال بجعل الأمور أكثر وضوحًا لك. في وقت لاحق ، أنت تحاول بناء الأشياء معنا.

متغيرات البيئة

• تحتاج إلى ملف يسمى .env.development لبدء تشغيل المشروع محليًا وتطويره. يرجى الاتصال بنا. إذا كنت مهتمًا بمساعدتنا.

البرامج النصية التي تجعل حياتنا اليومية سهلة.

في دليل المشروع ، يمكنك تشغيل:

npm start

يدير التطبيق في وضع التطوير.
افتح http: // localhost: 3000 لمشاهدته في المتصفح.

سيتم إعادة تحميل الصفحة إذا قمت بإجراء تعديلات.
سترى أيضًا أي أخطاء في وحدة التحكم في وحدة التحكم.

npm test

يطلق عداء الاختبار في وضع الساعة التفاعلية.
انظر القسم حول إجراء الاختبارات لمزيد من المعلومات.

npm run build

يبني التطبيق للإنتاج إلى مجلد build .
تتفاعل حزمها بشكل صحيح في وضع الإنتاج وتحسن البناء للحصول على أفضل أداء.

تم تصنيع البناء ويتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر!

لتشغيل بناء الإنتاج في البيئة المحلية ، يرجى تشغيل الكود التالي بعد npm run build . [ملاحظة: تأكد من أن لديك جميع متغير بيئة الإنتاج في ملف .env.production .]

 npm install -g serve
 serve -s build

راجع القسم الخاص بالنشر لمزيد من المعلومات.

ترميز سعيد :)