איך מכינים משהו עם מגרשי משחקים מהירים

רק לפני מספר ימים סיימתי את הגשת המלגות שלי ל- WWDC 2018. היה כל כך כיף ליצור את אליס ב- codeLand. זו הייתה השנה הראשונה שהגישתי מועמדות למלגות WWDC, ואני מקווה להיכנס!

אליס בקוד לנד היא שלוש באחת. זה סימולטור האקרים / קידודים שנראה כמו מסוף Mac OS שאפשר לשחק איתו במצב לא מקוון. זהו גם סיפור מצחיק של האקר בשם אליס שניסה להשיג גישה לא מורשית לפורטל WWDC של אפל לאחר שהצליח לפרוץ את toothtube.com (פלטפורמת שיתוף וידאו לבדיקת משחות שיניים) ו- macaroonsarethebest.com (פלטפורמה חברתית לאוהבי מקרון כמוני). . ולבסוף, זוהי הדגמה טכנית של הזרקות SQL (טכניקת פריצה) לאנשים ללמוד על אבטחת מידע ועל התהליך שלב אחר שלב להזרקות SQL לאחר גילוי האם אתר פגיע או לא.

מאז 2017, אפל הציבה את האתגר בפני מועמדים למלגות ליצור חוויה אינטראקטיבית ב- Swift Playgrounds.

כשהתחלתי את דרכי, הייתי די מבולבל. מעולם לא עשיתי דבר ב Playgrounds לפני כן, כיוון שעבדתי תמיד עם פרויקטים של Xcode (המאפשרים לך ליצור את האפליקציות האמיתיות של iOS). השתמשתי רק ב- Playgrounds כשהתחלתי ללמוד את סוויפט ללמוד ולקודד מושגי תכנות בסיסיים. המדריכים בקורסים המקוונים שלי השתמשו בו, אך הקורסים הללו ארכו שבועיים בלבד, ומעולם לא יצרתי בהם שום גרפיקה או אנימציה.

אז לקח קצת זמן להכיר את Playgrounds. במבט לאחור, יכולתי לחסוך חצי זמן אילו ידעתי היכן לחפש את התשובות הנכונות וכיצד להתחיל לעבוד איתן.

אז פוסט זה מיועד לכל המועמדים העתידיים למלגות WWDC, מכיוון שנראה שאפל תמשיך לתת משימה זו עבור המלגה מדי שנה. גם אם אין לך שום קשר למלגות WWDC, אני חושב ש- Swift Playgrounds הוא כלי מדהים לבנייה מהירה של אבות טיפוס.

הערה: הודעה זו מניחה שיש לך רקע במסגרות סוויפט ו- iOS כמו UIKit. אם בנית יישומי iOS בעבר, זה יהיה בונוס ענק!

בואו נתחיל!

אז מה הם מגרשי משחקים סוויפט, ולמה לטרוח?

Swift Playgrounds היא אפליקציית iPad שהוצגה על ידי Apple בשנת 2014, המסייעת לכם ללמוד לקודד ב- Swift. זה גם כלי ב- Xcode ליצירת מגרשי משחקים. אתה יכול להפעיל מגרשי משחקים שנוצרו ב- Xcode באייפד ולהיפך.

ההבדל בין אפליקציית האייפד לכלי ה- Xcode הוא שבאייפד, מגרשי המשחקים שאתה יוצר יכולים לגשת לתכונות כמו המצלמה, מסך המגע וכדומה. אבל בזמן שאתה מפעיל מגרש משחקים ב- Xcode, אתה לא יכול לעשות את זה. עוד על מגרשי משחקים סוויפט כאן.

בעוד שהמושגים והדוגמאות בפוסט זה משתמשים ב- Xcode, ניתן ליצור ולהפעיל את מגרשי המשחקים גם באפליקציית iPad.

כמה מושגים ללמוד

1. כיצד להפעיל / לשחק מגרשי משחקים, ולהתחיל איתם

אתה יכול להוריד מגרשי משחקים פתוחים כאן, כאן, וכאן. על מנת להשמיע אותם, לחץ על עורך העוזר ב- Xcode ובחר בתצוגה החיה אם לא נבחר באופן אוטומטי.

תצוגה חיה היא המקום בו מוצגים הפלט או תוצאות הקוד שלך. כאשר אתה יוצר אובייקט כלשהו בקוד שברצונך שיוצג בתצוגה החיה, עליך להקצות את המאפיין 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 

בחלונית הניווט תראו שיש שתי תיקיות: מקורות (לכל קוד העזר) ומשאבים (לכל נכסי התמונה והשמע).

מנסיוני, גרירת קובץ סוויפט מספריית האובייקטים אינה פועלת במגרשי משחקים משום מה. במקום זאת, לחץ באמצעות לחצן העכבר הימני על תיקיית המקורות ולחץ על "קובץ חדש" כדי ליצור קובץ סוויפט חדש.

2. איך יוצרים תצוגה?

במגרשי משחקים אין לוחות סיפור. ניתן ליצור תצוגה (UIView) בכל גודל (מקסימום 1024 x 768) באופן פרוגרמטי.

יצרתי אחת בדוגמה שלמעלה.

3. מהי PlaygroundSupport?

PlaygroundSupport היא מסגרת לביצוע דברים כמו גישה לדף מגרש משחקים וניהול ביצועו, ניהול תצוגות חיות ושיתוף וגישה לנתונים מתמשכים.

בעיקרון, עליך לייבא מסגרת זו כדי שתוכל להקצות את מאפיין התצוגה החיה של דף המשחקייה לאובייקט שיצרת.

4. יצירת תיעוד עשיר באמצעות Markup

Swift Playgrounds מאפשר לך ליצור תיעוד יפה (קל יותר לקריאה מההערות הרגילות) באמצעות שפה שנקראת Markup.

התחביר הבסיסי עבור סימון לתיעוד עשיר הוא כדלקמן:

  1. השתמש ב- "//: stuff" לתגובות בודדות, שאם אתה שם לב, פירושן רק ":" נוסף אחרי // (המשמש לתגובות רגילות).
  2. השתמש ב- "/ *: stuff * /" לתגובות מרובות שורות.
  3. קידמו שורה עם hashtag, למשל, "#stuff" כדי ליצור כותרת.
  4. עטוף טקסט בתוך כוכבית, למשל, "* דברים *" להצגה נטויה.
  5. עטוף טקסט בשתי כוכביות, למשל, "** דברים **" להצגה מודגשת.

לאחר שכתבת את התוכן בתחביר, הוא בפורמט הסימון הגולמי. וכדי להציג אותו בתבנית הסימון המוצגת (התיעוד האמיתי העשיר), עבור אל העורך, ותחת "הגדרות מגרש משחקים" בחר באפשרות "עיבוד תיעוד".

קרא עוד על Markup כאן.

התחלה על ידי בניית מגרש משחקים פשוט

בסדר, בואו ללכלך את הידיים על ידי כתיבת קוד! בואו ליצור סימולטור האקרים כמו hackertyper.com! :-D

נתחיל ביצירת הרקע שלנו לסימולטור ההאקרים. לאחר מכן, באמצעות שיטת 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. תיעוד של אפל.
  2. WWDC session videos. Check out this, this, this, and this, in that order.
  3. Playgrounds in depth at RWDevCon 2017.
  4. The Kaseys video
  5. Code tutsplus tutorial
  6. WWDC 2017 and WWDC 2018 submissions. Also, awesome Swift Playgrounds to check out and get ideas from.
  7. A short chapter from a great book.

That’s it for now! Follow me on Medium or Twitter. Download an app I created! Check out an awesome startup I’m advising! :)