How 2 make mitai2 browser?????

Prerequisites

1. MIT App Inventor Companion: this is needed to run the browser. Only usable on Chromebooks, and can be downloaded from Google Play Store.

 Some schools may have this feature blocked or unavailable.

2. An MIT App Inventor Account. These can be made on the website.

Getting Started

1. go to https://appinventor.mit.edu/

2. Log into your account.

3. Click the Orange "Create Apps!" Button.

4. Click the "New Project" Button.

5. Give your project a name.

6. Choose the "Classic" Theme.

7. Locate the "Web Viewer" and put it into the screen.

8. Set the Web Viewer's "Home Page" Property to "google.com".

9. Go to "Connect" > "Chromebook".

10. this should prompt you to open the MIT AI2 Companion.  Opening it will take you to an unblocked version of google, completely unrestricted.

CONGRATULATIONS, you now have an unblocked Google! You can visit and play games on mostly any site (I'd personally recommend tetris.com), BUT there are a few glaring issues. 

1. Most websites will detect this as a mobile version of Google running on Android.

2. some things just refuse to load.

3. No refresh, back, forward, search bar, or Tabs.

You can add these by following the more advanced tutorial below. This will require some minor knowledge of Block Coding as well as how to navigate MIT App Inventor.

Advanced Tutorial

Refresh, Back, and Forward buttons

1. Add a horizontal arrangement (Under the "Layout" Tab) with three buttons (Under "User Interface" Tab) titled "Refresh", "Back", and "Forward". Preferably, add them ABOVE the web Viewer.

2. Here comes the Hard Part. Go to the "Blocks" Section.

3. Locate your buttons and find the "When [BUTTON NAME] .Click, do" button. drag this into the interface.

4. find the "Call [WEB VIEWER NAME] .GoBack, .GoForward, and .Reload" Functions and place them in their respective places.

Here's what the final code should look like:

YOU DID IT! You now have a browser that functions like normal. However, there are still some things missing that would make this browser a whole lot better. Continue on, or stop here.

search bar, run search/open link, current URL, and Home Button

Current URL Box

1. locate a text box under the "User Interface" Tab. place it in the horizontal arrangement (preferably next to your Forward Button). Make sure to change some properties in the right hand sidebar so that you can see your full URL, as well as have the box be read-only.

2. go to the Blocks Section.

3. locate the "When [WEB VIEWER] .PageLoaded, do" event.

4. locate the "Set [URL BOX] Text to" Button.

5. place the "Set [URL BOX] Text to" function in the "When [WEB VIEWER] .PageLoaded, do" event, then grab the "get URL" variable from the event. Here's what your finished code should look like:

Search Bar & Run Search/Open Link

1. Open your Browser and locate whatever your search engine uses before the search query. Ignore everything after this. for google, it's "https://www.google.com/search?q=", but it may be different for other engines such as duckduckgo or firefox.

2. place another horizontal arrangement above the one below as well as your Web Viewer, and place a text box in that arrangement. You can leave its properties alone if you wish.

3. Place two buttons next to this text box labeled "Run Search" and "Open Link". 

4. Open the blocks tab and place a "When [BUTTON] click, do" event for both buttons.

5. locate the "call [WEB VIEWER] GoToURL, url:" function, and place it in the button prompts. then place a "[QUERY BOX] text" block into the slot on the url function.

6. in the "Text" section, locate a "Join" and "[TEXT]" function and place them in their respective spots shown below: NOTE: it is VERY important that you place whatever becomes before a search with your engine BEFORE the query box text.

7. test your app to make sure everything works, it should look like the screenshot below:

Home Button

This one is REALLY simple.

1. Place a button (preferably next to your "Run Search" or "Open Link"). Label it "Go Home"

2. Open the blocks section, and locate your "When [Home Button] Click, do" prompt. then locate the "Call [WEB VIEWER] GoHome" function, and insert it under the home button prompt. your finished code is below:

YOU DID IT AGAIN! you just made a fully functioning browser on your chromebook in like 10-15 minutes. this is almost completely unrestricted!

Tab System

This next step is kind of complicated, bear with me here. It also doesn't work like how you would think it works, and tabs don't save across sessions.

1. add a spinner from the user interface menu next to your "Go Home" Button.

2. Change the "ElementsFromString" section to read "Tab 1, Tab 2, Tab 3, Tab 4, Tab 5" and change the selection to "Tab 1". 

3. Go to the Blocks section and create a new variable for each tab using the "initialize global [VARIABLE] to" prompt. make the variable the link that you use before each search, or whatever your home page is.

4. This next section is very complicated, and in my opinion is just bad coding, so just stick with me. 

Locate the "when [SPINNER] After Selecting, do" prompt.

place an "if, then" inside the box.

in the logic tab, get an "=" statement.

get the "get selection" from the "when [SPINNER] After Selecting, do" and place it in the first slot of the "=" statement.

get a blank text string from the Text section and place it in the second slot of the "=" statement. set this text to "Tab 1".

get a "Call [WEBVIEWER] GoToURL, URL" and place it in for the "Then" in the if, then block. go to the Variables section and find a get [VARIABLE] block. place it in the URL part of the previous block.

Place an else if statement (Using the blue gear icon) and repeat the process for all 5 tabs, making sure to change the text in the text box and the variables,

Here's what your finished code should look like:

5. find your "When Web Viewer PageLoaded, do" block, and repeat the process above (CHANGE THE "Get Selection" TO "Spinner1. Selection") and change the "Call [WEB VIEWER] GoToURL" to "Set global [TABURL] to" and add a "Get URL". Your finished code should be below:

CONGRATUALTONS! you should now have a janky, but functioning tab system.