SCHOOL OF ELECTRICAL ENGINEERING

UNIVERSITI TEKNOLOGI MARA

ELECTRICAL ENGINEERING LABORATORY

(EEE250)

MODULE 5

CLOUD & DRIVE

COURSE OUTCOME (CO) - PROGRAMME OUTCOME (PO)

CO1 Display good practical skills in conducting the experiments/project using modern
engineering tools during laboratory sessions. (P4)
CO4 Demonstrate verbal and written communication skills in reporting the conducted
experiments and project. (A3)
PO5 Apply appropriate techniques, resources, and modern engineering and IT tools to well-
defines engineering problems, with an awareness of the limitations.
PO9 Function effectively as an individual, and as a member in diverse technical teams.

OUTCOMES

1. To build Cloud Software, Cloud Storage and Cloud Computing as modern & up-to-date
engineering tools.
2. To construct Cloud Software, Cloud Storage and Cloud Computing to solve engineering
problem.
3. To display the limitation of Cloud Software, Cloud Storage and Cloud Computing.

EQUIPMENT

Personal computer/laptop/notebook preinstalled with Google Chrome

COMPONENTS

Personal computer/laptop/notebook.

THEORY

1
Cloud & Drive
Cloud and drive are data centres with on-demand availability of computer systems resource
to many users over the Internet, especially software-as-a-service (Cloud SaaS), data storage
(Cloud Storage) and computing power (Cloud Computing). Cloud may be limited to a single
organization such as within UiTM or be available to multiple organizations (Google Cloud).

Figure 5.1: Cloud and Drive

Cloud Software
Cloud Software as a service (SaaS) is a software distribution model in which a cloud provider
hosts applications and makes them available to end users over the internet. One example of
Cloud SaaS is Tinkercad. Tinkercad is a free, easy-to-use web app that equips the next
generation of designers and engineers with the foundational skills for innovation: 3D design,
electronics, and coding.

Figure 5.2: Cloud and Drive

Cloud Storage
Cloud storage is a model of computer data storage in which the digital data is stored in multiple
servers (sometimes in multiple locations). The physical environment is typically owned and
managed by a hosting company. These cloud storage providers are responsible for keeping
the data available and accessible 24/7. Two examples of cloud storage are Microsoft OneDrive
and Google Drive.

2
Microsoft OneDrive is a file hosting service and synchronization service operated by Microsoft
as part of Office 365. OneDrive allows users to store files and personal data like Microsoft
Office documents across Android, Windows Phone, and iOS mobile devices, Windows and
macOS computers. UiTM students are offered 5 TB of storage in OneDrive.

Figure 5.3: Microsoft OneDrive

Google Drive is a file storage and synchronization service developed by Google. Google Drive
allows users to store files in the cloud (on Google's servers), synchronize files across devices,
and share files. In addition to a web interface, Google Drive can be accessed from Windows
and macOS computers, and Android and iOS smartphones and tablets. Google Drive includes
Google Docs, Google Sheets, and Google Slides. Files created and edited through the Google
Docs suite are saved in Google Drive.

Figure 5.4: Google Drive

Cloud Computing
Cloud computing can be utilized for building, testing, deploying, and managing applications
and services through data centres. It provides software as a service (SaaS), platform as a
service (PaaS) and infrastructure as a service (IaaS) and supports many different
programming languages, tools, and frameworks. Colaboratory (also known as Colab) is a free
cloud computing environment from Google that runs in the cloud and stores its notebooks on

3
Google Drive. The Colaboratory UI only allows for the creation of notebooks with Python 2
and Python 3 kernels.

Figure 5.5: Google Colaboratory

4
PROCEDURES

PREPARATION: Office 365 activation

1. Visit https://mail.uitm.edu.my/.
2. Click Microsoft 365. In office.com, click Sign in (Figure 5.6).

Figure 5.6: Office 365 Sign in screen

3. For new student, please sign-in to your account using the following instructions:
Login ID: [email protected] (* Username by default: Student ID)
Example: [email protected]
Password: Default password have been created as combination:
“The first two letters of student’s name (the first letter is uppercase) + ‘@’
+ last 6 digit of student ID”

Example: Name: Muhammad Hijaz | Student ID: 2017123456

Password: Mu@123456

4. For current student, please sign-in to your account using the following instructions:
Login ID: [email protected] (* Username by default: Student ID)
Example: [email protected]
Password: Default password have been created as: Passw0rd

5. For safety reason, please change your default password immediately.

5
PREPARATION: Google activation

1. Visit https://mail.uitm.edu.my/.
2. Click Gmail Student. You will be directed to the following page (Figure 5.7).

Figure 5.7: Google login screen

3. Please sign-in to your account using the following instructions:

Login ID: [email protected] (* Username by default: Student ID)
Example: [email protected]
Password: Default password have been created as combination:
“The first two letters of student’s name (the first letter is uppercase) + ‘@’
+ last 6 digit of student ID”

Example: Name: Muhammad Hijaz | Student ID: 2017123456

Password: Mu@123456

4. Then go to your Google account setting by clicking your profile icon in the upper right
corner and select “Manage your Google Account”. Update your phone number in the
“Personal Info”. Phone number is required when registering for a cloud service.
5. For safety reason, please change your default password immediately.

6
PART A: CLOUD SOFTWARE

1. Visit https://www.tinkercad.com/. Click “JOIN NOW”, and then choose “Create a personal
account” (Figure 5.9).

Figure 5.8: Creating a file

Figure 5.9: Tinkercad sign up screen

2. Choose “Sign in with Google” to proceed (Figure 5.10). Enter your email details & verify
your account by phone.

Figure 5.10: Tinkercad sign up screen

7
3. At the end of this process, you’ll be welcomed by the Tinkercad tutorial screen. You may
follow the tutorial or just skip by closing it and instead go to the main homepage. Click
“Circuits”, followed by “Create new Circuit” (Figure 5.11).

Figure 5.11: Tinkercad dashboard

4. This is what a project’s main interface looks like (Figure 5.12). The interface is composed
of the following:

Top toolbar, with more general tools like “Rotate”, “Delete”, “Undo”, “Redo”, “Wire
type” and “Wire colour” on the left, as well as design operations like “Code”, “Start
Simulation”, “Export” and “Share” on the right.

Workplane at the center. You can use mouse wheel to zoom in or zoom out the circuit.
Alternatively, you can click “Zoom to Fit” button on the top left of workplane to view the
whole circuit design.

Components Panel, containing “All” and “Basic” components.

Figure 5.12: Project interface

8
5. Create the following circuit by selecting “Basic” from the Components Panel, then drag
and drop the components as shown in Figure 5.13 below.

Figure 5.13: Placing the components

6. Click each component and the properties for the component will be displayed, as shown
in Figure 5.14. Change the properties of each component, based on the Table 5.1.

Figure 5.14: Component properties dialog box

Table 5.1: LED properties setup

LED Color: RED
Resistor Resistance: 22 Ω

7. Then connect each component, by hovering your mouse over each component. A red box
will be displayed to indicate the polarity of the component. Click the red box and move your
mouse to another red box. Click again to create wire between components as shown in
Figure 5.15.

9
 Figure 5.15: Connecting the components

8. Click “Start Simulation” at the top to start the circuit simulation. If the connections are
performed correctly, then the LED will light up as shown in Figure 5.16. Include the
simulation result in the Lab Sheet.

Figure 5.16: Simulating the circuit

9. Stop the simulation. Search for Multimeter from the search box. Drag and drop the
Multimeter onto the workplace. Connect the Multimeter, as shown in Figure 5.17. Click the
Multimeter and change the Mode to Amperage.

10
 Figure 5.17: Measuring the amperage across resistor

10. Start the simulation again. Observe value from the Multimeter and include in the Lab
Sheet.
11. Export the circuit by clicking “Export” button on the top right of Top Toolbar. Click download
and a BRD file will be downloaded to your local computer. Keep the BRD file for Part B of
this laboratory.

EXERCISE

1. Use Multimeter to measure Amperage and Voltage between the LED, Resistor and
Battery. Observe the value and include in the Lab Sheet.
2. Export and rename the file with your student ID.

Example: 2020123456.brd

PART B: CLOUD STORAGE

MICROSOFT ONEDRIVE

1. In your local computer (Desktop or Laptop), select the “Start” button. Search for
“OneDrive”, and then open it (Figure 5.18).

11
 Figure 5.18: OneDrive shortcut

2. When OneDrive Setup starts, enter your personal account, or your work or school account,
and select “Sign in” (Figure 5.19).

Figure 5.19: OneDrive login

3. On the This is your OneDrive folder screen, select Next to accept the default folder location
for your OneDrive files. If you want to change the folder location, select Change location
(Figure 5.20).

Figure 5.20: OneDrive setup

12
4. On the All your files, ready and on-demand screen, you will see how files are marked to
show them as online-only, locally available, or always available. Files On-Demand helps
you access all your files in OneDrive without having to download all of them and use
storage space on your Windows device (Figure 5.21). Select Next.

Figure 5.21: Type of files in OneDrive

5. You are all set. Your OneDrive files will appear in File Explorer in the OneDrive folder.
Your work or school files appear under OneDrive – Universiti Teknologi MARA (Figure
5.22). You can store over 300 types of files on OneDrive.

Figure 5.22: Local OneDrive

6. You now have a new white or blue cloud icon (or both) in your notification area and your
files are synced to your computer. Your blue cloud icon will appear as OneDrive –
Universiti Teknologi MARA when you hover over the icon (Figure 5.23).

Figure 5.23: OneDrive in Taskbar

13
7. Locate BRD file that you have created in Part A and store it in your local OneDrive folder.
The file will be automatically uploaded to Microsoft Cloud Storage.
8. Verify the file by going to office.com and click OneDrive under the list of Office 365 icons
(Figure 5.24). Make sure the BRD file is inside the OneDrive folder. Screenshot your
screen and include in the Lab Sheet.

Figure 5.24: Online Office 365 icons

9. If the file does not exist, you may drag & drop the BRD file into cloud OneDrive.

GOOGLE DRIVE

1. Download the Google Drive desktop app to your computer

(https://google.com/drive/download) (Figure 5.25).

Figure 5.25: Download Backup and Sync

2. Once the file has been downloaded, click on the installer to start the installation (if you are
using Google Chrome, you will find the downloaded file in the bottom left corner of the
browser). Follow the on-screen instruction.
14
3. Once it is installed, you will see a new Google Drive folder in your Folder Explorer. Any
files you move into this folder will automatically be uploaded to your Google Drive (Figure
5.26).

Figure 5.26: Local Google Drive

4. Locate BRD file that you have created in Part A and store it in your local Google Drive
folder. The file will be automatically uploaded to Google Cloud Storage.
5. Verify the file by going to google.com and click Drive under the list of icons. Make sure the
BRD file is inside the Drive folder. Screenshot your screen and include in the Lab Sheet.

Figure 5.27: Online Google Drive

6. If the file does not exist, you may drag & drop the BRD file into cloud OneDrive.

EXERCISE

1. Use web-based Google Drive to upload BRD file (with the student ID) to instructors’ Drive.
Ask your respective instructor for the link.

15
PART C (Cloud Computing)

1. Assuming that you are already logged into your Google Drive, click Open More Apps from
create file menu in Google Drive (Figure 5.28).

Figure 5.28: Apps selection in Google Drive

2. Your browser would display the Google Workspace Marketplace. Search for
Colaboratory in the search bar. Proceed to install the Collaboratory app (Figure 5.29).

Figure 5.29: Colaboratory installation

3. Again, from create file menu, search for Google Colaboratory. Click to open app (Figure
5.30).

Figure 5.30: Colaboratory selection

16
4. A new notebook would open as shown in the screen below (Figure 5.31). This is what a
project’s main interface looks like. The interface is composed of the following:

Top toolbar, with more general tools like “CODE”, “TEXT”, and “CELL” on the left, as
well as operations like “CONNECT” on the right. You may add coding area by click
CODE. To add comment or explanation, click TEXT.

Figure 5.31: Colaboratory UI

5. To rename the notebook, click on this name and type in the desired name in the edit box
as shown here (Figure 5.32).

Figure 5.32: Renaming

6. Click CONNECT on the top right side of the toolbar. Google Colaboratory will try to
establish a connection a cloud server. If the connection is successful, then the CONNECT
will change to green tic and the server specs (Figure 5.33).

Figure 5.33: Server status

7. You will now enter a trivial Python code in the code window and execute it. Enter the
following two Python statements in the code window.

import time
print(time.ctime())
Figure 5.34: Program list to display current time

17
8. To execute the code, click on the arrow on the left side of the code window (Figure 5.35).

Figure 5.35: Code and execution

9. After a while, you will see the output underneath the code window, as shown here (Figure
5.36). Include the code and output in the Lab Sheet (Part C (i)).

Mon Jun 17 05:58:40 2019

Figure 5.36: Output for current time

10. You can clear the output anytime by clicking the icon on the left side of the output display
(Figure 5.37).

Figure 5.37: Output clearing button

11. To add more code to your notebook, just hover the mouse at the bottom center of the Code
cell. When the CODE and TEXT buttons appear, click on the CODE to add a new cell
(Figure 5.38).

Figure 5.38: Adding more codes button

18
12. A new code cell will be added underneath the current cell.
13. Next, we will execute the Equation 5.1. Click CODE button and write codes from Figure
5.39. Run the cell & verify if the output is similar to Figure 5.40. Include your code and
output in the Lab Sheet Part C (ii).

Equation 5.1
# Importing Required Libraries
import numpy as np
import matplotlib.pyplot as plt

# Generating time data using arange function from numpy

time = np.arange(-3*np.pi, 3*np.pi, 0.01)

# Finding amplitude at each time

amplitude = np.sin(time)

# Plotting time vs amplitude using plot function from

pyplot
plt.plot(time, amplitude)

# Settng title for the plot in blue color

plt.title('Sine Wave', color='b')

# Setting x axis label for the plot

plt.xlabel('Time')

# Setting y axis label for the plot

plt.ylabel('Sin(time)')

# Showing grid
plt.grid()

# Highlighting axis at x=0 and y=0

plt.axhline(y=0, color='k')
plt.axvline(x=0, color='k')

# Finally displaying the plot

plt.show()
Figure 5.39: Program list for Equation 5.1

Figure 5.40: Output from Equation 5.1

19
14. During the development of your project, you may have introduced a few now-unwanted
cells in your notebook. You can remove such cells from your project easily with a single
click. Click on the vertical-dotted icon at the top right corner of your code cell (Figure 5.41).

Figure 5.41: Cell deletion

OUTPUT VALIDATION
1. Measure Part A with an actual experiment. Demonstrate the advantage and
disadvantages of performing experiments in the cloud and state the outcomes from
this lab session.

2. Examine the output of Equation 5.2 and Equation 5.3 using the code in Figure 5.42.
Replace XX with last 2 digit of your student ID. Show your result to instructor.

Equation 5.2
Equation 5.3

# import libraries
import numpy as np
from matplotlib import pyplot as plt

GAP = XX
# Creating equally spaced data in range 0 to 2*pi
theta = np.linspace(0, 2 * np.pi, GAP)

# Generating x and y data

20
x = 16 * ( np.sin(theta) ** 3 )
y = 13 * np.cos(theta) - 5* np.cos(2*theta) - 2 * np.cos(3*theta)
- np.cos(4*theta)

# Plotting
plt.plot(x, y)
plt.title('Shape')
plt.show()

Figure 5.42: Program list for Equation 5.2 & Equation 5.3

21