Salah Eddin Beriani2

ال theme الذي تبحث عنه يسمى one dark pro يمكنك كتابة اسمه والبحث عنه في ال extensions قم قم بالضغط على زر install

ال api تجريبي فقط أي أنه يحاكي مبدأ ال crud operation لكن البيانات لا تحفظ في قاعدة البيانات الخاصة بال api ويمكنك وهذا امر متفهم لأن ملايين المستخدمين يجربون الapi وقاعدة البيانات تحتوي فقط على 100 توثيق مخزنة داخلها من طرف مطوري ال api وأظن أن الكود المستعمل لديهم يمكن محاكاته هذا مثال ال post request الذي يضعونه fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, }) .then((response) => response.json()) .then((json) => console.log(json)); فاذا كان ال api مثلا مبني ب expressjs سيقومون بشئ مشابه لهذا var express = require('express') var app = express() app.post('/posts', function (req, res) { //البيانات التي أرسلتها لهم const tempData = req.body //يستعملون تقنية مستخدمة للاتصال بقاعدة البيانات وجلب البوستس المخزنين const posts = getPosts() //يضيفون بياناتك الى البوستس posts.push(tempData) //ثم ترجع لك البيانات وكأنك عملت بوست ريكواست وخزنت البيانات في قاعدة اليانات res.json(posts) })

صناعة اللعبة شئ متقدم قليلا يبنى على معرفة مسبقة ب python ويجب عليك تعلم كل أساسيات اللغة أولا و فهمها بعدها سيسهل أمر انشاء اللعبة

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

نصيحتي لك هي أن تتأنى قليلا عن صناعة اللعبة ليوم أو ليومين وتتعلم كيف تصنع بيئة عمل ل python في جهازك الخاص هناك لن تواجهك مشكلة استيراد os والعمل بها والخطوات جد سهلة لصناعة بيئة عمل ل python فقط قم : بتحميل python ثم قم بتحميل محرر نصوص وستكون جاهز لنقل شيفرتك البرمجية لجهازك بدلا من المتصفح

يحدث هذا الخطأ عند محاولة استخدام وظيفة مدمجة من Python التي لم يتم تنفيذها في هذا الإصدار الموجود في المتصفح من Python. في الوقت الحالي الطريقة الوحيدة لإصلاح هذا هو عدم استخدام الوظيفة أو القيام بتطبيق شيفرتك البرمجية في بيئة تدعم وظيفة os . المكتبة os لا يدعمها اصدار python الذي يشتغل في المتصفح.

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

المشكلة رائعة هنا لأنها تفرض علينا مراجعة أساس من أساسيات javascript وهو ال scops ولنسياننا أحيانا لهذا الأساس نفكر داءما في جعل متغيراتنا عامة وهذا هو أيضا اول حل أفكر فيه داءما ايضا لكن يعتبر حل ليس بجيد لذا فلنراجع أساس ال scops ونجد حل . أول مثال يعرض علينا داءما عندما نتطرق الى موضوع ال scops هو المتغير داخل دالة و متغير خارجها هكذا let num = 5 console.log(num)//5 function number(){ let num = 8 return num } console.log(number())//8 ولكن ال scops لا تقتصر فقط على داخل دالة أو خارجها فيمكنك حرفيا انشاء scop فقط ب {} let num = 5 console.log(num)//5 { let num = 8 console.log(num)//8 } في حالتك يمكنك انشاء scope داخل ال case ب {} const cartReducer = (state = initialState, action) => { switch (action.type) { case QNT_UP: { let index; //..... break; } case QNT_DOWN: { let index; //..... break; } default: return state; } };

اذا كنت تعني ال sdb1 الخاص بالصورة فلا يمكنك ذلك لأنه يبدو أنه ليس مقروء من نظامك فليس لديه mountPoint وحجمه لا يظهر وهذا قد يكون راجع لعدة أسباب منها خلل في القرص الثابت نفسه أما اذا تمكنت من جعله مقروء من نظامك فيمكنك تنفيف الأوامر التالية لتتمكن من التخزين عليه الأوامر التالية هي تعديل في الصلاحيات sudo chmod 755 /mountPoint //الاسم متغير هنا من نظام الى اخر chown -R useername:username /mountPoint ////الاسم متغير هنا و أيضا اسم المستخدم من نظام الى اخر

هذا الكود سوف يؤدي الغرض # اخذ الكلمة من المستخدم string = input("write a word: ") # banana # تعريف دالة للتقسيم def split(word): # أخذ كل حرف من الكلمة ووضعه في القائمة return [char for char in word] print(split(string)) # ['b', 'a', 'n', 'a', 'n', 'a']

من حسن حضك أنك استعملت setTiemout والا لكان تجمد المتصفح الخاص بك ولن يمكنك حتى اغلاقه وهذا لأنك أدخلت المكون في infinit loop يمكنك أن تفكر فيها هكذا يشتغل المكون تعين القيمة الأولية لل state وهي ready:false يغير ال state يعاد تشغيل المكون وهكذا تبقى دائرة لا تنتهي والحل هو استخدام componentDidMount أو يمكنك الانتقال لاستخدام hooks function Feed() { return <Text>مرحباً</Text>; } function Loading() { return <Text>جاري التحميل</Text>; } export default function App() { const [ready, setReady] = useState(false); useEffect(() => { setTimeout(function () { setReady(true); }, 3000); }, []); return ( <View> { this.state.ready ? <Feed /> : <Loading /> } </View> ); }

استعمال dangerouslySetInnerHTML خطير جدا وأصلا الكلمة مصممة لافزاع المبرمج عند استخدامها والسؤال هنا لماذا والجواب ببساطة هو ليس في ان تنسيقات الصفحة قد تكون مخربة بل لأن ذلك ال html قد يكون يحمل معه أيضا javascript ويمكنني بسهولة أن ارسل لك كود html يحتوي على عنصر script فيه شيفرة تقرأ كل المداخل في موقعك وعند كل submition ل form سأقوب بطلب post على خادم تابع لي وليس لك وهكذا كل بيانات مستخدمي موقعك ستكون تحت يدي لذا اياك واستخدامها من مصدر خارجي.

لقد واجهت مشكلة مماثلة لمشكلتك سابقا لكن بتعقيد أكثر قليلا حيث واجهت تعديل state مماثل لهيكلة هذا { user: { firsname: '', lastname: '' }, cerdentials: { password: '', confirmPassword: '' }, } الحل الأول الذي خطر على بالي هو أن أغير باستعمال دالتين export default function App() { const [info, setInfo] = React.useState({ user: { firsname: '', lastname: '' }, cerdentials: { password: '', confirmPassword: '' }, }); const handleUserChange = (e) => { e.persist(); setInfo((prevState) => ({ ...prevState, user: { ...prevState.user, [e.target.name]: e.target.value, }, })); }; const handleCerdentailsChange = (e) => { e.persist(); setInfo((prevState) => ({ ...prevState, cerdentials: { ...prevState.cerdentials, [e.target.name]: e.target.value, }, })); }; console.log(info); return ( <div> <input onChange={handleUserChange} type="text" name="firstname" /> <input onChange={handleUserChange} type="text" name="lastname" /> <input onChange={handleCerdentailsChange} type="password" name="password" /> <input onChange={handleCerdentailsChange} type="password" name="confirmPassword" /> </div> ); } الحل يعمل لا مشكلة لكنه يفرض عليك أساليب في كتابة الشيفرة منافية لمبادئ البرمجة النظيفة فقررت أن أجد حل أخر وتوصلت الى هذا الحل بدالة واحدة export default function App() { const [info, setInfo] = React.useState({ user: { firsname: '', lastname: '' }, cerdentials: { password: '', confirmPassword: '' }, }); const handleChange = (e, key) => { e.persist(); setInfo((prevState) => ({ ...prevState, [key]: { ...prevState[key], [e.target.name]: e.target.value, }, })); }; console.log(info); return ( <div> <input onChange={(e) => handleChange(e, 'user')} type="text" name="firstname" /> <input onChange={(e) => handleChange(e, 'user')} type="text" name="lastname" /> <input onChange={(e) => handleChange(e, 'cerdentials')} type="password" name="password" /> <input onChange={(e) => handleChange(e, 'cerdentials')} type="password" name="confirmPassword" /> </div> ); }

كل الطرق التي ذكرتها سابقا تؤدي نفس الغرض لكن الاختلاف يكمن في كيفية العمل ففي الطريقة الاولي export default class App extends Component { handleClick() {} render() { return ( <div> <h1>title</h1> <Button onClick={this.handleClick.bind(this)}></Button> </div> ); } } نستدعي ال bind داخل ال render وهذا يؤدي الغرض لكن هذا في كل مرة يشتغل فيها المكون سينشأ handler جديد مما سيؤدي الى عمل rerender لل button في الحالة السابقة وهذه نقطة عليك لا لك فيما يتعلق بكفاءة وسرعة عمل التطبيق الخاص بك. الطريقة الثانية وهي الحل للمشكل المذكور سابقا هي القيام بالbinding في ال constructor export default class App extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick() {} render() { return ( <div> <h1>title</h1> <button onClick={this.handleClick}>button</button> </div> ); } } أما الطريقة الأنظف في رأيي هي استخدام ال arrow function في ال binding export default class App extends Component { constructor() { super(); this.state = { name: 'salah', }; } handleClick = () => { console.log(this.state.name); }; render() { return ( <div> <h1>title</h1> <button onClick={this.handleClick}>button</button> </div> ); } }

يمكنك استخدام مرجع متعلق بمكون وبمساعدة خطافات react الامر يصبح سهل جدا import React, { useRef, useEffect } from 'react'; export default function App() { const node = useRef(); const handleClick = (e) => { if (node.current.contains(e.target)) { console.log('تم الضغط داخل المكون'); return; } console.log('تم الضغط خارج المكون'); }; useEffect(() => { // اضافة عند التشغيل document.addEventListener('mousedown', handleClick); // ازالة عند توقف التشغيل return () => { document.removeEventListener('mousedown', handleClick); }; }, []); return <div ref={node}>...........</div>; }

يمكنك استخدام onLayout event handler بهذه الطريقة للحصول على حجم ال View function App() { const viewRef = useRef(null); const getSize = (layout) => { const { x, y, width, height } = layout; console.log(x); console.log(y); console.log(width); console.log(height); }; return ( <View onLayout={(event) => getSize(event.nativeEvent.layout)}> <Button title="Get Size" /> </View> ); }

إذا كان هدفك الأساسي هو تعلم React ، وكنت تعرف JavaScript / HTML بالفعل ، فمن الأسهل أن تتعلم React العادي أولاً دون أن تتطلع على React Native. تدرب في المتصفح. كل شيء متعلق بـ React متاح هناك. إذا كنت تنوي البرمجة للجوال فاستخدم معرفتك التي اكتسبتها بـ React لتعلم React Native.

يمكنك استخدام react-native-autofocus npm install react-native-autofocus هذه المكتبة تعمل على التركيز التلقائي على حقل الإدخال التالي عند الإدخال import { Form, TextInput } from 'react-native-autofocus' export default () => ( <Form> <TextInput placeholder="test" /> <TextInput placeholder="test 2" /> </Form> )

اذا أمكنك ارفاق صورة لما يخرج معك في cmd فربما يمكنني مساعدتك

الأمر سهل وبسيط فقط عندما تفهم احتياجاتك في الشيفرة التي تود كتابتها . يمكن صياغة الأمر الى استخدامين الأول في حالة انك لا تعتمد على الstate القديم في اجراء التغييرات وهذا مثال بسيط export default function App() { const [state, setState] = useState('some data'); const handleChange = () => { setState('other data'); }; return <div>.....</div>; } و هذا مثال أخر export default function App() { const [state, setState] = useState({ username: '', password: '', }); const handleChange = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; return <div>.....</div>; } لكن في حالة ما اذا اردت تغيير ال state بالاعتماد على ال state القديم فحينها يجب عليك استخدام callback export default function App() { const [state, setState] = useState(0); const handleChange = (e) => { function increment() { setState((prevState) => prevState + 1); } }; return <div>.....</div>; }

يمكنك استخدام خطاف useLocation الذي يوفره react-router-dom import React from 'react'; import { useLocation } from 'react-router-dom'; function useQuery() { return new URLSearchParams(useLocation().search); } export default function App() { let query = useQuery(); const firebaseKey = query.get('__firebase_request_key'); console.log(firebaseKey); //somethingHere return <div>.....</div>; }

مثال حول استخدام props : import React from 'react'; export default function App() { return ( <div> <Component data="some data" name="page"></Component> </div> ); } function Component(props) { const { name, data } = props; console.log(name); //page console.log(data); // some data return <h1>Component</h1>; } مثال حول استخدام state: import React from 'react'; export default function App() { const [state, setState] = React.useState('some data') return ( <div> {state} // somedata </div> ); } مثال حول useState : import React from 'react'; export default function App() { const [state, setState] = React.useState('some data'); const handleClick = () => { if (state === 'some data') { setState('other data'); } else { setState('some data'); } }; return ( <div> {state} // some data <button onClick={handleClick}>click</button> </div> ); } مثال حول useEffect : import React from 'react'; export default function App() { const [state, setState] = React.useState('some data'); const handleClick = () => { if (state === 'some data') { setState('other data'); } else { setState('some data'); } }; React.useEffect(() => { console.log("أشتغل مرة واحدة الا اذا أضيف الستايت للقائمة في الاسفل") }, []) return ( <div> {state} // some data <button onClick={handleClick}>click</button> </div> ); } و fetch ليس لديها علاقة بمكتبة react فهي فقط أدام من أدوات جافاسكريبت لجلب أو ارسال البيانات

يمكنك استخدام هذه الدالة أو يمكنك التعديل عليها بما يناسبك col = [10, 500, 9080] def get_rows(col): rows = [] copied_col = col.copy() #نسخ المصفوفة for i in range(len(copied_col)): count = 0 while(copied_col[i] > 0): count = count+1 copied_col[i] = copied_col[i]//10 rows.append(count) # دفع عدد الخانات للمصفوفة final = dict(zip(col, rows)) # دمج المصفوفتين وتحويلهم الى قاموس return final print(get_rows(col))

يمكنك تشغيل الشيفرة مرة واحدة باستخدام useeffect بهذه الطريقة import React from 'react' export default function MyComponent() { useEffect(() => { // الشيفرة }, []) // أبقي قائمة المعايير هنا فارغة return ( <div> .... </div> ) } و للاطلاع أكثر على كيفية استخدام useeffect يمكنك الرجوع الى هذا السؤال ومراجعة الاجابات هناك https://academy.hsoub.com/questions/13679-استخدام-lifecycles-في-react-useeffect

دورة تطوير التطبيقات باستخدام JavaScript هنا في أكاديمية حاسوب تتطرق ل react و react native بالاضافة لاستعمالاتهم مع ال nodejs والدورة تعتبر انطلاقة ممتازة نحو التمكن من استخدام react كما يوجد أيضا كم كبير من الأسئلة المجاب عنها هنا في الأكاديمية وأيضا يمكنك طرح كل تساؤلاتك بينما تتعلم وسيجاب عنها هنا في الأكاديمية. بالتوفيق