Merge pull request #2409 from arduino/pedromousalima/micropython/onlineupdatedinfo

[PXCT-460] Added context for new UI (Online IDE)

Author: pedromsousalima

content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filemanageronline.png

@@ -146,6 +146,19 @@ while (True):
 
 You are now all set, disconnect Alvik from the computer, put some obstacles around Alvik, turn it ON, and see how Alvik navigates around your room avoiding them.
 
+#### Let's Start Coding Alvik (Online IDE)
+
+Note that some features might look different if you are using the Online IDE. Fear not, all code and files are interpreted the same independently of the IDE you choose. However, the UI of the Online IDE displays files differently.
+
+You can open the file manager using the button:  
+![File Manager Button](assets/filemanageronline.png)
+
+The files will then be displayed in a sidebar, also in a different arrangement. In the online IDE, files can be viewed in a sidebar:  
+![Files side window](assets/filesidebaronline.png)
+
+A few options are available at the bottom. These are: `create a new file`, `create a new folder`, `delete a file`, `rename`, `upload` and `download`:  
+![Buttons Online IDE](assets/onlinebuttons.png)
+
 ### Next Steps
 
 * There is a set of already built examples that will help you to better understand how Alvik works, you can download them from [this link](https://github.com/arduino/arduino-alvik-mpy/releases), unzip them in your already created _alvik_ folder and you will be able to see them straight away in the Arduino Labs for MicroPython.

content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/filesidebaronline.png

@@ -363,7 +363,7 @@ After executing these commands, there will be updates of the process on the prom
 
 Alvik is intended to be programmed with MicroPyton. We recommend you to install the [Arduino Lab for MicroPython](https://labs.arduino.cc/en/labs/micropython) editor.
 
-***If you're using a Chromebook, you'll need to use the [**online version**](https://lab-micropython.arduino.cc/) of Arduino Lab for MicroPython, using Chrome. You'll need to login with an Arduino account to use it.***
+***If you're using a Chromebook, you'll need to use the [**online version**](https://lab-micropython.arduino.cc/) of Arduino Lab for MicroPython, using Chrome. You'll need to login with an Arduino account to use it. Note that some of the UI elements might look different check our [article](https://docs.arduino.cc/micropython/environment/online-editor/) for more information.***
 
 Now that all the previous steps have been set, let's see how to create custom programs for Alvik to move forward until detecting an object in front of it, Alvik will detect it, dodge it and continue on its way.
 

content/hardware/08.edu/solution-and-kits/alvik/tutorials/getting-started/assets/onlinebuttons.png

@@ -31,8 +31,21 @@ Setting up the online environment is quick and easy. Follow the steps below to a
    ```python
    print("Hello World!")
    ```
+5. We should now see `Hello World!` printed in the REPL.
+
+## Online vs. Offline Editors: Key Differences
+
+Note that some features might look different if you are using the Online IDE. Fear not, all code and files are interpreted the same regardless of the IDE you choose; however, the UI of the Online IDE displays files differently.
+
+You can open the file manager using the button:  
+![File Manager Button](assets/filemanageronline.png)
+
+The files will then be displayed in a side bar, also in a different arrangement. In the online IDE, files can be viewed in a side bar:  
+![Files side window](assets/filesidebaronline.png)
+
+A few options are available at the bottom, these are: `create new a file`, `create new a folder`, `delete a file`, `rename`, `upload` and `download`, located at the bottom:  
+![Buttons Online IDE](assets/onlinebuttons.png)
 
-We should now see `Hello World!` printed in the REPL.
 
 ## Troubleshooting