هل سبق لك إنشاء تطبيقات لا ترغب في استخدامها بنفسك؟

عندما كنت مطور تطبيقات مبتدئ، كنت أقوم بإنشاء واجهات مستخدم فوضوية.

في بعض الأحيان، عند النظر إلى واجهات المستخدم تلك، كنت أفكر "من في العالم قد يرغب في استخدام هذا؟ يبدو الأمر فظيعًا".

في أحيان أخرى، كان هناك "شيء ما" لا أستطيع الإشارة إليه.

بينما كنت أحصل على تصميمات مصقولة مذهلة من فريق التصميم، لم تكن تطبيقاتي تبدو جيدة حتى بنسبة 20%.

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

ما هو هذا الشيء المذهل الذي يسمى نظام التصميم؟

من الضروري أن نفهم ما هو نظام التصميم حتى نتمكن من فهم سبب حاجتنا إليه.

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

إليك بعض فوائد وجود نظام تصميم:

• واجهات المستخدم المتسقة: لن تحتوي واجهتك على تلك الفجوات الغريبة هنا وهناك دون سبب. سيبدو الشكل والمظهر موحدًا عبر جميع الأجهزة.

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

• تطبيقات قابلة للتطوير: مع نمو التطبيق، يساعد نظام التصميم في إعادة استخدام المكونات بدلاً من البناء من الصفر.

• التركيز على التطوير: لم تعد بحاجة إلى التأكيد على ما إذا كان الزر يجب أن يكون أخضر أم أزرق. بدلاً من ذلك، عليك التركيز على ما يهم.

الأدوات والمكتبات

على الرغم من وجود عدد كبير من مكتبات React Native UI، فإنني أستخدم أسلوبًا مخصصًا لأنني مررت بتجارب مروعة مع معظمها فيما يتعلق بالأداء والأخطاء.

المكتبة الوحيدة التي أعتمد عليها في نهجي هي مسائل حجم التفاعل الأصلي.

الآن قبل أن تصرخ "الحجم لا يهم!"، دعني أؤكد لك أنه مهم. خاصة عندما يتعلق الأمر بتطبيقات الأجهزة المحمولة.

لا تريد أن يفتح المستخدمون تطبيقك، ويرون شعارًا عملاقًا يغطي كل شيء، ويفكروا "ما الأمر القبيح..." قبل أن يقوموا بالحذف دون حتى أن يحاولوا لأن شعارك يخفي الزر.

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

إعداد الموضوع

أحد أول الأشياء التي أحددها هو رموز التصميم الأساسية الخاصة بي. هذه هي اللبنات الأساسية لنظام التصميم الخاص بي. وتشمل هذه لوحات الألوان، والطباعة، والمسافات، وأحجام الخطوط.

أقوم بذلك عن طريق إنشاء ملف theme.ts بالكود التالي:

import {moderateScale} from 'react-native-size-matters';

// after installing custom fonts:
export const FontFamily = {
  bold: 'Poppins-Bold',
  semibold: 'Poppins-SemiBold',
  medium: 'Poppins-Medium',
  regular: 'Poppins-Regular',
  thin: 'Poppins-Thin',
};

const colors = {
  primary100: '#2E2C5F',
  primary80: '#524DA0',
  primary60: '#736DDF',
  primary40: '#A09BFF',
  primary20: '#DCDAFF',

  secondary100: '#484A22',
  secondary80: '#858945',
  secondary60: '#D9DF6D',
  secondary40: '#F8FCA1',
  secondary20: '#FDFFD4',

  neutral100: '#131218',
  neutral90: '#1D1C25',
  neutral80: '#272631',
  neutral70: '#343341',
  neutral60: '#3E3D4D',
  neutral50: '#53526A',
  neutral40: '#757494',
  neutral30: '#9C9AC1',
  neutral20: '#CBC9EF',
  neutral10: '#E8E7FF',
  white: '#fff',
  black: '#222',

  error: '#E7002A',
  success: '#3EC55F',
  warning: '#FECB2F',
  info: '#157EFB',
};

const theme = {
  colors,
  fontSizes: {
    xxl: moderateScale(32),
    xl: moderateScale(28),
    lg: moderateScale(24),
    md: moderateScale(20),
    body: moderateScale(17),
    sm: moderateScale(14),
    xs: moderateScale(12),
    xxs: moderateScale(10),
    xxxs: moderateScale(8),
  },
  spacing: {
    none: 0,
    xxs: moderateScale(4),
    xs: moderateScale(8),
    md: moderateScale(12),
    lg: moderateScale(16),
    xl: moderateScale(20),
    xxl: moderateScale(24),
    xxxl: moderateScale(28),
  },
};

export default theme;

إنشاء مكونات قابلة لإعادة الاستخدام

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

على سبيل المثال، إليك كيفية إنشاء مكون Box:

import {
  View,
  type ViewProps,
  type FlexAlignType,
  type ViewStyle,
} from 'react-native';
import theme from '../styles/theme/theme';

export interface IBox extends ViewProps {
  backgroundColor?: keyof typeof theme.colors;
  p?: keyof typeof theme.spacing;
  pv?: keyof typeof theme.spacing;
  ph?: keyof typeof theme.spacing;
  pt?: keyof typeof theme.spacing;
  pb?: keyof typeof theme.spacing;
  pl?: keyof typeof theme.spacing;
  pr?: keyof typeof theme.spacing;
  m?: keyof typeof theme.spacing;
  mv?: keyof typeof theme.spacing;
  mh?: keyof typeof theme.spacing;
  mt?: keyof typeof theme.spacing;
  mb?: keyof typeof theme.spacing;
  ml?: keyof typeof theme.spacing;
  mr?: keyof typeof theme.spacing;
  gap?: number;
  flex?: number;
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  alignItems?: FlexAlignType;
  justifyContent?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';
  rounded?: boolean;
}

export default function Box({
  backgroundColor,
  p,
  pv,
  ph,
  pt,
  pb,
  pr,
  pl,
  m,
  mv,
  mh,
  mt,
  mb,
  ml,
  mr,
  children,
  style,
  flex,
  alignItems,
  justifyContent,
  flexDirection = 'column',
  rounded = false,
  gap = undefined,
  ...rest
}: IBox) {
  const getMargin = () => {
    const obj: any = {};

    if (m) {
      obj.margin = theme.spacing[m];
      return obj;
    }
    if (mt) obj.marginTop = mt ? theme.spacing[mt] : 0;
    if (mb) obj.marginBottom = mb ? theme.spacing[mb] : 0;
    if (ml) obj.marginLeft = ml ? theme.spacing[ml] : 0;
    if (mr) obj.marginRight = mr ? theme.spacing[mr] : 0;
    if (mv) obj.marginVertical = theme.spacing[mv];
    if (mh) obj.marginHorizontal = theme.spacing[mh];
    return obj;
  };

  const getPadding = () => {
    const obj: any = {};

    if (p) {
      obj.padding = theme.spacing[p];
      return obj;
    }

    if (pt) obj.paddingTop = pt ? theme.spacing[pt] : 0;
    if (pb) obj.paddingBottom = pb ? theme.spacing[pb] : 0;
    if (pl) obj.paddingLeft = pl ? theme.spacing[pl] : 0;
    if (pr) obj.paddingRight = pr ? theme.spacing[pr] : 0;
    if (pv) obj.paddingVertical = theme.spacing[pv];
    if (ph) obj.paddingHorizontal = theme.spacing[ph];

    return obj;
  };

  const boxStyles: ViewStyle[] = [
    {
      backgroundColor: backgroundColor
        ? theme.colors[backgroundColor]
        : undefined,
      flex,
      justifyContent,
      alignItems,
      flexDirection,
      borderRadius: rounded ? 10 : 0,
      gap,
    },
    getMargin(),
    getPadding(),
    style,
  ];

  return (
    
      {children}
    
  );
}

أستخدم مكون Box هذا الذي تم إنشاؤه حديثًا كبديل للعرض. يتيح لي تصميمه بسرعة من خلال الدعائم (وتقديم اقتراحات إذا كنت تستخدم الآلة الكاتبة) مثل:

إليك مثال لكيفية إنشاء مكون الطباعة الذي أستخدمه بدلاً من مكون نص React Native:

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    
      {children}
    
  );
}

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

ربط موضوع الاستخدام المخصص

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

من أجل القيام بذلك، أستخدم واجهة برمجة التطبيقات الخاصة بـ React لتمرير السمة الخاصة بي في التطبيق.

أقوم بإنشاء ملف ThemeProvider.tsx ومن الداخل قم بتعريف ThemeContext وThemeProvider لتغليف مكون التطبيق الخاص بي بداخله. إليك الكود:

import React, {type PropsWithChildren, createContext} from 'react';
import theme from './theme';

export const ThemeContext = createContext(theme);

export default function ThemeProvider({children}: PropsWithChildren) {
  return (
    {children}
  );
}

ثم، داخل مكون التطبيق الخاص بي:

export default function App() {
  return (
    
      
    
  );
}

الآن بعد أن أصبح لدى تطبيقي بالكامل حق الوصول إلى ThemeContext، قمت بإنشاء خطاف useTheme الخاص بي:

import {useContext} from 'react';
import {ThemeContext} from '../styles/theme/ThemeProvider';

export default function useTheme() {
  const theme = useContext(ThemeContext);
  return theme;
}

الآن يمكنني الوصول إلى المظهر الخاص بي في أي مكان عن طريق استدعاء خطاف useTheme كما يلي:

const theme = useTheme();
// example usage:
theme.colors.primary100;
theme.spacing.md;
theme.fontSizes.lg;

الوضع المظلم

لتنفيذ الوضع الداكن، في ملف theme.ts، أقوم بإضافة لوحة ألوان أخرى تحتوي على ألوان الوضع الداكن.

export const darkTheme = {
  // define dark mode colors here keeping the keys same as the light mode only changing the values.
}

ثم، في ThemeProvider، أقوم ببساطة بالتحقق من إعدادات المستخدم وتبديل السمة كما يلي:

import {useColorScheme} from 'react-native';

export default function ThemeProvider({children}: PropsWithChildren) {

const isDarkMode = useColorScheme() === 'dark';

  return (

    {children}

  );

}

خاتمة

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

أنا أشجعك على تجربة هذا الأسلوب وأخبرني برأيك في التعليقات. ربما تحسينه قليلا إيه؟