From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.
Category Archives: CS-343
A Simulated Operating System Project
From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.
A Simulated Operating System Project
hi guys, so for a our final project my group all decided to make an angular application, the application is called Simulated Operating System it runs on spring boot rest api server. Our application acts like a real example of what a real one would. It will be written to simulate the process and the memory managers.
An operating system is software that manages the hardware with managers, so that the computer. is able to run. They are very important because without them the computers can not operate. It is also important to understand how they work so that you can write more efficient code.
We picked this project topic because Visual aids are important for teaching and understand theories and attaining knowledge. When we thought about creating the application, we thought about how it would give a better understanding about how operating systems work. In other words, it is more of a practical method for students to learn and understand how a computer’s operating system and managers work.
Our application acts like a real example of what a real operating system and process in the memory managers would do. The programs will be organized into a rest back end and an angular front end.
The angular app is the user interface and has a table to enter the jobs which are strings and it also has a table for the main memory which is 100 addresses long and contains strings. It has 4 buttons, the first one to clear the input table the second one to update the screen. Third one for loading the job into memory the last one for running the instructions on the processor. The memory manager will have fixed partition layout with blocks of sizes 5,10,15,20,25,25 it will also uses best fit job placement. The process manager will have one processor running round robin scheduling with a time quantum of 4.
The back end will use five endpoints the memory manager controller has 3 and the process manager controller has 2. The memory manager controllers first endpoint is a post called /memorymanager/newjob which creates a new job using a body for the instructions and then load it into memory. The memory manager controllers second endpoint is a get called /memorymanager/getmemorytable which returns the memory table. The memory manager controllers third endpoint is a get called /memorymanager/getoutput which returns the output. The process manager controllers first endpoint is a put called /processmanager/run which runs the processor once. The process manager controllers second endpoint is a put called /processmanager/getoutput which returns the output.
The simulated OS itself is setup with 3 tables block, memory and job. The block table is a tree map of block objects with start and end index as well as size and status. The memory table is just an array of strings. The job table is a tree map of jobs with a block id for the job a8nd a deque of instructions. The OS has all these tables exist in a database class. It also has the two managers job and process which operate on the database tables.
From the blog CS@Worcester – Tim's WebSite by therbsty and used with permission of the author. All other rights reserved by the author.
Linking an Angular App To A Rest Server
From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.
Linking an Angular App To A Rest Server
hi again, so after leaning how to use angular the next i learned about was how make rest api call on it. which i would need for my project i am about to start.
From the blog CS@Worcester – Tim's WebSite by therbsty and used with permission of the author. All other rights reserved by the author.
Angular Apps
From the blog CS@Worcester – Tim’s Blog by therbsty and used with permission of the author. All other rights reserved by the author.
Angular Apps
hi all, so for my software construction class i have a leaned about angular apps. first i had to install the angular/cli with nodejs. then create a new project and learn about HTML, CSS since i had no experience with it. Angular is a web development platform that using typescript and HTML and CSS for client side wen applications .it was released in 2010 when it was know as angularJS. it was initially made for single-page applications.
angular has many good things about it such as very detailed documentation. its also supported by google meaning that its trustworthy and will be better supported for longer. it is also an amazing ecosystem for third part components. it also using a component based architecture making different components mesh together very well. it also using an ahead of time compiler which makes web pages load and run much faster in addition to be more secure. it also uses CLI which makes creating new projects much simpler and faster. angular elements also lets you add custom elements to app build with other things. another great feature is the ivy renderer. other good things are angular material, dependency injection and angular universal.
angular does however have some disadvantages. First of all it can be some what hard to learn at first. this is because it is fairly complex and it also require you to learn typescript and manage dependencies between components. it also has issues with SEO because of how it is done. lastly it has a lot of difficulties with backwards compatibility i found this out on my project since everything a lot of the stuff i was searching for gave me results for a different version of angular than i was using and it didn’t work for me.
overall though i think angular is a very useful tool.
https://yalantis.com/blog/when-to-use-angular/
From the blog CS@Worcester – Tim's WebSite by therbsty and used with permission of the author. All other rights reserved by the author.
Stylin and Profilin
As I finished up the back end part of my project, I Knew I would need to figure out some HTML and CSS because I wanted my site to look good and I haven’t done HTML or CSS since a class I took in High school. Since most of my college coding has been back end stuff I needed a refresher and to look for things similar to what I wanted on my website and to figure out how to adapt them to work for me. Things that i wanted where to display different information at different places, create a better layout for the website, a search bar and, of course, stylish buttons. There was alot of helpful code examples for what I wanted to do for my website which made the process easier. One thing I knew i would need to do was create a border for the news posts since the pictures and text would scale and stretch to fit the whole screen. Once I created a margin for the posts the images and text looked alot better. I decided to bold and make the title font bigger than the description since I wanted to draw the user’s eyes when they read the posts.
I used material classes from angular to make the process of styling even easier and through css i created a better looking website by customize each individual class. I had a search bar and a button to search by source which looked a little to basic so i customized the buttons to be blue, have white text, and when you hoover on it, it places a shadow behind the button. I also made a reset button to return to the “home Page” after a search by source and made the button uniform with the search button.
Lastly I created a list of sources that were all interactive buttons that had the same style as all the other buttons on the website. I wanted to make this list a drop down menu or something that would only appear on the side if you clicked on another button instead of being constantly there, but I did not have enough time to implement this addition to the website. Overall this learning of CSS and HTML was really fun and helped me to realize that this is how I am going to be learning other coding languages in the future and applying them as needed.
From the blog CS@Worcester – Tyler Quist’s CS Blog by Tyler Quist and used with permission of the author. All other rights reserved by the author.
The Key to Apis
I was searching for a good api that did not require a key to use since i had no idea how to use one or how long it would take to get one. I searched and searched but I was unsuccessful in my search and ended up looking for one that had a key and an easy process to get that key. when i found the newsApi and it said all you needed to do was give an email address and sign up to get a key, I was ecstatic at the simplicity. After I got the key, I needed to figure out how it worked and what I should do to make using it even easier. I decided like most people on the internet chose to do and save it as a string called api key and passed it at the end of each api request.
I assumed that api keys were used to log what people do with the api and at what times for both security and to keep track of the usage of the api and I was right. Api keys are important for any api to use to keep spam and other malicious users from constantly requesting from your api or server and causing a denial of service. since the people who made the api have access to the keys, they can shut a key off if it request too many times in a certain time frame. I noticed, in my search for an api, that many of the apis had strict rules about how many times you can request in a time frame. The api i was using had pricing plans for different number of requests and how far back you could request articles and how fast they would load. The one i was using was free and allowed me to request 500 times a day which was more than enough for me to show off what it does and test it. The other plans costed 449 dollars a month and 849 dollars a month. these kinds of api that are hosted and easily accessible have the ability to make a lot of money. The other thing I noticed was that they didn’t allow it to be used for commercial use which means if you pay for the larger plans you would be just pumping money into the service without getting anything back.
From the blog CS@Worcester – Tyler Quist’s CS Blog by Tyler Quist and used with permission of the author. All other rights reserved by the author.
CS343 Final Project – Blog 3
In this blog I hope to show what a beast typescript animations can be. To do so I’ve isolated one animation in a set of ten that control the slide in animation for each page.
transition('HomePage <=> *', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
})
]),
query(':enter', [
style({ left: '-100%'})
]),
query(':leave', animateChild()),
group([
query(':leave', [
animate('400ms ease-out', style({ left: '100%'}))
]),
query(':enter', [
animate('400ms ease-out', style({ left: '0%'}))
])
]),
query(':enter', animateChild()),
])
On the first line you’ll notice I have the transitions from the element I currently am on, “HomePage”, representing the Home Page component, to a placeholder representing any other component. Next, there are queries which represent what to do when the animation is triggered. The components slide in from the left and send the old component out the same way, and that is what the left 0% and 100% would seem to represent; with of course a set time for the duration of the animation.
The result of this is that the new component is placed virtually to the left of the current component, then the new component is slid in eventually having its left side arrive at the 0% mark as expected, while the old component has its left side shifted to 100%. This making it virtually placed to the right, where it presumably is then removed.
When I first added these animations, they would not trigger correctly and often only in one direction. As mentioned, there are a total of ten, which is the total after added one to represent moving from any defined page to any random page, or vice versa. That way no matter what page you are on the correct animation triggers. However, the next problem I ran into was that adding a whole other element to the left of a page, essentially making the page 200% wide even for a split second, would cause the horizontal scroll bar to appear and the window would jitter. This was quickly remedied by turning off the x-overflow, or rather setting it to hidden, in the css properties for the div in the app component html that contains the router for all these elements. With that done, I had slick page animations and no nonsense!
One last touch added was something I realized the webpage could use when testing the animations. I noticed that when the animations trigger it would slide in the other page but the viewport would remain at the same level as the last page. It didn’t make much sense to me that a page be loaded in with the user at the bottom of it. So I added an additional method to scroll the user to the top of page each time they clicked on a button and a new element slid in.
<button mat-flat-button color="primary"
routerLink="/about-me" (click)="returnToTop()"
[ngStyle]="{'font-size': button_font_size + 'pt'}">
About Me
</button>
returnToTop() {
window.scrollTo({
top: 261,
left: 0,
behavior: 'smooth'
});
}
From the blog CS@Worcester – Press Here for Worms by wurmpress and used with permission of the author. All other rights reserved by the author.