بناء تطبيق متتبع لفيروس كورونا في 3 أيام: دليل شامل باستخدام Ionic و Firebase

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

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

المتطلبات الأساسية لبدء رحلة التطوير

تطوير التطبيقات الهجينة متاح لجميع أنواع المطورين بغض النظر عن مكدسهم التقني. نظراً لأننا سنعتمد على الركائز الأساسية لتطوير الويب – HTML و CSS و JavaScript – في جوهر عملنا، ستتمكنون من فهم العملية والتقنيات بسهولة. لذا، فإن هذا الدليل موجه لكل من لديه فهم أساسي لمبادئ الويب.

اليوم 0: الفكرة، التخطيط، والهندسة المعمارية

الفكرة الأولية وتحديد مصدر البيانات

في مارس 2020، كنت أبحث عن أحدث حالات COVID-19 من حولي، ووجدت العديد من الروابط التي تظهر أرقاماً متفاوتة. أدركت حينها أن البيانات المتوفرة من https://github.com/backtrackbaba/covid-api يتم تحديثها بانتظام وتتميز بدقة أعلى. لذلك، قررت تطوير حل محمول عالمي، صغير، وعملي بالاعتماد على البيانات المقدمة من جامعة جونز هوبكنز.

خطة التطوير الشاملة

خططت لتطوير حل محمول متعدد المنصات يمكن الوصول إليه عالمياً. وقع اختياري على إطار عمل Ionic الذي سيمكنني من تطوير تطبيق لأنظمة Android و iOS وتطبيق ويب تقدمي (PWA) من خلال كتابة وصيانة قاعدة كود واحدة. كما أردت عرض حالات فيروس COVID-19 حول العالم وفي كل دولة على حدة من خلال رسوم بيانية وتوضيحات متنوعة.

الهندسة المعمارية للتطبيق: تصميم الألسنة

تمحورت الفكرة حول تطوير خمسة ألسنة (تبويبات) منفصلة تظهر في الجزء السفلي من التطبيق، وهي كالتالي:

• العالم (World): لعرض لوحة معلومات COVID-19 العالمية.
• الدولة (Country): للسماح للمستخدم باختيار دولة معينة والتحقق من الحالات فيها.
• الأخبار (News): لجلب أحدث الأخبار المتعلقة بجائحة فيروس كورونا.
• الإرشادات (Guidelines): لقراءة ومشاهدة جميع الإرشادات والتوجيهات.
• المساعدة (Help): لتقديم المساعدة وإرسال الملاحظات.

مكدس التقنيات المستخدمة (Technology Stack)

على الرغم من خبرتي السابقة في تطوير المواقع والتطبيقات باستخدام Angular و Ionic، رغبت هذه المرة في استكشاف واستخدام React.js. تتطلب عملية التطوير تثبيت المكتبات التالية باستخدام مدير حزم Node (npm):

• React.js: يتضمن أحدث react-hooks.
• Ionic Framework (الإصدار 4) مع Capacitor.
• بيئة Node.js: لدعم مكتبات JavaScript و npm.
• لغة TypeScript: لكتابة الكود الفعلي (ملفات .tsx).
• Chart.js: لإنشاء الرسوم البيانية المتنوعة.
• Firebase: لاستضافة المحتوى (خاصة لتطبيق الويب التقدمي PWA).

الأدوات البرمجية الأساسية

لإنجاز هذا المشروع، ستحتاجون إلى الأدوات التالية:

• VS Code (محرر الأكواد).
• Google Chrome (للتصفح والاختبار).
• Android Studio (لتطوير تطبيقات Android).
• Xcode (لتطوير تطبيقات iOS، متاح فقط على أجهزة Apple).

التثبيت والإعداد الأولي للمشروع (Scaffolding)

للبدء، نحتاج إلى تثبيت وتكوين جميع البرامج والأطر المذكورة أعلاه. لنبدأ بمجموعة الأوامر الطرفية الأولى (سواء كنت تستخدم Mac أو Linux أو Windows):

1. تثبيت Ionic CLI عالمياً:

   npm install -g @ionic/cli native-run cordova-res

   يقوم هذا الأمر بتثبيت واجهة سطر الأوامر الخاصة بـ Ionic والمكتبات المساعدة بشكل عام على نظامك.

2. إنشاء تطبيق React مع Capacitor:

   ionic start corona-tracker tabs --type=react --capacitor

   ينشئ هذا الأمر مشروع Ionic React جديداً باسم corona-tracker مع قالب tabs ودعم Capacitor.

3. إضافة React Hooks وعناصر PWA:

   npm install @ionic/react-hooks @ionic/pwa-elements

   تثبيت المكتبات اللازمة لدعم React Hooks وعناصر تطبيقات الويب التقدمية.

بعد ذلك، افتح مجلد corona-tracker في بيئة عملك الافتراضية. ستجد جميع ملفات HTML و CSS وملفات .tsx الافتراضية مع المجلدات الفرعية الأخرى بالترتيب الصحيح.

الآن، انتقل إلى مجلد التطبيق وقم بتشغيل هذين الأمرين:

cd corona-tracker
ionic serve

تهانينا! تطبيق Ionic الخاص بك يعمل الآن في متصفح الويب. انقر على خيار localhost في الطرفية للتحقق. هذا هو التثبيت والإعداد الأولي لتطبيقك. حتى الآن، يجب أن يكون تطبيق ionic-react الخاص بك يعمل في متصفحك المحلي. تعتبر ملفات index.html و index.tsx هي الصفحات الأولى لتطبيقات الصفحة الواحدة (SPAs).

توجيه الصفحات (App Routing)

لنضف الآن التوجيه إلى تطبيقنا، مما سيتيح لنا زيارة جميع الألسنة الخمسة المختلفة التي شرحناها سابقاً. افتح ملف App.tsx وأضف الموجه التالي داخل المكونات الرئيسية:

<IonTabs>
  <IonRouterOutlet>
    <Route path="/world" component={WorldTab} exact={true} />
    <Route path="/country" component={CountryTab} exact={true} />
    <Route path="/news" component={NewsTab} />
    <Route path="/guidelines" component={GuidelinesTab} />
    <Route path="/help" component={HelpTab} />
    <Route path="/" render={() => <Redirect to="/world" />} exact={true} />
  </IonRouterOutlet>
  <IonTabBar slot="bottom">
    <IonTabButton tab="WorldTab" href="/world">
      <IonIcon icon={planet} />
      <IonLabel>World</IonLabel>
    </IonTabButton>
    <IonTabButton tab="CountryTab" href="/country">
      <IonIcon icon={home} />
      <IonLabel>Country</IonLabel>
    </IonTabButton>
    <IonTabButton tab="NewsTab" href="/news">
      <IonIcon icon={newspaper} />
      <IonLabel>News</IonLabel>
    </IonTabButton>
    <IonTabButton tab="GuidelinesTab" href="/guidelines">
      <IonIcon icon={informationCircleOutline} />
      <IonLabel>Guidelines</IonLabel>
    </IonTabButton>
    <IonTabButton tab="HelpTab" href="/help">
      <IonIcon icon={call} />
      <IonLabel>Help</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

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

اليوم 1: تطوير لوحة معلومات COVID-19 وعلامة تبويب الإرشادات

في هذا الجزء من العملية، سنقوم بتطوير علامتي التبويب “العالم” و “الإرشادات” لتطبيق Ionic React الهجين الخاص بنا. لقد أنجزنا حتى الآن التثبيت الأساسي والإعداد الأولي للتطبيق، وأضفنا 5 ألسنة مختلفة مع التوجيه الخاص بها.

علامة تبويب “العالم” (World Tab): التصميم

لنقم ببناء صفحتنا الرئيسية، علامة تبويب “العالم”. قررت تقسيم هذه العلامة التبويب إلى أربعة أقسام مختلفة:

• أربعة مربعات منفصلة لعرض الأرقام الفعلية: الإجمالي، الحالات النشطة، المتعافون، والوفيات.
• رسم بياني دائري (Pie Chart) يوضح عدد الحالات.
• شرائح عرض (سلايد شو) لنصائح صحية أساسية.
• قائمة بجميع الدول مرتبة تنازلياً حسب الفئات المذكورة.

علامة تبويب “العالم”: البيانات وواجهة برمجة التطبيقات (API)

لقد قمت بدراسة مصدر Postman API مفتوح المصدر الذي يحتوي على جميع واجهات برمجة التطبيقات (APIs) المتعلقة بحالات كورونا: https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest.

أولاً، سنقوم باستهلاك واجهة برمجة التطبيقات العالمية (global API) باستخدام مكتبة Axios للحصول على إجمالي عدد الحالات العالمية في العالم، وذلك باستخدام React-hooks مثل useState و useEffect.

const [data, setData] = useState<IGLobalCount>();
const [showLoading, setShowLoading] = useState(true);

useEffect(() => {
  const getGlobalData = async () => {
    //latest global count
    const result = await axios('https://covidapi.info/api/v1/global');
    // console.log(result);
    setData(result.data);
    setShowLoading(false);
  };
  getGlobalData();
}, []);

ثم قم بتعيين البيانات داخل كتلة return باستخدام HTML:

<IonRow class="casesBox">
  <IonCol class="totalCases">
    Total <AddNumFunc a={confirmed} b={recovered} c={deaths} />
  </IonCol>
  <IonCol class="confirmedBox">
    Confirmed {confirmed?.toLocaleString()}
  </IonCol>
  <IonCol class="recoveredBox">
    Recovered {recovered?.toLocaleString()}
  </IonCol>
  <IonCol class="deathsBox">
    Deaths {deaths?.toLocaleString()}
  </IonCol>
</IonRow>

الآن، لدينا المربعات الأربعة المتجاوبة الأولى التي تحتوي على إجمالي الحالات، الحالات المؤكدة، المتعافين، والوفيات.

قم بتثبيت chart.js في مشروعك باستخدام الأمر npm install react-chartjs-2. لنستفد من نفس البيانات لرسم مخطط دائري (PieChart).

import axios from 'axios';
import { Pie } from 'react-chartjs-2';

<IonCard class="pieCard">
  <Pie
    data={GlobalCasesPieChart}
    options={{
      legend: {
        display: true,
        position: 'bottom',
      },
      plugins: {
        datalabels: {
          anchor: 'end',
          clamp: 'true',
          align: 'bottom',
          color: 'black',
          labels: {
            title: {
              font: { weight: 'bold' }
            }
          }
        }
      }
    }}
  />
</IonCard>

الآن، لدينا قسمان من الأقسام الأربعة في علامة تبويب “العالم”. بعد ذلك، لنضف عرض شرائح (slideshow) يوضح نصائح صحية عامة.

<IonSlides class="tipsSlides" options={slideOpts}>
  <IonSlide class="slide">
    Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing.
  </IonSlide>
  <IonSlide class="slide">
    Regularly and thoroughly clean your hands with an alcohol-based hand rub or wash them with soap and water.
  </IonSlide>
  <IonSlide class="slide">
    If you have fever, cough and difficulty breathing, seek medical care early.
  </IonSlide>
  <IonSlide class="slide">
    Avoid touching eyes, nose and mouth. #StayHomeStaySafe
  </IonSlide>
  <IonSlide class="slide">
    WHO Health Alert brings COVID-19 facts to billions via WhatsApp.
  </IonSlide>
</IonSlides>

الآن، لنقم بإنشاء جدول بيانات لجميع الدول بترتيب تنازلي لعرض جميع أنواع الحالات. مرة أخرى، سنستهلك أحدث واجهة برمجة تطبيقات (API) باستخدام مكتبة Axios للحصول على العدد الإجمالي العالمي لجميع الدول في العالم باستخدام React-hooks مثل useState و useEffect.

const [countryWiseData, setCountryWiseData] = useState<ICountry[]>([]);

useEffect(() => {
  const getGlobalCountryData = async () => {
    //latest global country wise count
    const result = await axios('https://covidapi.info/api/v1/global/latest');
    //console.log(result.data.result);
    let sortedResult = result.data.result;
    sortedResult.sort((a: Object, b: Object) => {
      return (
        Object.values(a)[0].confirmed > Object.values(b)[0].confirmed
          ? -1
          : Object.values(b)[0].confirmed > Object.values(a)[0].confirmed
          ? 1
          : 0
      );
    });
    setCountryWiseData(sortedResult);
  };
  getGlobalCountryData();
}, []);

لقد أكملنا تطوير علامة التبويب الرئيسية الخاصة بنا بجميع الأقسام الأربعة المذكورة أعلاه. يمكنكم رؤيتها أدناه:

علامة تبويب الإرشادات (Guidelines Tab)

الآن، لننتقل إلى تطوير علامة التبويب التالية – علامة تبويب الإرشادات. هذه العلامة التبويب معلوماتية وثابتة، وتقدم نصائح وإرشادات متنوعة صادرة عن منظمة الصحة العالمية (WHO) والحكومات المحلية. لقد أضفنا هنا صوراً ومقاطع فيديو مختلفة في HTML:

<IonList>
  <IonCard>
    <iframe
      title="WHO"
      width="100%"
      height="200"
      src="https://www.youtube.com/embed/5jD2xd3Cv80"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    ></iframe>
  </IonCard>
  <IonCard>
    <IonCardHeader>Symptoms</IonCardHeader>
    <IonImg class="guidlineImages" src="assets/images/Symptoms2.png"></IonImg>
  </IonCard>
  <IonCard>
    <IonCardHeader>Diseases</IonCardHeader>
    <IonImg class="guidlineImages" src="assets/images/Symptoms.png"></IonImg>
  </IonCard>
  <IonCard>
    <IonCardHeader>Myths Busted</IonCardHeader>
    <IonImg class="guidlineImages" src="assets/images/Myth.jpeg"></IonImg>
  </IonCard>
  <IonCard>
    <IonCardHeader>Stress Distraction Tips</IonCardHeader>
    <IonImg class="guidlineImages" src="assets/images/Stress.jpg"></IonImg>
  </IonCard>
  <IonCard>
    <IonCardHeader>Stay Home</IonCardHeader>
    <IonImg class="guidlineImages" src="assets/images/SafeHands.jpeg"></IonImg>
  </IonCard>
</IonList>

بهذا نكون قد أكملنا عمل اليوم الثاني.

اليوم 2: تطوير علامتي تبويب “الدولة” و “الأخبار”

في هذا الجزء، سنقوم بتطوير علامتي تبويب “الدولة” و “الأخبار” لتطبيق Ionic React الهجين الخاص بنا. لقد قمنا حتى الآن ببناء علامتي تبويب “العالم” و “الإرشادات” في تطبيقنا مع التوجيه الأساسي.

علامة تبويب “الدولة” (Country Tab): التصميم

لنقم ببناء صفحتنا الثانية، علامة تبويب “الدولة”. قررت تقسيم هذه العلامة التبويب إلى أربعة أقسام مختلفة:

• قائمة منسدلة لاختيار الدولة التي ترغب بها.
• أربعة مربعات مختلفة لعرض الأرقام الفعلية: الإجمالي، الحالات النشطة، المتعافون، والوفيات في الدولة المختارة.
• رسم بياني حلقي (Doughnut Chart) يوضح عدد الحالات في الدولة المختارة.
• اتجاه أسبوعي للحالات في الدولة المختارة.

علامة تبويب “الدولة”: البيانات وواجهة برمجة التطبيقات (API)

لقد قمت بدراسة رابط Postman مفتوح المصدر الذي يحتوي على جميع واجهات برمجة التطبيقات (APIs) المتعلقة بحالات كورونا: https://documenter.getpostman.com/view/2568274/SzS8rjbe?version=latest. هنا، سنستهلك واجهة برمجة التطبيقات الخاصة بالدول (country API) باستخدام مكتبة Axios للحصول على العدد الإجمالي في الدولة المختارة، وذلك باستخدام React-hooks مثل useState و useEffect. سنقوم بتخزين الدولة التي اختارها المستخدم في التخزين المحلي (local storage) لتحديث الرسوم البيانية الأخرى.

import moment from 'moment';
import axios from 'axios';
import { Doughnut, Bar } from 'react-chartjs-2';

const [yourCountry, setYourCountry] = useState<string>('IND');
Storage.set({ key: 'yourCountry', value: yourCountry });

const [countryData, setcountryData] = useState<ICountryCount>();
const [showLoading, setShowLoading] = useState(true);

useEffect(() => {
  const getCountryData = async () => {
    let result: any = '';
    const { value } = await Storage.get({ key: 'yourCountry' });
    if (value) {
      result = await axios('https://covidapi.info/api/v1/country/' + value + '/latest');
    } else {
      result = await axios('https://covidapi.info/api/v1/country/' + yourCountry + '/latest');
    }
    // console.log(result);
    setcountryData(result.data.result);
    setShowLoading(false);
  };
  getCountryData();
}, [yourCountry]);

الآن، لنستهلك واجهة برمجة التطبيقات للحصول على البيانات الخاصة بالدولة:

const [countryTimeSeriesData, setcountryTimeSeriesData] = useState<ISeriesCases[]>([]);
let endDate: string = new Date().toISOString().split('T')[0];
let todaysDate = new Date();
let startDate: string = new Date(todaysDate.getTime() - (5 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0];

useEffect(() => {
  const getCountryTimeSeriesData = async () => {
    const result = await axios(
      'https://covidapi.info/api/v1/country/' + yourCountry + '/timeseries/' + startDate + '/' + endDate
    );
    // console.log(result);
    setcountryTimeSeriesData(result.data.result);
    setShowLoading(false);
  };
  getCountryTimeSeriesData();
}, [yourCountry, endDate, startDate]);

الآن، لنصمم الرسم البياني الحلقي (Doughnut) ورسم بياني الاتجاه الشريطي (Bar trend chart):

<IonCard>
  <Doughnut
    data={CountryDoughnutChart}
    options={{
      legend: {
        display: true,
        position: 'right'
      },
      plugins: {
        datalabels: {
          anchor: 'bottom',
          clamp: 'true',
          align: 'end',
          color: 'black',
          labels: {
            title: {
              font: { weight: 'bold', size: 10 }
            }
          }
        }
      }
    }}
  />
</IonCard>

<Bar
  data={countryBarChart}
  options={{
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    },
    title: {
      display: true,
      text: 'Cases in the current week',
      fontSize: 15
    },
    legend: {
      display: true,
      position: 'bottom'
    },
    plugins: {
      datalabels: {
        display: false
      }
    }
  }}
/>

احفظ الملف وتحقق منه في المتصفح. أخيراً، يجب أن تحصل على التصميم التالي:

علامة تبويب “الأخبار” (News Tab): التصميم

الآن، لنستمر في تطوير علامة التبويب الثالثة – علامة تبويب الأخبار. لقد أضفنا بطاقة Ionic Card أساسية تحتوي على موارد أخبار متنوعة مثل رابط URL، العنوان، الصورة، تفاصيل المؤلف والناشر:

<IonList>
  {data.map((news, idx) => (
    <IonItem key={idx}>
      <IonCard>
        <IonImg src={news?.urlToImage} class="newsImage"></IonImg>
        <IonGrid>
          <IonRow class="newsTitle">{news?.title}</IonRow>
          <IonRow class="newsSource">
            <IonCol>{news?.source?.name}</IonCol>
            <IonCol>{trimSourceDetails(news?.author)}</IonCol>
            { /* <IonCol text-right>{moment(news?.publishedAt).format('DD MMM YYYY')}</IonCol> */ }
          </IonRow>
          <IonRow class="newsContent">{news?.description}</IonRow>
        </IonGrid>
      </IonCard>
    </IonItem>
  ))}
</IonList>

علامة تبويب “الأخبار”: البيانات وواجهة برمجة التطبيقات (API)

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

هنا، سنستهلك واجهة برمجة تطبيقات “أهم العناوين” (top-headlines API) باستخدام مكتبة Axios للحصول على العدد الإجمالي في الدولة المختارة باستخدام React-hooks مثل useState و useEffect.

const [data, setData] = useState<IArticles[]>([]);
const [showLoading, setShowLoading] = useState(true);

useEffect(() => {
  const getNewsData = async () => {
    const result = await axios(
      'https://newsapi.org/v2/top-headlines?q=coronavirus&language=en&apiKey=YOUR_OWN_KEY'
    );
    // console.log(result);
    setData(result.data.articles);
    setShowLoading(false);
  };
  getNewsData();
}, []);

الآن، احفظ الملف وتحقق منه في المتصفح. أخيراً، يجب أن تحصل على التصميم التالي:

بهذا نكون قد أكملنا عمل اليوم الثالث.

اليوم 3: تطوير علامة تبويب “المساعدة” والنشر

في هذا الجزء الأخير من المقال، سنقوم بتطوير علامة تبويب “المساعدة” ونتعلم كيفية استخدام Capacitor لبناء تطبيقات Android و iOS. لقد قمنا حتى الآن ببناء علامات تبويب “العالم”، “الدولة”، “الأخبار”، و “الإرشادات” في تطبيق Ionic React الخاص بنا. بالإضافة إلى ذلك، سنقوم بنشر تطبيقنا على Firebase كتطبيق ويب تقدمي (PWA). هذا هو الجزء الأكثر إثارة، استعدوا لرؤية تطبيقكم الخاص يعمل في بيئة حقيقية.

علامة تبويب “المساعدة” (Help Tab): التصميم

لنقم أولاً بإنشاء علامة تبويب “المساعدة والملاحظات”. هذه العلامة التبويب معلوماتية وثابتة، وتقدم مساعدة من منظمة الصحة العالمية (WHO) وتتيح للمستخدمين تقديم ملاحظات للمطور.

<IonCard>
  <IonList>
    <IonItem>
      <IonLabel>Call WHO helpline Number</IonLabel>
      <IonButton color='warning' href="tel:+41-22-7912111">
        <IonIcon slot="start" icon={callOutline} /> Call
      </IonButton>
    </IonItem>
    <IonItem>
      <IonLabel>Email WHO Team</IonLabel>
      <IonButton color='warning' href="mailto:mediainquiries@who.int">
        <IonIcon slot="start" icon={mailOutline} /> Email
      </IonButton>
    </IonItem>
    <IonItem>
      <IonLabel>Text 'Hi' to WHO helpdesk</IonLabel>
      <IonButton color='warning' href="https://api.whatsapp.com/send?phone=41798931892&text=hi&source=&data=">
        <IonIcon slot="start" icon={logoWhatsapp} /> WhatsApp
      </IonButton>
    </IonItem>
    <IonItem>
      <IonLabel>Donate via WHO website</IonLabel>
      <IonButton color='warning' href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019/donate">
        <IonIcon slot="start" icon={walletOutline} /> Donate
      </IonButton>
    </IonItem>
  </IonList>
</IonCard>

التحقق من بيئة التثبيت

كما ذكرنا في قسم “اليوم 0″، يجب أن تكون جميع البرامج التالية مثبتة على نظامك:

• VS Code
• Google Chrome
• Android Studio (لتطبيقات Android)
• Xcode (لتطبيقات iOS، متاح فقط على أجهزة Apple)

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

لقد قمنا بالفعل بتثبيت Capacitor في أمر الطرفية الأول أثناء إنشاء تطبيق ionic react (راجع قسم التثبيت في “اليوم 0”). Capacitor هو الجسر الأصلي لتطبيقات الويب متعددة المنصات (Cross-Platform Web Apps). يستدعي حزم تطوير البرمجيات الأصلية (Native SDKs) على iOS و Android والويب باستخدام قاعدة كود واحدة.

انتقل إلى دليل مشروعك وقم بتشغيل الأوامر التالية لتهيئة Capacitor في مشروعك وإضافة منصتي Android و iOS إلى تطبيقك:

npm install --save @capacitor/core @capacitor/cli
npx cap init
npx cap add android
npx cap add ios

أيقونات التطبيق وشاشات البداية (Splash screens)

لإنشاء أيقونات وشاشات بداية لتطبيقات Android و iOS، أوصي باستخدام https://pgicons.abiro.com/. ستنشئ هذه الأداة أيقونات وشاشات بداية بأحجام متنوعة لجميع أنظمة تشغيل الأجهزة المحمولة المستهدفة. بعد إنشائها، يمكنك استبدال هذه الأيقونات مباشرة بأيقونات Ionic الافتراضية وشاشات البداية في مجلدات المنصات المستهدفة.

تطبيق الويب التقدمي (Progressive Web App – PWA)

المتطلبان الرئيسيان لتطبيق الويب التقدمي (PWA) هما Service Workers و Web Manifest. بمجرد إضافة هذه الملفات، قم بتشغيل الأمر ionic build وسيكون مجلد build جاهزاً للنشر كتطبيق PWA على أي منصة استضافة مثل Firebase. اتبع الرابط https://ionicframework.com/docs/react/pwa لمزيد من التفاصيل.

أولاً، أنشئ المشروع في موقع Firebase Website. يمكنك اختيار الخطة المجانية في الوقت الحالي. قم بتمكين خيار الاستضافة من شريط التنقل الأيسر.

بعد ذلك، في الطرفية، قم بتثبيت واجهة سطر الأوامر الخاصة بـ Firebase (Firebase CLI):

npm install -g firebase-tools

سيطلب منك بعض الخيارات الافتراضية لأسماء المجلدات والملفات المتعلقة بـ Firebase. استمر في الإجابة على جميع الأسئلة.

الآن، قم ببناء مشروعك مرة أخرى باستخدام العلامة --prod كما هو موضح أدناه:

ionic build --prod
firebase deploy

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

تطبيق Android

Android Studio هو بيئة التطوير المتكاملة (IDE) لإنشاء تطبيقات Android الأصلية. يتضمن Android SDK، والذي سيتعين تكوينه للاستخدام في سطر الأوامر. يستخدم Android Studio أيضاً لإنشاء أجهزة افتراضية تعمل بنظام Android، وهي مطلوبة لمحاكي Android. يمكن أيضاً إطلاق تطبيقات Ionic على جهاز حقيقي. استخدم الرابط التالي للإعداد والتثبيت الكاملين: https://ionicframework.com/docs/developing/android.

قم بتشغيل الأوامر التالية لمزامنة المكونات الإضافية الأصلية وتشغيل التطبيقات الأصلية:

ionic cap copy
ionic cap sync
ionic capacitor run android
ionic cap open android

الآن، سيتم فتح تطبيقك في Android Studio حيث يمكنك التحقق من نفس المجلد، معرف مشروعك، والإعدادات الافتراضية الأخرى. يمكنك أيضاً بناء أيقونات وشاشات بداية لتطبيقك الخاص واستبدال أيقونات Ionic الافتراضية الموجودة في المشروع. أنشئ محاكياً وقم بتشغيل التطبيق. يجب أن ترى تطبيق متتبع فيروس كورونا الخاص بك في محاكي Android الآن.

انتقل إلى خيار Build في الأعلى في Android Studio، وحدد Build Bundle(s)/APK(s). للمرة الأولى، ستحتاج إلى إنشاء مفتاح التوقيع (signing key). ثم انقر على next لبناء خيار apk/bundle. تهانينا! لديك الآن تطبيق Android الخاص بك في مجلد build وهو جاهز للنشر على Google Play Store (تكلفة حسابات المطورين 25 دولاراً أمريكياً مع وصول مدى الحياة) و Amazon App Store (مجاني).

تطبيق iOS

Xcode هو بيئة التطوير المتكاملة (IDE) لإنشاء تطبيقات iOS الأصلية. يتضمن iOS SDK وأدوات سطر الأوامر الخاصة بـ Xcode. يمكن تنزيل Xcode مجاناً باستخدام حساب Apple أو يمكن تثبيته من خلال App Store. استخدم الرابط التالي للإعداد والتثبيت الكاملين: https://ionicframework.com/docs/developing/ios. لسوء الحظ، لا يمكن بناء تطبيقات iOS إلا على أجهزة كمبيوتر Apple التي تعمل بنظام التشغيل macOS.

قم بتشغيل الأوامر التالية لمزامنة المكونات الإضافية الأصلية وتشغيل التطبيقات الأصلية:

ionic cap copy
ionic cap sync
ionic capacitor run ios
ionic cap open ios

الآن، سيتم فتح تطبيقك في Xcode حيث يمكنك تعيين معرف مشروعك والإعدادات الافتراضية الأخرى. يمكنك أيضاً إنشاء أيقونات وشاشات بداية لتطبيقك الخاص واستبدال أيقونات Ionic الافتراضية الموجودة في المشروع. أنشئ محاكياً وقم بتشغيل التطبيق. يجب أن ترى تطبيق متتبع فيروس كورونا الخاص بك في محاكي iOS الآن. إذا كان لديك حساب مطور Apple نشط يكلف 99 دولاراً أمريكياً سنوياً، يمكنك بناء تطبيق iOS الخاص بك ونشره على App Store.

تحديات النشر وسياسات المتاجر

بسبب قضايا السياسة المتعلقة بالوباء، لا تقبل متاجر Google Play Store و Amazon App Store وغيرها حزم التطبيقات المتعلقة بفيروس كورونا. لذا، ما لم يكن لديك إثباتات أصالة من أي حكومة، مستشفيات، أو أي مؤسسة صحية معينة، فلن تقبل أي متاجر هذه التطبيقات. ومع ذلك، فإن الشبكة العنكبوتية العالمية (WWW) مجانية للاستخدام. لذلك قمنا بنشر تطبيقنا على الويب فقط في الوقت الحالي.

أخيراً، تطبيق Ionic React الخاص بنا متاح مجاناً على الإنترنت للمستخدمين النهائيين! يمكنكم زيارته على الرابط التالي (يوصى باستخدام الأجهزة المحمولة لتجربة سلسة): https://coronatracker-20efc.web.app/world.

العمل المعلق والمساهمة

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

• استجابة سطح المكتب (Desktop Responsiveness): (يعمل حالياً بشكل جيد للأجهزة المحمولة والأجهزة اللوحية).
• حالات اختبار الوحدات (Unit test cases).
• هناك دائماً تنسيق ومسافات بادئة.

للحصول على الكود الكامل، انتقل إلى مستودع GitHub: https://github.com/kapilraghuwanshi/corona-tracker-app. لا تنسَ وضع نجمة (star) وعمل fork إذا كنت ترغب في إضافة المزيد من الميزات الرائعة إليه. لعملية fork، اتبع الخطوات الموضحة في ملف README.MD. آمل أن يكون هذا المقال مفيداً لكم وقد ساعدكم على تعلم وبناء تطبيق رائع اليوم. إذا أعجبكم حقاً، يرجى مشاركته على جميع منصات التواصل الاجتماعي. دعونا نبقى على اتصال عبر LinkedIn (@kapilraghuwanshi) و Twitter (@techygeeeky) للمزيد من القصص التقنية المماثلة.

الخلاصة التقنية

يقدم هذا المقال دليلاً عملياً ومفصلاً لبناء تطبيق متتبع لفيروس كورونا في فترة زمنية قصيرة (ثلاثة أيام) باستخدام مكدس تقنيات حديث وفعال يجمع بين Ionic Framework و React.js و Firebase. تبرز قوة التطوير الهجين في القدرة على استهداف منصات متعددة (أندرويد، iOS، PWA) من قاعدة كود واحدة، مما يوفر وقتاً وجهداً كبيراً.

يُظهر المشروع كيفية دمج واجهات برمجة التطبيقات الخارجية (APIs) لجلب البيانات الحية، واستخدام مكتبات الرسوم البيانية مثل Chart.js لتصور البيانات بشكل جذاب، بالإضافة إلى التعامل مع التوجيه في تطبيقات الصفحة الواحدة (SPAs). كما يغطي المقال جوانب النشر الهامة، بدءاً من إعداد بيئة Capacitor وصولاً إلى النشر على Firebase، مع تسليط الضوء على التحديات الواقعية التي قد تواجه المطورين عند نشر تطبيقات حساسة في متاجر التطبيقات الكبرى.

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