اريد ان اتعلم طريقة التعامل مع الديناميك APIs كما فى الصورة .. ريأكت ناتيف او حتى ريأكت

مرحباً أحمد:
ما تريد عمله هو عبارة عن integration للحصول على البيانات من ال api ولن تفرق سواء كانت متغيرة أو في كل مرة تعطي نفس النتائج المهم هو المبدأ وهو الحصول على البيانات ومن هنا وعلى حسب معطياتك أنك تتقن ReactNative ولذلك يتبقى لك الآتي : 

1. أن تستخدم أداة للحصول على بيانات ال api وهيا axios ( عبارة عن مكتبة للتعامل مع الباك ايند ) ولفهمها أرشح لك هذا المقال أو ( الأهم ) أن تقرأ ال توثيق الخاص بها من الموقع الرسمي ولن يأخذ منك الكثير من الوقت لأنها سهلة ومباشرة 
2. أن تفهم ما هي متطلبات ال apis عن طريق استخدامها في swagger وإليك مثال 
   
   هذه endpoint إذا أردت استخدامها أضغط عليها وستظهر بالشكل الآتي 
   
   وهنا تظهر لك القيم المحتملة التي من الممكن أن ترسلها مع الإيند بوينت لكي تعطيك قيم دقيقة ( startIndex - pageSize ) وإذا أردت أن تقوم باختبار الإيند بوينت وأن تعرف شكل ال url وشكل البيانات التي ستحصل عليها فقط قم بالضغط على ( try it out ) أعلى اليمين  ستظهر لك كالآتي 
   
   قم بالضغط على Execute ليقوم بإعطاءك بيانات الطلب 
3. وكما ترى ستجد ما تريد في البداية 
   اترك قسم curl فلن تحتاجه حالياً -ستجد أسفله Request URL ( هذا هو أهم شيئ ) وهو ما يسمى بالإيند بوينت  وهو ما ستعطيه ل axios للحصول على البيانات منه 
   *** 
   الجزء الثاني الخاص بال نتائج ( ستجده أسفل Request Details )
   
   ومع التمرين ستتقن الأمر بدون الحاجة إلى أي كورسات 

مرحبا أحمد،

إن التعامل مع api ديناميكي يعطينا قدرة أكبر للوصول لموارد محددة من المخدم و عمل استعلامات ضمن قاعدة البيانات

سأعطي مثال:

/api/Organizations

/api/Organizations/{orgId}

نلاحظ أن الرابط الأول سيعيد مصفوفة json تحوي معلومات جميع المنظمات الموجودة لدينا في قاعدة البيانات

أما تحديد منظمة محددة عن طريق المعرف الخاص بها ستعديد غرض json لمعلومات تلك المنظمة بالتحديد.

يتم توجيه كل طلبية في ملف routes عند المخدم وهذا عمل مبرمج back-end

لجلب معلومات المنظمة رقم 5 نطلب الرابط :

/api/Organizations/5

إنها موضوع بسيط و سهل، فقط نستبدل الأقواس المجعدة بالقيمة التي نريد تحديدها بدقة.

و مثال لآخر لإعطاء معلومات ضمن منظمة محددة يكون هكذا:

/api/Organizations/{orgId}/group/{grpId}/member/{memberID}

/api/Organizations/1234567/group/4355345/member/3256656454

سيقوم برنامج المخدم بالتقاط القيم الاختيارية الممرة مع الرابط و بناء الاستعلام الموافق و من ثم يعيد النتيجة.

مثال لتمرير عدة وسطاء:

app.get('/api/v1/tours/:cId/:pId/:batchNo?', (req, res)=>{
    console.log("category Id: "+req.params.cId);
    console.log("product ID: "+req.params.pId);
    if (req.params.batchNo){
        console.log("Batch No: "+req.params.batchNo);
    }
});


http://127.0.0.1:3000/api/v1/tours/5/10
//or
http://127.0.0.1:3000/api/v1/tours/5/10/8987

و مثال آخر:

//With URL Params

//With regex

app.get('/articles/:year?/:month?/:day?', function(req, res) {
  var year = req.params.year; //either a value or undefined
  var month = req.params.month;
  var day = req.params.day;
}

//Without regex

var getArticles = function(year, month, day) { ... }

app.get('/articles/:year', function(req, res) {
  getArticles(req.params.year);
}
app.get('/articles/:year/:month', function(req, res) {
  getArticles(req.params.year, req.params.month);
}
app.get('/articles/:year/:month/:day', function(req, res) {
  getArticles(req.params.year, req.params.month, req.params.day);
}
Define the 3 paths you want to support and reuse the same function

//With Query Params

app.get('/articles', function(req, res) {
  var year = req.query.year; //either a value or undefined
  var month = req.query.month;
  var day = req.query.day;
}
//The url for this endpoint will look like this:

//http://localhost/articles?year=2016&month=1&day=19

بالتوفيق