انضم لذكاء صباعي: www.zka2soba3y.com ونادي الجينيس: www.gbc4.com. واتساب: 01157611470
مقدمة: عالم تطبيقات الموبايل وحل سحري!
يا جماعة، عالم تطبيقات الموبايل ده بالنسبة لي كان دايماً غامض شوية وماتعاملتش معاه كتير. أنا شغلي كان كله في الباك إند. فكرة إنك ممكن تبني تطبيق موبايل كامل وشغال 100%، حتى لو أنا مبرمج، كان بيقابلني فيها حاجات ومشاكل عمري ما شفتها قبل كده.
صحيح سهل أوي أعمل الـ UI بتاع الموبايل لو استخدمت أي أداة تساعدني، بس ماذا بعد؟ لو أنا عايز أعمل حاجة متكاملة من أول التصميم، وتشتغل على أندرويد و iOS، ويكون فيها كل الفانكشنز زي تسجيل الدخول ودمج الذكاء الاصطناعي والدفع أون لاين، وكمان أنشرها على الأب ستور وجوجل بلاي… وكل ده من مكان واحد بس؟
النهاردة بقى هنشوف إزاي نبني تطبيق كامل من الصفر باستخدام أداة واحدة بس، وهي OnSpace. يلا بينا!
رابط الفيديو اللي اتكلمنا عنه: https://youtu.be/rHDx6S5czYI?si=M61DTDEGAZ5hLuoh
إيه هي OnSpace؟
ببساطة كده، OnSpace دي منصة بتخليك تبني تطبيقات موبايل كاملة باستخدام الذكاء الاصطناعي. يعني بدل ما تقعد تكتب كود بنفسك وتعدي بمشاكل ممكن تكون مالكش خبرة فيها، أنت بتوصف اللي أنت عايزه للاداة دي وهي بتبني التطبيق.
ممكن تقولها مثلاً: “اعملي تطبيق فيه كذا، من الصفحات الفلانية، والخصائص الفلانية”. وهوب! هي هتعملك كل حاجة في دقايق معدودة.
والميزة كمان إنها مش بس بتعملك التطبيق وتديك الكود، لأ دي بتطلعلك APK (النسخة اللي بتشتغل على الأندرويد)، وكمان بتديك إمكانية إنك تنشره على الأب ستور بتاع أبل على طول!
ده غير إنك بتقدر تربط أنظمة تسجيل الدخول (Log In Systems) بتاعتك، وتربط خدمات الدفع زي Stripe، وتوصل أي موديلز للذكاء الاصطناعي. يعني حرفياً ممكن تبني ستارت أب كاملة من مكان واحد.
وعشان كده، احنا مش هنتكلم نظري بس، لأ احنا هنخش نبني تطبيق كامل قدامك خطوة بخطوة. يلا بينا!
فكرة التطبيق: CV Builder!
فكرة التطبيق اللي هنحاول نبنيه مع بعض ده، إني هقسمه لكذا مرحلة عشان نحط فيه كل الإمكانيات والفيتشرز اللي عايزين نختبرها فعلاً. أنا دلوقتي عايز أبني أبلكيشن عبارة عن Resume Builder أو تطبيق بيبني سيرة ذاتية (CV).
الفكرة بكل بساطة إني هدخل البيانات بتاعتي، وهو هيبنيلي CV. هختار التيمبلت المناسبة ليا، وبعد كده لو عايز تحسينات من الذكاء الاصطناعي، هسأل الـ AI إنه يساعدني في حاجة زي دي. ودي هتكون ميزة مدفوعة أنا هضيفها عشان أختبر حتة الربط مع Stripe وبوابات الدفع والكلام ده.
تعالى بينا واحدة واحدة نقسم البرنامج بتاعنا ده لأربع مراحل. ودي حاجة ضرورية جداً طول ما أنت بتبني أبلكيشن مع الـ AI، قسم البرنامج بتاعك لكذا مرحلة. أنا رحت لـ ChatGPT وطلبت منه إنه يعملي برومبتس أدخلها للـ AI تكون مناسبة للمراحل اللي أنا عايزها.
المرحلة الأولى: الأساسيات (تصميم، بيانات، وتصدير PDF)
هنعمل “Get Started” ونسجل دخول باستخدام أبل أو جوجل. أنا هستخدم حساب جوجل. بعد كده هختار “iOS & Android” وأحط البرومبت بتاعي. البرومبت ده بيقول:
ابنيلي موبايل أبلكيشن اسمه “AI Resume Builder” بيشتغل على أندرويد و iOS. دي المرحلة الأولانية، المفروض إنها هتبقى فيها الـ Basics أو الأساسيات بتاعة بناء التطبيق ده. الهدف إني أخلي اليوزرز يعملوا “Create Professional Resume” جوه التطبيق.
أنا طالب منه شوية سكرينات أساسية:
- Home Screen: فيها تايتل “Create your professional resume in minutes” وزرار اسمه “Start Build Resume”.
- Resume Form Screen: هياخد مني الاسم الكامل، الإيميل، رقم التليفون، المسمى الوظيفي، المهارات، الخبرات العملية، التعليم. وبعدين زرار “Generate Resume”.
- Preview Screen: بعد ما يعمل “Generate Resume”، هوريه الـ CV بتاعه ويقدر يعمل “Export as PDF”.
وكمان اديته شوية إرشادات بسيطة في التصميم إنه يكون “Clean, Modern UI, Mobile-Friendly, Minimal, Professional” وشوية حاجات كده. طبعاً ده بيختلف على حسب أنت بتبني تطبيق عامل إزاي وعايز شكله عامل إزاي.
عندي اختيارين في قاعدة البيانات: أربط بـ “Supabase” أو “Cloud New” (دي حاجة خاصة بيهم). هخليني على “Cloud” زي ما أنا، وبعدين هعمل “Send”.
النتيجة من المرحلة الأولى:
خلص معايا الـ Building بتاع النسخة الأولانية في حوالي دقيقة ونص أو دقيقتين. تعالى نختبر اللي طلع لنا:
- واجهة البرنامج: هقوله “Start Building Resume”.
- شاشة إدخال البيانات: هديله الاسم، الإيميل، رقم التليفون، المسمى الوظيفي (مثلاً Software Engineer)، وهملى باقي البيانات.
- بعد كده هعمل “Generate Resume”.
- هتطلع عندي الـ Resume بتاعتي، وهقدر أعمل “Export as PDF”.
بصراحة، الشكل المبدئي كويس جداً وممتاز. فكرة إني أبقى قادر أعمل حاجة شبه دي بهذه السرعة، آه محتاجة شوية تحسينات طبعاً، بس احنا بنجرب بس الأداة مش بنعمل أبلكيشن حقيقي. دي المرحلة الأولانية: شوية مميزات أساسية أقدر أستخدمها.
المرحلة الثانية: حسابات المستخدمين (تسجيل دخول وإنشاء حساب)
دلوقتي، لحد اللحظة دي أنا ما عنديش أي تسجيل دخول ولا أي حاجة. فأنا هطلب منه شوية مميزات يضيفها، لأن أي تطبيق حقيقي المفروض يكون فيه حسابات للمستخدمين عشان أقدر أحفظ الـ CVs اللي أنا بعملها، وأخزن بيانات المستخدمين دول.
هحط البرومبت بتاعي إنه يبدأ يعمل إيه؟
- صفحة تسجيل دخول للحسابات.
- صفحة إنشاء حساب.
- يخزن بيانات المستخدمين دول في قاعدة البيانات.
- يحفظ السير الذاتية اللي أنا بعملها في الحساب ده.
وده هيخلي التطبيق أقرب شوية للحقيقة. تعالى ندي الأمر بتاعنا ونشوف النتيجة شكلها هيبقى عامل إزاي.
النتيجة من المرحلة الثانية:
برضه خد نفس الوقت حوالي دقيقة ونص أو دقيقتين. وضافلي هنا “Log In” و “Sign Up”.
- هعمل “Sign Up” بإيميل وباسورد.
- هيقولي “Send Verification Code”، يعني مش هينفع أدخل أي إيميل كده وخلاص، لأ ده بيتحقق وبيبعت OTP على الإيميل.
- هيوصلني الـ OTP، هاخده كوبي وأرجع تاني على التطبيق وأحطه وأعمل “Create and Verify”.
وبكده أنا فعلاً بقى عندي الحساب بتاعي. تقدر طبعاً تتأكد إن اليوزر بتاعك اتسجل والدنيا تمام لو جيت هنا على الـ “Cloud” من الجزء ده، وبعدين على “Users”، هتلاقي الإيميل بتاعه واليوزر نيم بتاعه والـ ID بتاعه متسجل. دي قاعدة البيانات بتاعتك اللي تتأكد منها إن فعلاً تسجيل الدخول شغال. حلو أوي الكلام ده!
المرحلة الثالثة: دمج الذكاء الاصطناعي والدفع الإلكتروني (Stripe)
طيب، عايزين بقى نضيف موضوع الدفع. تعالى نخش على المرحلة الثالثة. هدي البرومبت اللي أنا مجهزه قبل كده، وهطلب منه في المرحلة دي إنه يضيف الذكاء الاصطناعي والدفع الإلكتروني. الميزتين دول أنا رابطهم ببعض ليه؟ عشان أخليها فيتشر مدفوعة جوه التطبيق.
الفكرة ببساطة إن التطبيق يقدر يبعت البيانات لخدمة ذكاء اصطناعي. وده بيتم باستخدام API. الـ API ببساطة هي طريقة بربط بيها ما بين برنامجين اتنين عشان ما نخش في تفاصيل معقدة. ففي التطبيق بتاعنا، الراجل هيضغط على زرار اسمه “Improve Resume with AI”، والتطبيق هيبعت البيانات دي للـ AI ويرجع نسخة محسنة من الـ Resume بتاعتنا.
لكن هنا هيبقى فيه نقطة: إني محتاج أدفع عشان الخاصية دي تشتغل. فهضيف كمان فيتشر إني أربط عمليات الدفع في التطبيق بتاعي من جوه OnSpace من غير ما أطلع بره المنصة بتاعتنا. تعالى كده نربط الموضوع ده بـ Stripe لأنه أشهر حاجة. فخلينا نديله البرومبت ده ونشوف هيطلع النتيجة شكلها عامل إزاي.
النتيجة من المرحلة الثالثة:
خلص معايا وطلب مني حاجة اسمها الـ API Key. الـ API Key ده بياخده مني هنا جوه فورم، يعني هو مش بيشوف الـ API Key اللي أنا بحطهوله فما تقلقش خالص. الـ Stripe Secret Key بتاعي المفروض إن دي حاجة أنت هتجيبها من حسابك بتاع Stripe (الناس اللي بتستخدم Stripe عارفة ده كويس أوي). هتيجي هنا تحطله الـ Stripe Secret Key.
دلوقتي بيطلب مني إنه يعمل “Product and Price” جوه الخطة بتاعة Stripe يعني عشان يحط سعر ليها، وقالي الـ Price 5 دولار. هقوله تمام “OK” يسمحله يعمل حاجة زي دي.
لو جيت هنا على الحساب بتاعي في Stripe، هلاقي فعلاً “AI Resume Optimization” سعرها 5 دولار واتعملت النهاردة أهيت قدامك زي ما أنت شايف. ده حصل على حساب الـ Stripe بتاعي من غير ما أحتاج إني يبقى عندي معرفة بيه، خد بالك! دي حاجة ممتازة جداً لو أنت حتى ما أنت مش عارف تتعامل مع Stripe بشكل كويس.
دلوقتي هو بالفعل خلص وقاللي إن المرحلة الثالثة “Optimized” ودي الـ Current Version بتاعتك اللي أنا فاتحها دلوقتي. تعالى أملى الـ CV:
- بعد ما مليت الـ CV بتاعي، جالي أوبشن جديد بيقولي “Unlock AI Resume Optimization”.
- هضغط عليها، وهيفتحلي بالفعل صفحة دفع Stripe إني أدفع عشان أستخدم هذه الميزة.
- أدخل بيانات الكارت وأعمل “Buy”.
كل ده حصل بدون أي خبرة، بدون ما أحتاج أي حاجة. فده شيء ممتاز جداً!
المرحلة الرابعة: تحسين التصميم (Theming)
طيب، ده بالنسبة للمراحل الأساسية. أنا ممكن طبعاً أطلب منه إنه يظبطلي شوية التصميم بتاعي بتاع شكل التطبيق. فأنا جهزتله برومبت برضه كده عبارة عن إنه يخلي فيه ثيمة معينة في التصميم. فخليني أديها له كده وأغير من شكل التطبيق بتاعي، ممكن يبقى شكله أحسن شوية.
النتيجة من المرحلة الرابعة:
وها قد انتهى من إعادة تصميم التطبيق بتاعنا. تعالى كده نعمل تسجيل دخول بالحساب بتاعنا ونقوله “Sign In”.
أنا شايف إنه غير حاجات بسيطة بصراحة مش كتير أوي بس لأ، الشكل بقى أحسن بكتير بصراحة من الأول. خلينا بس نكتب أي حاجة كده وفي الـ “Requested Files” يا “Generate” آه لأ بقى أحسن بكتير بصراحة، شكله بقى ألطف وأظرف. طبعاً احنا نقدر نغير الـ Layout نفسه لو احنا ركزنا أكتر في حاجة زي دي، بس “For now” ده كويس أوي وزي الفل.
خيارات النشر (Publishing Options)
خلينا بقى نشوف الأوبشنز اللي أنا ممكن أعملها. ممكن دلوقتي أعمل “Publish” بالشكل ده. “Publish” يا إما للـ “App Store” أو إني أنزل “APK”.
النشر على App Store:
- لو رحت على الـ “App Store” هعمل “New Submission”.
- هيجبلي إني أحط الأيقونة بتاعته، وأسمي التطبيق بتاعي، والفيرجن، والـ Identifier، وأربط الـ Apple Account.
- طبعاً إني أعمل حساب على أبل ده بيحتاج 100 دولار. فلو أنت عندك حساب على أبل بالفعل، تقدر تعمل ده دايركتلي من هنا في تلات خطوات فعلاً: تحط المعلومات، تربط الـ Apple Account، تعمل “Submit”، وتستنى المراجعة. والمفروض إنه إن شاء الله لو الدنيا تمام يتقبل على طول.
تحميل نسخة APK:
- أو إني أنزل “Download APK” بالشكل ده.
- لو عملت “Download APK” من هنا كده، هينزلي نسخة APK.
- هضطر إني أعمل “Build”. الـ “Build” بياخد مني 500 كوين من الحساب بتاعي.
- لو عملت كده وعملت “Build” بالشكل ده، هياخد تقريباً دقيقتين ويديني نسخة الـ APK بتاعتي اللي شغالة “Fully Functional” بالمناسبة.
أنا معايا موبايل أندرويد أهوت هشغله عليه وهحطلك الـ B-roll في الفيديو. بصراحة جميل جداً وممتاز، لأن أنا لو أنا معنديش خبرة خالص وعايز من أول ما تجيلي الفكرة لحد ما أنشر التطبيق ما أعملش أي حاجة بإيدي، مجرد إني بـ “Prompt” أو بكتب للـ AI، فده شيء ممتاز جداً.
هتلاقي اللينك بتاع OnSpace موجود تحت في الديسكربشن بتاع الفيديو وكمان في أول كومنت. أشوفكم إن شاء الله في فيديو جديد ودمتم سالمين.
