مساحة اعلانية

آخر المواضيع

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension
كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

تم شرح مسبقاً إضافات التطبيقات من خلال WWDC 14 وهي الطريقة التي توسّع وظائف تطبيقات iOS إلى أجزاء أخرى من تلك الأنظمة وأيضاً تسمح بالإتصال الأفضل بين التطبيقات.

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

ماذا سنبني في هذا الدرس؟

سنقوم في هذا الدرس بإنشاء Action extension يدعى "Read it" . حيث ستقبل هذه الإضافة بإدخال النصوص وقرائتها من خلال استخدام تركيب واجهة التطبيقات API من منصّة العمل AVFoundation . وأعتقد أن هذه المنصّة ستعمل جيداً مع هذا الدرس.

يمكنك مشاهدة هذه الإضافة عند الانتهاء منها وتحميلها من خلال موقع GitHub .

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension
كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

إنشاء Action Extension

الخطوة الأولى: تثبيت المشروع


في البداية يجب تثبيت برنامج Xcode 6.1 أو أعلى لإنشاء مشروع جديد. من خلال الضغط على
New > Project من خلال البرنامج قسم القائمة File ثم اختيار Single View Application .

اضغط على Next ثم قم بتسمية المشروع بإسم SampleActionExtensionApp ثم إدخل إلى Organization Identifier ثم قم بضبط Devices إلى iPhone . وأيضاً سنستخدم اللغة البرمجية في هذا الدرس هي Objective-C .

الخطوة الثانية: إضافة الواجهة

عند إنشاء المشروع قم بإضافة الواجهة في Action extension. قم باختيار New > Target من خلال القائمة File . اختر من القائمة اليسرى Application Extension من مجموعة iOS . اختر أيضاً Action extension ثم اضغط على Next .

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension
كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

قم بوضع اسم للمشروع في Product Name إلى ReadItAction . ثم اضغط على Finish .

Action Types

هناك نوعان من Action extensions وهما واحداً مع واجهة والآخر بدون. لكن ممكن أن تتساءل ماهي الفائدة من الحصول على Action extensions بدون واجهة مستخدم. سنوضح ذلك.

تمثّل Action extensions وبدون واجهة المستخدم أحد الطرق المتغيرة للعنصر الحالي. فمثلاً يمكن أن يزيل Action extension العيون الحمراء من صورة معينة بدون استخدام واجهة المستخدم لكن واجهة التطبيقات التي نستخدمها يمكن التعديل على المحتوى وأيضاً تحسين الصور.

الخطوة الثالثة: تنفيذ واجهة المستخدم

بعد أن ألممنا بالأساسيات سنبدأ الآن بإنشاء واجهة المستخدم .

اضغط على Main.storyboard في مجموعة SampleActionExtensionApp في Project Navigator . اختر من القائمة اليمنى File Inspector كما ألغي اختيار Use size classes. لاحظ بأنك في حال كنت تقوم بإنشاء تطبيق حقيقي يجب أن يكون مدعوماً مع iPad وتعتبر تلك طريقة جيدة.

قم بفتح Object Library ثم اسحب النص الموجود على الشريط إلى المشاهدة. ثم قم بتغيير نافذة شكل النص إلى {x:8, y:20, width:304, height:288} في Size Inspector على اليمين. وفي الشريط قم بضبط النافذة إلى {x:0, y:308, width:320, height:44} في Size Inspector.

يحتوي الشريط على زر قم باختياره في Attributes Inspector ثم قم بضبط Style إلى Plain وأيضاً Identifier إلى Action .

وباللمسات النهائية قم بضبط النص الافتراضي ليتم مشاهدته ثم استبدله "Read it" كما في الصورة التالية:

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension
كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

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

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

الخطوة الرابعة: إظهار المشاهد لمشاهدة Controller

تالياً ستحتاج إلى بعض الأكواد ViewController.m يمكنك البدء بإنشاء مخرج للنص المشاهد في صفوف Controller كما في الصورة التالية:
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UITextView *textView;
@end

قم بإنشاء action يسمى actionButtonPressed حيث سنبدأ باستخدام UIActivityViewController واستخدامه للمستخدم.


(IBAction)actionButtonPressed:(id)sender {
UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:@[self.textView.text]
applicationActivities:nil];
[self presentViewController:activityVC animated:YES completion:nil];

اذهب الآن الى Main.storyboard ثم قم بالاتصال لمشاهدة مخرج النص من خلال الضغط على Control ثم قم بسحب الكائن View Controller في View Controller Scene إلى مجال النص ثم اختر textView من القائمة المنبثقة

ولكي تقوم بالاتصال مع طريقة العمل يمكنك اختيار من الشريط السفلي لشريط المهام ثم افتح Connections Inspector. قم بسحبه من selector تحت Sent actions وللكائن View Controller باختيار actionButtonPressed من القائمة المنبثقة.

الآن واجهة المستخدم جاهزة حيث يمكننا المتابعة لإنشاء إضافة جديدة.

الخطوة الخامسة: تنفيذ واجهة المستخدم

يمكنك تكبير مجموعة ReadItAction من خلال Project Navigator ثم اضغط على MainInterface.storyboard ستلاحظ بأن storyboard غير خالية وتحتوي على بعض مكونات واجهة المستخدم. سنقوم باستخدام بعضاً منهم لكن لن نحتاج إلى مشاهدة الصورة. اختر الصورة ثم احذفها من خلال الضغط على Delete .

افتح مكتبة الكائنات Object Library ثم أضف نصاً موجوداً ضمن شريط المهام . ثم قم بتغيير الإطار إلى {x: 8, y: 72, width: 304, height: 300} وأخيراً انقر نقراً مزدوجاً على عنوان شريط المهام لمشاهدة العنوان ثم قم بتغييره إلى Text reader .

الخطوة السادسة: تنفيد ActionViewController

حان الوقت الآن لإنشاء الإضافة. قم باختيار ActionViewController.m في Project Navigator ثم قم بالتغيرات التالية.

في أسفل حالة الاستيراد import statements قم بإضافة حالة جديدة في حالة الاستيراد في إطار العمل AVFoundation ولكي نقوم بتسريع واجهة المستخدم API وتحويلها الى إضافة جديدة.


@import AVFoundation

في صف الإضافة وبالتحديد في صف ActionViewController قم بإزالة المخرج imageView ثم قم بإضافة واحدة من الكود التالي:
@interface ActionViewController ()
@property (nonatomic, strong) IBOutlet UITextView *textView;
@end 

نحتاج أيضاً للتعديل على طريقة viewDidLoad الموجودة في صف ActionViewController كالتالي:


(void)viewDidLoad {
[super viewDidLoad];
// Get the item[s] we're handling from the extension context.
// In our Action extension, we only need one input item (text), so we use the first item from the array.
NSExtensionItem *item = self.extensionContext.inputItems[0];
NSItemProvider *itemProvider = item.attachments[0];
if ([itemProvider hasItemConformingToTypeIdentifier:(NSString *)kUTTypePlainText]) {
// It's a plain text!
__weak UITextView *textView = self.textView;
[itemProvider loadItemForTypeIdentifier:(NSString *)kUTTypePlainText options:nil completionHandler:^(NSString *item, NSError *error) {
if (item) {
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
[textView setText:item];
// Set up speech synthesizer and start it
AVSpeechSynthesizer *synthesizer = [[AVSpeechSynthesizer alloc]init];
AVSpeechUtterance *utterance = [AVSpeechUtterance speechUtteranceWithString:textView.text];
[utterance setRate:0.1];
[synthesizer speakUtterance:utterance];
}];
}
}];
}

الخطوة السابعة: تكوين الإضافة Action Extension

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

افتح MainInterface.storyboard ثم اتصل مع النص المشاهد في مجال الصورة Image كما فعلنا أيضاً ذلك في Main.storyboard .

أيضاً نحتاج لتحديد أي نوع من البيانات سيتم استخدامه في الإضافة. وفي هذه الحالة هو نص فقط. قم بتوسيع مجموعة Supporting Files واختر Info.plist . افتح Info.plist وقم بتغييره إلى NSExtension > NSExtensionAttributes > NSExtensionActivationRule .

قم بتغيير نوع NSExtensionActivationRule من String إلى Dictionary .

ومع استخدام dictionary يمكنك الضغط على إشارة + . وبهذه العملية يمكنك إضافة مفتاح فرعي. قم بضبط الاسم إلى NSExtensionActivationSupportsText وقم بتغيير نوعها إلى Boolean والقيمة YES.

ما نزال ضمن إطار Info.plist . قم بتغيير Bundle Display Name إلى Read It. وبهذا تبدو أفضل كما في الصورة التالية:

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension
كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

الخطوة الثامنة

وبما أننا انتهينا يجب إضافة ايقونة إلى الإضافة. في قسم Project Navigator اختر المشروع وتحته الواجهة ثم اختر واجهة ReadItAction . وفي علامة التبويب General في App Icons and Launch Images وأيضاً علامة التبويب Use Asset Catalog الموجودة تالياً App Icons Source. ثم اضغط على Migrate. ثم اختر نوع التصنيف وأسفله الأيقونة في مكان iPhone App iOS 7,8 60pt 2x .

تم الآن إنشاء الإضافة ويجب تشغيلها للتأكد أن كل شيء يعمل بشكل جيد كما قمنا بإضافة الأيقونة وتحتاج إلى التأكد بأن ملف Images.xcassets تم نسخه إلى واجهة الإضافة.

كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension
كيفية إنشاء إضافة بسيطة مع تطبيقات iOS Action Extension

ولفعل ذلك في Project Navigator اختر ReadItAction من قائمة الواجهات Targets . افتح علامة التويب Build Phases في الأعلى ثم قم بتوسيع Copy Bundle Resources . إذا لم يكن ملف Images.xcassets موجوداً في المصدر عندها يمكنك الضغط على إشارة + لإضافة واحداً جديداً.

الكــاتــب

    • مشاركة

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ الشبح للمعلوميات 2019 ©