دليل المبتدئين حول كيفية تصميم تطبيقات الجوال Ionic 2

مرحبا شباب! في هذا المنشور ، سوف أخطرك خطوة بخطوة خلال الأساسيات المتطرفة حول كيفية تصميم تطبيق Ionic 2 باستخدام SCSS.

لتحقيق أقصى استفادة من هذا العرض ، سيكون من الجيد الحصول على بعض المعرفة المسبقة بـ CSS و Ionic ، لكن هذا ليس ضروريًا. إذا لم تكن معتادًا على إطار عمل Ionic 2 ، أقترح مراجعة وثائق Ionic 2.

تجول

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

من أجل تثبيت المكونات الإضافية اللازمة ، نحتاج إلى البدء في العمل مع Ionic ، نحتاج إلى تنزيل NodeJS وتثبيته. بعد ذلك ، يمكنك تثبيت Cordova و Ionic من جهازك عن طريق تشغيل هذا الأمر:

تثبيت npm $ -g cordova

سنحتاج أيضًا إلى تثبيت Typescript ، وهي اللغة التي تم تصميم Ionic 2 بها. قم بتشغيل هذا الأمر:

$ npm install -g typescript

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

سقالة تطبيق علامات تبويب Ionic 2 عن طريق تشغيل هذا الأمر في الجهاز:

$ الأيونية تبدأ myTabs علامات التبويب - v2

ستحصل على تطبيق يحتوي على علامات تبويب حتى تتمكن من التنقل بين طرق العرض المختلفة. يمكنك اختباره في المتصفح عن طريق كتابة هذا في محطة الخاص بك!

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

تغيير سمة اللون مع الألوان $

افتح التطبيق في محرر نصوص. (أستخدم WebStorm IDE بواسطة Jetbrains راجع للشغل)

ثم ابدأ بالانتقال إلى هذا الملف:

SRC / موضوع / variables.scss

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

لتوضيح كيفية عمله ، استبدل ببساطة اللون السداسي في اللون الأساسي بـ "أحمر" على سبيل المثال.

وسوف يؤدي إلى هذا:

يتم الآن تعيين جميع المكونات التي تستخدم اللون الأساسي إلى اللون الأساسي ، وهو اللون الأحمر.

يمكنك بسهولة استخدام هذه الألوان في أي مكون. سأريكم الآن كيف يمكنك فعل ذلك!

انتقل إلى هذا الملف:

SRC / صفحة / الوطن / home.scss

في هذا الملف ، نضيف SCSS الخاصة بالصفحة ، بمعنى أن الأنماط التي تضيفها هنا سيتم تطبيقها فقط على الصفحة الرئيسية.

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

هذه نتيجة ذلك:

لون h2 هو الآن أحمر أيضا! نجاح المهمة!

نظرًا لأنك ربما تكون قد اكتشفت الآن ، يمكنك أيضًا استخدام أيٍ من المفاتيح في متغير الألوان $. جرب اللعب معها قليلاً ، حتى يمكنك إضافة بعض الأشياء الجديدة!

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

التغلب على المتغيرات الأيونية

في "src / theme / variables.scss" ، يمكنك تغيير الكثير من التصميمات مسبقة الصنع من Ionics. على سبيل المثال ، نريد تغيير لون شريط الأدوات الذي صممه لنا أيوني. يمكننا الانتقال إلى وثائق Ionic 2 والبحث عن "شريط الأدوات". إذا قمت بالتمرير إلى أسفل قليلاً تجد "خلفية شريط الأدوات" ، هذا ما نحتاجه. هنا يمكنك أن ترى أن لون السمة الافتراضية قد تم ضبطه على "# f8f8f8".

سنقوم بتغيير لون شريط الأدوات هذا إلى لوننا الأساسي. انتقل إلى ملف "variables.scss" وأضف هذا:

$ toolbar-background: map-get (ألوان $ ، أساسي) ؛

وفويلا ، ستصبح جميع خلفيات شريط الأدوات في تطبيقك لوننا الأساسي ، والذي سبق أن حددناه على اللون الأحمر!

حسنًا ، لكن ماذا لو كنت تعتقد أن شريط الأدوات صغير جدًا؟ وتريد زيادة ارتفاعه؟ يمكنك القيام بذلك بطريقة مشابهة للغاية!

انتقل إلى صفحة Overriding Variables في وثائق Ionic 2 وابحث عن ارتفاع شريط الأدوات.

في الجزء السفلي ، يمكنك رؤية ارتفاع شريط الأدوات $-ios-height ، وشريط الأدوات-md-height و $ شريط الأدوات-wp-height. هذه هي أشرطة الأدوات المختلفة لجميع المنصات الثلاثة التي تقوم بتطويرها من أجل! ios = Iphone ، md = Android و wp = Windows Phone. لاختباره ، اختر شريط أدوات iOS ووضعه في "variable.scss" وقم ببساطة بتعيين قيمة جديدة له ، مثل هذا:

سينتج عن هذا:

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

يمكنك أيضًا أن تتفاجأ في إعادة تكوين جيثب Ionic 2 للعناصر المختلفة ومعرفة المتغيرات الموجودة فيها.

الاستفادة من تصميم منصة مخصصة محددة

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

لإثبات ذلك ، سنقوم بتغيير لون النص

على نظام التشغيل iOS.

انتقل إلى هذا الملف:

SRC / التطبيق / app.scss

هنا يمكنك إضافة متغيرات SCSS العالمية. وهذا يعني أن الأنماط التي وضعت هنا سيتم تطبيقها على التطبيق بأكمله.

لجعل نص "

" على نظام التشغيل iOS أخضرًا ، ما عليك سوى إضافة SCSS إلى هذا الملف:

.ios
  ع
    الون الاخضر؛
  }
}

وهذا سوف يؤدي إلى هذا! :)

أعتقد أن هذا هو بسهولة واحدة من أكثر السمات قيمة التي يجلبها Ionic 2.

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

سأنهي رحلتي هنا ، وأتركك لها! حاول اللعب قدر الإمكان ، وهناك الكثير لتتعرف عليه حول Ionic 2. لقد غطيت أساسيات التصميم.

لكن تذكر ، عندما تفهم كيفية القيام بكل هذا ، ستتمكن من الجمع بين كل الأشياء لإنشاء تطبيقات جيدة المظهر حقًا!

سأقوم بوظائف مماثلة في المستقبل حول الجوانب الأخرى لإطار عمل Ionic 2 ، مثل كيفية استهلاك Api ، واختبار E2E وغيرها من الأشياء الممتعة.

لقد دفعت نتيجة هذا التجول إلى جيثب إذا كنت تريد التحقق من ذلك!

اراك قريبا!