في هذه الصفحة
المقدمة
اكيد كلنا بنزهق اما بنقعد نطلع كل شوية apk يدوي؟ طب تخيل بقى كل ده بيحصل أوتوماتيك وانت بتشرب قهوتك الصبح؟ 🤯
مع تقدم التكنولوجيا بقي في tools كتير موجودة بتسهل علينا عملية الـ development و deployment و بتحسن في أداء الكود كمان النهاردة هنتكلم في موضوع مهم جدا و شيق و كل developer مهم يكون عنده خلفية عنه و هو CI/CD 🚀
هنتكلم النهاردة عن:
📌 ايه هو CI/CD
📌 يعني ايه pipeline
📌 ليه هو مهم
📌 ال tools اللي بستخدمها
📌 ايه هو firebase app distribution
📌 ال fast lane و ازاي ننزله
📌 هنرفع اول APK
📌 الملخص
ايه هو الـ CI/CD
الCI/CD هو اختصار لـ Continuous Integration Continuous Delivery
يعني ايه الكلام الطويل دا بقي ؟
الـ CI: دي العملية من اول ما بنعمل build للكود بتاعنا لحد ما نرفعه علي جت هاب علشان نعمله عملية test & deployment
الـ CD: هي عملية انه Devops الشخص المسؤل عن عملية ال deployment بياخد الكود دا و يرفعه علي السيرفر علشان يبقي عند العميل و يفضل متابعه علشان لو حصل مشاكل يبلغ ال developers
طيب خلينا نشوف flow اللي كان بيحصل من غير وجود CI/CD
ال developer بيخلص الكود يبلغ ال tester انه رفع الكود علي Github يدخل يشوفه و يعمله تيست بعدها يرجع يبلغه بالمشاكل او يبلغ ال devops (الشخص المسؤول أنه يرفع البروجكت على السيرفر و يتابع مع العميل ) انه البروجكت خلص و اترفع يبتدي ياخده علشان يعمله عملية deployment كل دا بيحصل بشكل manual و اللي بيزود الوقت و المجهود و ان كل شخص بيستني التاني علشان يخلص شغله و هكذا لو جينا نضيف اي تعديل او feature جديدة بعد ما رفعنا السيستم خلاص.
جت بقي CI/CD حولت عملية integration و deployment بشكل automatic عن طريق اننا بنبني pipeline فيها كل الاوامر اللي عايزنها وهى بتترفع و بتتنفذ لوحدها.
طب يعني ايه Pipeline
من اسمها كدا يعني حاجة زي انبوبة ان الكود بيمشي في flow معين ببقي محدداه ليه و بيكون الاتي
بعد ما عملنا البروجكت هنرفعه علي git hub اول ما يحصل عملية الpush دي فيه tool بتاخد الكود تعمله build و بعدها هيدخل علي tool تانية تعمله test و لو عدي من التيست خلاص بيكمل في عملية الdeployment و بيترفع علي السيرفر او علي جوجل بلاي و لو فيه مشكلة هيرجعله يقول ان فيه مشكلة عايزة تتصلح قبل عملية الdeployment و الbuild هيقف
علشان نعمل الـ pipeline دي بقي عندنا كذا tool زي :
Jenkins , github actions , gitlab , fastlane , Circle CI
دي عبارة عن ادوات عاملة integration مع جت هاب باختصار بكتب فايل عندي في البروجكت فيه الاوامر اللي انا عايزاها انه اما يعمل push علي جت هاب ياخد الكود و هكذا و الtools دي بتنفذ الpipeline و الاوامر اللي كتبتها بشكل اوتوماتيك
الصورة هنا بتوضح tools مختلفة المستخدمة في كل مرحلة هسيبلك مصادر تقدر تقرا عنها في اخر المقالة 🚀
فايدة الـ CI/CD و ليه بنستخدمها
اما اجي اعمل feature جديدة مش هتضطر اعمل build و ارفعها Manual كل مرة ، لو جيت ضفت اي تعديل هيعمله test بعدها لو فشل مش هيرفعه اصلا و يرجع يقوله عندك مشكلة حلها بدل ما بنكشتفها مع العميل في الاخر و بيزود من quality للبرودكت في الاخر و بيقلل الوقت و المجهود في عملية build , test . deployment .
طيب يا ترى إيه اللي يخليني كـ Mobile Developer أهتم بحاجة زي الـ CI/CD؟ مش دي المفروض حاجات بتاعة DevOps؟
لو فكرت شوية، هتلاقي إن كل مرة بتبني فيها الابلكيشن بتلاقي نفسك بتعمل حاجات كتير بشكل يدوي؛ تبني APK للـ Tester، تعرض Demo للعميل، أو حتى تعمل تحديث للنسخة على Google Play. كل ده بياخد منك وقت ومجهود علشان بنعمله بشكل manual ، وأحياناً بيكون عرضة للأخطاء البشرية. دلوقتي تخيل إنك تقدر تعمل كل ده ب command واحد! آه، بالضبط، كل الخطوات دي هتبقى automated. تعال نستكشف إزاي CI/CD ممكن يعمل دا .
ايه الـ Tools اللي ممكن نستخدمها
من ال tools الخاصة بـ flutter اللي بتساعدنا في الموضوع دا هما:
Firebase distribution - fastlane - github actions - Code magic
هنعرف واحدة واحدة منهم بالتفصيل و هنشوف ازاي نضيفهم في البروجكت بتاعنا 🎉
دلوقتي، وإحنا شغالين في المشروع بتاعنا عادي جدًا، جت اللحظة اللي عايزين نبعت فيها الـ APK للـ Tester. طبعًا مش هنبعته على الواتساب ولا نرفعه على جوجل درايف كل مرة، صح؟ إحنا عندنا حل يوفر علينا كتير! هنحط الـ APK في مكان مخصص، والمكان ده هيبعت للـ Tester إيميل فيه لينك مباشر لتحميل النسخة الجديدة من التطبيق. باختصار، كأنك بتعمل قناة Distribution خاصة بيك، تحط فيها كل الـ Releases، وتسيب الباقي على النظام. بس يا ترى إيه هو المكان ده؟ تعالوا نكتشف!
Firebase App Distribution
يلا نتعرف علي firebase app distribution 🤔:
هي service في Firebase اقدر ابعت من خلالها ال apk لل tester علشان تسهل عملية التيست قبل مرحلة ال release و هي كمان cross platform يعني تقدر تستخدمها علي android , ios.
عندنا في جوجل بلاي بيوفر tracks و app store بيوفر testflight و دي خدمات موجودة علشان تسهل عملية test قبل ال release و التحكم في versions المختلفة
اول حاجة علشان نعرف نستخدم الخدمة دي فمن اسمها هي من خدمات firebase ف لازم نربط البروجكت بتاعنا ب فايربيز و دي documentation علشان تقدر تربط البروجكت بتاعك ب فاير بيز هي شوية خطوات بسيطة :
بعد كدا هتدخل علي البروجت عندك في فايربيز و تدخل علي App Distribution
و دي الواجهة بتاعته
1- اول حاجة: هنطلع ال apk عندنا manual عادي هتروح علي البروجكت عندك و تكتب ال command دا في Terminal
Flutter build apkو لو انت مستخدم flavours ( هنتكلم عنها في مقالة تانية ) هتكتب ال command دا:
Flutter build apk –flavor production -t lib/main_production.dart هيطلعلك ال apk عادي هتروح تشوف مكانه ف البروجكت بتاعك فين و تعمل drag and drop هتاخد الapk تحطه في app distribution في المكان رقم 1 في الصورة اللي فوق و كدا هيكون اترفع خلاص
2- تاني حاجة: و علشان اضيف التيسترز هنلاقي تاب رقم 2 testers and groups اقدر اضيف كذا تيستر عن طريق هحط الايميل بتاعه و اقدر اقسم التيستيرز جروبات كمان ، لو البروجكت كبير بعد كدا هيتبعت ايميل للشخص دا هيفتحه هيطلب منه ينزل ابلكيشن app tester و هينزل ال apk للابلكيشن اللي رفعناه عادي.
و نقدر نحط release notes وهو كمان يقدر يبعتلنا notes او comment علي الابلكيشن.
3- تالت حاجة: تاب رقم 3 invite links لو فيه مشكلة في الايميل نقدر نبعتله لينك عادي يدخل يجرب بيه.
من مميزات الfirebase distribution انه يقدر يعمل integrate مع كذا tool تانية بسهولة و سهل الاستخدام و فيه سكيوريتي للابلكيشن بتاعك ، بس لو جينا بصينا هنلاقي اننا كل مرة هنعدل او نزود feature جديدة هنحتاج اننا نعمل apk جديد و نرفعه بايدينا كل مرة و احنا كدا لسة بنعمل حاجات manual فمطبقناش مفهوم الautomation.
علشان نطبق بقي ال automation هنعمل integration مع حاجة اسمها fastlane.
تقدروا دلوقتي تشتركوا في النشرة الأسبوعية لاقرأ-تِك بشكل مجاني تمامًا عشان يجيلكوا كل جديد بشكل أسبوعي فيما يخص مواضيع متنوعة وبشروحات بسيطة وسهلة وبجودة عالية 🚀
النشرة هيكون ليها شكل جديد ومختلف عن شكلها القديم وهنحاول انها تكون مميزة ومختلفة وخليط بين المحتوى الأساسي اللي بينزل ومفاجآت تانية كتير 🎉
Eqraatech - اقرأ-تِك
ايه هي Fastlane
هي open source tool هستخدمها علشان اعمل automation و اكتب ال pipeline بتاعتي جواها كذا action اقدر استخدمها في عملية ال building و ال testing و مش هتضطر تبني الـ APK بنفسك كل مرة! بدل كده، بمجرد ما تكتب أمر واحد في command line.
الـ Fastlane هتتولى كل حاجة. مش بس كده، كمان لو عايز ترفع التطبيق على Google Play أو App Store بشكل أوتوماتيك، تقدر تعمل ده بسهولة. زي مثلا اكشن ال scan لو عايزة اعمل مجموعة Tests علي الابلكيشن قبل ما ارفعه علي جوجل بلاي او app store يقدر يعمل connection معاهم.
تقدر تقرأ عن كل الactions من ال documentation هنا :
fastlane team
هي استخدامها سهل بس اصعب حاجة ال installation بتاعها في الاول بس بعد كدا بيكون استخدامها بسيط و اقدر انزله على Android & IOS.
ال Fastlane مبنية علي لغة ruby علشان كدا دي اول حاجة محتاجة انزلها علي الجهاز عندي و معاها Bundler و دا الpackage Manager for ruby.
اول حاجة هننزل ال rbnv و دي اقدر استخدم فيرجنز مختلفة مع كل بروجكت. وتقدر تمشي خطوات الset up و تختار انت ماك او ويندوز عادي بعد كدا تقدر تشوفه من هنا:
و علشان تتاكد انها نزلت عندك هتروح في الterminal و تكتب rbnev
لو ظهرلك النسخة بتاعته كدا هو تمام خلاص طيب لو ظهرلك اي مشكلة ان command not found دي كدا مشكلة في الpath variables محتاجة تتعدل لو قابلتك المشكلة ممكن تكتب في الكومنت و نشوف حلها
بس انا علشان قابلتني مشاكل في الطريقة دي فنزلت روبي نفسها من علي الموقع الرئيسي من هنا
و نعملها installation عادي و علشان نتأكد انها نزلت هنكتب الcommand دا:
Ruby -vو هتظهر ال version بتاعها كدا اتعلمها install خلاص و دي بديل انك تنزل rbnev ، بعد كدا هننزل ال bundler اللي هو package manager هنكتب الـ command دا:
gem install bundleو gem هي الوسيلة علشان اعمل install لاي حاجة ليها علاقة ب ruby!
هنروح في ال android و هنعمل فايل هنسميه Gemfile دا بحدد فيه ال dependecies اللي هحتاج استخدمها و هنا هنستخدم fastlane و هنحط جواه الكود دا:
source "https://rubygems.org"
gem "fastlane"بعدين هنكتب في terminal
Cd android
bundle update و هو هيعمل generate لفايل gemfile.lock كدا عمل install خلاص ، وبعد كدا هتعمل:
install fastlane
Fastlane initهيطلب package name دي هتجبها من
android/app/build.gradle -> applicationIdو بعدها هتظهر شوية اسئلة هنعمل no و enter علي بقيت الاسئلة لحد ما توصل للاخر خلاص و هيعمل generate لفايلين ال app file , fastfile ، ال app file بيكون فيه ال configurations ، واحنا هنشتغل علي fastfile.
ودا بيكون عبارة عن lanes بتعمل حاجة معينة عايزة مثلا اعمل apk عايزة ارفع علي google play عايزة حتي اطبع حاجة عادي هي شبة الفانكشن وعلشان نشغل الكود اللي كتبناه بقي هنكتب في terminal
Bundler exec fastlanenameلو طلع انه fastlane worked successully كدا هو اتسطب عندك!
طيب دلوقت عندنا firebase app distribution لوحده و fastlane لوحده الاتنين نازلين عندي بس كل واحد لوحده محتاجين بقي نربطهم ببعض علشان نعمل عملية automation.
هنروح في ال beta deployment في fastlane من الdocumentation بتاعها و هندور علي firebase app distribution
هنلاقي الطريقة اللي هو بينزل بيها اول حاجة هنكتب الcommand دا:
fastlane add_plugin firebase_app_distributionبعد كدا علشان fastlane يعرف هو هيشتغل علي انهي بروجكت لازم اكون عامله authentication firebase و لازم نكون منزلين firebase cli ، هنكتب
Firebase login:cliهيفتح البراوز و نعمل login علي فايربيز هيقول انه successful و يطلعلنا token in terminal هناخده و نحتفظ بيه ف اي note علشان هنحتاجة بعدين ودلوقت نقدر نكتب في فايل fastlane الاكشنز اللي عايزنها 🥳
خلونا نتعرف علي syntaxs بتاعه: يعني ايه lane الاول ؟
الـ lanes حاجة شبة ال functions انها بتأدي وظيفة معينة زي انها build apk , build app يرفع علي firebase و هكذا، وخلونا نشوف مثال:
ايه الكلام الكبير دا بقي خلينا نشوف واحدة واحدة
الـ Do: بقوله انه ينفذ الlane دا
الـ Desc: دا وصف للحاجة اللي بيعملها بكتبه علشان يبقي شرح للحاجة اللي هعملها.
اول حاجة بعد كلمة lane: بتكون اسم ال lane عادي بحطه زي منا عايزة و بقوله do نفذ الحاجة دي اللي هكتبها.
بعد كدا جزء الربط ب firebase app distribution دا بناخده زي ما هو من الdocumentation و بيكون معاه شوية داتا بديهاله.
خلي بالك لازم نبص علي documentation firebase appdisrtibution , fastlane مع بعض علشان بيكون فيه حاجات ناقصة ممكن تلاقيها في documentation التانية او attributes اكتر و بيكون فيه شرح تفصيلي لكل حاجة.
الـ app id: و دا بنجيبه من علي البروجكت بتاعنا في فاير بيز.
الـ Firebase CLI Token: دا علشان يعمل ريفريش للتوكن كل شوية و ميخليهوش يدي ايرور بعدين انه unauthorized او مش عارف يوصل للسيرفر و اما يحصله ريفريش لوحده يظبط و دا token اللي قلنا من شوية اننا هنعمله save عندنا في notes.
الـ android_artifict_type: و دا بقوله هرفع APK OR APP وال path بتاعه هيكون فين علشان يدخل يجيبه.
هندخل علي:
Build -> app > outputs -> flutter-apk -> app- release.apkناخد ال path بتاع الفايل نحطه ومفروض يكون كدا في النهاية:
../build/app/outputs/flutter-apk/app-release.apkال testers: بضيف ايميل التيستر اللي انا هبعت ليه الايميل او لو هبعته للعميل
الـ Release notes: لو عايزة اضيف ملحوظات للتيستر بقي
بس دلوقتي، المفروض إن Fastlane هياخد الـ APK اللي أنا هعمله generate بنفسي، والملف هيكون موجود في الـ path اللي حطيناه، وهيقوم برفعه على Firebase App Distribution ويبعته للـ Testers.
طيب، لو أنا مش عايزة أعمل الـ APK بيدي، وعايزة Fastlane هو اللي يعمل الـ generate، هنعمل إيه؟
هنضيف سطرين في بداية الـ Fastfile، بعد كلمة do كدا:
Sh”flutter clean”
Sh”flutter build apk –release –target lib/main.dart –no-tree-shake-icons"ال sh دا بقوله اعمل الامر دا في terminal و كل مرة هرفع apk هغير رقم الversion بتاعه عشان أتأكد إن كل إصدار جديد مميز عن اللي قبله.
علشان اشغله بقي و اعمل الworkflow دا هكتب في terminal:
Fastlane lanenameهيبتدي نعمله build بقي بال steps اللي حطتها لحد ما يقولي success build وكدا اترفع خلاص 🎊
طبيعي انك تلاقي مشاكل في الset up دي تقريبا اصعب حاجة بس بعد كدا بيكون سهل و بنعمل build علطول كل مرة . ودا بالنسبة للاندرويد!
في article هنا تقدر تشوف لو عايز تربطه ب جوجل بلاي
18Ashelar
المرة الجاية هنتعرف بقي ازاي نعمل workflow عن طريق Github actions 🌟
في الختام
الـ CI/CD هو مفهوم مهم في تطوير البرمجيات بيخلي عملية التطوير أسرع وأسهل. العملية بتبدأ بكتابة الكود، بعد كده بيتم التحقق منه بشكل أوتوماتيك، وبعدين بيتم نشره. فيه أدوات كتير بتساعد في الكلام ده زي Jenkins وGitHub Actions وSonarQube، اللي بيضمنوا إن الكود يكون متجرب كويس، مدموج صح، ومتأمن وقت النشر.
باستخدام CI/CD، المبرمجين بيقللوا من المشاكل اللي ممكن تحصل في الكود، وبيحسنوا تجربة المستخدم، وبيخلوه أكثر أمان. و نقلل الوقت و المشاكل اللي ممكن تحصل
Happy coding and happy deploying!
