Challenge: Solution Review

This lesson will explain the solution to the problem from the last coding challenge.

We'll cover the following

Solution #

Press + to interact
class LibraryKiosk{
open(app){
console.log(`Opening ${app}`)
}
connectTo(website)
{
console.log("Connecting to "+ website);
}
}
class ProxyLibraryKiosk{
constructor(){
this.libraryKiosk = new LibraryKiosk()
this.blockedSites = ["fb.com", "instagram.com","snapchat.com","google.com", "gmail.com"]
this.blockedApps = ["camera", "photos", "music", "settings"]
}
open(app){
if(this.blockedApps.includes(app)){
console.log(`You can't access the ${app}`)
}else{
this.libraryKiosk.open(app)
}
}
connectTo(website){
if(this.blockedSites.includes(website)){
console.log(`Access to ${website} denied`)
}else{
this.libraryKiosk.connectTo(website)
}
}
}
var libraryKiosk = new ProxyLibraryKiosk();
libraryKiosk.open("photos")
libraryKiosk.open("Chrome")
libraryKiosk.connectTo("booksportal.com");
libraryKiosk.connectTo("google.com");

Explanation

In this challenge, you had to implement the proxy pattern, such that, it restricted the use of the kiosk to access apps/websites for the students. As mentioned in the problem statement, a student can access/connect to any app/site using the LibraryKiosk class.

class LibraryKiosk{
    open(app){
        console.log(`Opening ${app}`)
    }    
    connectTo(website) 
    { 
        console.log("Connecting to "+ website); 
    } 
}

To restrict the use, we introduce the ProxyLibraryKiosk class.

class ProxyLibraryKiosk{
 constructor(){
   this.libraryKiosk = new LibraryKiosk() 
   this.blockedSites = ["fb.com", "instagram.com","snapchat.com","google.com", "gmail.com"]
   this.blockedApps = ["camera", "photos", "music", "settings"] 
   }
  //code....
}

The constructor of the proxy class initializes a libraryKiosk instance and two additional variables: blockedSites and blockedApps. Both variables store the list of apps and websites that the students don’t have access to.

Next, we redefine the open function:

open(app){
  if(this.blockedApps.includes(app)){
     console.log(`You can't access the ${app}`)
   }else{
      this.libraryKiosk.open(app)
   }
}

We first check if the app that the student is trying to access is in the blockedApps list. If so, we display the “can’t access” message; else, we call the libraryKiosk.open function for the app.

Similarly, we redefine the connectTo function:

connectTo(website){
  if(this.blockedSites.includes(website)){
     console.log(`Access to ${website} denied`)
  }else{
    this.libraryKiosk.connectTo(website)
   }
}

We first check if the website that the student is trying to connect to is in the blockedSites list. If so, we display the “access denied” message; else, we call the libraryKiosk.connect function for the website.

Now when a student calls the open/connectTo function on an app/website from the blocked list, the access will be denied. Another benefit of using the proxy pattern is that it reduces the number of direct requests that are sent to the target. It filters out and only sends valid requests forward, thus reducing the load.


Now that you have learned about the structural patterns let’s discuss behavioral patterns in the next lesson.