Spring '25 Week 8

Video Script

Hi, everyone, and welcome to the week eight announcements video for CIS 526 and CC 515 in spring 2025. So as we talked about last week, I’m kind of taking over this course from Dr. Bean, who’s going to be shifting over to cover another course for the rest of the semester. And so as part of that, one of the things I’ve been working on is a lot of new content for this course to introduce how you would actually build a RESTful API and a standalone single page front end application using some of the more industry standard techniques and practices. The early part of this class with Dr. Bean is really great because it shows you behind the scenes, the intricacies of how these things work. You get to build your own cookie parser, your own body parser. You build your own very low level handlers for a lot of these things. And so now we’re going to take a step up the food chain a little bit, and we’re going to rebuild some of these ideas using the standard stuff that Node and Express includes.

So I’ve just published the first three modules of this new content on canvas. So as you get to this point, you’ll want to get started on it. I have this first page right here that just explains what we’re going to do with this tutorial project. The second link right here, this is a GitHub classroom link that will take you to GitHub classroom and it will ask you to accept the assignment on GitHub classroom. Hopefully you’re all familiar with that. At this point, it’s in the same classroom as the previous parts of this class. And then we’re going to work in that same repository for the rest of the semester. And then after that, we’re going to do a tutorial project. These links will take you directly to the textbook for this class. And so in here, I’ve created this new example projects. And what you’re going to do for each example is you’re going to go through all of the pages in this chapter. So this starter project has 11 steps. Each step has a video where I have walked through step by step doing everything, every single thing. But I also try and include lots and lots of screenshots and examples. I show you a lot of code. One of the things you’ll notice at the top of the code is I try and show you the file name of the files that we’re looking at. For terminal, I show you whether it’s terminal or terminal output.

So hopefully it’s pretty easy to follow along as we go through this process. But basically what you’ll do for this tutorial is you’ll go through all of these, you’ll get to the summary step where we’ve got everything done. And then for this first one, all you really have to do to complete that project is get all the way through to the end of the tutorial. And so if I go back here to week eight, all you’re going to do is submit that tutorial just to show that you’ve done it. That is due by the Monday after spring break. Then we’re going to go through and we’re going to add a database. And so for this one, you’re going to add a database following the tutorial. You’ll turn in that tutorial by making a commit and making a release commit there. And then immediately after that, you’re going to go in and additionally add additional database tables and content to the database. So you’re going to turn in the tutorial, make a release commit, submit that, then building right on top of that, you’re going to add your own database files and then submit that again. These are both due on the same day, but really you’re going to do the tutorial first, then you’re going to do the milestone. I just put them together on the same day to keep that same cadence. Likewise, step three. I’ll walk through adding part of the API and then you’re going to add the rest of the API in this milestone here. And then we’ll go on to talk about authentication. We’ll build a Vue.js starter project and build a CRUD app and then build some components on top of that. And I may add one additional module here at the end just to kind of show how you would distribute and actually dockerize this. It probably won’t be actually due for a grade but it will be something I’ll try and add if I get time. So what you’re actually ending up building is you’re building a RESTful API and a single page frontend application for the Lost Communities project that you’ve been working on throughout the semester.

And so this is actually my model solution for milestone three, where you have the full API. I’m currently working on adding these authentication routes so you can just ignore these. During the tutorial, I’m going to show you how to add the users routes. And so all of these users routes, for example, I can try it out, hit execute and I’ll be able to get a list of users in the application. I can also go in here and let’s say I want to create a new user. So I can create a new user and this is gonna be announcement user. So I’m creating a new user with these couple of roles. I hit execute, we’ll see that it worked correctly. And so now if I go up here to my endpoint for all the users and execute it again, we should now see that my new user is in our API. And so what you’re going to do is you’re going to not only create the API endpoints for dealing with users, you’ll also create endpoints for dealing with communities. For getting the list of counties, you don’t have to update the counties. We’ll have one for documents including a endpoint to upload a document. And then we’ll have one for metadata where you can create metadata items and then you can add or remove documents and communities from that metadata item. So all of these should be well within your reach. The other thing that you’re going to do as part of this is you’re going to write an awful lot of unit tests. And so if I do NPM run tests on my project, I should end up with a whole lot of unit tests here. and this may take just a second for it to run, but you’ll notice I have tests for communities, for counties, for documents, for metadata. I’ve got document roles, users, and so my model solution ends up with 203 unit tests. Now, obviously some of these are just repeated unit tests with different variables added, but that gives you kind of an idea of what I’m expecting by the end of milestone three, and then we’ll go on to add authentication and other things on top of that.

So that’s kind of where we’re going. This is a little bit of a shift in content and tone of the course. It’s all brand new content, so if you have any questions or concerns, I encourage you to let me know. I’ve created a bug bounty mega thread in the ed discussion, so you can post bug bounties there. I’ll probably also create mega threads for each of these milestones so that we can have a good discussion there. As always, if you have any questions or concerns, let me know. Otherwise, best of luck as we transition to this new part of this class. We’re really halfway through the semester at this point. I hope you have a safe and relaxing spring break and I will see you again in a couple of weeks.

Spring '25 Week 9

Video Script

Hello, everybody, and welcome to the week nine announcements video for CIS 526 and CC 515 in spring 2025. Not much new to add this week. Hopefully, everybody got started on the RESTful API starter over spring break, which was due yesterday. I see that several people have already submitted this. This project is pretty easy. All you really have to do is accept the GitHub classroom and then build the starter project following exactly through my videos. There’s maybe about an hour and a half to two hours worth of videos of me going through it. But I give you every single piece of code for this first one. This is mainly just a tutorial that you follow along to be able to build the starter project that we’re gonna work on from there. But it includes a lot of really good explanations of why I’m structuring the things the way I am. Gives you some interactive tutorials of how to add documentation and things to your code. So I think this is a really good thing just to see how one person would approach an express starter project.

Then starting this week, we’re gonna add a database to our project. So we go through a tutorial for adding a SQLite database to our project. And then I go through adding a couple of things to the project, namely the users and the roles tables. So you add a couple of migrations, a couple of data seeds. You put everything together so that your project now has data. That milestone is due next Monday. And so that includes a tutorial that you’re gonna submit the tutorial by making a release commit on GitHub. And then immediately after that, you’re going to continue to work in the same GitHub repository to then add the milestone content on top of it. And so when we do grading, we’re gonna check out your repository and we’re gonna look for that tag that you created as part of this tutorial. We’ll grade that and then we will check it out again. We’ll look for the tag that you submitted here for your milestone that will be your tutorial plus your additional milestone content. This basically gives you a chance to get quite a few tutorial points by doing the tutorial, tagging it properly. And then there’s more points available for projects as you add the database. If you’re unsure how to do any of that, most of it’s covered in the videos. If not, let me know or talk to Josh, the GTA, and we’re more than happy to help.

So the milestone for this week is pretty simple. You’re going to take your starter project that you turned in last week. You’re going to add a database to it. In my example, I show you how to add the users and the roles and the user roles table. What you’re going to add is you’re going to add the metadata, documents, communities, and counties table, as well as these many to many join tables for joining metadata and documents and metadata and communities. So this is the database diagram that you will be following. Hopefully it makes sense. Hopefully it’s all in there correct. If you have any suggestions or corrections to this, let me know, but I’m pretty sure this is correct based on what you should have learned in your database course. There’s also some seed data that you’ll add into this program. I give a little hint for seeding data from a CSV file. If you go to the course on Canvas and you look at the files, there is your seed data right here. This is a zip file of the seed data, the CSV files that you will use to seed the data into the database. And it should be pretty straightforward to do that, but if you run it in the errors or have any questions, feel free to let us know.

Anyway, that’s all I’ve got that’s new for this week. Hopefully the new content is going well. But as always, if you have any questions or concerns about it, please go to Ed discussion and either post in there or post something under the bug bounty thread if you find any mistakes or corrections for my work. I’m always looking for that, especially because this is a lot of new content this year. But as always, hopefully things are going well. Best of luck, and I will see you again next week.

Spring '25 Week 10

Video Script

Hello and welcome to the week 10 announcements video for CIS 526 and CC 515 in spring 2025. So over spring break, we shifted over to a lot of the new content that I’ve been working on for the semester. And so I see a lot of you have already completed some of the content for weeks 8, 9 and 10, which is great. Hopefully if you’re keeping up in the class, the content for week nine adding a database was due yesterday. So I see quite a few of you have done that. And then the third part, adding an API and unit tests is due this week. This is one of the larger milestones just because of the number of unit tests that you’re going to add to your project. So I really encourage you to try and get the tutorial done as soon as you can so that you’ve got plenty of time to work on the API and unit tests. That’s due next Monday.

The part after that is on authentication. I have all of this written. I just have not had a chance to do the videos. So my goal is to do the videos for this later this week and get this posted. This will be the content that you’ll be working on next week. And then I’m going to start writing the next three tutorials. The first one is just going to be like the earlier tutorial where it’s going to be a simple tutorial to set up your view front end. And then we’ll work on doing a CRUD app, working on components. And if I get a chance by the end of the semester, I’m going to try and also write a short optional tutorial on how to build and deploy this using Docker. So we’re getting toward the end of the semester. I need a little bit more time to get some videos and writing done, but I’m hoping to get that done in the next couple of weeks.

Also going backwards a little bit, I see that there are still several students in this class that have not submitted milestones four or five for the previous content. Please, please make sure you get those turned in as soon as possible. I will be reaching out to those of you that haven’t done that later today. Please make sure you get those in soon. If if we don’t get those in soon, I’m probably going to start assessing late penalties on things just to keep you on track and make sure that you’re getting stuff done. We want to make sure that you get everything taken care of so that by the end of the semester milestones and that you’ll be able to get everything complete. I know Josh is going through and grading the last couple of tutorials on the single page apps and the react chat app. apps, so watch out for those grades.

I will say for things like these starter tutorials, please make sure you test your code before you submit it. If you submit, for example, this Express Starter Project tutorial, and it does not compile and run, you’re going to lose an awful lot of points in that tutorial. You really, really, really need to make sure that you test your own code and understand it and make sure it’s working. I try, especially for these tutorials, I try and give you lots of context for the different code snippets and how they go together, but it’s really up to you to test it and make sure that it works properly. So, especially for these tutorials, make sure you test them before you submit them. For the other parts, the milestones, make sure you go through and understand how they work when you submit them.

Hopefully things go well with this. It’s kind of a new course structure we’re trying. If we run into any errors or if you have any questions, just let us know. So that’s really what we’re doing this week Like I said, I should be able to post these next couple of milestones very shortly once I get the videos recorded If you have any questions, let us know otherwise best of luck and I’ll follow up again in a week or two

Spring '25 Week 11

Video Script

Hello and welcome to the week 11 announcements video for CIS 526 and CC 515 in spring 2025. Over the weekend, I just published the materials for week 11 and week 12. So if you’re at that point and caught up, you can get started on that. Week 11 is going to add authentication to our RESTful API. So we’re going to add the ability to have background bypass authentication, as well as having CAS authentication, and we’re going to add role-based authorization to our project as well. So it’s a big change toward our backend. We’re also going to add a lot of unit tests for that to make sure all of our authorization and authentication is working properly.

And then for week 12, we’re going to start working on a front end in view.js. And so I go through the same process that we did with Express of building a quick starter project in view that has a lot of the libraries and framework that I like to use. Once you get everything up and running for that project, you should end up with something like this. It looks very simple, but there’s a lot going on here, especially if we open up the view inspector. You’ll see that there’s a lot of different components that make up this website, which is really, really powerful. So if I go here to my component map, you’ll see that we’ve got a top menu with a menu bar that’s hidden on it. We’ve got a router that’s got a lot of stuff going on. And so there are many, many different parts to this app that we’ve built. We have a home page. We have an about page. Right now, the about page is just reading from the API versions. We have the ability to toggle between light and dark mode, and it will actually remember our selection. So if we refresh the page, it will load that from browser memory.

And then, of course, we have a login process where we can go in and log in using the cast server that we’re used to. And then once we log back in, it will actually take us directly to the login page. And for testing, we’ve created a profile page that will read all the users and roles from the back end, just so that we can see what that looks like. And I’m getting started on adding some additional buttons here on the menu, which is going to be the week 13 content. And so this is all pretty simple. Pretty straightforward, but it gets us a framework that we can work within to build the rest of the front end where we’ll be able to manage the documents, the communities, and the metadata for those documents that we’re going to have as part of our Lost Communities project.

So that’s where we’re at so far. I’m going to be working with the TA over the next week or so to get caught up on the grading. I know we’re a little bit behind on getting some of this new content graded, so bear with us. As always, if you have any questions, please post an end discussion or email us first and foremost. A lot of times if you have questions or concerns, we can address them in end discussion really quickly, but otherwise you’re welcome to schedule a time to meet with me or with Josh and we’re happy to help. Best of luck as you continue to work through this content and we will see you again next week.

Spring '25 Week 12

Video Script

Hello and welcome to the week 12 announcements video for CIS 526 and CC 515 in spring 2025. I’ve got a few things I’m going to briefly cover this morning. First off, we have a guest speaker scheduled to come and talk to our class. This is going to be on Friday, April 25th at 2 o’clock p.m. Our speaker is Heather Pekrul. She is a front-end application architect at Garmin. She’s been working with the company for over nine years, and prior to that has a wide range of experience working in web development. She uses a lot of the tools and things that we have used in this class, including view and node. She was actually the one that got me started working in view and working with the prime view component framework. So Heather has a lot of experience that’s going to be very relevant to what you’ve been doing.

For this thing, we’re going to have two graded assignments that go along with the guest speaker. The first assignment is the guest speaker questions. What I’d like you to do is take a look at Heather’s bio and background and come up with a couple of questions that you’d like to ask her during our session. So you’ll submit that that’s worth 10 points. The other 40 points you can earn one of two ways. First off, if you’re available to attend the live session, great. We want to have you join the Zoom. And as long as you join the Zoom and ask at least one question that’s relevant to the topic, you’ll be able to earn those 40 points just for attending and asking a question. If you’re not able to attend the event or you choose not to ask a question during the event, what you can do is watch the video afterward and then respond to a few question prompts that I’m going to provide just to kind of show that you were able to watch the video and get some information out of it. I will post those prompts shortly after the video and those will be due about a week after the event itself. Ideally, I’d really love to see a lot of people join this event on Zoom. I think it’s really great that we can bring in a guest speaker for this class. And then of course, these points are going to go toward your projects grade. So this gives you effectively half of a standard project milestone that you can earn just by participating in this guest speaker. So I hope this is a really fun event. I want to see a lot of people there on Zoom. So make sure you mark your calendars for Friday, April 25th at 2 p.m.

The second thing I wanna talk about this morning is I posted a quick tip on Ed discussion that just gives you an idea of one of the ways that you can help us if you have any trouble debugging your project. We get a lot of questions where students have some sort of an issue and then I have to email back and say, could you please commit your code to GitHub so we can take a look at it. So really what I want you to keep in mind is if you reach out to us, if you have any questions or concerns about your project, you can shortcut this entire process by committing and pushing your current code to GitHub and sending us a link to your repository when you ask a question. And then what I can do or our TAs can do is we can boot up your code in a GitHub code space using the code that you have the problem with, we can debug it and get back to you usually pretty quickly. So I just really wanna encourage you that if you ever reach out with you, any questions in this class, commit your current code to GitHub and send us a link to it. That way we can take a look at all your code, we can help debug, see what’s going on and hopefully get you a response really, really quickly to any questions that you have.

So taking a look at the course modules going on in this class, hopefully everybody is working on this authentication tutorial that was due today. Basically, we’re taking the RESTful API that we built in part 3, and we’re adding authentication to it, so it actually properly authenticates. Once you add the authentication, you won’t be able to directly access the API through your browser. You’ll have to use the OpenAPI docs to actually test that. But we’ll write some updated unit tests so that we’re very comfortable that our project works. And then I’ve also posted the next project, which is the view front end. This is where we’re going to start building the actual view project for our application. This, again, is just a tutorial. There’s not a milestone that goes along with it. So all you have to do is follow the video tutorials and get that submitted. I’ve also posted the guest speaker things in week 12. I’m currently working on week 13. I have all the content written. I just need to get the videos recorded. Hopefully that will be out soon. And then I’m working on the last week of content. And this is probably going to change to just be a couple of tutorials. And then there will be a final project milestone that I’ll try and get posted by the end of this week, if not early next week. So you can start working toward the final project in this class. So the last thing I want to show you real quick, this is where we’re going with this. By the end of the first front end milestone, we’re going to have a basic CRUD application that allows us to create, read, update, and delete items in the database. So I’m going to show you what this actually looks like. So I’ve got my application running here. I’m going to log in as the manager username. And so when I log in as manager, we’ll see that I get access to some new tabs where I can list all of the counties that are in our table. These are just read only.

I can also list all of the communities that we’ve added to our table. And with each of these communities, I can actually go in and do things such as edit the community. So for example, I’m just going to change Albany to AAAA. And I’m going to change the county that it’s in from Nemaha to Marshall County. And so if I update that, you’ll see that when this reloads, it gets updated with the new name. the new county, and we’ll see that it was updated less than a minute ago on our table. Of course, we can edit things, we can delete things, we can create new communities, and we can also do the same here with documents. And so the documents is a little bit different because we have to go through a process of not just creating the document, but uploading the document. And so I’ve got some examples here of me testing the upload process, where I can actually create a new document. So I’ll create a document, and then I can hit this file chooser, and I can choose any file for my computer. So I’ll just pick a file that I created for this. And when I hit save, it will save the document and upload the document, so that when I get back here, I’ll see my video, it gives it a random name, it’s an image, but if I click on this, it will actually take me to the document that got uploaded. So this is a little trickier to do. But basically by the end of this, you should be able to manage the communities and documents.

And then the basic idea is your final project in this class will be to add the metadata part. And so instead of having just a table view, the metadata will have a little bit more of a component view, very similar to what you were doing in the earlier milestones, where we wanna view that in a nice way that’s user-friendly instead of just this table interface that allows us to edit the database tables. So that’s really where we’re going in this class. Hopefully everything makes sense. As always, if you have any questions, let me know. But basically keep an eye on Canvas. I’ll try and get the new content for the last couple of weeks in the class posted shortly. I’m always available for questions, so feel free to reach out. Otherwise, best of luck, and I will see you again next week.

Spring '25 Week 13

Video Script

Hello and welcome to the week 13 announcements video for CIS 526 and CC 515 in spring 2025. So this week you should be wrapping up the front-end part one for the Vue.js. This is just kind of a simple starter project tutorial without a milestone to get you started working in Vue. It gives you some of the basic concepts of working in a Vue front-end which is a little bit different than the React front-end we worked with earlier but a lot of the concepts are still the same. And then also don’t forget this week we have our guest speaker coming in so make sure you check out the announcement on Canvas for that.

There are two things you need to do to earn points for the guest speaker. The first one is to submit two questions for our guest speaker before the event which is Friday at 2 o’clock and then during the event you can either attend the live zoom session and ask at least one question or you can watch the video afterward and write a quick response based on a few question prompts I’m going to give you. If at all possible I’d really like you to attend the live session on Friday at 2. I think it’s great that our guest speaker can have a live audience with a lot of Q&A but if not you’re welcome to join us again Friday at 2 o’clock. Once again our guest speaker is Heather Pekrul she’s a friend of an application architect at Garmin works a lot with node and Vue and has tons of experience working on the industry scale level of things that you’re actually learning in this class. So it’s a really good opportunity to talk to somebody in industry that’s doing a lot of the things that we’re trying to teach you how to do in this class. So once again mark your calendars for Friday at 2 o’clock hopefully you can join us on zoom and don’t forget to do the two assignments that are out there in the modules for that.

After this week we’re going to have another Vue tutorial where we build a CRUD app create read update and delete doing the basic database operations and I’ll show you a little bit of that here in just a second but that has both the tutorial and a milestone that goes with it. And then the last week of content I’ve got some advanced topics around RESTful APIs and working in Vue. I have that content written so if you go out to the textbook the chapter on advanced topics is out here. I just don’t have the videos recorded yet but you can check out all of this content. It spends some time talking about some advanced topics with Vue on using Pinia and reusing different components. And then it spends a little bit of time talking about how you would actually prepare and deploy this application using Docker and GitHub Actions, and then how you would update the application to actually interface with an external database. So instead of using SQLite, you can do something like Postgres. So that’s what’s coming up. I’m going to get those videos recorded. Hopefully later this week and get that posted. And then along with that, that will be the final project, which was going to be due the end of finals week. There’s going to be maybe a small tutorial with that that’s due May 5th as well. So kind of keep an eye out on that. I’m trying to get that posted pretty soon. But the content is there. I just don’t have the videos recorded to go along with it yet. So that’s coming.

The last thing I’m going to show you really quickly is the solution. This is for the CRUD app milestone. So I’m going to show you my model solution for this real quick so you can get an idea of what sort of functionality I’m looking at. Obviously, we have a home route and an about route that we really haven’t done much with other than pull the API. In the tutorial, you’re going to build this roles route where you simply get a list of the roles in the application, and then you’re going to spend a lot of time building this users route where we have this really highly functional data table for users, where we can see users roles, we can search for things, and so all of this works really smoothly. We can create users, edit users, delete users. That’s all covered in the tutorial for that milestone. So pay attention to that. The three things you’re going to add, you’re going to add a way to view the counties. For this one, I just did a data table just like before. The big thing is it’s all sortable and searchable, so I can search for Marshall County, for example, and find it, or I can search for the county seat and it will find it there. So there’s lots of different things that you can do with counties, but it is read-only, it just has a search and sort feature.

Then you’re going to work on communities. Communities is a data table that is very similar to the users data table, so you can create, update, and delete it. So if I look at Bigelow, for example, you can find that entry right there, and then if I want to do things such as edit, I can click the edit button and edit Bigelow, I can change the latitude, longitude, the county. For example, this county has a little dropdown that I can choose from, so you’ll be able to edit a community. You should also be able to do things such as, whoop, my cancel button doesn’t want to work right now. Oh, I think I crashed the server. Is it not loading? There we go. Pull the server back up there. Okay, so I can edit communities, delete communities, I can also create a new community, so all of that should work. And then also you should be able to do the same with documents. And so here I’ve got a document table, it loads just a little slow out of code space. When you actually deploy this, it will load quite a bit faster.

So for example, you should be able to upload a document, so I can give a document a name. like test, and then I can just choose a file. This is just gonna pop up a file upload. So I’m gonna upload an image file, hit save. It’s going to save the document. And then in a separate step, it’s going to upload that image. And so once it’s saved, now I should be able to see that image right here. And I actually have mine set up so I can click on this file name and it will actually show me the image. And this is the image that is placed inside of that uploads folder on my server. And so I’m just creating a direct link to it. And so obviously I had to proxy the uploads through the front end. I kind of talk about that in the milestone a little bit. But that’s kind of what I want your milestone to look like is the ability to deal with communities and documents and counties, very similar to the ways that we deal with users and roles in the tutorial. So that gives you kind of an idea of where this is going. And then the last milestone, we’ll add a more friendly user interface for this to actually deal with the metadata. But this one we’re just dealing with CRUD for documents and communities. So, hopefully that all makes sense. As always, if you have any questions, let me know. Otherwise, best of luck on this, and I will see you again next week.