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.