Cara membuat sesuatu dengan Swift Playgrounds

Pengaturcaraan

Beberapa hari yang lalu, saya telah menyelesaikan penghantaran biasiswa WWDC 2018 saya. Sangat seronok membuat Alice di codeLand. Ini adalah tahun pertama saya memohon biasiswa WWDC, dan saya harap dapat masuk!

Alice in codeLand adalah tiga dalam satu. Ini adalah simulator penggodam / pengekodan yang kelihatan seperti terminal Mac OS yang boleh anda mainkan di luar talian. Ini juga kisah lucu seorang penggodam bernama Alice yang cuba mendapatkan akses tanpa izin ke portal WWDC Apple setelah berjaya meretas ke gigitube.com (platform perkongsian video untuk ulasan ubat gigi) dan macaroonsarethebest.com (platform sosial untuk pencinta macaroon seperti saya) . Dan akhirnya, ini adalah demonstrasi teknikal suntikan SQL (teknik penggodaman) untuk orang ramai mengetahui keselamatan maklumat dan proses langkah demi langkah untuk suntikan SQL setelah mengetahui sama ada laman web rentan atau tidak.

Sejak 2017, Apple telah memberikan tantangan kepada pemohon beasiswa untuk menciptakan pengalaman interaktif di Swift Playgrounds.

Semasa saya mula keluar, saya agak bingung. Saya tidak pernah membuat sesuatu di Playgrounds sebelumnya, kerana saya selalu bekerja dengan projek Xcode (yang membolehkan anda membuat aplikasi iOS sebenar). Saya hanya pernah menggunakan Playgrounds ketika mula belajar Swift untuk belajar dan kod konsep pengaturcaraan asas. Tenaga pengajar dalam kursus dalam talian saya menggunakannya, tetapi kursus itu hanya dua minggu, dan saya tidak pernah membuat grafik atau animasi di dalamnya.

Oleh itu, memerlukan sedikit masa untuk membiasakan diri dengan Playgrounds. Di belakang, saya dapat menjimatkan separuh masa sekiranya saya tahu di mana untuk mencari jawapan yang tepat dan bagaimana untuk mula bekerja dengan mereka.

Oleh itu, catatan ini adalah untuk semua pemohon beasiswa WWDC yang akan datang, kerana nampaknya Apple akan terus memberikan tugas ini untuk beasiswa setiap tahun. Walaupun anda tidak ada kaitan dengan biasiswa WWDC, saya fikir Swift Playgrounds adalah alat yang hebat untuk membina dan membuat prototaip sesuatu dengan cepat.

Catatan: Catatan ini menganggap anda mempunyai latar belakang dalam kerangka Swift dan iOS seperti UIKit. Sekiranya anda pernah membina aplikasi iOS sebelumnya, itu akan menjadi bonus besar!

Mari mulakan!

Jadi apa itu Swift Playgrounds, dan mengapa mengganggu?

Swift Playgrounds adalah aplikasi iPad yang diperkenalkan oleh Apple pada tahun 2014 yang membantu anda belajar membuat kod di Swift. Ini juga merupakan alat dalam Xcode untuk membuat Playgrounds. Anda boleh menjalankan Playgrounds yang dibuat dalam Xcode pada iPad dan sebaliknya.

Perbezaan antara aplikasi iPad dan alat Xcode adalah bahawa pada iPad, Taman Permainan yang anda buat dapat mengakses ciri seperti kamera, layar sentuh, dan sebagainya. Tetapi semasa menjalankan Playground di Xcode, anda tidak dapat melakukannya. Lebih lanjut mengenai Swift Playgrounds di sini.

Walaupun konsep dan contoh dalam catatan ini menggunakan Xcode, Playgrounds dapat dibuat dan dijalankan di aplikasi iPad juga.

Beberapa konsep yang perlu dipelajari

1. Cara menjalankan / bermain Taman Permainan, dan memulakannya

Anda boleh memuat turun Taman Permainan sumber terbuka di sini, di sini, dan di sini. Untuk memainkannya, klik pada Assistant Editor dalam Xcode dan pilih "Live View" jika tidak dipilih secara automatik.

Paparan langsung adalah tempat output atau hasil kod anda dipaparkan. Apabila anda membuat beberapa objek dalam kod anda yang ingin anda paparkan dalam paparan langsung, anda perlu memberikan harta tanah Live View halaman Playground ke objek tersebut.

Sekarang, inilah kod untuk menetapkan harta Live View dari Halaman Playground ke objek UIView. Anda juga boleh menetapkan kelas atau pengawal pandangan.

Anda mesti mengimport kerangka PlaygroundSupport untuk itu, dan UIKit juga.

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

Di panel navigasi, anda akan melihat ada dua folder: Sumber (untuk semua kod tambahan) dan Sumber (untuk semua aset gambar dan audio).

Dari pengalaman saya, menyeret fail Swift dari perpustakaan Objek tidak berfungsi di Playgrounds untuk beberapa sebab. Sebagai gantinya, klik kanan pada folder Sumber dan klik pada "Fail baru" untuk membuat fail Swift baru.

2. Bagaimana anda membuat pandangan?

Taman permainan tidak mempunyai Papan Cerita. Anda boleh membuat paparan (pandangan UIV) dengan ukuran apa pun (maksimum 1024 x 768) secara terprogram.

Saya membuatnya dalam contoh di atas.

3. Apa itu PlaygroundSupport?

PlaygroundSupport adalah kerangka kerja untuk melakukan perkara seperti mengakses halaman taman permainan dan menguruskan pelaksanaannya, mengurus tayangan langsung, dan berkongsi dan mengakses data yang berterusan.

Pada asasnya, anda perlu mengimport kerangka ini untuk dapat menetapkan harta pandangan langsung dari halaman taman permainan ke objek yang anda buat.

4. Membuat Dokumentasi Kaya dengan Markup

Swift Playgrounds membolehkan anda membuat dokumentasi yang indah (yang lebih mudah dibaca daripada komen biasa) menggunakan bahasa yang disebut Markup.

Sintaks asas untuk Markup untuk dokumentasi kaya adalah seperti berikut:

  1. Gunakan "//: stuff" untuk satu komen, yang jika anda perhatikan, berarti hanya ":" tambahan setelah // (yang digunakan untuk komen biasa).
  2. Gunakan "/ *: stuff * /" untuk komen berbilang baris.
  3. Awalkan baris dengan hashtag, misalnya, "#stuff" untuk membuat tajuk.
  4. Balut teks di dalam tanda bintang, misalnya, "* stuff *" untuk dipaparkan dalam huruf miring.
  5. Balut teks di dalam dua tanda bintang, misalnya, "** barang **" untuk dipaparkan dalam huruf tebal

Selepas anda menulis kandungan dalam sintaks, kandungannya dalam format markup mentah. Dan untuk memaparkannya dalam format markup yang diberikan (dokumentasi kaya sebenarnya), pergi ke Editor, dan di bawah "Playground Settings", pilih "Render Documentation."

Baca lebih lanjut mengenai Markup di sini.

Bermula dengan membina Taman Permainan yang sederhana

Baiklah, mari kita kotor tangan kita dengan menulis beberapa kod! Mari buat simulator penggodam seperti hackertyper.com! :-D

Let’s start with creating our background for the hacker simulator. Then using the shouldChangeTextIn method, we’ll change the text displayed in the text view to strings from an array with the code we want to be displayed when the user enters any text. This essentially creates a hacker simulator that makes code appear on the screen after pressing any keys.

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

Here’s the code above. Copy-paste it in a Playground. Run the live view, and you’ll see a black background. Click anywhere on the background, and you’ll see a keyboard pop out in the UI. Press any keys on it and it’ll show you the code from the strings.

There you go — you’ve made a basic hacker simulator in under 50 lines of code! Now it’s your turn to go get creative with Playgrounds! ;)

Some awesome resources to check out to learn more

  1. Apple documentation.
  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! :)