Placeholder Image

字幕列表 影片播放

  • COLTON OGDEN: All right.

  • Hello, everybody.

  • My name is Colton Ogden.

  • This is CS50 on Twitch.

  • And I'm joined by Kareem Zidane.

  • KAREEM ZIDANE: Hello, everyone.

  • COLTON OGDEN: So, Kareem and I did a stream about--

  • was it last week or two weeks ago?

  • KAREEM ZIDANE: Yep.

  • COLTON OGDEN: On GitHub and git where we talked about what is GitHub,

  • how do you actually use it and use it on your local machine?

  • How do you then tie that into our repository on GitHub?

  • Which is sort of the first part of the equation

  • for a lot of modern development.

  • But what are we going to talk about today that sort of extends that?

  • KAREEM ZIDANE: Today we are going to talk about two very important concepts

  • or terms in the dev ops world, namely continuous integration

  • and continuous deployment, otherwise known as CI/CD.

  • And just because of the context, we are also

  • going to be talking about a little bit of testing techniques.

  • COLTON OGDEN: Sure, yeah, very important things.

  • You know, obviously as you're developing applications

  • beyond just toy applications, getting into actually a business setting--

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: --or even CS50 type--

  • a lot of CS50's apps and infrastructure is all sort of

  • based around this idea of continuously deploying testing and integrating

  • your apps onto their respective platforms.

  • KAREEM ZIDANE: That's true.

  • Yeah, so last time we actually talked about GitHub, as you mentioned.

  • And we talked about the idea that these tools

  • are very, very useful because we developers tend

  • to make changes all the time.

  • And so, it's nice to keep track of these changes

  • and be able to toggle between or switch between them later on.

  • Today, we're going to extend that by means

  • of being able to ensure that our changes don't break our projects or anything

  • that we have in our project already.

  • And we're also going to be able to automatically maybe publish our project

  • or deploy our project to several targets.

  • If it's a website, for example, we can deploy this to Amazon, or to Heroku,

  • or if it's a Python package we can deploy this to Pipeline, and so on.

  • COLTON OGDEN: Yeah, because obviously if we're deploying our website,

  • we make changes and we push them.

  • We want to make sure that they don't break.

  • KAREEM ZIDANE: True.

  • COLTON OGDEN: The irony being that Facebook is currently at 503.

  • KAREEM ZIDANE: Yes.

  • COLTON OGDEN: Which we just saw earlier.

  • So, let's see what we have in the chat today.

  • We have a few people in the chat.

  • We have a ForkDB, which I'm not sure if we saw you before in a previous stream.

  • [? RahulNogBelecuras ?] is a regular.

  • [? SashaCan't32 ?] says hello.

  • MKloppenburg says "hey, everybody."

  • MKloppenberg is a regular.

  • And [? MajordFought ?] says, "hi, what is this session about?"

  • This session's going to be about CI-CD.

  • So, what's the first big topic that we want to bite off today?

  • KAREEM ZIDANE: OK, do you want to switch to my--

  • COLTON OGDEN: Yeah, let's do that.

  • So, let's bring up Kareem's screen here.

  • KAREEM ZIDANE: All right.

  • So, here's my terminal.

  • And I'm going to start by writing my own sort of simple math library that

  • has one function.

  • And this function is going to test if an integer, a number, a positive integer,

  • or non-negative integer, is prime or not.

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: And if you don't recall, a prime number

  • is a number that's only divisible by itself and 1 only.

  • So yeah, let's try to get started.

  • So, I'm going to open a new file here.

  • Call it MyMathLib.pi.

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: And I'm going to define a Python function called

  • Is_Prime that takes in one argument, n.

  • And then inside of that function, what I'm going to do

  • is try to check if a number is prime or not.

  • Now, mathematically, if a number is not prime,

  • it has to have a factor that's less than or equal to it square root.

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: Right?

  • So, I mean, you should probably trust me on that.

  • But the mathematical proof for this is pretty simple.

  • We're not really going to go through it right now.

  • COLTON OGDEN: Yeah, you can't define something by something

  • larger than half of itself, right?

  • KAREEM ZIDANE: You can divide something by something--

  • COLTON OGDEN: That's why we take the square root, because we can't find

  • a factor that's larger than its half.

  • KAREEM ZIDANE: OK.

  • I'm going to--

  • OK, I'm not sure I get that totally.

  • But I'm going to trust you on this as well.

  • COLTON OGDEN: That's the way I understand it.

  • KAREEM ZIDANE: All right, I mean, yeah, sure.

  • So, we can we can start by iterating through the numbers from i

  • up to n, including the square root of n, which

  • is the number that we're trying to figure out if it's prime or not here.

  • COLTON OGDEN: So, from 1 until half of--

  • so, say 20-- it would be not half the square root in that case.

  • It would be like--

  • KAREEM ZIDANE: Yep.

  • COLTON OGDEN: 4.0-something.

  • KAREEM ZIDANE: That's why I was puzzled when you said half of half.

  • COLTON OGDEN: Yeah.

  • Because there is another algorithm I thought where are they

  • checked up to half of it.

  • But I guess the square root makes sense.

  • KAREEM ZIDANE: Right.

  • So, we better not divide by 0.

  • We better not divide by 1.

  • So, we're going to start by dividing by 2

  • and then go up to the square root of n, which I

  • believe is going to be in math, right?

  • Import math.

  • COLTON OGDEN: Yeah, I think so.

  • KAREEM ZIDANE: I mean, we're going to figure this out if it doesn't work.

  • So, square root of--

  • COLTON OGDEN: We got a couple messages in the chat, too.

  • It says, [? RahulNog. ?] I can't properly

  • stream because there's some buffering problem.

  • Maybe network poor on 1080p?

  • Yeah, possibly.

  • Try, if there is an option, try downgrading grading the quality.

  • ForDB says, "I'm here for the first time."

  • And [? RahulNog, ?] they're there for the first time as well.

  • So, thanks so much for joining us for the first time.

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: As we dive into CI/CD.

  • Definitely check out our prior streams in the GitHub stream if curious.

  • [? Nuanda333, ?] [? Asley, ?] says, "oh, that is so cool.

  • Kareem the dream.

  • We have a game between my friends to guess if the number is prime or not.

  • Next time I will cheat using this."

  • Yeah, definitely the cheat-y way to go.

  • KAREEM ZIDANE: All right, sounds great.

  • Yeah, all right.

  • So, let's move on.

  • So now we're looping through the numbers starting

  • with 2 up to and including, presumably, the square root of n, in this case.

  • And what we're going to do is check if n is divisible by i, in which case

  • n remainder i is going to be equal to 0.

  • In this case, we're going to return false, right?

  • COLTON OGDEN: Mhm.

  • KAREEM ZIDANE: Otherwise return true.

  • How does that sound to you?

  • COLTON OGDEN: Sounds good.

  • KAREEM ZIDANE: All right.

  • So, let's actually test this out.

  • How would you test this out?

  • COLTON OGDEN: I'd probably run it on a sequence of numbers

  • that I've predetermined have a certain--

  • a certain set of numbers that I know are prime versus a set of numbers

  • that I know are not prime.

  • KAREEM ZIDANE: Exactly.

  • So, I just fired up a Python interpreter here.

  • I'm going to import my function.

  • So from MyMathLib, import is prime.

  • Now I have is_prime in scope.

  • So, I'm just going to try to call in a bunch of numbers.

  • So for example, 0--

  • whoa, OK.

  • What's happening here?

  • COLTON OGDEN: So, is_prime.

  • Float object cannot be interpreted as an integer.

  • KAREEM ZIDANE: That's probably because the square root

  • function returns a float.

  • And this expects an integer.

  • COLTON OGDEN: Oh, yeah.

  • KAREEM ZIDANE: So, let's do this.

  • Let's switch it to an integer.

  • OK, let's try it again.

  • Import is prime from y--

  • the other way around.

  • From MyMathLib.

  • Import is_prime.

  • And then try again, is_prime of 0.

  • True.

  • That's weird.

  • COLTON OGDEN: OK, interesting.

  • KAREEM ZIDANE: OK.

  • COLTON OGDEN: So, did we not special case a 0, perhaps?

  • KAREEM ZIDANE: Yeah, there seems to be a problem here.

  • Well, it's saying that 0 is the prime, 1 is prime, 2 his prime, 3 is prime,

  • 4, 5, OK, is 4 prime?

  • Well, it seems to be buggy.

  • So, the first thing that we-- it's a good practice.

  • The first thing that we should do when we find a bug like this in our program

  • is actually pinpoint this bug.

  • Or in other words--

  • you know, you can you can imagine, every time I

  • do something or try to fix a bug around a feature

  • that I open up a Python interpreter like this and keep trying things like this.

  • This is not really very time-efficient.

  • Because I'm going to be doing this again and again.

  • And this seems to be like a computer's problem.

  • Right?

  • COLTON OGDEN: So, you can maybe do what you just

  • did in the loop, or something in a script,

  • and just read your program over a bunch of them?

  • KAREEM ZIDANE: That's true.

  • COLTON OGDEN: Instead of manually typing them out, maybe.

  • KAREEM ZIDANE: Yeah, I could I could definitely

  • write a program that would test these automatically for me.

  • Luckily though, Python has actually a testing framework called Unit Test.

  • COLTON OGDEN: Oh, nice.

  • KAREEM ZIDANE: That we could actually use.

  • So, this stream is not really about Unit Test itself.

  • But we're going to be exploring a bit of its features.

  • Hopefully we'll explain the ones that we use while we're going through them so

  • that they're clear to everyone.

  • So, let's actually try this.

  • So, in another file.

  • I'm going to call tests.py.

  • All I need to do to use Unite Test is import UnitTests, like this.

  • And then create a class called--

  • I'm going to call it, in this case, to try to be descriptive,

  • IsPrimeTests because I'm testing my [? s ?] prime function.

  • And this class is going to extend UnitTest.TestCase.

  • And by extend, this is actually an object-oriented programming concept.

  • It basically means use features from the class UnitTest.testCase,

  • COLTON OGDEN: You're basically making a new class

  • called IsPrimeTests, which takes all of the behavior of test case,

  • in this case.

  • KAREEM ZIDANE: Correct, it's exactly that, yeah.

  • It's based on UnitTest.TestCase in this case, which is another class defined

  • in the unit test library.

  • COLTON OGDEN: [INAUDIBLE] says that my audio is a little low.

  • I just changed the sensitivity.

  • Is it still a little bit too low?

  • It does look like the audio levels are a bit low on it.

  • Hold on, let me try--

  • whoops.

  • Is that any better?

  • Are we getting a little bit-- we're getting a little bit closer.

  • I'm not sure why it's so low.

  • Test, one, two, three.

  • Sorry, my mic says it's at a good sensitivity level.

  • I'm not sure.

  • How's that?

  • Is that any better?

  • Oh, now it's in the red.

  • OK, cool, cool.

  • And then [? Gooliash ?] says, "hello, everybody."

  • Hello, [? Gooliash. ?] Thanks for joining.

  • [? RahulNog ?] says that he's having some issues with the resolution.

  • We only stream up to 1080p.

  • So, I'm not sure if maybe Twitch does on the fly encoding of the video to 720.

  • I would have imagined that they have a streaming option.

  • I think if I click on this-- let me see.

  • Advanced-- no.

  • KAREEM ZIDANE: Is it quality?

  • Quality, maybe?

  • COLTON OGDEN: Where do they that?

  • Oh, quality auto.

  • Oh, yeah, they only have-- it looks like they only first give you

  • the 1080 option.

  • I'm not sure if they do the--

  • I think they do the encoding later, such that you could watch the VOD at 720.

  • The video will be up on YouTube for sure later.

  • And it have 720, 360, all sorts of different options.

  • Sorry that it's having a little bit of a bandwidth issue at the moment.

  • ForSunlight says, "Aloha."

  • ForSunlight, good to have you with us again.

  • And then ForkTV says, "your stream is flawless."

  • Thanks, ForkTV.

  • Much appreciated.

  • Here we go.

  • KAREEM ZIDANE: [INAUDIBLE]

  • COLTON OGDEN: [INAUDIBLE]

  • KAREEM ZIDANE: All right, sounds good.

  • COLTON OGDEN: All right, cool.

  • Sorry about that.

  • Go ahead, continue.

  • KAREEM ZIDANE: OK, so, I have my class.

  • I'm going to use this class in a moment.

  • But let's first add something.

  • If_Name=main, you've run Unit Tests.

  • UnitTest.main, right?

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: So, what this does is it says if I've run this script--

  • which is called Tests.pi, that we just created--

  • from the command line--

  • like I do Python Tests.pi--

  • then run the script, run the code in the main function.

  • COLTON OGDEN: This is kind of where you'll

  • have what you were doing before, manually

  • iterating through the different Is_Prime function calls.

  • KAREEM ZIDANE: Kind of.

  • COLTON OGDEN: Manually at the [INAUDIBLE]??

  • KAREEM ZIDANE: Yeah, kind of.

  • OK, so how do we add a test case with Python's Unit Test?

  • So, it turns out that any function that starts with a keyword "test"

  • is actually considered to be a test by default.

  • So, in this case, I'm going to define a new function called test_zero.

  • And this one just going to take one argument [? self ?]

  • because, annoyingly, that's how Python works.

  • It needs a self-argument if you're defining a method inside of a class.

  • If you're not familiar with this, perhaps maybe learn a little bit more

  • about object oriented programming in Python.

  • COLTON OGDEN: We could maybe do a stream about it in the future.

  • KAREEM ZIDANE: Yeah, maybe.

  • But for now, yeah, let's take it for granted

  • that self needs to be there at least.

  • And it turns out that Unit Test actually has a bunch of built-in functions

  • that we could use for testing other stuff.

  • So, we could use certain functions to test

  • if something is equal to something else, or if something is true,

  • or if something is false, and so on.

  • And so, in this case we're going to do exactly that.

  • So, we're going to say Self.AssertFalse because we

  • expect that 0, when past is prime, returns false, right?

  • So, we're going to insert that false of is_Prime(0).

  • Now, Is form is not really defined anywhere here.

  • So, I'm going to just import it like I did before.

  • COLTON OGDEN: Right.

  • KAREEM ZIDANE: So, I'm going to do from MyMathLib import Is_Prime.

  • COLTON OGDEN: Somebody in the chat says--

  • [INAUDIBLE] "is there a typo in the parent class name?"

  • KAREEM ZIDANE: Yep, that's correct.

  • It should be TestCase, not "test cast."

  • COLTON OGDEN: Thanks for that, [INAUDIBLE]..

  • KAREEM ZIDANE: Thank you so much.

  • COLTON OGDEN: [? Goulia74 ?] says "maybe test case."

  • And then [? LincePutaWire ?] says "Unit Test?"

  • KAREEM ZIDANE: Yes.

  • COLTON OGDEN: Yeah.

  • KAREEM ZIDANE: So, unit testing is actually

  • a testing technique that's very, very popular and used in a lot of projects.

  • And it also is supported-- a lot of languages

  • actually have built-in Unit Test libraries or frameworks.

  • And unit testing is basically the idea of dividing your program or library,

  • or your software in general, into units, like modular units

  • that you are able to test each of them separately.

  • So, this is the basic idea of what a unit test is.

  • COLTON OGDEN: So, like, modularizing the testing of our program.

  • KAREEM ZIDANE: Correct, yeah.

  • Yes, basically splitting your program into testable units

  • and then testing these.

  • COLTON OGDEN: [? Nasquito ?] says hi.

  • Hi, [? Nasquito. ?] Thanks for joining us today.

  • KAREEM ZIDANE: Yep.

  • Thank you.

  • All right, so let's move on.

  • So, the way to run this is--

  • by the way, I'm using a text editor called Vim in this case.

  • But you're free to use whatever you want.

  • You don't have to use this.

  • COLTON OGDEN: Your Vim looks nice.

  • Your Vim actually it looks like the s code almost, like a modern editor.

  • Some Vim set-ups look a little bit more arcane.

  • KAREEM ZIDANE: I know you're a big fan of VS Code.

  • I haven't used it, unfortunately.

  • But yeah, you can use VS code.

  • You can use Atom.

  • You can use any number of text editors.

  • COLTON OGDEN: Your Vim [INAUDIBLE] is nice.

  • KAREEM ZIDANE: Thank you so much.

  • All right, it's not mine, actually.

  • I just downloaded it from somewhere.

  • All right, so the way to run these tests would be by running Python,

  • test the pi.

  • And, as expected, I see a bunch of weird output here.

  • Namely, I see an f on the top left corner.

  • And this indicates that a test has failed.

  • And a test can, I think do or be in one of three states.

  • It can pass, in which case it would show a dot.

  • And we'll see an example of that.

  • It can error, in which case there might be a syntax error in your code.

  • Or it can fail, in which we got a result but the result

  • is not the one that we expect it to be.

  • So, in this case we we passed 0 to h prime.

  • And we got true.

  • But we are expecting false, which is indicated by a searching error

  • right here.

  • So, it tells us that true is not false.

  • COLTON OGDEN: And that's how we got the f, because we inserted false.

  • KAREEM ZIDANE: Correct, exactly.

  • So, how do you fix this?

  • Let's go back to our code.

  • Now that we pinpointed the bug that we have with the test case--

  • and this is just to ensure that this bug never happens again once we fix it.

  • So, no matter who changes our code later on,

  • we're going to run these tests every time.

  • And if they fail, then there's something wrong.

  • So, how do you propose fixing this bug?

  • COLTON OGDEN: Well, I see that you're returning false immediately

  • at the first time--

  • well, OK.

  • So, let's see.

  • For i in the range of 2 to that number.

  • So, the problem is that it's going to start at 2.

  • KAREEM ZIDANE: Right.

  • COLTON OGDEN: Wait, does it start?

  • Yeah.

  • It's inclusive, right?

  • So, it'll start at 2.

  • KAREEM ZIDANE: Yep.

  • COLTON OGDEN: So, it doesn't account for the case of 0 or 1.

  • KAREEM ZIDANE: Right.

  • So, that's exactly right.

  • So, I'm going to check if n is less than 2 initially.

  • And then return-- what--

  • false immediately.

  • COLTON OGDEN: You're going to want to return false, yeah.

  • KAREEM ZIDANE: So, once again, for those of you who didn't follow,

  • we are essentially checking if n, initially, is less than 2.

  • In which case we say, no, this is not prime.

  • And we return false immediately.

  • Otherwise, we continue and do our check.

  • So, there is one more bug here.

  • But let's make sure that our test passes first.

  • Right?

  • So, let's do Python test.pi again.

  • And our test passed.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: All right.

  • So, let's suppose I wrote a program that depends on my library,

  • or I'm testing stuff again randomly.

  • And I happen to find another bug.

  • So, let's do this again.

  • So, from MyMathLib import Is_Prime.

  • And do Is_Prime-- you know, I'm doing a bunch of stuff.

  • 1, OK, works as expected.

  • 2, its prime, all right.

  • 3 is prime.

  • 4 is prime-- no, it's not.

  • COLTON OGDEN: I don't think 4 is prime.

  • KAREEM ZIDANE: All right, so, the first thing that we should do again

  • is pinpoint the bug.

  • So, we're going to add another function, test function here again.

  • Do a test--

  • 4, for example, Self.Assert.

  • False Is_Prime(4).

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: Right?

  • Now we're going to run the tests again just to see them failing first.

  • As you can see, there is an f and a dot.

  • As we mentioned, the dot--

  • COLTON OGDEN: So, just write it all in one long string?

  • KAREEM ZIDANE: Exactly.

  • Yeah, we're referring to the very first line here in the output.

  • So, the f indicates that one test fails.

  • COLTON OGDEN: You want to see a long string of dots.

  • KAREEM ZIDANE: Exactly, you'll always want to see dots.

  • If you're not seeing dots, there's something wrong.

  • And a dot means the test succeeded or passed in this case.

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: And it's telling us again that true is not false.

  • And it's telling us that this is on test.pi line 11.

  • If I open this, I'll find the Self.Assert false is prime 4.

  • COLTON OGDEN: OK.

  • KAREEM ZIDANE: All right, so the bug actually--

  • I'm not going to put you on the spot again.

  • But the bug actually is, if we open our code again,

  • is that actually the second argument to range is not included in the range.

  • COLTON OGDEN: Oh, yeah, yeah, yeah.

  • KAREEM ZIDANE: It doesn't include the square root.

  • COLTON OGDEN: So we have to add 1 to it.

  • KAREEM ZIDANE: Exactly, so we have to add 1 to it.

  • So in this case, we're going to add 1 to this.

  • And hopefully, if we didn't do anything wrong, run the test again.

  • They pass.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: All good.

  • All right, so we can keep doing this.

  • We can keep using our program.

  • We can keep playing with it and trying to figure out if there are bugs or not.

  • One thing that's probably worth mentioning

  • though, is that a function like IsPrime can take any number of--

  • an infinite number of inputs.

  • So, it's not really something practical that we

  • would expect to write an infinite number of test cases.

  • Because that's practically not possible, right?

  • COLTON OGDEN: Right.

  • KAREEM ZIDANE: So, in cases like these, we

  • would always try to choose inputs that are representative in this case.

  • COLTON OGDEN: Yeah.

  • KAREEM ZIDANE: So, try to crash our program, in other words.

  • So, I would try negative 1 for a negative number, negative 2

  • for a number that would have been prime if it was positive.

  • A square root that's even, a square root that's odd, and so on.

  • So, I try to write a bunch of test cases that

  • represent different kinds of inputs, and test my programs on it.

  • That's pretty much the best that I can do.

  • COLTON OGDEN: Corner cases and sample like normal sample points.

  • KAREEM ZIDANE: Exactly.

  • I believe I have a few test cases here.

  • And let's see.

  • Let's move [? this ?] tests to original.

  • [? To ?] tests1.py.

  • So I've written in advance a bunch of test cases testing zero, testing one.

  • Notice here I'm testing that two is prime.

  • So solved it assert true, in this case, not assert false, because I expect

  • the return value true in this case.

  • Same thing for three, four is false, testing in eight,

  • testing in nine, which is--

  • sounds like a prime number, but it's actually not.

  • So a bunch of good test cases.

  • I'm just going to try to run these again and they all

  • ran as expected and succeeded.

  • COLTON OGDEN: Victory.

  • 4Sunlight adds-- says, "Can we test our random number generators this way?"

  • KAREEM ZIDANE: I'm not sure what you mean.

  • COLTON OGDEN: The way--

  • I guess some way that I would interpret that is testing

  • to make sure the random number generator actually

  • generates an even distribution of random numbers maybe.

  • So certain normalizing the distribution of 1,000 random numbers.

  • But aside from that, I can't think of any other use cases

  • off the top of my head.

  • If that's what you were referring to, 4Sunlight?

  • KAREEM ZIDANE: Yeah, please elaborate if that's not--

  • if that doesn't answer your question.

  • Maybe we can look into that.

  • But any other questions on the test cases that we wrote

  • or the code in general?

  • COLTON OGDEN: 4Sunlight says, "Yes, exactly.

  • You're a great interpreter.

  • Thank you very much."

  • KAREEM ZIDANE: Awesome.

  • COLTON OGDEN: Very kind of you.

  • KAREEM ZIDANE: So it's still kind of painful

  • though to have to write the test step manually or have

  • to run the test manually every time we make a change to a code.

  • So this is what actually CI, or continuous integration, solves for us.

  • Continuous integration will allow us to automatically run these tests once we

  • push our code to GitHub, in this case.

  • Some of you might be wondering, is there a way to run these tests locally

  • before committing even?

  • Yes.

  • As far as I know, I haven't used them before,

  • but there is something called git hooks that you

  • could use to essentially run a script, or in this case, our test, the py

  • script, to actually do something before committing

  • or do something when various events happen.

  • So the first thing that we need to do is actually

  • we're going to be using a service called Travis CI today,

  • and Travis CI is a continuous integration,

  • a continues deployment service that you can log into using your GitHub account.

  • So I'm logged in already here.

  • And once you log into Travis CI, you're essentially

  • authorizing them to read or write to some or all of you repositories

  • on GitHub.

  • Do you have a question?

  • COLTON OGDEN: Me?

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: Oh, no.

  • I'm just looking at the--

  • I have the--

  • I'm basically following along with you and I'm reading your--

  • KAREEM ZIDANE: Let me actually

  • [INTERPOSING VOICES]

  • KAREEM ZIDANE: --maybe this is not readable at all.

  • So if I go to Profile, for example, after logging in, if I go to Profile/

  • my username, I should see a listing of my repositories that I have.

  • COLTON OGDEN: Airlines, Airline0, Airline1?

  • KAREEM ZIDANE: Yeah, these are from Brian's web course.

  • We gave a course in the summer with Doug.

  • He was teaching the course.

  • COLTON OGDEN: Wow.

  • KAREEM ZIDANE: So we were using these.

  • So in this case, I have a new repository called CICD Stream in my GitHub,

  • and what I'm going to do is actually, first of all, git inut this.

  • And then add--

  • COLTON OGDEN: Throwback to our prior stream

  • if anybody wants to know how git works.

  • KAREEM ZIDANE: Yep.

  • I actually planned to do this beforehand, but I forgot.

  • But let's add this new remote.

  • So I'm just linking my local folder or my local repository to the GitHub one

  • that I just created.

  • So I'm going to do--

  • add the remotes repository, which is called CICDStream.git.

  • Now I see all these files.

  • Let me rename test1.py, which is a more complete one to test the py,

  • because I don't need this anymore.

  • So now my test.py looks like this, which is

  • the one that has a few more test cases.

  • Let me actually ignore as well, so let's ignore the pycache1

  • because I don't need it.

  • So I'm going to echo pycache2.gitignore.

  • COLTON OGDEN: It looks like Goulia74 has a question for you as well.

  • KAREEM ZIDANE: "So I skipped the beginning.

  • Is Selenium-- am I getting a true line--" yeah.

  • Let me reread this, because I read it in my head instead.

  • "I skipped the beginning.

  • Is Selenium at the beginning of the line in the terminal of name--

  • of your virtual end or does it somehow appear when you use Selenium?"

  • So this is yes.

  • As you expected, this is a virtual environment.

  • We are going to be using Selenium later at the end of the stream.

  • I should have deactivated this to avoid distraction.

  • So let me do this now.

  • But, yes, Selenium is a virtual environment.

  • So let me get out of this virtual environment.

  • Now there's no Selenium.

  • This never happened.

  • So let me do git status again.

  • I have all these files.

  • Let me actually ignore a couple more files.

  • So let me ignore mymathlib.py.original, which

  • is one that I wrote beforehand just in case I forgot anything.

  • I have the files that I care about.

  • I'm going to add all the files that I have,

  • git status again, confirm that they are in my staging area, my index,

  • and then do a git commit.

  • Say this is my first commit and then git push.

  • And of course, it's asking me where to push to.

  • And I'm going to say push to the master branch on GitHub

  • and also track this local repository or track this remote, sorry, track

  • this remote branch with my local branch, in this case, which

  • is also called master.

  • So I'm going to do this.

  • Now, if I reload the page I should see my code--

  • all great.

  • So how do we tell Travis CI to run our tests automatically once we push?

  • If we look at the Travis CI documentation,

  • we are going to find that to get started,

  • we need to create a file in our repository,

  • in the root of our repository, the top level of it, called .Travis.yml,

  • so let's do that.

  • .Travis.yml-- creating a new file.

  • And .yml actually stands for YAML, which is a configuration language

  • or a language that's often used for configuration.

  • It's very similar in spirit to JSON, if you're familiar.

  • I think it's more human readable and I think

  • supports more fancy stuff than JSON as well.

  • So it's just going to be a bunch of key value pairs

  • that have a certain hierarchy.

  • COLTON OGDEN: I sort of think of it as like the Python version of JSON almost.

  • KAREEM ZIDANE: Yeah, kind of, yes.

  • COLTON OGDEN: It reminds me if Python made its own version of JSON.

  • KAREEM ZIDANE: Yeah.

  • I think Python does use a configuration language.

  • I'm not sure what it's called though.

  • There's a really popular format with Python applications.

  • Anyway, we're not going to go into this right now.

  • But to get started, we need to say what the language that we use in our project

  • is.

  • In this case, language is Python, and we can optionally

  • specify also which version of Python.

  • I'm just going to be using Python 3.6, but you're

  • free to use something else or even more than one version of Python.

  • And there are two key steps in this case.

  • One of them is install.

  • And the install step is responsible for essentially installing your application

  • itself, if it's installable.

  • So in this case, if I'm creating a Python package, for example,

  • I would do PIPinstall my package name, or PIPinstall.

  • To install the current directory.

  • In this case, I don't really have anything to install yet,

  • so I'm just going to skip this and say true.

  • I don't need to do anything.

  • The second key step is the script step, and the script step

  • is going to be the one or more commands that we need

  • to run in order to test our program.

  • So do you recall what this comment was?

  • COLTON OGDEN: Pythontest.py, right?

  • KAREEM ZIDANE: Yep, tests.py.

  • So this is how we tell Travis, hey Travis, once our code is pushed

  • to master in this case, run Pythontest.py first,

  • and either if the build succeeds or if the tests succeed,

  • make the build succeed.

  • Otherwise, make the build fail.

  • So we actually didn't demonstrate something.

  • So let me go back for a bit.

  • This is, by the way, I think this is the minimum that we need in this case.

  • So all goods, a bunch of key value pairs.

  • First of all, we specify the language.

  • It's Python.

  • We specify the Python version, which is 3.6 in this case.

  • We say that we don't need to install anything.

  • We don't need to install our package, because it's not

  • really installable in this case.

  • And we run the tests this way, by running literally Pythontest.py.

  • You have a question?

  • COLTON OGDEN: Yeah.

  • MajorDefad says, "What advantage do we get

  • from having the code tested online after pushing and not locally?"

  • KAREEM ZIDANE: We could have it tested locally as well.

  • Most people-- so the typical use case for this

  • is that you would be working on a separate branch,

  • so you would be fixing a bug, or adding a feature,

  • or refactoring something on a separate branch.

  • And the ideal case for this would be to do whatever you want on this branch,

  • always push frequently to sync up the state of your GitHub repository

  • with your local repository just in case you want to fetch this somewhere else,

  • or you want to--

  • or something happened to your local code, so you have a copy on GitHub.

  • And then you can actually have Travis test on this branch

  • before actually merging to master.

  • So master is usually--

  • always should be in a reasonably good state.

  • So we should never merge like half the amount of changes into master,

  • or know that something is broken, but still merging it to master.

  • So the idea would be to separate these into two separate branches,

  • commit and push on my separate branch as many times as I want,

  • have the tests run automatically, and you can actually

  • make GitHub force the case--

  • that's only when the test pass on this branch-- merge it into master.

  • COLTON OGDEN: And so we can also deterministically ensure

  • that we are testing if we have it automated.

  • KAREEM ZIDANE: Yeah, definitely.

  • Yeah, so this is also one other thing.

  • I'm not quite sure about how git hooks works.

  • But suppose you and I are working on the same repository right now.

  • I have a bunch of git hooks that run the tests automatically, but you don't.

  • So this is some sort of way to enforce that the tests are run for everyone.

  • Another advantage of running the tested lines is the unified environment.

  • So when we run all these tests on Travis,

  • all the tests are literally only run in the Travis environment

  • and not Colton's environmental or Kareem's environment,

  • which might be different in this case.

  • So we went to make sure that the tests work in the Travis environment, which

  • is ideally-- you're going to be the same as our production

  • environment, whatever that is.

  • COLTON OGDEN: Makes sense.

  • KAREEM ZIDANE: I hope that answers your question.

  • And I think that's all what we need to do in this case.

  • The thing that I forgot to show earlier was that,

  • if we run Pythontest.py again, if all the tests succeed--

  • COLTON OGDEN: Actually, I see seven dots there.

  • KAREEM ZIDANE: Exactly, yeah.

  • So if we-- this is how we print the exit code of the previous command.

  • So if we check the exit code of the previous command,

  • this is going to be zero, which by convention means

  • that the previous command ran successfully.

  • If we break our program again-- let's actually remove this for now.

  • And then try to break it again, we see a bunch of errors.

  • I think if we do--

  • if we print the exit code again right now

  • it's going to say something that's other than zero,

  • in this case one, which means the command failed.

  • COLTON OGDEN: And the question mark, dollars sign

  • variable, that's the last return code?

  • KAREEM ZIDANE: Yes.

  • COLTON OGDEN: Given to you, the shell?

  • KAREEM ZIDANE: Yes.

  • This is an environment variable, if you're not familiar, that automatically

  • for us stores the exit code of the previous comment.

  • COLTON OGDEN: Nice.

  • It looks like FungusStorba is tossing the Bob Ross emoji there.

  • So thanks for that.

  • MajorDefad says, "Works on my machine, and yeah, I just cleared out.

  • Thanks."

  • KAREEM ZIDANE: Yep, that's a real concern.

  • It does work on my machine, but don't work on Colton's machine.

  • We can always ensure that this is not a problem

  • by ensuring that it only works in the Travis environment, which is neither

  • your machine or my machine.

  • COLTON OGDEN: And that's the last point too,

  • before it actually gets sent off to whatever

  • server your app might be built on or hosted on, rather.

  • KAREEM ZIDANE: Exactly, and ideally, these two environments

  • should be pretty much the same.

  • But recently a lot of people have been using Docker,

  • and I think Travis does have support for Docker.

  • Probably not ideal, but Travis does have support for Docker,

  • a bunch of other CI/CD services, like CircleCI, Jenkins, GitLab, CodeShip,

  • whatever.

  • All of these also have I think support for Docker as well,

  • and Docker actually solves this problem as well, tries to minimize

  • the differences between the testing environment and the production

  • environment.

  • COLTON OGDEN: Makes sense.

  • KAREEM ZIDANE: So now that we know that the exit code is success

  • if all tests pass and something else failed--

  • a failure code if one or more tests failed--

  • Travis actually uses these exit codes to determine

  • if the build succeeded or failed.

  • So it's going to run your command, which is the value of the script key,

  • in this case, Pythontest.py.

  • And if the exit code for that is not zero, it's going to fail the build.

  • So let's actually demonstrated that.

  • Let's, first of all, add our changes.

  • So let's get, add everything, excuse me, and then git push to master.

  • Oh, because we didn't commit.

  • So we should get commit first.

  • Let's say, enabled Travis and broke tests, push.

  • So how do I follow this?

  • Theoretically, if I go to the same--

  • Travis-CI.com/myusername/repositoryname, which is CICD Stream,

  • I should see a build log.

  • Which I don't, in this case.

  • Let me zoom this out a little bit.

  • Yep, so if I click on Build History--

  • eventually it's going to appear here.

  • But if I click on Build History, I see that there's

  • a build that's started here and it's listing some information

  • about my commit that I just made.

  • COLTON OGDEN: Yellow, meaning that it's in progress?

  • KAREEM ZIDANE: Yes.

  • Yellow means it's currently running.

  • And if we scroll down a little bit, we can

  • see the build log, what's happening during this build.

  • If we click this little green thing on the top right corner,

  • it's going to essentially have us follow this log by default,

  • so just to avoid having you keep scrolling manually.

  • COLTON OGDEN: So they build like a little custom environment,

  • like a configured build environment every time you

  • want to trigger a new build?

  • KAREEM ZIDANE: Correct, yes.

  • So they essentially, as we say, sandbox these tests, in this case.

  • COLTON OGDEN: Because I noticed it said stuff about like installing

  • Ruby and different other--

  • no JS.

  • It looks like they installed quite a lot of stuff.

  • KAREEM ZIDANE: Yeah, correct.

  • So there are a bunch of standard environments that--

  • a bunch of options that you could choose from.

  • I didn't want to dive too deep into the details of how Travis

  • works in this stream, but the idea is that you

  • can think of it as launching a very lightweight virtual computer

  • or virtual machine, a container actually,

  • in this case, if you're familiar.

  • And then cloning your code inside of it and running the commands

  • that you specify inside of it.

  • So every time, yes, every time you push to GitHub,

  • every time Travis CI build this trigger, it's

  • going to run in actually a brand new environment for you.

  • COLTON OGDEN: Cool, make sense.

  • KAREEM ZIDANE: So we see the build turn into red,

  • which is usually bad, in this case.

  • And if you scroll down, we can see the log

  • of why this build failed, after skipping all these details about installing

  • software that we don't really care about now.

  • And we see something very similar to the log

  • that we saw when we ran Pythontest.py.

  • COLTON OGDEN: It's just like they're running

  • their own version of your environment and just pretty much copying

  • the same algorithm.

  • KAREEM ZIDANE: Exactly, and here's the command

  • that we specified as the value of the script key, Pythontest.py,

  • and we see two Fs here.

  • Two tests failed, because one is thought to be prime,

  • but it's not, and same thing for zero.

  • COLTON OGDEN: Make sense.

  • We've got a couple messages on the chat.

  • So Gason says, "Interesting subject.

  • I sent you my resume.

  • I hope you would take a look, because it's interesting."

  • Yeah, again, per the chat we had last time, CS50 is not actively hiring now.

  • And I'm actually not in charge of the hiring process,

  • but I'll definitely take a look at it just to see what you got in there.

  • Richard says, "Thank you, guys, for doing these streams.

  • They are really explanatory."

  • Thanks for joining us.

  • I appreciate that you are finding the content helpful.

  • And 4Sunlight says, "Colton, would you have slides or any kind of CS50

  • notes if we are newbs and want to have some idea of the content?"

  • Do you mean CS50, like the actual course notes

  • or do you mean the stream-related notes?

  • I know that we do have--

  • well, at least I do strongly believe we have notes for the course.

  • For these streams, we don't really have notes, per se,

  • but we do typically upload content to GitHub.

  • And are we going to have this on GitHub, the CI?

  • KAREEM ZIDANE: Yes, if it's actually on GitHub right now.

  • So if you go to GitHub.com/KZidane/CICDStream,

  • that would be a public repository and you should be able to see things right

  • now.

  • COLTON OGDEN: I think that's kind of like the--

  • usually what we have in terms of a support structure for the streams.

  • They're kind of sort of done on the fly, a little bit looser.

  • We don't really necessarily adhere to a strict set of notes, per se.

  • But yeah, GitHub and the video is probably what we have.

  • Maybe in the future for a more structured presentation

  • we might have notes.

  • I know I personally don't typically use notes or slides,

  • but we'll keep it in mind.

  • I'll ask people if they want to start doing that.

  • KAREEM ZIDANE: JefferyHughes says, "Combining Travis and containers,

  • is it a good practice?"

  • So Travis gives you the option to use containers or not.

  • Is a good practice?

  • I would definitely use containers if I can,

  • because they are more lightweight than virtual machines.

  • But Travis also gives you the option to run a full fledged virtual machine,

  • which is usually slower, in this case, but has its own advantages as well, so

  • maybe check the documentation for that.

  • "Sorry, because I didn't hear your answer.

  • I would like feedback on the resume, friend."

  • COLTON OGDEN: Yeah, again, Gason, I'll take a look at it when I can,

  • but CS50 is not actively hiring at the moment.

  • So I can't say that we'll do anything, take any steps about it,

  • but I can take a look at it when it have some time

  • and I'll give you some feedback.

  • KAREEM ZIDANE: So let's actually see this build succeed after fixing

  • our error, which we just broke--

  • after fixing our code, I should say.

  • So let's go back to my mathlib library, remove these, run the tests again

  • to be sure that everything's OK.

  • Git status, git add mymathlib, git commit, fixed--

  • I don't know-- less than two, git push.

  • And then within a second or two, I should hopefully

  • see this user interface changing, running a completely new

  • build for my new commit that I just pushed to GitHub,

  • and hopefully succeeding if all this passed,

  • which they did, locally, in this case.

  • COLTON OGDEN: That's why it typically takes

  • a long time, because they have to recreate

  • that whole environment every time?

  • KAREEM ZIDANE: Excuse me, yes.

  • Sorry.

  • So yes, if I click on Build History here,

  • I should see the new build created.

  • And if I click here--

  • usually it updates the current tab as well,

  • but it seems to be a little bit slow in this case.

  • I'm going to follow the log and let's see what happens.

  • So it's creating a brand new environment, like you mentioned.

  • It's fetching its own packages, installing some software that's

  • preinstalled in this environment.

  • And you can see that it ran our tests here and that all of them passed.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: And the exit code was zero.

  • And then if we scroll back up, we see green right now,

  • which usually means good.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: What else can we do?

  • Travis actually has a lot more features than what we just introduced.

  • So I actually didn't plan for this, but let's actually

  • try to answer the question that we got earlier

  • about running the tests remotely and having GitHub force,

  • actually merging only if all objects succeeded.

  • So let's do this on the fly.

  • Hopefully nothing breaks.

  • So I'm just going to--

  • COLTON OGDEN: That's famous last words right there.

  • KAREEM ZIDANE: Yeah.

  • So I'm just going to create a new branch here by using git checkout-b,

  • and let's say new feature.

  • This is the name for our branch, "feature."

  • And let's actually suppose we're working our branch.

  • We broke something again accidentally.

  • So I'm going to break these again.

  • I'm going to do git status.

  • I'm happy with these.

  • [INAUDIBLE] see my changes.

  • I'm happy with these changes.

  • Git add my file, get commit, added new feature,

  • and accidentally broke something else.

  • And then git push this to GitHub using git push-u origin new feature.

  • So you'll notice that if we switch back to Travis, hopefully

  • it triggered a new build for the new feature branch,

  • as we see here on the top left-hand side.

  • And what we expected, this build is going to fail.

  • So while this build is running, let's actually change something

  • in the repository settings.

  • So if you're an administrator over your repository, if you're an owner,

  • you can click on Settings, and I believe Branches on the left, and then

  • Add Rule.

  • And then up here it says, "Apply rule two."

  • We can say master, we need to apply these rules to master,

  • and I believe it's this option--

  • "Require status checks to pass before merging."

  • COLTON OGDEN: So this is our new feature branch.

  • So you're basically saying, before we can

  • merge this new feature into master, which

  • is usually our main source of truth--

  • KAREEM ZIDANE: Exactly, so that's essentially what most people do.

  • They have their own one or two branches that are the main branches.

  • master could be or usually is one of them.

  • And the idea is allow people to work on their branches,

  • do whatever they want with them, even people that

  • are contributors to your repository, they'll have access to it.

  • Allow them to do whatever they want to their branches.

  • Eventually, they're going to open pull requests to try and tell you, hey,

  • these are a good set of changes.

  • Maybe you should consider them, consider merging them into master.

  • And what you can have GitHub do for you is actually

  • enforce these checks to pass before actually being able to merge them.

  • COLTON OGDEN: So like a fail-safe.

  • KAREEM ZIDANE: Exactly, yes.

  • This is actually a huge time-saver, because imagine

  • you have a very popular open source repository on GitHub

  • and a bunch of people are trying to contribute to it.

  • So you're going to have a bunch of pull requests open

  • and you can just ignore pull request that fails the tests until they fix it.

  • COLTON OGDEN: You don't have to go through PR, after PR,

  • after PR that breaks.

  • KAREEM ZIDANE: Exactly.

  • Yes, and GitHub has usually--

  • there's a UI for this that we're going to see hopefully very soon.

  • COLTON OGDEN: MajorDefad is asking, "So what happens on the GitHub side?"

  • Hopefully this is addressing that question,

  • because now we are digging into how to actually integrate

  • Travis and GitHub together.

  • KAREEM ZIDANE: So they are actually integrated automatically.

  • You don't really have to do anything special to integrate Travis and GitHub,

  • and that's one of the nice things.

  • So what internally happens is that GitHub

  • is going to use an API for Travis CI to check for the build status

  • of the commit that we just pushed or the branch that we just pushed.

  • And Travis is going to reply and say, hey, this build succeeded,

  • or this build failed, or this build's still running,

  • and then GitHub takes these results and processes them

  • by either preventing you from merging, or allowing you to merge, and so on.

  • COLTON OGDEN: And it visually tells you in the merge UI,

  • oh, it didn't pass the Travis test, so you can't actually merge it.

  • KAREEM ZIDANE: Yes, that's absolutely true.

  • COLTON OGDEN: If you want to get your password manager, I can bring that.

  • KAREEM ZIDANE: Yeah, if you don't mind.

  • Just entering my very short password here.

  • COLTON OGDEN: Kareem123.

  • KAREEM ZIDANE: Exaclty.

  • So I confirm this.

  • Now, if you can switch back.

  • Everything is OK, everything looks good.

  • It's created my rule up here.

  • Now, let's go back to our repository and receive this new branch, new feature

  • branch that we created right here.

  • So I can create pull request from this branch

  • to try to merge it into master, as we see here on the top left,

  • create pull request.

  • And then notice if I scroll down, it's showing a Travis icon,

  • and it already figured out that the build failed,

  • showing me a red x here on the right.

  • And if I want more details, I can probably go to More Details,

  • and go to the build itself in Travis, and figure out why the build failed.

  • Now, this might be a little bit confusing,

  • but because I'm an administrator on this repository, I'm able to merge anyway.

  • But if you're someone who has only write access,

  • you would see this button disabled, in this case.

  • So now that we've demonstrated this, I thought

  • we could do one more cool thing if we don't have any questions.

  • COLTON OGDEN: Looks like GaloshCanon is saying, "Hello, anyone

  • familiar with Java?

  • I have a problem that I'm unable to solve."

  • This stream, I don't think we'll have time to look into Java.

  • It's not really a super freeform stream.

  • But definitely, if you're not in the CS50 Facebook group already,

  • go to the CS50 Facebook group and try asking a question there.

  • They might be able to assist you with that.

  • KAREEM ZIDANE: I see also ForkDB asking me to show the exception.

  • Yes, sure.

  • If we go to the build and then scroll down, down, down to the bottom--

  • COLTON OGDEN: I think you might be referring to Galosh.

  • KAREEM ZIDANE: Oh, OK, I misunderstood.

  • COLTON OGDEN: Yeah, because Galosh also wrote

  • after that he's got his exemption.

  • KAREEM ZIDANE: That makes sense.

  • COLTON OGDEN: It looks like you're using an unreferenced variable based on what

  • the output is in the thing there.

  • So make sure that you're not referencing a symbol that you didn't define.

  • KAREEM ZIDANE: So let's actually explore a bunch of features in Travis itself.

  • So if you click on this More Options up here--

  • of course, you have the option to restart

  • the build without clicking on that.

  • But if you click on that and go to Settings,

  • you also have the option to disable build push branches.

  • So sometimes you actually want to trigger the build manually if you want.

  • And in this case, this option allows you to disable triggering builds

  • automatically when you push branches.

  • COLTON OGDEN: Generally, you usually want to, right?

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: Because you want to automate that process.

  • KAREEM ZIDANE: Usually want this on, but in certain cases,

  • you might want to disable any builds from being triggered

  • when you push something and just be able to trigger them manually,

  • which Travis allows you to do.

  • Same thing for a build push pull requests.

  • So if you have any pull requests open, also Travis

  • is going to automatically trigger builds for them.

  • You can limit concurrent jobs, and so on.

  • This feature down here on the left, Auto Cancel Branch Builds,

  • this is, you can imagine a scenario, where you push too quickly,

  • so it triggers two builds, but you really care about the last build.

  • So this allows you to cancel any running builds before running

  • a new build, if that makes sense.

  • Same thing for pull requests here.

  • Down here we see environment variables.

  • And if you're not familiar, excuse me, if you're not

  • familiar with environment variables, they're

  • essentially, as you call them, shell variables, which

  • are variables in the same sentence, as we have variables in programming

  • in Python, except that they are usually used to influence or change

  • the behaviors of certain programs.

  • For example, Make considers certain environment variables

  • and changes its behavior based on their values

  • or storing maybe secret information, like API tokens,

  • or passwords, and so on.

  • So Travis allows you to also add environment variables and their values.

  • It also allows you to disable showing them in the build log, in this case,

  • in case they are secrets or passwords.

  • You don't really want to show them in the log.

  • COLTON OGDEN: Probably not.

  • KAREEM ZIDANE: And lastly, there is a clone job.

  • You can set or configure Travis to automatically trigger builds,

  • no matter you push something or not, every once in a while.

  • So in this case, I could configure Travis to trigger a build automatically

  • monthly.

  • I would imagine this is useful for status checks or something.

  • COLTON OGDEN: Something that interacts with other APIs?

  • KAREEM ZIDANE: Exactly, yeah.

  • So you want to make sure that--

  • to see if your website is up or not.

  • It can be down for some reason without you pushing anything,

  • so you could run a bunch of tests and have Travis notify you

  • if something wrong happens.

  • COLTON OGDEN: JefferyHughes says, "I always

  • come late to the CS50 live streams.

  • Is there any schedule for the future ones?"

  • Not a formal schedule just yet.

  • Probably we'll have-- it'll probably be the case that we always

  • do Friday at 1:00 PM Eastern Standard time,

  • but it's not hard set in stone yet.

  • During the winter break, there will probably be much fewer, if any,

  • streams, and then we'll have a more consistent schedule starting

  • January 2, in which case I think what we'd

  • like to do is something like Monday, Wednesday,

  • Friday at 1:00 for a few hours, a couple hours every week.

  • But it's kind of--

  • we're kind of still developing it, so let us know-- everybody, let us know--

  • what the ideal time is.

  • We're thinking 1:00 PM is kind of a good time

  • to cover the United States and a lot of the world,

  • but we realize that it's going to be hard to get

  • a perfect time for everybody, just given how disparate folks' schedules are

  • and where people are in the world.

  • But short answer, we're working on a schedule.

  • Long answer is it's hard to--

  • a little more complicated.

  • KAREEM ZIDANE: Yeah, but you can always subscribe to our events on Facebook,

  • or wherever you post them, and get notifications--

  • COLTON OGDEN: That's true.

  • KAREEM ZIDANE: --like someone

  • [INTERPOSING VOICES]

  • COLTON OGDEN: On our Facebook, we do keep a tally of--

  • or keep a schedule of all the upcoming Twitch streams, at least the ones

  • that we know about, and we generally have a couple weeks'

  • worth scheduled in advance.

  • So if you're not already following our CS50 Facebook account,

  • definitely do that--

  • the actual proper CS50 page, not the group necessarily.

  • But join the group as well, because we also post the events there.

  • LincePutaWire says I received the notification in his email,

  • or in his or her email.

  • Galosh says, "On my job is Python.

  • Junior web dev, we use Jenkins.

  • Travis just looks not as scary and has a way less monstrous UI."

  • KAREEM ZIDANE: I haven't tried Jenkins myself, but a lot of people

  • mention to me that Travis CI is more friendlier than Jenkins.

  • They certainly-- I would expect them to do the same thing,

  • essentially maybe using different set of configurations,

  • different set of name, key value pairs, different file names, and so on.

  • COLTON OGDEN: Maybe their UI is just a little bit different.

  • KAREEM ZIDANE: Yeah, but conceptually they should be the same.

  • I think also some CI and CD services allow

  • you to do these configurations in the web UI itself.

  • In this case, Travis requires that Travis is the YAML file, as we saw,

  • but some of them actually allow you to do this in the web UI.

  • I believe there's also a new feature of GitHub,

  • called GitHub Actions, that's actually going to do a very similar thing.

  • So yeah, it's in beta right now I think, so we're

  • looking forward to that as well.

  • COLTON OGDEN: A potential replacement for Travis?

  • KAREEM ZIDANE: Exactly, it's always nice to--

  • Travis is really nice, but it's always nice to minimize the number of tools,

  • if you can, so that you don't have to keep track of a separate service.

  • COLTON OGDEN: Andre's got a question for you as well.

  • KAREEM ZIDANE: So let's think that one.

  • "Hi, Kareem.

  • Hi, Colton.

  • Sorry, I'm a bit late, so do ignore the question

  • if you've already addressed this--

  • but really stupid question."

  • There's no such thing.

  • "Where does the build's automated tests of a Travis CI actually happen?

  • Is it server side?"

  • That's a great question.

  • All of these builds do happen server side on Travis's computers

  • or on Travis's infrastructure servers.

  • So they are completely hosted for us.

  • We don't have to worry about that.

  • We have-- do we have a second question?

  • COLTON OGDEN: Yeah, GeekNabil.

  • KAREEM ZIDANE: "I joined the stream give minutes ago,

  • and I noticed Kareem wrote a prime function, and tested it locally,

  • and the test succeeded.

  • The question is, why would we push the code on Travis server?

  • What are the advantages that we get from that way?"

  • So we I think we answered a very similar question.

  • It's still a good question though.

  • And we mentioned that the idea of having these tests also run on Travis

  • is that the Travis environment is the same for everyone.

  • So if Colton is working on the same repository, if he pushes some changes,

  • then the tests are still run on Travis CI,

  • even if Colton did not run any of these tests locally first.

  • So this is just to ensure or enforce that these tests

  • are run before we merge them into our master branch.

  • COLTON OGDEN: PresidentOfMars-- thanks for joining

  • us-- says, "Are there notes that go specifically with the stream?

  • Also, you could create a command Foo with Twitch chat with all the info

  • to not repeat it all.

  • Just put it in the title, wink."

  • So there are no notes formally that go with the stream.

  • We do have a GitHub repository that Kareem is writing to.

  • So it's GitHub.com/KZidane/CICDStream.

  • KAREEM ZIDANE: We can actually post that maybe here.

  • COLTON OGDEN: Yeah, if you want to write that in the chat.

  • And so we-- generally, for these kinds of streams,

  • because they're more free-form, they don't adhere necessarily

  • to a set of notes or slides, we don't have accompanying slides or notes.

  • But the GitHub repositories that we usually have associated with it

  • will more or less cover the flow of what we've done

  • and have all the accompanying material.

  • So you can follow along that way at least.

  • And then for more structured presentations, going in the future

  • we might have more of a formal sort of slide setup, but as of now,

  • we don't have anything of that type.

  • And as for the Twitch chat command, if you

  • could elaborate on that, because I'm not quite sure

  • I understand what you mean by that.

  • But thanks for the question.

  • Then JefferyHughes also plugged in the stream, so thank you.

  • KAREEM ZIDANE: Sounds great.

  • So the next thing that we should probably go through--

  • so before the stream, the lazy part of me

  • thought write a simple web page, simple HTML page, and deploy to GitHub Pages,

  • but the developer part of me said, you should probably do something cool.

  • And so for the next part we're going to use

  • a service called GitHub Pages provide by GitHub,

  • and GitHub Pages is simply a hosting service.

  • It's a service that allows us to host static websites.

  • COLTON OGDEN: And it's free for public repos, right?

  • KAREEM ZIDANE: It is free for public and private repos, I think.

  • And what I mean by static websites is that, if you

  • have a bunch of HTMLs, ESS, JavaScript, other assets like images,

  • audio files, video files, and so on, you should

  • be able to host your static website on GitHub Pages pretty easily,

  • literally, just like pushing your code.

  • COLTON OGDEN: PresidentOfMars, "Command automatically posts all links

  • to your group/GitHub."

  • That's a good point.

  • I'll start putting that in the description.

  • I think I put that in the description for a couple of videos.

  • For the videos I put on YouTube, we definitely do that, but on Twitch

  • I think only just the first couple--

  • oh, a Twitch bot that actually does it.

  • Oh, OK, that's a good point.

  • Yeah, Twitch does have bots that you can program,

  • which in itself would be an interesting stream, a stream on programming

  • a Twitch bot.

  • Maybe we'll do that live sometime.

  • That's a cool idea, so yeah, thanks for the suggestion, PresidentOfMars

  • and LincePutalWire.

  • KAREEM ZIDANE: So if you've--

  • a really cool static website that I'm going to use right now

  • is the sample code that Brian used for his stream

  • on React, which is, by the way, a great stream.

  • So do give that a look if you're interested in React.

  • Brian is a great teacher.

  • And if you don't recall, it was a single file, game.HTML,

  • that had a very simple game.

  • So let's actually open this in Google Chrome.

  • And it's a game that essentially-- let me zoom this in a little bit--

  • gives you a bunch of addition problems, and you're

  • supposed to write the correct answer, hit Enter, and so on.

  • It gives you a different problem if you write something wrong.

  • It gives you-- it switched the problem to red.

  • COLTON OGDEN: I like how we sort of build on that last stream

  • and we're going-- or a couple of streams ago--

  • and now we're using it in another context.

  • That's a cool idea.

  • KAREEM ZIDANE: Yeah, I really enjoyed that stream, because I knew something

  • about Angular, I knew something about Vue,

  • but I really didn't know anything about React aside from the fact

  • that it's pretty similar to both of these two.

  • COLTON OGDEN: It's very elegant.

  • KAREEM ZIDANE: Yeah, Brian did a great interaction to that.

  • So I highly recommend watching it if you haven't already.

  • So the cool thing about this is, one, we can

  • deploy a static website like this to GitHub Pages,

  • have had it hosted online.

  • Two, we can also do a bunch of tests on it.

  • What do you prefer?

  • Do you prefer testing first or deploying first?

  • COLTON OGDEN: Probably testing, I would say.

  • KAREEM ZIDANE: So the testing code for this is a little bit more complicated

  • than the testing code from before.

  • Again, this is not really--

  • we're not really going to go into deep details about the code here,

  • but I wrote this in advance.

  • And let me show you what it does after commenting these out first.

  • So I'm importing a bunch of stuff here.

  • I'm using a tool or a library called Selenium,

  • which is a very popular tool for testing the front end of our applications,

  • in this case.

  • So I'm importing a bunch of stuff from Selenium.

  • And I have a helper function here that takes a file name and returns a URL

  • for it, file:///something, if you've noticed the thing in the top here.

  • So this function is essentially going to say game.HTML and return

  • something like this so that I'm able to open the file in my browser.

  • And similar to the structure of the previous test.py,

  • we have a class, in this case called "game tests," that

  • extends unit test case, unit to a test case, so very similar.

  • We have helper problem functions that we look at later.

  • Let's actually start by these test functions.

  • So the first thing we have a function called test_title.

  • And can you try to guess what this does just by reading through the code?

  • COLTON OGDEN: So it looks like it says-- it's

  • asserting equal, self.assert equal.

  • So earlier we looked at assert false, which

  • means make sure that this is equal to false,

  • and it'll return whether it's equal to false or not.

  • KAREEM ZIDANE: Right.

  • COLTON OGDEN: So driver.title is basically--

  • I'm assuming that that's the title of the--

  • I don't know if it would be the title of the tab, or the title of the web page,

  • or the tab, one of the two.

  • KAREEM ZIDANE: Yeah, it's pretty much the same, yes.

  • COLTON OGDEN: And then just make sure that it equals Hello, the string Hello.

  • KAREEM ZIDANE: Exactly, so if you've noticed actually earlier

  • when we opened this in the browser, the title of the tab

  • here, as you mentioned, is Hello.

  • So we're doing exactly that.

  • We're checking that the title of the tab is Hello, in this case.

  • What about the next one?

  • Do you have an idea?

  • COLTON OGDEN: So on 9/11?

  • KAREEM ZIDANE: Yes.

  • COLTON OGDEN: So it's a function called Test Input Cleared After Correct.

  • So I'm guessing, because in Brian's stream, if he got the answer correct,

  • the text would clear.

  • KAREEM ZIDANE: Correct, that's exactly right.

  • COLTON OGDEN: So we have a variable called _Input,

  • which is equal to self.solveproblemindex2,

  • which I'm not entirely sure what that is.

  • I'm guessing that that's a DOM element.

  • KAREEM ZIDANE: So we're solving the problem.

  • Yes, we are getting a DOM element.

  • We're getting the input text field, in particular, in this case.

  • COLTON OGDEN: And then we're doing the same thing we did earlier,

  • where we're saying self.assertequals.

  • So is it equal that the value attribute of that DOM element--

  • so whatever its actual literal value is that we can see in the page--

  • is equal to the empty stream?

  • KAREEM ZIDANE: That's exactly right.

  • Let me actually demonstrate this.

  • So as we mentioned, if we get the answer right, we hit Enter,

  • the text field is cleared afterwards.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: So we're exactly testing for that.

  • We are solving a problem correctly, presumably, and then hitting Enter,

  • and then we're checking the value of the input field

  • to make sure that it's clear.

  • COLTON OGDEN: And this is sort of how you do the front end development.

  • You are actually picking apart pieces from the DOM, from the web page,

  • and it's like comparing the values at one given instance of time.

  • KAREEM ZIDANE: Correct.

  • Last one we have here is test_ red_after_incorrect.

  • We'll test right after incorrect.

  • And I try to be descriptive in my function names.

  • You might notice these are a bit long, but I

  • think that's mostly OK for testing functions so that you have an idea.

  • But I think you could also, if you looked more into unit test,

  • you could also provide a more detailed description of your testing functions

  • as dark strings.

  • This unit test is probably for another stream,

  • so we're not really going to dive into this much, excuse me.

  • And in this case, we're also solving a problem incorrectly, presumably,

  • as indicated by this correctly equals false argument.

  • And then checking that the color of the problem element, which is a div,

  • is RGBA255001, which means it's red and fully visible

  • 100% opacity or transparency.

  • COLTON OGDEN: JefferyHughes asks, "Is CS50 hiring?"

  • I'm guessing that's what you're asking.

  • Not actively, no.

  • And generally, when we do hire, to the best of my knowledge,

  • we post it on our CS50 Facebook page if it's something

  • that we're seeking candidates for outside of sort of the people

  • that we know privately and within Harvard.

  • So definitely-- or even if you are part of Harvard University.

  • Pay attention to our CS50 Facebook group for more info on that,

  • if we do hire more folks in the future.

  • Thanks for the question.

  • KAREEM ZIDANE: Cool.

  • So again, let me demonstrate this one last time.

  • If I enter the answer wrong and I hit Enter, the color of the problem

  • should turn red.

  • So this is what this is testing for.

  • COLTON OGDEN: And so Selenium, I'm guessing,

  • is giving you this function that's a value of CSS property?

  • KAREEM ZIDANE: Correct, yes.

  • So problem is the DOM element.

  • Let's actually look at this whole problem.

  • And this is the helper function that I wrote that literally does this.

  • It solves a problem correctly or not, based

  • on what you pass here as the value of the correctly parameter.

  • And it, first, finds the element whose ID is problem.

  • It then tries to solve the problem, solve the addition problem.

  • If you're not familiar with this, maybe you

  • look at the documentation for funtools.reduce.

  • But if you're going to trust me on this, this solves the problem correctly,

  • assuming you didn't do any mistakes.

  • It then gets the input element by its tag name,

  • and then sends a bunch of keys to that text input.

  • So either enters the correct solution of the problem or something else,

  • which is presumably incorrect.

  • Then hits return, and then returns the three things

  • that we care about, which is the problem element, the input

  • element, and the result, which is the correct result in this case.

  • COLTON OGDEN: This is cool, a nice little simple

  • function to solve the problem.

  • KAREEM ZIDANE: Yeah, you might even start

  • by duplicating all of this logic in your functions,

  • but it's nice if you can factor something out.

  • There's also a function that we didn't talk about so much, called "setup,"

  • and this is also a special function in unit test of test case

  • that is run before every test is run.

  • So in this case, what I want to do before every test is actually open

  • the file game.HTML in my browser.

  • It's actually cool if we demonstrated this live.

  • So let's try to run Pythontest.py as we did before, and of course,

  • there's no modules called Selenium, because we're--

  • COLTON OGDEN: And because previously you had that Selenium virtual environment

  • setup.

  • So this is, I'm assuming--

  • KAREEM ZIDANE: Exactly, yes.

  • So I deactivated my Selenium environment.

  • So to install Selenium, you're going to have

  • to do PIP install Selenium like this if you don't have an installed already.

  • You're also going to need something called Chrome Web Driver.

  • So if you Google "Chrome,"--

  • COLTON OGDEN: If you're using Chrome.

  • KAREEM ZIDANE: If you're using Chrome.

  • But you could also-- the good thing about Selenium is that it

  • doesn't care much about the browser.

  • There are a bunch of supported browsers.

  • Firefox, I believe, is one of them, so there

  • are drivers for different browsers that you could use with Selenium.

  • So you should download this if you don't have it, and install it on path.

  • So in my case, I put it in user local bin Chrome driver, in this case.

  • So let me actually--

  • I have this already all set up in my Selenium environment.

  • So let me activate this and try again.

  • And the test failed--

  • "Driver is not defined."

  • This didn't happen before.

  • [LAUGHTER]

  • KAREEM ZIDANE: So let's see.

  • "Named driver is not defined."

  • Let's see.

  • COLTON OGDEN: Oh, because you commented the code out.

  • KAREEM ZIDANE: Yeah, I commented one of the things out.

  • So let's try to fix this.

  • Oh, I commented this line and I shouldn't have.

  • So in this case, just to initialize Selenium or the web driver for Chrome.

  • In this case, I just do web driver-- which we imported up here from

  • Selenium--

  • .Chrome, literally.

  • Try this again-- fingers crossed.

  • And it opens a browser automatically.

  • It does a bunch of stuff really, really fast.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: And then if we look back at the terminal

  • we should see that all has succeed, because, presumably, we

  • didn't break anything.

  • So let's look again at the code and try to break something.

  • COLTON OGDEN: It's probably a very satisfying thing

  • to watch for a very large set of test cases.

  • KAREEM ZIDANE: Yeah, exactly.

  • We're going to change this in a bit, but this is really an amazing thing

  • to watch when you see the computer doing things automatically

  • in the browser tab.

  • COLTON OGDEN: It's a good way to test Chrome's speed as well.

  • KAREEM ZIDANE: Yes, true, in a sense.

  • So I commented out this line here, which clears the input field

  • after a correct response.

  • So I'm just breaking it intentionally, so let's see what

  • happens here if I run the tests again.

  • A bunch of crazy things happen again.

  • And then if I check--

  • hmm.

  • It's telling me that it expected the value of the input field to be empty,

  • but it found two in it.

  • So that means that the input field wasn't cleared.

  • So in this case, the test failed.

  • So one question that might come to your mind

  • is, how is this going to work Travis at all?

  • How is Travis going to be able to launch a graphical web browser

  • and run a bunch of tests in it?

  • And the answer is, it doesn't.

  • Because there is a feature of Chrome and other browsers as well that

  • allows these browsers to be run in the so-called "headless mode," which

  • is a mode without actually a graphical user interface.

  • So you can have a browser without actually a graphical user interface,

  • and that's what we're going to use in this case.

  • So let me comment these in, I guess, again.

  • Whoops-- not delete them.

  • So in this case, I just added the headless option to Chrome options.

  • I created Chrome options up here from web driver,

  • the Chrome options by instantiating webdriver.chromeoptions.

  • I added the headless argument and then I instantiated the driver the same way,

  • except that I passed options this time.

  • So let's try this again.

  • It still, presumably, runs the test in Chrome,

  • but we don't see a crazy thing happen using GUI.

  • And this is what we're going to use in an environment like Travis

  • to test our project.

  • Any questions?

  • Let me actually fix the bug that I made.

  • COLTON OGDEN: Yeah, the React bug's still there.

  • KAREEM ZIDANE: You know what?

  • Let's actually push this way and see how it's going to fail.

  • So let's actually take a look at Travis.yaml,

  • And it's pretty similar in this case.

  • We are using the same language, Python in this case,

  • because our tests are in Python.

  • Although, technically they don't have to be in this case.

  • I think Selenium also supports a bunch of other languages, excuse me.

  • So this is a new thing.

  • "Sudo: required" means I don't want to run my tests in a container.

  • I want to run my test in a fully fledged machine, a virtual machine.

  • And the reason I have this is because I want to use sudo,

  • and Travis, unfortunately, doesn't allow you to use sudo instead of container,

  • so I have to use a virtual machine.

  • So it's going to be a little bit slower, but it's

  • going to give us the feature that we care about.

  • It turns out I don't have to install Chrome on Travis,

  • because it allows us to enable Chrome simply by passing add-ons

  • and then as a child key of it or however you want to call it.

  • Chrome:stable-- I also know this by checking the Travis documentation.

  • A step that we haven't seen before is the before install step.

  • So we saw the install step.

  • The install step usually is used, although nothing forces you to do that.

  • Usually, you used to install your package with all its dependencies.

  • In this case, I'm using before install.

  • Or I usually use before install to install any--

  • maybe build dependencies, or any testing dependencies, in this case.

  • So I'm installing Chrome driver, because I don't think

  • it's installed by default on Travis.

  • I'm installing it in the same location, user local bin,

  • and then I'm removing the zip file that I downloaded.

  • I'm also installing Selenium.

  • So this is how you can run more than one command in one step

  • like, script, or install, or before install, in this case,

  • by adding this little dash before the command--

  • before every command, actually.

  • So this creates a list of commands.

  • So I'm first installing Chrome driver, as we mentioned, and then I'm

  • simply running PIP install Selenium.

  • COLTON OGDEN: So this is little bit more complicated and custom-tailored

  • than doing a requirements.txt that you would use PIP to install?

  • KAREEM ZIDANE: Correct.

  • But in this case, I believe requirements.txt is usually

  • used to install or list the dependencies of your project.

  • In this case, I'm not sure.

  • People could argue with that.

  • I don't think Selenium is a dependency of my project.

  • My project doesn't need Selenium to run, but I do need Selenium to test.

  • So that's kind of separate.

  • COLTON OGDEN: That makes sense.

  • KAREEM ZIDANE: So what I'm going to do now is git status.

  • All these changed.

  • Let me add everything, and let you git push to master.

  • Of course, I forgot to git commit again--

  • broke tests, push.

  • And if I go back to my browser by closing all of these,

  • my repository is called KZidane/reactsaddition, I believe.

  • Yep, there you go.

  • Go to Build History.

  • You're going to find that there's a new build here, click it.

  • It's also still taking a little bit of time to start.

  • And this is actually probably going to take a little bit longer,

  • because it's more heavyweight than the container itself.

  • There's not much really that we can do while waiting for this.

  • COLTON OGDEN: That's the unfortunate part about it.

  • KAREEM ZIDANE: Yeah, we can look at the Travis documentation

  • while this build is running.

  • So you can have, among a Travis feature, you

  • can have a bunch of jobs that are running simultaneously

  • if you care about this.

  • So if you have a bunch of tests that you want to run side by side, so to speak,

  • or in parallel, at the same time, you can do

  • that using the jobs feature of Travis.

  • Travis also explains a bunch of--

  • how to install your dependencies for your project.

  • So do definitely check the configuration for how to do this, if you're curious.

  • The programming languages that Travis supports--

  • so we happen to use Python in this case--

  • but here is a list of all the languages that Travis supports.

  • COLTON OGDEN: Quite a good set, actually.

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: Even Pearl.

  • KAREEM ZIDANE: Yeah, so there is Pearl, there is Swift, there is--

  • I don't know who codes in Visual Basic now, but there is Visual Basic.

  • COLTON OGDEN: Who codes in Pearl?

  • That's what I want to know.

  • KAREEM ZIDANE: There are a bunch of scripts in Pearl right now.

  • Anyway, not our problem.

  • Deployment options, we're going to look at deployment shortly.

  • Here's how to deal with environment variables, documentation about that

  • as well.

  • Here's how to encrypt data.

  • So if you have passwords or security tokens,

  • you can actually encrypt these using Travis

  • or have Travis encrypt them for use so they're not

  • publicly accessible by everyone.

  • We talked about using an environment variable for this,

  • but there are other options that Travis gives you in this case.

  • Also, one of the cool features of Travis that we do use

  • is the notification feature.

  • So you could have Travis actually send you

  • an email once the build succeeds or fails, or send the message to Slack,

  • if you're using Slack, or a bunch of other things.

  • So this is what notifications on a higher level are used for.

  • I believe this is for developing Travis itself, if you're curious.

  • By the way, Travis is open source on GitHub as well.

  • So if you go to GitHub.com/TravisCI you can see a bunch of their repositories.

  • And this is probably Travis for enterprise, if you have a big company

  • and you care about this.

  • COLTON OGDEN: Make and host your own version of Travis.

  • KAREEM ZIDANE: Exactly.

  • So if you go back to our build here, it's obviously broken,

  • and let's try to figure out why.

  • And if you scroll down, down, down it's telling us pretty much the same thing.

  • So it's ran the same tests that we ran locally using a headless browser,

  • in this case, and it's telling us that it found two in the input field,

  • but it actually expected an empty string.

  • So let's actually fix this and try again.

  • So if you go back to game.HTML--

  • whoops.

  • Sorry, Brian, for breaking your code.

  • COLTON OGDEN: It's for educational purposes.

  • KAREEM ZIDANE: Save, add game.HTML, commit fixed again,

  • push, and it's going to take a minute or two to finish starting and building.

  • Let's click on this just to get it ready.

  • Now, how do we deploy our website to GitHub Pager?

  • And the nice thing about Travis is that it actually

  • has a so-called provider that's built-in that

  • allows you to do this pretty easily.

  • And so let's actually google this.

  • Let's do "GitHub Pages Travis CI," and first thing that appears

  • here is GitHub Pages Deployment.

  • And it seems to be the case that I need this block of code.

  • If you read through, you'll figure this out as well.

  • So it seems to be the case that I need this block of code in my Travis.YAML.

  • So I'm just going to do exactly that.

  • Copy that, go to Travis.YAML, paste this here, and then

  • just go through these one more time.

  • So hmm, here's an interesting thing.

  • So the skip clean up key value pair actually, in this case,

  • happens to be useful only when you have certain build artifacts.

  • So if your program or your app is built into a static website,

  • this will be useful.

  • It's not really useful in this case.

  • By default, after the script step, Travis

  • actually clears any changes in the repository

  • or stashes them, if you remember git stash from the last stream.

  • So we don't really care about this right now.

  • We can get rid of it.

  • GitHub token is the token that Travis is going

  • to be using to make a push to your repository on GitHub,

  • because this is what we need in order to have GitHub Pages working.

  • COLTON OGDEN: For the authentication.

  • KAREEM ZIDANE: Correct.

  • I don't really care about keep history.

  • I'm going to delete this comment, because it's not

  • really useful in my case.

  • I can infer this.

  • By default, I think, this is going to happen only on the master branch,

  • and this is what onbranch:master tells us.

  • So you can imagine changing this.

  • You can imagine working on a development branch,

  • and then only when you merge or push your code to your master branch,

  • that this deployment is actually going to happen to production.

  • But more importantly, this deployment is only

  • going to happen if the script step succeeds,

  • so if our tests all pass in this case, which is a good thing.

  • So we seem to need a GitHub token, and I forgot about this before the stream.

  • So I'm going to go to my GitHub.com.

  • COLTON OGDEN: Do you me to turn your--

  • KAREEM ZIDANE: Let's actually show first where to generate a token first.

  • COLTON OGDEN: Here, so take the chat off so that we you can see where.

  • KAREEM ZIDANE: So I clicked on my profile picture

  • here up on the top right.

  • I chose Settings, and then I believe it's under Developer Settings, and then

  • Personal Access Tokens.

  • So you can actually generate personal access tokens

  • using this view right here.

  • So if you can switch my screen right now, I'm going to create my token.

  • Let's call mine "react," and then I'm going to give it the repo scope,

  • generate token, copy this token.

  • And then can you switch back my screen?

  • COLTON OGDEN: Yeah.

  • KAREEM ZIDANE: Thank you.

  • So I generated a token and copied it--

  • actually, we're going to have to go away one more time, but not now.

  • COLTON OGDEN: Oh, aren't you going to-- you have to paste it into your file,

  • don't you?

  • KAREEM ZIDANE: Sure.

  • So let me actually do this.

  • So GitHub token, paste it here, add.

  • COLTON OGDEN: So you can show the fields that you entered it into, if you want.

  • KAREEM ZIDANE: Sure.

  • So here's my previous view.

  • Here is the build that we just ran after fixing.

  • Everything passed and everything is as expected.

  • So for this, we're going to use an environment variable,

  • and to add an environment variable, I'm going to do More Options, Settings,

  • and then go down to Environment Variables,

  • and then add a variable here.

  • In this case, we seem to be using a variable called GITHUB_TOKEN, all caps.

  • This is not including the dollar sign.

  • The dollar signs is used to refer to this variable in the shell

  • after assigning it.

  • So what I did was that--

  • GitHub token, token, and then pasted the token here, and then hit Add.

  • COLTON OGDEN: And that's what we see right above there, where

  • you have environment variables set.

  • KAREEM ZIDANE: Exactly.

  • You need to make sure, in case of secret credentials like these,

  • we need to make sure that the display value in

  • build log option is off, because otherwise you can actually

  • see your GitHub token and build log.

  • Everyone can see it, which is worse.

  • Also, an important feature of Travis is that it actually allows you to--

  • once you set the environment variable, you can't change its value.

  • So no one, even me, including me, can actually see what the value is in here.

  • All I can do to it is actually delete it if I want.

  • COLTON OGDEN: MajorDefad says, "Stupid question.

  • What does it mean to deploy a website?"

  • KAREEM ZIDANE: That's a great question, actually.

  • What it means to deploy a website is to publish it somewhere, for example.

  • So if your website-- in this case, we're going

  • to publish our website on GitHub Pages, so host it somewhere,

  • be able to reach out to it using the internet.

  • But yes, the term "deploy" actually was very confusing to me at first.

  • All this means is actually publish our website somewhere.

  • COLTON OGDEN: Take it from your local machine

  • to some server where anybody can reach.

  • KAREEM ZIDANE: Correct.

  • But interestingly, it can actually mean something else in different contexts.

  • So if I'm deploying a Python package, for example,

  • you might think of that as publishing this on some package index,

  • like PiPy pi, or maybe creating a release in GitHub

  • or something like that.

  • Good question.

  • So now that I have this set, there is one more thing that I need to do.

  • First of all, I'm going to go to my repository in GitHub,

  • so re:KZidane/reacctaddition, and I'm going to do Settings,

  • and I'm going to scroll down a little bit to GitHub Pages.

  • I'm going to select my default branch, which is master, in this case,

  • and this is the branch that I want GitHub Pages to consider.

  • If I push to master branch what I'm going to do,

  • what GitHub is going to do, is actually serve my website somewhere.

  • So let's choose this.

  • Let's hit Save, and then let's actually, now that this is done,

  • let's actually do another push after we add the deployment stuff.

  • Git status, it's changed, Travis CI, commit, and then enabled

  • GitHub Pages, git push.

  • So now this is going to take a second or two.

  • COLTON OGDEN: And once it finishes verifying

  • that the build succeeded, it's going to take that deploy the key

  • and follow with the instructions that you specified for it, the token

  • and put that on the internet somewhere.

  • KAREEM ZIDANE: That's exactly right.

  • So let's actually follow the build log here, and let's wait for this to start.

  • this is going to take a while.

  • We're waiting for this, once you enable GitHub Pager on GitHub

  • from the repository settings, as we showed,

  • this is the URL that you could use to reach out to your website.

  • COLTON OGDEN: It gives you your username.GetHub.io normally,

  • slash, and then the name of your repo.

  • KAREEM ZIDANE: Correct, but you can also specify a separate custom domain

  • if you have this already.

  • If you have your own domain, you could just set this up if you want to.

  • So hopefully, now that our tests pass, it's

  • going to go through the deployment step.

  • Notice, the build is still running after passing the tests.

  • And now it's installing deployment dependencies,

  • a bunch of Travis-related stuff, cloning the repository it seems,

  • and then deploying it.

  • And exited with zero, which is correct.

  • COLTON OGDEN: Nice.

  • KAREEM ZIDANE: So now, hopefully if you go to this, /games,

  • because our file's called games.

  • Or is a game?

  • It's just game, so game.HTML.

  • Hopefully we should see our game online.

  • COLTON OGDEN: Nice.

  • Live on the internet for everybody to see.

  • KAREEM ZIDANE: So that's everything I have have for today.

  • COLTON OGDEN: The Jasong or the Yasong says, "Hello."

  • Hello, Jasong or Yasong.

  • KAREEM ZIDANE: Hi.

  • COLTON OGDEN: I'm not sure if that's a German J, or an English J,

  • or some other J.

  • KAREEM ZIDANE: Do you mind switching to my screen?

  • COLTON OGDEN: Oh, yeah.

  • Oh, sorry, did I--

  • KAREEM ZIDANE: That's OK.

  • I'm just going to quickly get rid of this token,

  • because we don't need it anymore.

  • COLTON OGDEN: "It's putting it online?"

  • Yes, website is now online.

  • Greece, ah-- I'm not sure how the J is pronounced in Greece, actually,

  • but hello to you from Greece.

  • Thank you for joining us.

  • That's quite far away.

  • KAREEM ZIDANE: Yeah, thank you.

  • COLTON OGDEN: So that's it for today's topic, you said?

  • KAREEM ZIDANE: Yep.

  • That's all I have for today.

  • We can maybe take any questions if you have any.

  • COLTON OGDEN: Sure, yeah.

  • We'll stick around for a few questions.

  • So we talked about CICD, so unit testing, deploying with Travis.

  • So starting from the bottom, going all the way up to fully deploying an app

  • and testing it along the way.

  • So yeah, we-- oh, can they play it?

  • Buddia2610.

  • KAREEM ZIDANE: You can, yeah, definitely.

  • Just go to--

  • COLTON OGDEN: What's the URL?

  • KAREEM ZIDANE: KZidane.GitHub.io/react-addition/--

  • COLTON OGDEN: KZidane/GitHub-- it's not the shortest URL-- slash--

  • KAREEM ZIDANE: That's why you should configure your custom domain.

  • /react-addition/game.HTML.

  • So, yes, you should be able to access this now on the internet.

  • COLTON OGDEN: Wow, look at that.

  • That's so cool.

  • We put a website online live on CS50 TV.

  • CoralSase says hi from Italy.

  • Hi from US.

  • Thanks for joining us all the way from Italy.

  • Wow, we have such an international audience.

  • It's amazing.

  • KAREEM ZIDANE: Yeah, that's amazing.

  • COLTON OGDEN: I'm guessing it's evening over there, right?

  • What's evening, is it [NON-ENGLISH SPEECH]??

  • No, that's Spanish, I think.

  • How do you say good evening?

  • KAREEM ZIDANE: It's 8:31 PM, Colton.

  • COLTON OGDEN: How do you say good evening in Italian?

  • I forgot.

  • Let's figure this out.

  • KAREEM ZIDANE: I have no idea.

  • COLTON OGDEN: Well, we'll do it live.

  • Good evening is [NON-ENGLISH SPEECH].

  • I was close.

  • [NON-ENGLISH SPEECH] I think I said [NON-ENGLISH SPEECH],,

  • which I think it means good luck, and [NON-ENGLISH SPEECH] was good luck

  • in Spanish.

  • [NON-ENGLISH SPEECH]

  • KAREEM ZIDANE: Yep.

  • COLTON OGDEN: 8:30 is not too late, but it's a nice comfortable time

  • to watch some Travis CI streaming with Kareem Zidane, CS50's Kareem Zidane.

  • It looks like the white on your Chrome fades down to a slightly dark color.

  • You can see it on the stream, it's like an off-white.

  • Or is it because you Flux-enabled or something?

  • KAREEM ZIDANE: I'm not sure what you're referring to.

  • COLTON OGDEN: Your screen goes yellow over the course of the day.

  • Does that happen?

  • KAREEM ZIDANE: Not really.

  • I don't think so.

  • COLTON OGDEN: Kalinicta in Greece.

  • Oh, nice.

  • I'm not sure where that is.

  • Kalinicta.

  • I'm not spelling it correctly-- kalinicta.

  • It's bringing up the actual Greeks, which is a little bit--

  • or the Greek, which is a little bit trickier.

  • Why is it not bringing it up?

  • Here, let's bring up the actual Greek.

  • Oh, that's how you say good evening.

  • Oh, I see.

  • Good night, kalinicta, yeah.

  • Yeah, [NON-ENGLISH SPEECH] is fate in Spanish.

  • Ah, yes-- good fate, good luck.

  • [NON-ENGLISH SPEECH]

  • KAREEM ZIDANE: Cool.

  • COLTON OGDEN: [NON-ENGLISH SPEECH].

  • KAREEM ZIDANE: You do get a language tutorial as well, not just--

  • COLTON OGDEN: Yeah, little bit.

  • A very, very poor language tutorial on CS50's live stream.

  • Question.

  • "Why do most programmers go for a Mac instead of a laptop

  • using a Linux distribution?"

  • What's your opinion on that?

  • KAREEM ZIDANE: I personally use Linux, Ubuntu specifically.

  • I feel like I'm much more comfortable with that,

  • much more productive with that.

  • I haven't tried and Mac too much, so I can't really

  • say a useful opinion on this, but maybe you could give us an insight.

  • COLTON OGDEN: Well, they're similar enough,

  • because a lot of the same programs and shell commands are identical.

  • They do have some differences, obviously.

  • Package managers are going to be different.

  • It's apt-get for Ubuntu, right?

  • KAREEM ZIDANE: That's true.

  • COLTON OGDEN: Mac doesn't really have it built-in.

  • KAREEM ZIDANE: Snap right now as well.

  • COLTON OGDEN: Which one?

  • KAREEM ZIDANE: There's Snap as well.

  • Snap on Ubuntu.

  • But to me, honestly, Ubuntu comes with a whole bunch of stuff

  • in the preinstall that makes certain things easier for me, which is good.

  • Also, the fact that--

  • and I'm saying this honestly--

  • I struggle sometimes to do something, but I also

  • learn a bit more using Linux.

  • COLTON OGDEN: Yeah.

  • No, it's definitely much more--

  • it's closer to the actual kernel, I guess, or closer to the--

  • I guess your file.

  • You're not abstracted as much away using graphical user interfaces.

  • You're looking at all your files as they actually are.

  • KAREEM ZIDANE: Yeah, that's true.

  • At some point, yeah.

  • COLTON OGDEN: And you're interacting with things

  • that normally-- environment variables aren't something

  • that a user typically interacts with.

  • KAREEM ZIDANE: Yeah, these exist in Mac and Windows as well, but they're not--

  • COLTON OGDEN: But you're more forced into--

  • KAREEM ZIDANE: If you're a normal Windows user,

  • you probably wouldn't hear about these.

  • COLTON OGDEN: You do occasionally.

  • Windows development is a little bit--

  • it feels messy, but at least they have the--

  • what is it--

  • Linux bash Subsystem or something like that.

  • KAREEM ZIDANE: I haven't tried that one as well,

  • but I've heard mixed opinions on it.

  • COLTON OGDEN: "I'm on Ubuntu too, but thinking to go to Mac."

  • I don't know if there is necessarily a super--

  • Mac is just a great user interface.

  • And that's their selling point, is their operating system is just nice to use.

  • But I honestly don't--

  • if you're comfortable on Ubuntu, I can't necessarily recommend either way.

  • I think just go with whatever system.

  • I'd say try a Mac and see if you like it.

  • Try a PC.

  • Try everything just to get a sense of what the landscape looks like just

  • to determine whether or not you find a particular operating

  • system enjoyable to use or not.

  • Let's see what we have.

  • Jeffrey says, "It's been seven years now under Windows Linux

  • and used a VM for Mac, and I think to switch to a real Mac."

  • Yeah.

  • No, Macs are really-- they have a lot of cool features

  • and just a lot of their services work really well together,

  • but it's not mandatory.

  • You can get by using whatever machine you're comfortable with.

  • "Windows has PowerShell, i.e. a better shell for Windows."

  • Yeah, you can use Windows PowerShell instead of the command

  • prompt to do some more stuff.

  • And you can also install git bash, and a node shell,

  • and all kinds of other stuff.

  • KAREEM ZIDANE: I do believe that Travis CI also supports an OS X

  • environment if your application works only on OS X

  • or you would like to test your application also

  • on OS X. I don't think I mentioned that, but by default, I

  • believe it uses some distribution, some version of Ubuntu as well,

  • maybe 16.04 or something.

  • COLTON OGDEN: That makes sense.

  • I'm guessing probably because most web applications typically

  • assume that they're running on a Linux server as opposed to a Mac.

  • KAREEM ZIDANE: Yeah, I believe they have both options,

  • but you can have a bunch of other things as well here.

  • Cool.

  • COLTON OGDEN: It seems like a very flexible platform.

  • KAREEM ZIDANE: It is.

  • It definitely made a lot of things easier for us.

  • It made us focus more on development rather than

  • worrying about the details of how to deploy your app.

  • Because, you can imagine, deploying your app,

  • if it's more complicated than GitHub Pages, a static website,

  • can be really complicated and can require

  • a lot more time and a lot more effort to do,

  • which would make it mistake-prone or error-prone.

  • So you sometimes find yourself messing things up.

  • But right now, you literally have a computer doing this for you,

  • and it's doing the exact same thing every time.

  • So there's no reason--

  • there should be no reason why this should fail.

  • COLTON OGDEN: Yeah, I agree.

  • Joseline says, "You're awesome, guys."

  • Thanks, Joseline, thanks for coming in.

  • KAREEM ZIDANE: Thank you so much.

  • COLTON OGDEN: CoralSase says, "I have a suggestion for the game programming

  • streams.

  • You could do a game with basic networking,

  • maybe using LuaSockets, something like a multiplayer snake

  • or some basic thing like that."

  • Yeah, that's a good idea.

  • I'll take a look at it.

  • I'd have to read up on LuaSockets and probably tinker around with it a bit

  • before diving in blind, but I could maybe put together something simple

  • and try to implement it live.

  • Buddia2610, "There is PowerShell for Linux."

  • Interesting.

  • I'm not too familiar with that.

  • Maybe you have some knowledge about that,

  • if you want to read that last question.

  • KAREEM ZIDANE: Sure.

  • "Kareem, when does it make sense to use unit tests or E2E tests?

  • New programmers add tests just like that, even if it's unnecessary."

  • I'm not familiar with E2E tests, so I'm just going to Google this on the fly

  • and see if I might be familiar with it.

  • I don't know.

  • Are you familiar with that?

  • COLTON OGDEN: I'm not sure.

  • I thought E2E was end-to-end testing.

  • KAREEM ZIDANE: Yeah, I'm probably going to have to read more on that.

  • COLTON OGDEN: It's, I'm guessing, testing for--

  • I think the scenario is like testing the whole flow of using an application,

  • from the beginning of a user logging in and doing

  • all the features of your application, until the last logging

  • out of your application.

  • KAREEM ZIDANE: Does that also mean you could

  • use your tests for something like that?

  • Because it seems like you could implement

  • a whole flow using unit tests as well.

  • COLTON OGDEN: Yeah.

  • You would have all the sub things as unit tests,

  • and then an end-to-end testing would be the entire application

  • from a user's point of view, like using it like a normal user would basically.

  • Basically, it'd be a sequence of unit tests in a particular order, I think.

  • KAREEM ZIDANE: Forgive me for my ignorance on this subject,

  • but if I understand this correctly, it seems like you could use unit tests,

  • but also perform or use end-to-end tests.

  • If the idea is, should you write test cases that are not necessary?

  • Probably, no.

  • But some people-- writing tests is not really a fun thing to do.

  • It's not an easy thing to do, and it can take a lot of time.

  • So what a lot of people I know do is actually write tests as necessary.

  • When we figure out a bug, we demonstrate it.

  • We actually do pinpoint this bug with a test case,

  • and then eventually you're going to have a bunch of test cases

  • that cover most, if not all, of the problems in your code.

  • I know there are also some tools, called test coverage tools,

  • that potentially point you to certain parts of your application

  • that you didn't cover in terms of testing.

  • So maybe you could give that a look and maybe try to use them.

  • But I would say, especially if you--

  • you should probably-- yeah.

  • You should probably write only the necessary test cases in this case.

  • Don't try to overwhelm yourself by trying to write a whole bunch of tests

  • before even starting to code.

  • Some people say that's a good practice, but it can discourage you, I would say.

  • COLTON OGDEN: It'sDelusional says, "So what does this fall under?"

  • KAREEM ZIDANE: I'm not sure.

  • What, are you referring to end-to-end?

  • COLTON OGDEN: I think he's referring to--

  • I think he's just asking, what do we do today?

  • Probably just unit testing is what we covered today.

  • KAREEM ZIDANE: Yeah.

  • Well, we didn't cover unit testing in details.

  • We did cover continuous integration and continuous deployment,

  • and we also talked a little bit about unit testing as well,

  • and testing using Selenium, which is pretty useful.

  • COLTON OGDEN: Nice.

  • Well, we'll see if anybody has any last questions.

  • I'll bring us back to the middle title card there.

  • But yeah, it was a good stream.

  • So thanks for coming on again and giving us a part two of the GitHub and now

  • we did the Travis stuff.

  • We'll have to have you on for an actual programming stream sometime.

  • KAREEM ZIDANE: Yeah, hopefully.

  • Yeah, thanks so much for having me.

  • Thanks, everyone, for joining today.

  • I hope that was useful.

  • COLTON OGDEN: Yeah, it was really well-done.

  • KAREEM ZIDANE: Thank you.

  • COLTON OGDEN: So tomorrow we have Dan Coffey

  • on the stream, CS50's head producer.

  • He helped set up this whole room, so shout outs to Dan Coffey.

  • He'll be talking to us about the draw50 app

  • that David uses in lecture to simulate a digital blackboard and how that works.

  • It's actually a JavaScript application that we use on a giant--

  • I think a giant Microsoft Surface TV.

  • Then on Wednesday, it'll be just me.

  • We'll do tic-tac-toe in Lua and Love2d, so back to 2D from last stream.

  • Last Friday we did a unity stream in 3D, so we're going to go back to 2D.

  • A very simple game, tic-tac-toe, which will be a lot of fun.

  • And then on Friday, Nick Wong, who did the stream last week, will be back,

  • and he'll be giving us a tutorial on Linux commands.

  • So if anything that we've done today or in the past with the command line

  • has been a little bit difficult to parse or maybe a little foggy,

  • and you want more hands-on breakdown of what's

  • going on at the command line, some basic commands and a tutorial,

  • then Nick will give us a basic tutorial then.

  • And then the week after, we've got some more stuff.

  • We have Veronica Nutting, CS50's head course assistant,

  • will be giving us a Python tutorial.

  • So 100 cool things to do in Python.

  • KAREEM ZIDANE: That's great.

  • COLTON OGDEN: Depending on how much time we have,

  • we may not be able to cover all 100, but we'll try our best.

  • So yeah, and so we have a lot of stuff lined up.

  • BasedAvon says hi.

  • Hi, BasedAvon.

  • Nice to having you in today.

  • It'sDelusional says, "Are you related to Zinedine Zidane?"

  • KAREEM ZIDANE: I wish.

  • I'm a big fan of Zinadine Zidane.

  • It's just a coincidence that our last names are the same.

  • But yeah, he's definitely a fantastic player and I'm a big fan of him.

  • COLTON OGDEN: MajorDefad, "Thanks, Kareem and Colton,

  • this has been useful."

  • Thanks for coming in today and being a part of the stream.

  • Glad to have you today.

  • M. Kloppenburg, thanks for coming in.

  • "Thanks, Kareem and Colton."

  • Lince, thank you.

  • Jasong says bye.

  • Thanks, Jasong.

  • Thanks for coming in.

  • Belecure, "Thanks, Kareem and Colton.

  • This is very useful, as usual."

  • Thank you so much, very much appreciate it.

  • BasedAvon, "What about deploying to another site or place other

  • than in this video?"

  • KAREEM ZIDANE: That's great.

  • Can you actually switch my computer on last time?

  • So if you go to Travis deployment provider, we search for that,

  • you would find that Travis actually supports

  • a whole bunch of deployment providers.

  • So we happen to be using GitHub Pages in this stream--

  • let me zoom this in a little bit--

  • but you can also deploy to Heroku somewhere here.

  • Let's see.

  • Yep, there you go.

  • So you can also deploy to Heroku.

  • You can also deploy to AWS, Elastic Beanstalk, cloud storage, package

  • clouds, a bunch of other services.

  • And even if none of these fits your use case,

  • you could also have a custom deployment script that does whatever you want.

  • COLTON OGDEN: There is a massive number of services there.

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: LincePutaWire, "Who is the cat in the profile picture?"

  • If you're referring to the CS50 Facebook group, then that's the Happy Cat

  • or I Can Has Cheezburger?, which is a very famous meme cat that CS50 has

  • adopted for a lot of its iconography.

  • So definitely Google that, check that out, see the history behind it.

  • Andre says, "Kareem did an awesome game for his CS50 final project way

  • back when.

  • Perhaps you could persuade him to revisit this, Colton."

  • KAREEM ZIDANE: Thank you so much.

  • I don't really think of it as an awesome game.

  • COLTON OGDEN: What was the game that you did?

  • KAREEM ZIDANE: I think it was some version of checkers.

  • It did use the Stanford Portable Library.

  • I don't even think I have the code for that anymore.

  • COLTON OGDEN: We can maybe pull it up or maybe implement a version of it

  • live on camera sometime.

  • KAREEM ZIDANE: Sure.

  • You're the gaming developer, so you should probably--

  • COLTON OGDEN: Well, we can maybe have you--

  • we'll have you as a guest for that one.

  • We'll have you talk through your--

  • KAREEM ZIDANE: I did watching your Unity stream, by the way.

  • I didn't know anything about Unity until I watched your stream,

  • and it wasn't amazing.

  • COLTON OGDEN: Yeah, Unity is super awesome tool.

  • I'm super excited to do some more streams in that.

  • It's an awesome tool.

  • KAREEM ZIDANE: It was nice to get a basic idea of how all of this

  • fits together and how it works.

  • And it's really simpler than I thought.

  • COLTON OGDEN: Yeah, it's very easy.

  • It gets very complicated the farther you dig into it, obviously, but just to get

  • started with it, super nice and super easy.

  • KAREEM ZIDANE: That's great.

  • We have-- It'sDelusional says, "Thank you, guys."

  • Thank you.

  • "I use Python and another languages for benchmarking

  • and found out, as a whip div, that Python nowadays is falling back

  • and is slower than other languages.

  • I read that it's the most used language in AI and machine learning.

  • My question is, why Python for AI machine learning?

  • Can't we use other languages?"

  • So that's actually a great question, but also very broad.

  • Python is definitely a great language, but there

  • are a bunch of other languages that also do very well.

  • One of the best things about Python is that it's

  • really present in a lot of fields.

  • Among them is back end web development, and machine learning, and AI stuff.

  • I believe that assigns stuff as well.

  • So you would find every language has its advantages and disadvantages.

  • It's not necessarily the case that there is one language that's

  • the absolute best language.

  • Do you have anything to add maybe?

  • COLTON OGDEN: I would say it's definitely the case that Python's not

  • necessarily the fastest scripting language that exists,

  • but it is one of probably the most readable and easy to

  • program in, and that's a big thing.

  • Because oftentimes, it's more--

  • not necessarily as important that your script run super, super fast,

  • especially now that computers are just so

  • fast that the time that you would get writing in another language

  • isn't as important, but it's important that you

  • have high level of productivity as a programmer.

  • And being able to program in something that

  • is very human readable, like Python, is certainly

  • advantageous to you and to people that are especially

  • just trying to get into the industry.

  • It's a very approachable language.

  • There are libraries that are compiled in C, like NumPy,

  • and CyPY, certain other--

  • a lot of the big sort of data analytic libraries,

  • they do get compiled into binaries that Python calls, that are actually in C.

  • So you actually are getting very performant results with Python.

  • But yeah, it's ultimately--

  • I would say if I were to pinpoint what it is--

  • and I'm not necessarily an expert, especially not

  • in machine learning an AI, but just knowing the language-- probably

  • ultimately comes down to a lot of really great libraries and just

  • a very readable language.

  • But no, certainly you could write scripts in programs in other languages

  • that do machine learning and AI.

  • R is very huge in statistical analysis now,

  • even though Python is a language that's often used for that.

  • So it just kind of-- it changes.

  • The status quo is such that Python is great,

  • but another language could come out any day and surpass it.

  • Another library could come out and surpass it.

  • KAREEM ZIDANE: That's true.

  • We have M. Kloppenburg says, "Andre, you make me curious.

  • Got a link?"

  • I don't think it's hosted anywhere online.

  • I will try to look at it.

  • [INTERPOSING VOICES]

  • COLTON OGDEN: Do a little bit of digging,

  • maybe we'll bring it up on another stream maybe.

  • KAREEM ZIDANE: Maybe.

  • "On what date will you do the Python stream?"

  • COLTON OGDEN: So next Monday.

  • So that's the 19th, 11/19 at 1:00 PM.

  • Veronica Nutting and I will--

  • she'll be hosting and I'll be co-hosting.

  • She'll be doing a tour of Python.

  • So 100 cool things to do in Python--

  • 100, approximately.

  • We'll see how many we can do.

  • KAREEM ZIDANE: This was a question from PresidentOfMars.

  • We have the Jasong.

  • "I like your style, Colton."

  • COLTON OGDEN: Thanks, Jasong, much appreciated.

  • Thank you for that.

  • KAREEM ZIDANE: And then we have JefferyHughes,

  • "Thanks for the answers, guys.

  • Watching you from Morocco."

  • COLTON OGDEN: Nice, well, thanks for tuning in all the way from Morocco.

  • KAREEM ZIDANE: Yeah, thank you so much.

  • COLTON OGDEN: I know we had someone else from Morocco as well.

  • M. Kloppenburg, "I once read an article that approached it like this.

  • System resources are cheaper than man hours.

  • The productivity is higher in Python because

  • of the simplicity of the language, so the man hours are cheaper.

  • In the end, it's just cheaper."

  • Yeah.

  • So ultimately, human time is the most important

  • valuable at this point in history, just given how fast computers are now.

  • Depending on the problem that you're trying to solve,

  • it could be the case that maybe the computational resources are important.

  • But again, I think for most use cases and most companies,

  • outside of maybe Google and larger, big monolithic companies

  • that are doing massive sets of computation

  • and large data, Python and its current limitations are perfectly sufficient.

  • KAREEM ZIDANE: It all comes down to this,

  • like a bunch of trade-offs, a bunch of upsides and downsides

  • that you have to choose from and decide in what

  • language would fit your use case best.

  • COLTON OGDEN: Yes.

  • LordDemure24, "Hey, all the way from Sweden.

  • Working as a dev, but I love looking at this Twitch channel."

  • Awesome, thanks for joining us from Sweden.

  • I'm curious to hear what sort of dev work you're working on.

  • KAREEM ZIDANE: Yeah, that would be great.

  • COLTON OGDEN: We have touched every continent almost I think,

  • and we have so many people from all over the place.

  • It's awesome.

  • CS50's network is vast.

  • "It's awesome, you guys, paying the great attention

  • to answer the questions."

  • Oh, no, absolutely.

  • That's the biggest thing that makes this channel awesome is kind

  • of having that two-way communication.

  • I said this time and time again.

  • But making a video on YouTube is great, and we

  • do that, but being able to actually communicate--

  • when we make a video for YouTube it's kind of like a script

  • that we're following.

  • And we sort of have everything preplanned,

  • and we're going with the flow, and we've established it in advance.

  • But having things like this, it's a little bit unpredictable.

  • You don't know what someone's going to ask.

  • You don't know what directions we're going to go,

  • what we're going to talk about.

  • A lot of cool things happen.

  • In my game programming streams previously,

  • we had folks like Andre and Edeyney who contribute and help us solve bugs live,

  • and that's something that you can't do in a YouTube video.

  • Normally, I would just have to cut that out, or reshoot it, or something,

  • but we get a different approach to that here.

  • "All continents, except Antarctica," says Andre.

  • For now, we'll see.

  • We'll see.

  • Maybe we can set up an embassy in Antarctica.

  • "I work as a system developer doing automation on a platform

  • called Service Now.

  • And on free time, I'm doing React and full-stack web dev.

  • Been a dream to do games, but seemed to never find time for it."

  • Well, tune-in on Wednesday if you want to look at the very basic game,

  • tic-tac-toe, in Love2d.

  • If you haven't looked at the other streams, we did Unity last week,

  • and I've done a couple other ones on Lua and Love2d.

  • PresidentOfMars, "Any recommendations for websites with beginner

  • exercises or coding games currently, starting out in Python or C?"

  • Codecademy is good.

  • I would look at Codecademy.

  • I'm going to go over and toss them the chat.

  • Codecademy.com-- I believe it's .com.

  • They're good for beginners.

  • freeCodeCamp is good as well, but that's a lot longer,

  • and that's oriented towards full-stack web development,

  • not necessarily Python.

  • Do you know any websites that are good for exercises?

  • KAREEM ZIDANE: Code.org maybe.

  • I know there is a bunch of tutorials that I've

  • built in that, maybe a bunch of external resource as well if you're curious.

  • COLTON OGDEN: What's the website?

  • KAREEM ZIDANE: Code.org.

  • COLTON OGDEN: Code.org?

  • KAREEM ZIDANE: Yep.

  • Yeah, so definitely do check that out.

  • If you do Google "coding tutorials," I'm sure you'll also

  • find more resources as well.

  • COLTON OGDEN: LordDemure, "Colton, are you working as a developer

  • or is CS50 your full-time job?"

  • CS50 is my full-time job.

  • I'm not currently doing any side development work.

  • This is taking enough time, and it's interesting,

  • because the game stuff is what I like to do.

  • If I were to work as a developer, I'd probably

  • try to do something either in games, which is my passion,

  • or more pragmatically, React, or full-stack web development using

  • React, or using whatever modern technologies

  • people are or in the market for.

  • LordDemure, "The other sir to your left, I never got his introduction."

  • Would you like to introduce yourself once again?

  • KAREEM ZIDANE: Sure.

  • Once again, my name is Kareem Zidane, and I am a preset for here at Harvard.

  • I work with CS50 full-time as well.

  • I do work mainly on Cloud 9, the IDE, CS50IDE.

  • COLTON OGDEN: Oh, that's true.

  • We didn't talk about all the tools that you've written.

  • You've written so many tools for us now.

  • KAREEM ZIDANE: Yes, so I do work on the CS50IDE primarily,

  • but I also work on all of the dev ops stuff that we have.

  • So I do use Travis CI to continuously integrate and deploy our apps,

  • which we have a huge number of them.

  • We have a GitHub organization on GitHub.

  • If you go to GitHub.com/CS50 you can find all of our open source

  • repositories there, and you can certainly see contributions from a lot

  • of people.

  • COLTON OGDEN: Primarily, Kareem Zidane, but also David does a lot.

  • David and Brian do a lot of the work probably too, right?

  • KAREEM ZIDANE: Yeah.

  • COLTON OGDEN: And Dan Coffey does a good sizable amount,

  • and he'll be talking with us tomorrow on draw50.

  • "Check io.org," looks like BasedAvon put in there.

  • "What is the road to be a dev ops?

  • Should I learn Java or Python for it?"

  • KAREEM ZIDANE: I don't think it's tied to a very specific language.

  • So dev ops are really not tied to any one specific language.

  • Because you could have projects in Java, or Python,

  • or any number of other languages, but you

  • would still need to do testing as a--

  • we could do use different languages even for testing, if you want to,

  • or different tools.

  • You need to be familiar with the tools, such as Travis CI,

  • to do stuff like continuous integration and deployment.

  • But it's not really tied to one or two languages.

  • COLTON OGDEN: Cool.

  • "Incidentally, Unity's audio mixer is super awesome.

  • Just as an idea for games stream, it'd be cool to see some ideas in that area.

  • If you have any, perhaps a rhythm game or something

  • along the lines of what Braid did with music that synchronizes with the time."

  • It's been a while since I've seen Braid.

  • I have it, but I think I've played it like five or six years ago.

  • I did have an idea to potentially make like a Guitar Hero kind of game,

  • or using like the keyboard, or something.

  • So we might be able to visit that.

  • That would be pretty cool.

  • KAREEM ZIDANE: That would be fun.

  • COLTON OGDEN: You want to read AssleyNuona3333's comment right there?

  • KAREEM ZIDANE: OK.

  • [LAUGHS]

  • KAREEM ZIDANE: It'sDelusional says, "What's your academic background,

  • guys?"

  • COLTON OGDEN: Kareem, the dream.

  • Academic background?

  • I studied computer science at Saddleback College in California

  • for a couple of years before moving out here to work for CS50 full-time.

  • KAREEM ZIDANE: I did study computer science as well online.

  • I did not study computer science formally.

  • So most of my computer science knowledge and program knowledge

  • are actually from online resources, like CS50 and others.

  • COLTON OGDEN: Same.

  • "Like Jenkins, Docker, et cetera?" says LordDemure24.

  • KAREEM ZIDANE: Definitely, yes.

  • If Jenkins is what you're using, you should probably

  • familiarize yourself with Jenkins.

  • Also, if you're using Docker, we happen to be using Docker

  • in a lot of applications, so yeah.

  • That's certainly something that you should look at and learn more about.

  • COLTON OGDEN: Well, we are approaching the-- well,

  • we are at two hours, five minutes now.

  • So I think we're going to wrap this stream up now.

  • So thanks so much everybody who tuned in today for Kareem's awesome tutorial--

  • KAREEM ZIDANE: Thank you.

  • COLTON OGDEN: --and thorough introduction to Travis

  • CI, and deploying apps using GitHub Pages at CI/CD.

  • Is was a good stream, good time.

  • We had we had a good time, and join us again tomorrow for draw50

  • with Dan Coffey.

  • KAREEM ZIDANE: Thank you so much.

  • COLTON OGDEN: Thanks, everybody.

  • See you soon.

COLTON OGDEN: All right.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

INTRO TO DEVOPS WITH TRAVIS CI - CS50 on Twitch, EP.10 (INTRO TO DEVOPS WITH TRAVIS CI - CS50 on Twitch, EP. 10)

  • 5 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字