Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

أيوني من الصفر: تحرير مشروع أيوني الخاص بك

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by ahmedmetwaly (you can also view the original English article)

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

تعديل محتوى الصفحة

في الشروع في العمل مع أيوني، تعلمنا كيفية إنشاء أول مشروع الأيونية لدينا. الانتقال من هناك، في هذا البرنامج التعليمي، ونحن نذهب لتحرير واحدة من صفحات أنشأنا لتطبيقنا.

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

ionic project file opened in visual studio code

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

سنقوم بإجراء تغيير بسيط في التطبيق الأيوني لدينا، عن طريق تحرير الصفحة الرئيسية. للقيام بذلك، انتقل إلى ملف home.html في src/pages/home وإجراء التغييرات التالية على الملف:

مع القيام بذلك، انتقل إلى ملف home.scss، أيضا في src/pages/home، وإجراء التغييرات التالية:

هنا، غيرنا لون الخلفية للصفحة الرئيسية من الأبيض إلى الأسود عن طريق استهداف أيون المحتوى. هذا هو المكان الذي يوجد فيه محتوى الصفحة. بالإضافة إلى ذلك، استهدفنا أيضا عنصر رأس h2 وكذلك عناصر p (الفقرة) وغير لون النص لكلا الأبيض.

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

بمجرد تشغيل أي من هذه الأوامر بنجاح، يجب أن يقوم خادم التطوير المحلي الخاص بك بتدوير التطبيق الخاص بك، ويجب أن يبدو شيئا من هذا القبيل:

ionic cli command to serve app

هياكل الصفحة الأيونية

لذلك، تم تعديل الصفحة الرئيسية عن طريق تغيير النص بالإضافة إلى لون خلفية الصفحة. كيف فعلنا ذلك؟ يتكون مجلد الصفحة الرئيسية لدينا من ثلاثة ملفات: home.html، home.scss، و home.ts.

الملف home.ts هو ملف تيبسكريبت يتكون من مكون أنغلار مع ديكور المكون التالي:

يعمل ملف home.html كنموذج المكون، والذي يمكننا استخدامه لإجراء تغييرات على محتوى الصفحة الرئيسية. يتم تحديده مع المعلمة تمبلاتورل إلى ديكور المكون.

لتغيير نمط الصفحة الرئيسية، يمكننا استخدام كس أو سس في ملف home.scss.

إنشاء صفحات إضافية

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

سيؤدي هذا إلى إنشاء صفحة جديدة في مشروعك، مع الملفات info.html و info.ts و info.scss.

integrated terminal in visual studio code

بعد إنشاء الصفحة بنجاح، يجب أن تكون قادرا على رؤيتها تحت مجلد الصفحات في ملفات المشروع. من أجل أن تكون قادرة على استخدام هذه الصفحة التي تم إنشاؤها حديثا ضمن التطبيق لدينا، ونحن سوف تحتاج إلى تسجيل لأول مرة في ملف app.module.ts لدينا. يمكنك العثور على هذا في المجلد src/app.

أولا، أضف عبارة استيراد لملف مكون صفحة المعلومات بالقرب من أعلى app.module.ts.

يمكنك إضافة هذا في بيانات الاستيراد للصفحات الأخرى.

ثم، إضافة إنفوباج إلى التصريحات و إنتيركومبوننتس صفائف من وحدة التطبيق الخاص بك. يجب أن يبدو إعلانNgModule الآن كما يلي:

الملاحة في أيوني

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

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

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

أضافه زر تنقل

على سبيل المثال، مع إنشاء صفحتنا بنجاح وتسجيلها في التطبيق لدينا، دعونا إعداد الملاحة إلى الصفحة التي تم إنشاؤها حديثا من الصفحة الرئيسية.

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

يحدد الرمز أعلاه مكون أيوني، أي زر أيون. وفي وقت لاحق سنضيف معالج نقرات حتى عند الضغط على هذا الزر، سوف ننتقل إلى صفحة المعلومات.

يجب ان تبدو الصفحة الرئيسية مشابهه لهذا الآن:

ionic serve command reflecting page changes

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

بعد ذلك، دعونا نمضي قدما ونعلن وظيفة كتبنا أعلاه، نافيغتوينفو ()، في ملف home.ts لدينا. أولا، استيراد المساعد نافكونترولر من مكتبة الأساسية الأيونية الزاوي. نافكونترولر يسمح لنا لإدارة الملاحة في تطبيق الأيونية لدينا، ونحن سوف استخدامه لدفع صفحة المعلومات على رأس الصفحة الرئيسية عند النقر على زر.

سنحتاج أيضا إلى استيراد مكون إنفوباج. ضع هذه الأسطر في أعلى ملف home.ts.

بعد ذلك، سنقوم بتعديل مكون الصفحة الرئيسية لتلقي مثيل نافكونترولر عن طريق حقن التبعية. تغيير منشئ الصفحة الرئيسية إلى ما يلي:

وأخيرا، يمكننا أن نعلن الدالة نافيغتوينفو داخل عنصر هوميباج لدينا.

كل ما نقوم به هو دفع إشارة إلى مكون صفحة المعلومات إلى نافكونترولر.

تحديث صفحة المعلومات

مع ما سبق كاملة، انتقل إلى صفحة info.html، وإضافة رأس جديد إلى أيون المحتوى. ربما شيء مثل هذا رائع ... .

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

navigation in ionic

تهانينا! لقد نجحت في إنشاء صفحة جديدة والتنقل إليها. لا تتردد في تكرار هذه العملية وإنشاء صفحات أخرى ضمن هذا المشروع التجريبي.

استنتاج

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

أثناء وجودك هنا، تحقق من بعض من مشاركاتنا الأخرى حول تطوير التطبيق أيوني!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.