1.0 – Creative Coding with Swift – Downloading and Setting Up Xcode and C4

1.0 – Creative Coding with Swift – Downloading and Setting Up Xcode and C4


Hey coders! In this video we’re going to
download Xcode and start to look at the interface, as well as look at the
template that I provided for you to complete assignments in this class. I
click on course modules. Below Module 0 you’ll see that I have put together a
bunch of resources for you. I hope you’ll explore all of them, but the two
resources we’re going to talk about today are this link to download Apple’s
Xcode integrated development environment or IDE. You’re going to hear IDE a lot as
you program more and more and we’re going to talk about this template the
ART 61 Basic Template that I’ve created for you to do almost all of your
projects in this class. When you click it’ll ask you to open a
new window and take you to the Mac App Store. Here’s where you’ll download Xcode.
It takes a long time, so devote a lot of time for that download and installation
and if it asks you to install additional components, say yes. You will need
everything. So after that, close out go back and download the
ART 61 Basic Template. This is a zip file. It’s gonna download to
your… to wherever you download to. Mine downloads to my desktop and I
double click. I’m going to open it up. so here is the basic
sort of… what a project looks like in Xcode. These are all the
files. All of these files are required for this Xcode project to work. You can’t
copy this file independently or this file independently you need everything.
So that’s an important lesson that all of my students learn at some point
during the class. The thing that I’d like to say here that’s the most important
for you to remember is never open the blue file. This blue file, if you open it,
it will break your project. Always open the white file. Now if you accidentally
break the template by opening the blue file, it’s ok. It didn’t destroy your code.
It just means you have to redownload the template. If you had been writing
code or whatever you can just copy it into a fresh version of the
template. So I’m going to go ahead and open up this white file and
it’s gonna give you a warning. I’m going to say that’s okay and here we
are in Xcode. So it can seem a little bit overwhelming when you open it up at
first. There’s a lot going on and this program is extremely powerful. I have a
handy little diagram here that will show you kind of what we are looking at.
You can see at the top there’s a tool bar. There’s a play button and a stop
button and that’s to play your program in the Simulator or on your device. You
can connect an iPhone or an iPad to your computer to play natively on the device.
There’s also a navigator area, an editor area, and a utility area. These buttons up
here on the far upper right-hand corner are to hide. This button will hide the
Navigator. This button will hide… there’s a console area that’s hidden right now…
and this button will hide the utility area, and that’s basically it. It’s gonna
take a little bit of time for you to get used to this environment but just stick
with it and you’ll become more and more familiar as time goes on.
[Horn from construction next door!] So I’m gonna open up my file structure
and show you basically kind of how to get to the goods in your template. So you
go open it up… ART 61 Basic Template and then there’s a folder called ART 61
Basic Template and that has all of your coding files. Anytime you see a dot swift
file, that is a coding file and if I open up workspace.swift you’ll see some
of the code. workspace.swift is the file that you will use the most.
It’s where basically all of your code will be and inside you can see there’s a
header. You’ll want to replace this header with the one that I provide and
all the assignments and put your name and information on there. This is so I
can identify you. And then there’s imports. This is
all the code that we’re going to be using. You have to tell Xcode we’re gonna
be using C4 we’re gonna be using UIKit UIKit is for iOS development and then
you’ll see class workspace override func setup and then inside of here, this is
where we are gonna start coding. So it’s fairly straightforward. There’s just a
lot of steps and I want to make sure you have all that the basics down before we
start. Now one thing I didn’t mention was how I got this color scheme. Your
color scheme may look different, so what I’m gonna do is go to the Xcode
drop-down menu, go to preferences, and go to Fonts and Colors and you’ll see there
are multiple themes and you can see that it changes every time I move around.
So my favorite is Midnight. It has a kind of retro feel that I get into. I also
feel like the black background is less difficult… less hard on my eyes so
that’s kind of where I go but you will figure out on your own what you like and
since you’re going to be spending some time in this window, it’s good to get it
looking the way that you want. Now if I wanted to hide some window… some areas of
the window to just look at code I can go in the upper right-hand corner and do that.
So now I’m just looking at code. If I wanted to go back to that navigator, all
I have to do is do that. So that’s the basic interface and that’s the template. If
you start to get errors, reach out to me on the QA but I’m just gonna run it once.
So in order to run it, you have a lot of different simulators up here in this
button. If you had a device connected it would show up here and then all of your
simulators are here. What I tend to do is I use the I use the phone that I have, so
I have an iPhone 7 Plus… trusty iPhone 7 Plus and so I use that and
then you click Play. The play button will launch the
simulator and you’ll see it’ll take a little time. The first time you compile
it may take a long time and you may see errors pop up. If you see errors pop up,
as long as they’re yellow errors, you don’t have to worry. If they’re a red
error then you have to worry and the the most common red error, at first,
is that error where you’ve accidentally opened up the blue file and so, what I
would do in that case, is just redownload the template, open up the white file, and
try to hit play again and see if it works and then you can copy and paste
your code into that new template. So once you start seeing… so this is the
console area down here… once you start seeing some of this stuff come up these
are messages from the compiler and from the the runtime, you know that your
program is running. So it’s just white here it’s a blank canvas which I could
make sense since there’s no code in here where it says write your code here but
that means that we are have successfully launched the template.
So that’s basically it and in the next video we’ll start to get into some of
the code and how to use the examples from the C4 website. See you there.

Leave a Reply

Your email address will not be published. Required fields are marked *