Adnane Kadri

يرجح أنك لم تقم بتثبيت pipenv أساسا، ولذلك حاول تثبيتها باستخدام مدير الحزم pip في بايثون على النحو التالي: 
pip install pipenv في حالة استمرار المشكلة تذكر أنه يمكنك على كل حال تثبيت جانقو على النحو التالي: 
python -m pipenv install django

انتبه إلى أن هنالك خطأ في قراءة الخاصية value من على عنصر الإدخال في: 
var first = document.getElementById("name").Value إذ أنك تكتبها بحرف V كبيرة، أصلح السياق ليكون: 
var first = document.getElementById("name").value وأعد المحاولة.

أظنك تقصد توزيع مصفوفة من الأرقام في سلسلة نصية بحيث يتم فصل ما بين كل رقم والثاني بفاصلة. 
فإن كانت المصفوفة الأصلية على النحو التالي: 
$numbers = ['+454566789', '+79787545', '+954245546']; فإن النتيجة المرجوة هي على النحو التالي: 
'+454566789,+79787545,+954245546' ولفعل ذلك يمكنك الاستعانة بالدالة implode التي تقوم بالتحويل من مصفوفة الى سلسلة نصية مع تحديد فاصل بين عناصر السلسلة النصية وفق الشكل التالي: 
$numbers = ['+454566789', '+79787545', '+954245546']; $string = implode(",", $numbers); echo $string; أو العكس أيضا: 
$string = '+454566789,+79787545,+954245546'; $array = explode(',', $string); echo '<pre>'; print_r($array); echo '</pre>'; طبعا فإن هاته الفكرة العامة، قم بتوظيف ذلك وفق مثالك.

ان تطوير نظام كبير ومعقد باستخدام إطار عمل لارافيل أو نود يتطلب منك قدرا عاليا من التنظيم ومهارة وخبرة في الهندسة وتطوير النظم، والتي عادة ما تشمل النقاط التالية: 
تحديد الهدف والمتطلبات البحث والتخطيط التوثيق الجيد لحالات الاستخدام ومخططات الحالة بناء تصاميم أولية ونماذج استعمال ادوات ذات فعالية عالية لإدارة المشروع وتتبعه على مختلف مراحله مثل Trello وغيرها من Jira استخدام تقنيات الاختبار وبناء بيئة اختبارية بالاعتماد على اطر مثل PHPunit و Laravel Dusk وغيرهما التركيز في جودة الشيفرات والعمل على تحسينها تحسين استعلامات قواعد البيانات وتسريعها التركيز على استيفاء العمل لمؤشرات الجودة المختلفة مثل قابلية التوسع والصيانة وما الى ذلك تقسيم العمل لأهداف، والأهداف لمهام والمهام لمهام اصغر مراقبة الجودة واختبار سرعة التطبيق وقد لا يمكن ذلك من أول مرة إلا بعد الكثير من الجهد والوقت من قبل شخص واحد مهما بلغت خبرته، ولذلك ركز على ما هو أهم بداية: بناء نظام قابل للصيانة وسهل التوسع. وضف عليه كل مرة حتى يصل لمستوى استيعاب ملايين المستخدمين.
الشركات الكبيرة تستخدم نظما ومناهج متقدمة لإدارة مشاريعها البرمجية وتطويرها، ومثلها منهج Agile واطار عمله الشهير Scrum والذي يهتم بتطوير النظم مع التركيز الكبير على قدرتها على التكيف مع التغير والتقاط التطورات. وأيضا على توزيع مختلف المهام على مختلف اعضاء الفريق وتوجيههم للانتاج بفعالية في فترات زمنية قصيرة. عادة ما يدير هاته المشاريع في هاته الشركات شخص يتم تعيينه من قبل مالك المشروع أو المدير التنفيذي للشركة يسمى الـ Scrum master أو مدير المنتج PM أو قائد الفريق Team Leader بحسب الاصطلاح او المسمى الوظيفي، والذي يحرص على التواصل الفعال مع صاحب المشروع من جهة ومع اعضاء فريقه من جهة وعلى تقييم عملهم وتوزيع المهام عليهم من جهة أخرى. وكل هذا يكون في فترات زمنية قصيرة تسمى Sprints تمتد من اسبوع حتى أربع. ويتم في آخر هاته الـ Sprints عمل تقييم لها وهكذا .. 

يمكنك استخدام ادوات التحليل عبر الويب لاستخلاص التقنيات المعمول بها أي موقع أو منصة، مثل builtwith، 
بالنسبة لأكاديمية حسوب، فيرجح أنه تم استعمال اطار عمل Ruby on Rails المكتوب بلغة Ruby. أما بالنسبة لموقع مستقل وزيتون وخمسات وبعيد فهي على الأرجح مبنية بإطار عمل Laravel المكتوب بلغة PHP. ونفس الشيء بالنسبة لموقع بيكاليكا. 
أما عن الربط بين هاته المواقع، فهو بطبيعة الحال بوساطة الواجهات البرمجية API التي تسهل التخاطب بين التطبيق وبين أي طرف آخر، بما في ذلك تطبيقات أخرى. ولذلك نرى أن موقع حسابات حسوب يتركز عملية توثيق المستخدمين ومصادقتهم في كامل منتجات حسوب. 

الإجابة الأبسط هي: استكمال مسارات الدورة الأخرى. 
بخصوص العمل المرفق، فهو عموما ممتاز اذ يظهر أنك قد قمت بفصل مكونات التطبيقات على نحو ممتاز بطريقة أشبه بالطريقة المتعرض لها في مسار أساسيات PHP من ذات الدورة. 
بنية المتحكمات لديك متماسكة وكذلك نماذج البيانات. 
يتم توصيف الكلاسات المجردة والواجهات على نحو صحيح يستوفي الغرض الأول منهما.
ملفات العرض لديك تحتوي هياكل نظيفة وبنيات واضحة، عدى ملفات المكونات الفرعية، إذ يظهر أنها تحتوي على وسوم إغلاق تتعلق بمكونات أخرى، على سبيل المثال لا الحصر، مكون footer:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> هذا التوصيف لا يحترم مبدأ المسؤولية الواحدة، فملف المكون متوقف على ملف مكون آخر. وهو لن يكون صحيحا ما لم يتكامل مع مكون آخر. فكر بإصلاحها أو تضمين الوسوم بملف آخر. 
أيضا لا يبدوا أن المحتوى المحقون بهذا الملف يعبر عن تذييل footer، هل تقصد به تذييل الصفحة؟ أظن أن لا داعي منه ما لم يكن هنالك عنصر footer واضح ذي بنية واضحة تحتوي مثلا عبارة حقوق الملكية أو النشر.
عدى ذلك، كل شيء ممتاز وقد أحسنت في العمل على ذلك.

جرب استعمال findByIdAndRemove بدلا عن remove للحذف، انتبه الى تمرير المعامل اللازم:
await Image.findByIdAndRemove(req.params.photoId)

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

هنالك خلط قليلا في التعامل مع الوعود Promises في الشيفرة الخاصة بك، فأنت تقوم باستقبال عائد الطلب دون إعادته كخرج للدالة.
لا داعي من عبارة then في الشيفرة الأولى، قم بتعديل الشيفرة الخاصة بك لتكون على نحو:
let getPost = async (id) => { let res = await axios.get(baseURL + '/posts/' + id) return res.data.data } const viewAllComments = async (id) => { let posts = await getPost(id) console.log(posts) } viewAllComments(99)

مشكلة cors -وتعني "Cross-Origin Resource Sharing"- هي مشكلة شائعة، أين يتم حظر الطلبات من نطاق مختلف. لتلافي هاته المشكلة في تطبيقات NodeJS يقترح استخدام المكتبة cors عادة، 
قم بتتثبيتها:
npm install -S cors ثم في ملف الخادم الرئيسي قم باستيرادها:
import cors from 'cors'; وقم باستعمالها من طرف التطبيق:
app.use(cors()); أعد تشغيل الخادم وانظر ما ان اختفت المشكلة.

كلاهما يعد خيارا ممتاز، وكلاهما يفي بالغرض في الكثير من الحالات ويخدمان الكثير من حالات الاستخدام الشائعة، ولذلك فهما يمكنانك من إنشاء تطبيقات ويب شاملة قوية باستخدام اطار عمل لارافيل. أما عن الفرق بينهما فقد يكون طفيفا في بعض الجزئيات وكبيرا في أخرى، ولكن بشكل عام يمكن مقارنتهما من حيث:
السرعة والآداء:
قد يلحظ أن هنالك فرقا في الآداء في تطبيق Inertia مقابل تطبيقات Livewire فهي تعمد إلى فصل تطبيقي الخادم والعميل بشكل كامل، وتستخدم مكتبات مثل ReactJS أو أطرا مثل VueJS كإطار عمل للواجهة الأمامية على عكس Livewire التي تستخدم blade كمحرك قالب template engine. ولذلك فإن موضوع السرعة والآداءا غالبا ما يحسم في صف Inertia.
سهولة التعلم والتعامل:
ممارسة Livewire قد لا تتطلب منك غالبا معرفة مسبقة إلا بلارافيل و PHP، في حين أن Inertia تشترط معرفة مسبقة بإطار عمل VueJS أو ReactJS و لارافيل معا. وهو الأمر الذي يجعل تعلمها يستهلك وقتا أو جهدا أكثر مقارنة بـ Livewire. نفس الشيء بالنسبة للتعامل معها بعد تعلمها، قد تبدوا أكثر تعقيدا في أول الأمر ولكنها ستتضح أكثر مع الوقت.
من ناحية الـ SEO:
رغم أن Inertia في واحدة من أواخر اصدارتها قد دعمت فكرة التصيير على الخادم Server side rendering، إلا أن هاته النقطة تبقى تحسم لـ Livewire لأنه يتضمنها بالفعل، في حين أن تطبيق Inertia هي تطبيقات صفحة واحدة Single Page Application تتضمن مفهوم التصيير على العميل Client Side Rendering وهو الأمر المعروف تأثيره على الـ SEO.
وفي الأخير، تذكر أنك لن تحتاج التخلص من شيء تعلمته حتى تتعلم آخر جديد، يمكنك تعلم الجديد واضافته إلى معارفك ومهاراتك. أين سيمكنك توظيف كل منهما بحسب الحاجة، فهنالك مثلا تطبيقات لا تلتفت كليا لجانب الـ SEO - مثل التطبيقات الإدارية - أين يكون تطبيق الصفحة الواحدة نقطة إيجابية وليست سلبية. على عكس تطبيقات أخرى تعتمد بشكل كليا على فرصها في فهرستها على محركات البحث، هاهنا ستصبح نقطة الصفحة الواحدة نقطة سلبية ولا إيجابية. ولذلك، ان متطلبات مشروعك هي ما تحدد ما الأفضل لك.

القائمة تظهر لدي وبشكل عادي، تأكد فقط من أنك في الصفحة الصحيحة في حسابات حسوب:

يمكنك مباشرة التوجه للرابط التالي: https://accounts.hsoub.com/settings/identity
كما يمكنك الإطلاع على الفيديو للتفاصيل: 
 

وعليكم السلام،
Zoho واحدة من الشركات المعروفة بتقديم حلول متكاملة لأعمال الويب، بما في ذلك خدمات استضافة الدومين والبريد الإلكتروني والتسويق عبر البريد الإلكتروني والكثير من التطبيقات الأخرى. بخصوص الإيميل، فهي تقدم خدمات تسمى "Zoho Mail" و "Zoho Campaigns" تتيح لك القيام بذلك. هذه الخدمات لديها واجهات سهلة الاستخدام وتقدم العديد من الميزات المفيدة لأصحاب المواقع. 
لم أستعمل Zoho لهذا الخصوص، كنت قد استعملتها فيما مضى مع فريق في إدارة أحد المشاريع البرمجية وفي إدارة Scrum sprints وكانت تجربة الإستخدام ممتازة. أرجح أنها مثل ذلك أو أكثر في غيرها من تطبيقاتها.

عادة ما يتم خزنها في ملف env. على الخادم يكون الوصول إليها متاحا من قبل التطبيق فقط، وبوساطة حزم ومكاتب مثل dotenv سوف يكون من السهل إدارة هاته المفاتيح أو الوصول إليها من خلال تطبيقك.
قد تتوفر بعض الاستضافات من مثل Heroku أو AWS على خدمات إدارة المفاتيح ضمن ميزات خطط استضافتها، وهي توفر تشفيرا وأمانا أعلى من السابق. بحيث يتم تصريحها ضمن استمارات ونماذج في الاستضافة ضمن نطاق التطبيق، وسيمكن الوصول إليها من قبل التطبيق بشكل عادي.
أما بخصوص سؤالك عن طريقة قراءة المتغيرات، فلا حاجة لتغييرها أثناء عملية البناء والنشر (مثل توليد الإصدار النهائي من التطبيق)، يمكنك الاستمرار في اعتماد الطريقة مادام ملف متغيرات البيئة مؤمنا.

MERN هي واحدة من التجميعات الأكثر طلبا وشيوعا هاته الأيام، ومسار التعلم فيها واضح ولا يتطلب منك إلا الإلمام بالأربع جزئيات المكونة لهذا الاسم:
MongoDB وذلك للتعامل مع قواعد البيانات وهياكلها. ExpressJS للتعامل مع الخوادم والتوجيه وتطوير الباك أند ReactJS للتعامل مع الواجهة الأمامية وما يشملها NodeJS وذلك كبيئة جافاسكربت يمكنها الإشتغال خارج المتصفحات فيما يلي بعض الخطوات العامة للخوض في ذلك:
تعلم الأساسيات: تعلم كل الأساسيات من جافاسكربت، HTML و CSS.
قم بالخوض في Node.js وتعلمه: Node.js هو بيئة تشغيل JavaScript على الخادم. يعتبر تعلم Node.js أمرًا ضروريًا إذا كنت ترغب في تطوير الجزء الخلفي باستخدام JavaScript.
تعلم Express.js: Express.js هو إطار عمل (framework) لتطوير تطبيقات الويب باستخدام Node.js. إذا كنت مبتدئًا في تطوير الخادم باستخدام JavaScript، يمكن أن يكون Express.js خيارًا رائعًا حيث يسهل عليك بناء تطبيقات ويب بسرعة.
تعلم قواعد البيانات: يجب عليك أن تكون على دراية بكيفية التفاعل مع قواعد البيانات إذا كنت ترغب في تطوير تطبيقات ديناميكية.
قد تكون مهتما بالإطلاع على دورة تطوير التطبيقات باستخدام لغة JavaScript التي تتناول أغلب هاته الجزئيات.

إن كانت الشيفرة المرفقة:
$(function () { var currentDate = new Date(); $('#currentYear').text(currentDate.getFullYear()); }) موضوعة بملف script.js فإنك ستحتاجين وضع سطر تضمين هذا الملف أسفل سطر تضمين جيكويري لأنه يقتضيها بالفعل:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script src="js/script.js"></script>  

في Figma مثلا يمكنك تصدير الصور عن طريق تحديدها أولا، ثم من على القائمة الجانبية اليمنى اختيار export 

قم بتحديد الدقة المطلوبة والصيغة ثم اضغط export

كما يمكنك طلب الصور من العميل على شكل مجلد ملفات لإختصار الجهد.

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

يحتمل أن ما يحدث هو بسبب الكاش فقط، جرب محوه عن طريق الأوامر: 
git rm -r --cached . git add . git commit -m "Update .gitignore" يحتمل أيضا أنك قد قمت مسبقا بدفعه ثم توقفت عن ذلك بعد اضافته الى gitignore، قد تحتاج حذفه من المستودع المحلي ثم البعيد (لا أقصد مجلد العمل) عن طريق تنفيذ الأوامر: 
git rm config/default.json git commit -m "Remove the file" git push -u origin main  

غالبا ما يتم تضمين مثل هاته الألعاب بوساطة iframes، يمكنك تضمين iframe اللعبة المرادة وتصييره كمكون، مثال: 
// في مكون React الذي يحمل اللعبة import React from 'react'; const GameComponent = () => { return ( <div> {/* ضبط ارتفاع الـ iframe بحسب حجم اللعبة */} <iframe src="https://example.com/your-game" width="100%" height="500px" frameborder="0"></iframe> </div> ); } export default GameComponent; قد تحتاج الاستعانة بمواقع مثل htmlgames لتزويدك بعناصر iframe جاهزة لعمل embed. 

الموقع عموما جيد، ولكن فيما يلي بعض الملاحظات: 
للوهلة الأولى يخيل للزائر أن اسم المطور مرفقا باسمه الوظيفي يعبر عن preloader وأن محتوى ما يتم تجهيزه لإظهاره، ولا يظهر إلا بصعوبة أن المحتوى يجب الإنزلاق إليه. أضف موجها أو سهما يشير إلى الأسفل مثلا. اختر لشريط التصفح لونا آخرا، لأنه يتداخل عند السكرول مع المحتوى ويظهر الشعار بشكل غير جيد.  الخط في قسم السيرة الذاتية يحتاج تكبيرا.  في قسم المهارات ضع أيقونات للمهارات التي لا يحدد لها ذلك، PHP أو XML مثلا. في قسم what i do هنالك الكثير من النصوص، تأكد من اقتضابها واختصارها أو ضف شروحات مصورة، صورا أو غرافيكات مثلا.  ضف المزيد من الروابط الخاصة بك وتأكد من توفير زر أو رابط للتواصل معك. -صحيح أنه توجد في صورة الهاتف ولكنها لا تظهر أنها أزرار حقيقية، اذ يخيل أنها صورة للهاتف وفقط-. أخرجها عن الهاتف قليلا، بحيث تكون بشكل متداخل يظهر احترافية التصميم.  ضف شريط تصفح في قائمة التصفح ليسهل استعراض المحتوى.  ضف زرا للعودة إلى الأعلى عند التصفح لأسفل المحتوى. 

فكرة نمط التوزيعة Repository pattern في أساسها هي فقط في فصل طبقة البيانات Data layer عن منطق العمل bussiness logic وباقي التطبيق، ويتم ذلك بوساطة واجهات تقوم بتجريد طلب البيانات وما الى ذلك، فبدل أن نكتب: 
public function index() { $tasks = Task::all(); return view('tasks.index', ['tasks' => $tasks]); } نكتب: 
class TaskController extends Controller { private TaskRepository $taskRepository; public function __construct(TaskRepositoryInterface $taskRepository) { $this->taskRepository = $taskRepository; } public function index() { $tasks = $this->taskRepository->getAllTasks(); return view('tasks.index', ['tasks' => $tasks]); } بحيث يكون كلاس التوزيعة المعنية كـ: 
<?php namespace App\Repositories; use App\Interfaces\TaskRepositoryInterface; use App\Models\Task; class TaskRepository implements TaskRepositoryInterface { public function getAllTasks() { return Task::all(); } انتبه الى انها تقوم بتطبيق واجهة TaskRepositoryInterface، هي الأخرى ستحتاج تصريح التوابع المعنية:
?php namespace App\Interfaces; interface TaskRepositoryInterface { public function getAllTasks(); } وهذه هي فكرة النمط باختصار. يمكنك تضمينه والتعامل معه بشكل عادي جدا.
أما بخصوص التطرق لها في دورة PHP فلا أظن أن ذلك متوفر، اذ يعنى مسار أنماط التصميم من دورة علوم الحاسب بكل هاته الجزئيات. 
ان كنت تقصده على وجه الخصوص فقد لا يكون من الضروري الملح، ولكن سيكون استزادة علم واطلاع. أما ان كنت تقصد أنماط التصميم ككل، فنعم، دراستها والاطلاع عليها سيقوم بإعطاءك دفعة لإنشاء برمجيات ذات جودة أعلى.

مرحبا مهند، 
أنقل سطر تضمين ملف auth.php إلى أعلى الصفحة وتحديد قبل المسار التالي: 
Route::get('/{user:username}' , [UserController::class, 'index'])->middleware('auth')->name('user_profile'); فيكون كاملا: 
require __DIR__.'/auth.php'; Route::middleware('auth')->group(function () { Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit'); Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update'); Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); }); Route::get('/explore' , [PostController::class, 'explore'])->name('explore'); Route::post('/p/{post:slug}/comment', [CommentController::class, 'store'])->name('store_comment')->middleware('auth'); Route::controller(PostController::class)->middleware('auth')->group(function(){ Route::get('/' , 'index')->name('home_page'); Route::get('/p/create', 'create')->name('create_post'); Route::post('/p/create', 'store')->name('store_post'); Route::get('/p/{post:slug}' , 'show')->name('show_post'); Route::get('/p/{post:slug}/edit' , 'edit')->name('edit_post'); Route::patch('/p/{post:slug}/update' , 'update')->name('update_post'); Route::delete('/p/{post:slug}/delete' , 'destroy')->name('delete_post'); }); Route::get('/{user:username}' , [UserController::class, 'index'])->middleware('auth')->name('user_profile'); ثم نفذ الأمر: 
php artisan route:clear لمحو التخزين المؤقت للمسارات، وأعد تشغيل artisan serve وسيعمل معك بشكل طبيعي.
ان كنت مشترك في دورة PHP في الأكاديمية، ففيما يلي تفاصيل المشكلة:
 

الخطأ الذي تحتويه الرسالة يشير إلى عدم تطابق التوقيع (signature) لدالة الـ useReducer مع الـ reducer الخاص بك. يبدو أن هناك عدم تطابق في نوع المعاملات الممررة عبر الـ useReducer.
يحتمل أن يكون ذلك بسبب أن الوظيفة reducerFunction تعيد undefined بشكل افتراضي، أضف استعلام return الى عبارة default: 
default: return state;

حسن، فيما يلي الطريقة الصحيحة لذلك: 
عدل ملف directives.js ليصبح: 
const globalexternal = { mounted: function (el) { el.placeholder = 'Global Custom Directive from external file' } } export default globalexternal; في ملف main.js قم باستيراد الموجه وسجله باستعمال التابع directive: 
import globalexternal from './directives' const app = createApp(App) app.directive('globalexternal' ,globalexternal) app.mount('#app') استعمل الموجه في أي ملف فرعي: 
<input v-globalexternal style="width: 370px" />