كيف تصنع شيئًا باستخدام Swift Playgrounds

قبل أيام قليلة فقط ، أنهيت تقديم منحة WWDC 2018 الخاصة بي. لقد كان إنشاء أليس في codeLand ممتعًا للغاية. كانت هذه سنتي الأولى التي تقدمت فيها للحصول على منح WWDC ، وآمل أن أحصل عليها!

أليس في codeLand هو ثلاثة في واحد. إنه محاكي متسلل / ترميز يشبه محطة Mac OS التي يمكنك اللعب بها في وضع عدم الاتصال. إنها أيضًا قصة مضحكة عن أحد المتسللين المسمى Alice الذي حاول الحصول على وصول غير مصرح به إلى بوابة WWDC من Apple بعد أن نجح في اختراق موقع toothtube.com (منصة مشاركة فيديو لمراجعات معجون الأسنان) و macaroonsarethebest.com (منصة اجتماعية لعشاق المكرون مثلي) . وأخيرًا ، إنه عرض تقني لحقن SQL (تقنية قرصنة) للأشخاص للتعرف على أمان المعلومات والعملية التدريجية لحقن SQL بعد معرفة ما إذا كان موقع الويب عرضة للخطر أم لا.

منذ عام 2017 ، طرحت Apple التحدي أمام المتقدمين للمنح الدراسية المتمثل في إنشاء تجربة تفاعلية في Swift Playgrounds.

عندما بدأت ، كنت في حيرة من أمري. لم أفعل شيئًا في Playgrounds من قبل ، حيث عملت دائمًا مع مشاريع Xcode (التي تتيح لك إنشاء تطبيقات iOS الحقيقية). كنت قد استخدمت Playgrounds فقط عندما بدأت في تعلم Swift لتعلم وترميز مفاهيم البرمجة الأساسية. كان المدربون في الدورات التدريبية الخاصة بي يستخدمونها ، لكن هذه الدورات كانت مدتها أسبوعين فقط ، ولم أقم بإنشاء أي رسومات أو رسوم متحركة فيها.

لذلك استغرق الأمر بعض الوقت للتعرف على Playgrounds. بعد فوات الأوان ، كان بإمكاني توفير نصف الوقت لو عرفت أين أبحث عن الإجابات الصحيحة وكيف أبدأ العمل معهم.

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

ملاحظة: يفترض هذا المنشور أن لديك خلفية في أطر عمل Swift و iOS مثل UIKit. إذا كنت قد أنشأت تطبيقات iOS من قبل ، فستكون هذه مكافأة كبيرة!

لنبدأ!

إذن ما هي Swift Playgrounds ، ولماذا تهتم؟

Swift Playgrounds هو تطبيق iPad قدمته شركة Apple في 2014 يساعدك على تعلم البرمجة في Swift. إنها أيضًا أداة في Xcode لإنشاء Playgrounds. يمكنك تشغيل Playgrounds التي تم إنشاؤها في Xcode على جهاز iPad والعكس صحيح.

الفرق بين تطبيق iPad وأداة Xcode هو أنه على iPad ، يمكن لـ Playgrounds التي تنشئها الوصول إلى ميزات مثل الكاميرا ، وشاشة اللمس ، وما إلى ذلك. لكن أثناء تشغيل Playground على Xcode ، لا يمكنك فعل ذلك. المزيد عن Swift Playgrounds هنا.

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

بعض المفاهيم للتعلم

1. كيفية تشغيل / لعب الملاعب ، والبدء بها

يمكنك تنزيل ساحات اللعب مفتوحة المصدر هنا وهنا وهنا. من أجل تشغيلها ، انقر فوق Assistant Editor في Xcode وحدد "Live View" إذا لم يتم تحديدها تلقائيًا.

العرض المباشر هو المكان الذي يتم فيه عرض إخراج أو نتائج التعليمات البرمجية الخاصة بك. عند إنشاء كائن ما في التعليمات البرمجية الخاصة بك تريد عرضه في العرض المباشر ، فإنك تحتاج إلى تعيين خاصية Live View لصفحة Playground إلى هذا الكائن.

الآن ، إليك الكود لتعيين خاصية Live View لصفحة Playground إلى كائن UIView. يمكنك أيضًا تعيين فئة أو وحدة تحكم في العرض.

سيكون عليك استيراد إطار PlaygroundSupport لذلك ، و UIKit أيضًا.

let view = UIView(frame: CGRect(x: 0, y:0, width: 1024, height: 768)
PlaygroundPage.current.live = view 

في جزء التنقل ، سترى مجلدين: المصادر (لكل التعليمات البرمجية المساعدة) والموارد (لجميع أصول الصور والصوت).

من واقع خبرتي ، فإن سحب ملف Swift من مكتبة الكائنات لا يعمل في Playgrounds لسبب ما. بدلاً من ذلك ، انقر بزر الماوس الأيمن فوق مجلد المصادر وانقر فوق "ملف جديد" لإنشاء ملف Swift جديد.

2. كيف تنشئ طريقة عرض؟

لا تحتوي الملاعب على القصص المصورة. يمكنك إنشاء عرض (UIView) من أي حجم (بحد أقصى 1024 × 768) برمجيًا.

لقد صنعت واحدة في المثال أعلاه.

3. ما هو PlaygroundSupport؟

PlaygroundSupport عبارة عن إطار عمل للقيام بأشياء مثل الوصول إلى صفحة الملعب وإدارة تنفيذها وإدارة العروض الحية ومشاركة البيانات الدائمة والوصول إليها.

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

4. إنشاء وثائق غنية مع العلامات

يتيح لك Swift Playgrounds إنشاء وثائق جميلة (يسهل قراءتها أكثر من التعليقات العادية) باستخدام لغة تسمى Markup.

الصيغة الأساسية للترميز للوثائق المنسقة هي كما يلي:

  1. استخدم "//: stuff" للتعليقات الفردية ، والتي إذا لاحظت ، فهذا يعني مجرد ":" إضافي بعد // (والذي يستخدم للتعليقات العادية).
  2. استخدم “/ *: stuff * /” للتعليقات متعددة الأسطر.
  3. بادئة سطر بعلامة تصنيف ، على سبيل المثال ، "#stuff" لإنشاء عنوان.
  4. قم بلف النص داخل علامة النجمة ، على سبيل المثال ، "* stuff *" لعرضه بخط مائل.
  5. قم بلف النص داخل علامتين نجميتين ، على سبيل المثال ، "** stuff **" لعرضه بخط غامق.

بعد كتابة المحتوى في بناء الجملة ، يكون بتنسيق الترميز الأولي. ولعرضه بتنسيق الترميز المقدم (الوثائق الغنية الحقيقية) ، انتقل إلى المحرر ، وتحت "إعدادات ساحة اللعب" ، حدد "تقديم الوثائق".

اقرأ المزيد عن الترميز هنا.

الشروع في العمل ببناء ملعب بسيط

حسنًا ، دعنا نتسخ أيدينا عن طريق كتابة بعض الرموز! لنقم بإنشاء جهاز محاكاة للقراصنة مثل hackertyper.com! :-د

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

import PlaygroundSupportimport UIKit
let arrayOfStrings = ["Alices-MacBook-Pro:~ Alice$", "override func viewDidLoad() {", "super.viewDidLoad()", "makeBackgroundGradient()", "addGradientToPortfolio()", "addGradientToTopBar()", "addGradientToTopBar()", "setupPopup()", "addTradeButton.titleLabel?.minimumScaleFactor = 0.5;", "addTradeButton.titleLabel?.minimumScaleFactor = 0.5;"]
var variableThatChanges : Int = 0
let frameOfMainView = CGRect(x: 0, y: 0, width: 1024, height: 768)
class MainViewController: UIViewController, UITextViewDelegate {
override func viewDidLoad() {
let view = UITextView(frame: CGRect(x: 0, y:0, width: 1024, height: 768))
self.view.frame = frameOfMainViewview.backgroundColor = .blackview.textColor = .greenview.font = UIFont(name: "Courier", size: 20)view.isEditable = trueview.delegate = self self.view.addSubview(view)
} 
func textView(_ textView: UITextView,
shouldChangeTextIn range: NSRange,
replacementText text: String) -> Bool {
if variableThatChanges == (arrayOfStrings.count - 1)
{
variableThatChanges = 0
}
let text = textView.text ?? ""
textView.text = text + "\n" + arrayOfStrings[variableThatChanges]
variableThatChanges += 1
return false
}
}
let master = MainViewController()
master.preferredContentSize = frameOfMainView.size
PlaygroundPage.current.liveView = master

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

ها أنت ذا - لقد أنشأت محاكيًا أساسيًا للقراصنة في أقل من 50 سطرًا من التعليمات البرمجية! الآن حان دورك لتكون مبدعًا مع Playgrounds! ؛)

بعض الموارد الرائعة للتحقق من معرفة المزيد

  1. وثائق Apple.
  2. فيديوهات جلسة WWDC. افحص هذا ، هذا ، هذا ، وهذا ، بهذا الترتيب.
  3. عمق الملاعب في RWDevCon 2017.
  4. فيديو كاسي
  5. كود tutsplus تعليمي
  6. عمليات تقديم WWDC 2017 و WWDC 2018. أيضًا ، Swift Playgrounds الرائعة للتحقق والحصول على أفكار منها.
  7. فصل قصير من كتاب عظيم

هذا كل شيء في الوقت الراهن! تابعني على ميديوم او تويتر. تنزيل التطبيق الذي أنشأته! تحقق من شركة ناشئة رائعة أنصح بها! :)