After learning the backend concept, I have learned about the frontend concept for these weeks. Especially, I have a chance to work with the .vue files to build the frontend in my homework 6. Although I was given some lectures about the .vue file in class, I am not really sure about what I am supposed to do in these files. Moreover, there were a lot of new syntax that I had never seen before. Thus, I did some searches with a hope that I could find a good resource to help me learn about .vue file.

Vue Files is one of the resources that I find useful. This website will introduce to readers an overview of a Vue project, like what folders and files should be included in a Vue project. In particular, the site will focus on describing in detail what a .vue file is and what blocks should be included in a .vue file and how to write each block. From the web, I learned that a .vue file is a custom file format that uses HTML to describe a Vue component. Each component consists of three types of blocks, which are <template>, <script>, and <style>. Each block will contain different types of code. Specifically, <template> contains HTML code; <script> contains JavaScript code, and <style> contains the CSS style of the component.

Moreover, according to the webpage, I have learned a lot of new syntax which is used to build a template of a component. First of all, text interpolation whose syntax is {{myVariable}} is used only to specify any valid JavaScript expressions in the template; and it cannot be used to modify any HTML code. Moreover, the website also introduces to readers about directives which are Vue- specific syntax elements used in the template. For example, v-model is used to take inputs and to update the variable values. v-if/ v-else/ v-else-if is a conditional statement that works in the same way as the equivalent in JavaScript. v-for is used as a loop statement to generate lists of elements in the template. v-on is used to define an action to take if an event occurs, such as click, mouseover, focus, etc.

Furthermore, in the components section, the website also introduce some elements could be written in the vue component’s script block, such as name, data(), methods, props, mounted(), computed, watch, etc. The website also provide syntax and the purpose of each element to help readers understand and be able to write a complete vue component’s script.

In short, I believe this site is well worth my reading as it contains all the information that I need to do my homework-6. Furthermore, I find it useful because besides providing information about the .vue file, it also has specific examples for each syntax, so readers can practice with the new syntax directly on the website.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.

This week, I have a chance to work with JavaScript files of a backend in my homework-5. However, there were many syntax that I had never seen, so I got no sense when I was writing code. Thus, I looked for some resources to satisfy my curiosity and to get a better understanding of JavaScript.

JavaScript Tutorial is one of the resources that I find useful because it provides all the information related to JavaScript. First of all, from the website, I know that JavaScript is one of the most popular programming language of the web. It is used to program the behavior of a web page. Next, according to the website, I can look up and learn more about new syntax or new definitions of JavaScript respecting to my homework 5. For example, the keywords “let” and “const”, Array Iteration, Async/Await appearing in my homework make me question that what they are for and why they are there in the .js files.

However, based on the information from the website I can answer those questions. It said that “let” is used to defined a variable, whereas “const” is used to define a constant variable which cannot be reassigned. Every “let” and “const” variables cannot be redeclared and have block scope. For the Array Iteration, JavaScript has many methods to operate on every item of an array, such as map(), filter(), reduce(), every(), especially forEach() which I have met in my homework. forEach() is used to apply a condition or a function inside the parenthesis to each element of an array. For Async/Await, it said that “async” is used to make a function return a promise, and “await” keyword is only used inside the “async” function. “await” will make a function wait for a promise. So, what is a promise in JavaScript? Promise is a JavaScript object that links producing code and consuming code. The below picture is an example given by the website to explain clearly what producing code and consuming code are.

In conclusion, in my opinion, this website is one of a good resources to help me learn more about JavaScript. It includes all the information that I wanted to know and it also explains clearly every new definition with easily understandable examples. Thanks to this website, I am getting more familiar with JavaScript and get a better understanding of the code given in my homework-5. So, I believe that this website will give me a good foundation to work with my homework-5 or with any .js files.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.

These weeks, I’ve been learning about APIs and back-ends. I also had the opportunity to practice with an API in my current homework. However, I am very confused about the relationship between API and back-end. I don’t understand how the API is related to the back-end, what the API and back-end are used for.

To answer those questions, I tried to search for some information about API and back-end. Back-end API development introduction, written by Cesare Ferrari, is a resource that I have found useful. The website has clear definitions of back-end and API; and their relationship is also described in detail, which helps me get better understanding of the two new terms. From the website, I know that back-end is a service that will send data to the front-end which interacts with the end users. On the other hand, API, Application Programing Interface, is a set of definitions and protocols for building and integrating application software. API can be also considered a back-end component, which is typically used by front-end applications to communicate with back-end applications. In other words, the API is used to outline all the requirements or functions that will interact with the end user. The back-end will rely on the API to create endpoints that fulfill all the requirements designed in the API. There are different types of APIs, but the REST APIs, which stands for Representational State Transfer, is one of the most popular. It communicates via HTTP requests to perform four basic functions known as CRUD. These are creating data (post), reading data (get), updating data (put), and deleting data (delete).

Moreover, the website also provides a general information of Node.js and Express to explain more how to create and use back-end applications. Node.js is used to execute a Javascript on the back-end without the browser. Express is a library or a Node.js application is used to create and send HTTP requests.

All in all, I think the website is a good resource because it’s short, concise, and provides the essential information I need. It gives me a general idea of what the back-end and API are, and how the back-end and API relate to each other. By understanding the two new definitions, I was also able to understand what I was supposed to do in each one. Based on what I read from the site and what I did with my API homework, I can envision the API as an interface class and the back-end as my concrete class that will implement all abstract methods from the interface class.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.

For the homework#3 of this week, I had a chance to practice on the docker compose. However, excepting for the little knowledge that I learned from the activity 10 in class, I had no clue what docker compose was. Therefore, I wanted to learn more about docker compose to get a better understanding and also learn how to write a docker compose file.

Docker Compose Tutorial: advanced Docker made simple is one of the resources that I find useful to help me get an overview about the docker compose, how to write an .yml file, and how to run the .yml file with docker-compose commands. Through the website, I know that docker compose is used to define and run multi-container Docker applications; and I also get an idea of what components should be included in a .yml file to create a docker container. Specifically, to create a container service, we need some entries like build, link, image, ports, volumes, command, environment, etc.; and the function of each entry is also described in detail on the website. For example, back to the activity 10 in class, now I am able to convert the docker command given in the below picture to an equivalent .yml file.

As shown in the above docker command, my .yml file will create a container named cache using the image named redis with the tag of 6.0.8. This container has internal port 6379 connecting to the external port 11000, and it also mounts two directories of ./redis.conf and /etc/redis.conf. So, the components that should be included in my .yml file are version, services, web, image, ports, and volumes.

First, version is to define which version of docker compose that I am using. Services is used to define all different containers that I want to create. Web is use to present the container name, in this case, I will replace web with cache. Image will represent which image is used to create the container (redis:6.0.8). Ports is used to map the external port with the internal port (11000:6379). Volume is used to mount the source directory, ./redis.conf, with the destination directory, /etc/redis.conf.

In short, in my opinion, I believe the website that I found is a good resource, because from it, I can find really useful information about docker compose, such as definition of docker compose, how to write .yml file, and docker-compose commands. Thanks to this resource, I am more familiar with .yml file and docker-compose commands. Especially, I used what I learned from this website to do my homework 3.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.

For this week’s assignment, exercise #2, I had an opportunity to refactor a poor design of Duck Simulator using the factory pattern. It was nice that I could approach this design pattern step by step and learned its definition by understanding why I had to create an abstract method or why I had to create a factory class. Moreover, after skimming through a long chapter, Chapter 4. Baking with OO Goodness: The Factory Pattern, although there are many important definitions in this chapter, I believe that there are two concepts that I shouldn’t miss, the factory method and the abstract factory. Both are new tools that I need to know what they are and how to apply them to a design.

Furthermore, for better understanding, I also wondered what was the difference between factory method and abstract factory. Although, the textbook has a comparison between those two concepts, but for myself, it was long and difficult to follow till the end. So, I did a few searches to see if there were any good resources that I could take a quick look at for my question. I found a good blog, called Factory Method vs Abstract Factory. In this blog, the writer makes some comparisons to show the difference between factory method and abstract factory. Through the blog and the textbook, I know that both concepts are used to encapsulate object creation, and they apply the dependency inversion principle by allowing coders to decouple code from concrete classes . On the other hand, the two concepts differ in many ways. First, the number of products produced is different. The factory method is used to create only one product while the abstract factory is used to create families of related products. Second, for the factory method, the object creation is decided by subclasses (depending on inheritance), whereas the abstract factory has a separate class to creates a family of products, then its object can be passed to client class for using (object composition). Next, it is the level of abstraction. Since the abstract factory are at higher level in abstraction, we can use factory methods to create products in factories.

For myself, this is a resource worth referring to because its concise, well-organized content helps readers easily distinguish the difference between the two concepts. Thanks to this resource, I got a better understanding of the factory pattern, especially the abstract factory and factory method, which is really helpful for my diagram design latter.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.

For in-class activities of this week, we learned about modeling with UML class diagram. There were many important elements to compose a class, such as properties, operations, and association. However, my team got stuck at the “association” section, we could not clearly distinguish the different types of relationships between two classes, especially the relationship named have-a. Therefore, I thought it was a good opportunity for myself to learn more about the term “association”.

There are many articles and blogs analyzing about different types of relationships between classes. However, many of them look very complicated with a long list of different relationship types and some are very confusing. Fortunately, I found this article, entitled Association, Composition and Aggregation in Java, which finally satisfied my curiosity about “association”, because the content of this article is focused only into the definition of “association” and the analysis of its types which are aggregation and composition.

There are some key points that I have taken away after reading the article. First, association represents a relationship between two classes, depending on each situation, association can be one-to-one, one-to-many, many-to-one, and many-to-many. Second, association has two special forms, which are aggregation and composition.

For aggregation, this term is also known as has-a relationship (a weak association), which is one way relationship and each entity of the relationship can exist independently. The author also provides a simple example to describe those characteristics of aggregation, which is an Institute has-a Department, and Department has-a Student. This is one way relationship because a department can have students, but vice versa is impossible. Moreover, if the Department class is removed, the Student class can still exist independently.

For composition, this is the part-of relationship (a strong association), and the two entities are dependent to each other, which means a class (child) cannot exist without the existing of another class (parent). For this definition, the author gives an example of Book and Library, Book is part-of Library. So, if Library class is removed, Book class cannot exist. In my opinion, this example does not make sense to the part-of relationship because I think Book still can exist without Library. Therefore, I have looked for other resources to find a good example for composition. UML Association vs Aggregation vs Composition is a good resource to provide real-life examples for each conception. Like the first article, this one also focuses on the analysis of the term “association” and its two special types, aggregation and composition. According to the article, I got an example that Head, Hand, Leg are part-of Person. Thus, if Person class is removed, Head, Hand and Leg classes cannot exist. For myself, this is a perfect example to describe the term composition.

In short, I have learned a lot of information and had a clear understanding about the term “association” from the two articles recommended above. I will apply this knowledge to design relationships between classes in my UML diagrams. Moreover, I believe the articles that I choose are good resources because their content is clearly organized with good examples. In other words, I would say the two articles complement each other, so it is good if readers can pull out the best parts from each article and be able to combine them consistently.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.

This week, we reviewed about the concepts and the differences between the five terms, which were abstraction, interface, inheritance, encapsulation, and polymorphism. However, the term polymorphism confused me a lot during the class. The only thing that I remembered about polymorphism was that a class or an object could exist in many forms, but I could not explain to myself what “forms” mean. So, I did some searching on the term polymorphism in the hope that I could recall what I had learned and also learn more about the characteristics of polymorphism.

Fortunately, I found a good resource, called Polymorphism, Encapsulation, Data Abstraction, and Inheritance in Object Oriented Programming, written by Nick. Through this blog, Nick provides readers with concise definitions of abstraction, encapsulation, inheritance, and polymorphism with typical properties respect to each term. The writer also analyzes the important role of each concept in programming. Furthermore, after defining each term, Nick also has at least one example to describe the definition making the terms easier to understand for code newbies. This is one of the reasons that I chose this blog as my resource. In particular, in the polymorphism section, Nick gives an example of the class “Move” and the classes of animals to explain the phrase “exists in many forms”. The class “Move” does not have a concrete type, so it can be inherited/extended by any type of animal. For example, a Snail will crawl to move, a fish will swim to move, or a Kangaroo will leap to move. Hence, the concept of polymorphism is applied to make the code more flexible and extensible. This is a good blog to read and very useful if you want to understand clearly about the concepts of polymorphism, encapsulation, abstraction, and inheritance. I might forget these concepts if I don’t use them for a while. However, this blog gives me a key to remember those concepts in the long run by keeping in mind the real life examples provided by the blog.

Another thing is that after reading the blog, I know that there are several different types of polymorphism, but the writer does not analyze those types in depth in the blog. Therefore, I searched other sources to learn more about polymorphism. Different resources give me different numbers of polymorphism types. However, there is an article, called Polymorphism in Java, that gives me the necessary information about the types of polymorphism. There are many types of polymorphism, but in Java language, there are only two, which are compile-time polymorphism (overloading) and runtime polymorphism (overriding). Throughout the article, each type is described and analyzed using code examples. For myself, this is a good resource because although the article is short but concise, it contains all the information I need to know. Moreover, before reading the article, I had a chance to learn about the concepts of overloading and overriding, but I did not know how those two methods relate to the concept of polymorphism. So, the article not only helped me review my old knowledge, but also helped me to come up with the idea that I would organize all the concepts that I have learned into a diagram, where the diagram will show how concepts relate to each other. I believe the diagram will be one of my best tools that I can use to remember and distinguish all the important concepts in programming.

From the blog CS@Worcester – T&#039;s CSblog by tyahhhh and used with permission of the author. All other rights reserved by the author.