Demo Video:
0:00 First, the contents of Grove Park Installation.zip are extracted to the Desktop folder.
0:22 Next, the contents of the Grove Park Installation folder are copied to the Desktop folder.
0:33 After that, the Windows Command Prompt is opened. The directory is changed to the folder containing our messaging app. The ‘dir’ command shows the contents of the current directory to verify it. Then, some necessary packages are downloaded by running these commands:
cd Desktop/messaging_app
npm install
npm i alert
npm install mongodb
1:09 Then the application launched by selecting the messaging_app.bat file. This computer has a firewall blocking the unfamiliar application so ‘Run Anyway’ is clicked to continue.
1:26 The launching application opens the command prompt, indicated by the ‘run p server start’ messages and proceeding messages. Note that the application has an Express.js server running on port 3001 of this computer and a React.js client running on port 3000.
2:16 The application automatically pops up in the browser at localhost:3000. The user can now use the form to send SMS messages via your Twilio number and can also add a new phone number to the contact list database.
2:18 When ‘1’ is entered in the New Phone Number box and submitted, it yields a pop-up message that says, ‘This number input is invalid’ and this invalid entry is not added to the phone number contact list.
2:21 When a valid phone number is entered and submitted, it yields a pop-up message that says, ‘This number is in the system ‘+11231231234.’
2:33 The contacts list database is opened in MongoDB compass. The user verifies that the recently added phone number now appears in the database.
2:43 The user enters a message, which includes text and a picture, to send as a text to all phone numbers in the contact list. The picture identified by an embedded URL that ends in its file type, jpg.
3:04 Lastly, the command line is opened again. The ‘queued’ message indicates that the text was sent.