Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

إنشاء التطبيق الأول الخاص بك مع فيوز

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

  • كيفية التشفير باستخدام UX Markup.
  • كيفية استخدام APIs القابل للمراقبة، و المؤقت، و تحديد الموقع.
  • كيفية معاينة أحد التطبيقات باستخدام معاينة سطح المكتب والمعاينة المخصصة.

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

المتطلبات الأساسية

لبدء العمل مع فيوز، انتقل إلى صفحة التنزيلات وقم بالتسجيل للحصول على حساب. يمكنك أيضًا تسجيل الدخول إلى حساب موجود إذا كان لديك حساب.

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

سنغطي أيضًا كيفية معاينة التطبيق باستخدام معاينة مخصصة. يتطلب ذلك تثبيت Android Studio أو Xcode على جهاز الكمبيوتر لديك.

إن الفهم الأساسي لتقنيات الويب مثل HTML و CSS وجافا سكريبت مفيد ولكن غير مطلوب.

ما الذي سوف تنشئه

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

في ما يلي الشكل الذي سيبدو عليه التطبيق:

Final Output HIIT Stopwatch

يمكنك عرض شيفرة المصدر الكاملة في البرنامج التعليمي GitHub repo.

إنشاء فيوز مشروع جديد

بمجرد تثبيت فيوز Studio، عليك أن تكون الآن قادرًا على إنشاء مشروع فيوز جديد. فقط افتح فيوز Studio وانقر على زر مشروع فيوز جديد. أدخل اسم المشروع، وانقر على إنشاء:

Create a new Fuse project

سيؤدي ذلك إلى إنشاء مجلد جديد في الدليل المحدد. افتح هذا المجلد وافتح الملف MainView.ux. بشكل افتراضي، سيحتوي فقط على ترميز <التطبيق>. قم بتحديثه لتضمين <النص> ، ثم قم بحفظ الملف:

يجب الآن تحديث المعاينة بالنص الذي حددته:

Hello world output

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

يمكنك أيضًا رؤية السجلات في اللوحة السفلية. يمكنك تشغيل لوحتك الخاصة باستخدام console.log () ، كما هو الحال في المتصفح. والفرق الوحيد هو أن لديك الكائنات  JSON.stringify ()من أجل رؤية قيمتها، حيث أن تنفيذ console.log () في فيوز يمكن  فقط من إخراج السلاسل.

UX Markup

نحن الآن جاهزون لبناء التطبيق. افتح الملف MainView.ux وقم بإزالة عنصر<text> من البداية. بهذه الطريقة، يمكننا البدء من خلال قائمة بيضاء:

تضمين الخطوط

تمامًا كما هو الحال في مستند HTML، يتمثل المعيار في تضمين مواد العرض - أشياء مثل الخطوط وأوراق الأنماط والنصوص - قبل الترميز الفعلي للصفحة. لذا أضف ما يلي داخل عنصر<APP> :

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

يمكنك تنزيل الخط من البرنامج التعليمي GitHub repo. بعد ذلك، قم بإنشاء مجلد أصول / خطوط / روبوت داخل دليل المشروع الأساسي وضع ملف .ttf فيه.

إذا كنت تريد استخدام خط آخر، يمكنك تنزيله من dafont.com. هذا هو المكان الذي قمت بتنزيل الخط منه لهذا التطبيق.

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

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

تضمين جافا سكريبت

بعد ذلك، نحتاج إلى تضمين ملف جافا سكريبت لهذه الصفحة. يمكننا القيام بذلك باستخدام عنصر<Jafascript> :

لا تنس إنشاء ملف البرامج النصية / MainView.js في قاعدة دليل المشروع.

خلق مكونات جديدة

لزيادة إمكانية إعادة استخدام الشيفرة، يسمح لنا فيوز بإنشاء مكونات مخصصة من المكونات الموجودة. في الشيفرة أدناه، نستخدم <Panel>لإنشاء زر مخصص. فكر في الأمر مثل div الذي يعمل بمثابة حاوية للعناصر الأخرى. في هذه الحالة ، نستخدمه كمكوّن قابل لإعادة الاستخدام لإنشاء زر.

يأتي فيوز مع العديد من العناصر. هناك عناصر لوضع المحتوى مثل <لوحة> ،وعناصر إظهار عناصر تحكم المستخدم، والصفحات والتنقل، والبرمجة والبيانات، والأوليات لبناء واجهة المستخدم. كل منها لديه مجموعة من الخصائص الخاصة به، مما يسمح لك بتعديل البيانات، والعرض التقديمي، والسلوك.

لإنشاء مكون قابل لإعادة الاستخدام، أضف خاصية ux: Class إلى عنصر العرض التقديمي الذي ترغب في استخدامه كقاعدة. في هذه الحالة، نستخدم<Panel>   كقاعدة. يمكنك بعد ذلك إضافة بعض التصميم الافتراضي. يشبه هذا كيفية عمل التصميم في CSS. يضيف الهامش مساحة خارج الحاوية. هنا قمنا بتحديد قيمة واحدة فقط ، لذلك يتم تطبيق هذا الهامش على جميع جوانب اللوحة. يضيف اللون لون خلفية للعنصر:

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

داخل <اللوحة>  ، استخدم نوع بيانات القيمة التي تريد تمريرها كاسم العنصر، ثم قم بإضافة اسم الخاصية باستخدامx: Propertyu . يمكنك بعد ذلك عرض القيمة المعروضة في الموقع باستخدام {ReadProperty PropertyName} ، حيث يكون PropertyName هو القيمة التي قدمتها لـ ux: Property. سيسمح لك ذلك بتوفير خاصية Text عندما تستخدم مكون  Togglebtn.

بعد ذلك ، نريد أن نقدم للمستخدم نوعًا من التعليقات أثناء الضغط على الزر. يمكننا القيام بذلك عن طريق القوادح وصانع الرسوم المتحركة. القوادح هي أساسًا المستمعين للحدث - في هذه الحالة <Whilepressed>. و صانع الرسوم المتحركة هي الرسوم المتحركة أو المؤثرات التية تريد تنفيذها عندما يكون القادح نشطاً. سيجعل الرمز أدناه الزر 10٪ أكبر من حجمه الأصلي وسيغير لونه. تتيح لك المدة ومدة الرجوع تحديد المدة التي تستغرقها الرسوم المتحركة للوصول إلى أعلى مستوى لها والوصول إلى النهاية.

بعد ذلك، نقوم بإنشاء مكون <IconBtn>. كما يوحي الاسم، هذا هو الزر الذي يعرض فقط الأيقونة كمحتوى. يعمل هذا بنفس طريقة عمل المكون السابق، على الرغم من وجود بعض الأشياء الجديدة التي قمنا بها هنا.

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

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

المحتوى الرئيسي

يمكننا الآن المضي قدما في المحتوى الرئيسي. أولاً ، نلف كل شيء في <stackpanel> . وكما يوحي الاسم، فإن هذا يتيح لنا "تكديس" انتاجه إما رأسيًا أو أفقيًا. بشكل افتراضي، يستخدم الاتجاه العمودي لذلك لا نحتاج إلى تحديده بشكل صريح:

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

بعد ذلك، نضيف صورة خلفية للصفحة. هذا يقبل مسار الملف إلى صورة الخلفية التي تريد استخدامها. يصنع StretchMode من تعبئة امتداد الخلفية لملء الشاشة بالكامل:

يمكنك تنزيل صورة الخلفية التي استخدمتها من البرناج مالتعليمي GitHub repo. أو يمكنك العثور على أنماط مماثلة على موقع Toptal.

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

بعد ذلك، نستخدم مكوّن<IconBtn> الذي أنشأناه سابقًا - لا يختلف عن بيئة الويب التي نستخدم فيها معرف الخط. في فيوز ، يجب عليك استخدام Unicode المعينة بخط الأيقونة الذي تريد استخدامه. يجب أيضًا استخدام & # x كبادئة. عندما يتم الضغط على هذا الزر (يسمى Clicked) ، يتم تنفيذ الدالة addLap () المعلنة في ملف JavaScript:

في الخط Awesome ، يمكنك العثور على unicode لخط الأيقونة على الصفحة الخاصة به.

لإضافة اللفة الجديدة يوجد أسفل النص مباشرةً بعض النصوص التي تشير إلى أن الزر أعلاه هو لإضافة دورات جديدة:

بعد ذلك، اعرض الزر لبدء وتوقف المؤقت. هذا أيضًا ينفذ وظيفة سنعلنها لاحقًا:

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

في الشيفرة أعلاه، نحن نستخدم <Dockpanel>   لفك المحتويات لكل عنصر. يسمح لنا هذا النوع من اللوحات "بتثبيت" المنتجات على جوانب مختلفة (أعلى، يسار، يمين، وأسفل) في المساحة المتوفرة. بشكل افتراضي، يضع هذا المنتجات مباشرة فوق بعضهم البعض. للمباعدة بينهم بشكل متساوٍ، يجب إضافة خاصية محاذاة.

كود جافا سكريبت

نحن الآن مستعدون لإضافة شيفرة جافا سكريبت. في فيوز، يتم استخدام JavaScript بشكل أساسي لمنطق العمل والعمل مع الوظائف الأصلية للجهاز. تتم معالجة التأثيرات، والانتقالات، والحركات للتفاعل مع واجهة المستخدم بالفعل بواسطة علامة UX Markup.

ابدأ باستيراد جميع واجهات برمجة التطبيقات التي نحتاجها. وهذا يشمل القابلة للمراقبة ، والتي تستخدم أساسًا لتعيين المتغيرات في واجهة المستخدم. ويمكن بعد ذلك تحديث هذه المتغيرات باستخدام JavaScript. المؤقت هو المعادل لوظيفة setTimeout و setInterval في إصدار الويب من JavaScript. تسمح لنا GeoLocation بالحصول على الموقع الحالي للمستخدم:

بعد ذلك، نقوم بتهيئة جميع القيم التي يمكن ملاحظتها والتي سنستخدمها. هذه هي المتغيرات التي رأيتها في ترميز UX في وقت سابق. يتم تحديث قيم هذه المتغيرات على مدار عمر التطبيق، لذلك نجعلها متغيرًا يمكن مراقبته. يسمح لنا هذا بتحديث محتويات واجهة المستخدم بفاعلية كلما تغيرت أي من هذه القيم:

بعد ذلك، يمكننا الآن تعيين القيم المبدئية لزر التبديل ونص المؤقت:

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

عيّن القيم المبدئية للمؤقت، ووقت اللفة، والموقع لكل لفة:

يتم استخدام وظيفة التبديل () لبدء المؤقِّت وإيقافه. عندما يكون المؤقت متوقفاً حاليًا وينقر المستخدم على زر التبديل، ففي هذا الوقت نقوم بإعادة ضبط القيم الخاصة بالمؤقت واللفات. وذلك لأننا نريد أن يرى المستخدم هذه القيم حتى بعد إيقاف المؤقِّت.

بعد ذلك، احصل على الموقع الحالي للمستخدم وادفعه إلى مجموعة المواقع. ثم قم بإنشاء مؤقت ينفذ كل 10 مللي ثانية. نحن نزيد كل من الوقت الإجمالي و زمن اللفة لكل إنجاز. ثم قم بتحديث واجهة المستخدم بالقيمة المهيأة باستخدام الدالة formatTimer ():

عندما يقوم المستخدم بإيقاف المؤقت، فإننا نحذفه باستخدام طريقة delete () في المؤقت. يتطلب هذا هوية تعريف المؤقت التي تم إرجاعها عند إنشاء المؤقت:

فيما يلي وظيفة لتنسيق المؤقت. هذه تعمل عن طريق تحويل الميلي ثانية إلى ثوان وإلى دقائق. نحن نعلم بالفعل أن هذه الوظيفة يتم تنفيذها كل 10 مللي ثانية. ويتم زيادة الوقت بنسبة 1 في كل مرة ينفذ فيها. لذا للحصول على ميلي ثانية، نقوم ببساطة بضرب الوقت في 10. من هنا، نقوم فقط بحساب الثواني والدقائق بناءً على القيمة المعادلة لكل وحدة قياس:

في كل مرة ينقر فيها المستخدم على زر التحديث ، يتم تنفيذ وظيفة addLap () .يؤدي ذلك إلى إضافة إدخال جديد أعلى اللفات التي يمكن مراقبتها:

وهنا وظيفة للحصول على المسافة المغطاة بالأمتار. هذا يستخدم صيغة Haversine:

لا تنس تصدير جميع القيم التي يمكن مراقبتها:

حزمة تحديد الموقع الجغرافي

للحفاظ على الأشياء سهلة، لا يتضمن فيوز جميع الحزم التي يدعمها بشكل افتراضي. بالنسبة إلى أشياء مثل تحديد الموقع الجغرافي والإشعارات المحلية، يلزمك إخبار فيوز بتضمينها عند إنشاء التطبيق. افتح StopWatch.unoproj في قاعدة دليل المشروع لديك وقم بتضمين فيوز.GeoLocation ضمن صفيف الحزم:

يجب أن يُعلم هذا فيوز بتضمين حزمة تحديد الموقع عند إنشاء التطبيق للمعاينة المخصصة أو لإنشاء المثبت.

الإعداد للمعاينة المخصصة

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

بعد ذلك، في Xcode، سجل الدخول باستخدام حساب مطوّر برامج Apple. إذا لم يكن لديك بالفعل، يمكنك الانتقال إلى موقع مطوّر برامج Apple وإنشاء موقع ويب. إنه مجاني فعلاً لتطوير التطبيقات واختبارها على جهاز iOS الخاص بك. ومع ذلك، هناك بعض القيود إذا لم تكن جزءًا من برنامج المطور.

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

بعد الانتهاء من ذلك، سيكون بمقدورك الآن تشغيل التطبيق على جهازك. انقر على معاينة> معاينة على iOS في فيوز Studio وانتظر حتى يتم تشغيل Xcode. بمجرد فتح Xcode، حدد جهازك وانقر على زر التشغيل. سيؤدي ذلك إلى إنشاء التطبيق وتثبيته على جهازك. إذا كان هناك خطأ في الإنشاء، فمن المرجح أن معرف حزمة المعاينة ليس فريدًا:

change the bundle ID

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

ومع ذلك، لن تتمكن من فتح التطبيق حتى توافق عليه. يمكنك القيام بذلك على جهاز iOS الخاص بك عن طريق الانتقال إلى الإعدادات> عام> إدارة الأجهزة وتحديد البريد الإلكتروني المرتبط بحساب Apple Developer الخاص بك. الموافقة عليه، وهذا يجب أن يفتح التطبيق.

بالنسبة إلى Android، يجب أن تكون قادرًا على معاينة التطبيق بدون أي خطوات إضافية.

استنتاج

هذا هو! في هذا البرنامج التعليمي، تعلمت أساسيات إنشاء تطبيق باستخدام إطار فيوز. على وجه التحديد، لقد قمت بإنشاء تطبيق ساعة التوقف. من خلال إنشاء هذا التطبيق، تعلمت كيفية العمل باستخدام فيوز's UX Markup وعدد قليل من واجهات برمجة تطبيقات جافا سكريبت فيوز. تعلمت أيضًا كيفية استخدام فيوز Studio لمعاينة التطبيق على الكمبيوتر والهاتف أثناء تطويره.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.