Chapter 8.15 - Socially Aware App: Broadcast Hub Tutorial
Time Estimate: 90 minutes
9.15.1. Preview
BroadcastHub The Broadcast Hub app uses email and texting to broadcast messages to a group of members who join the hub. This useful technology is used in many places that have unreliable internet access but do have mobile phones, for example in this PBS video on broadcast hubs in Africa. This tutorial uses the App Inventor Texting Component and the ActivityStarter Component for email to send messages to the list of registered members.
Requirements: This tutorial requires that an email address and email app are set up on the device to be able to send email messages. If you want to use texting, you need a device with an SMS service plan (e.g. an Android phone with service including texting). Google Voice no longer works with the App Inventor Text Component to receive text messages (although it does work to send them). However, you can do this tutorial with just using email over a WiFi connection and skip the sections that require texting.
Objectives: In this lesson you will learn to :
create an app that
gain additional experience using procedures to organize an app.
8.15.2. Building the BroadcastHub app
The Broadcast Hub app allows people to join the hub by texting or entering their contact information. Messages are broadcast to all members of the hub:
Here’s how it works: The phone or device running this app serves as a hub. Members can be added to the hub by typing in their phone numbers or email address on the device or by receiving a text message from them (if your device has an SMS service plan). Members are put on a members list. Then, the app can send a message to every user on the list either by email or text.
Broadcast Hub UI
The UI shown below is already built for you and consists of labels, textboxes to input member email addresses or phone numbers and the message to be broadcast, and ListView components to display the list of members and the list of sent messages.
There are 3 non-visible components:
The Texting Component: which can be used to send and receive SMS messages if you have a device with a paid SMS service.
A Notifier: for error messages
The ActivityStarter: which can be used to send email messages.
Activity Starter The Activity Starter component enables an app to start another application -- any application that is installed on the device. We have used the Activity Starter before to start Google Maps. Because App Inventor does not have a built-in email component, we will use Activity Starter to start an email app, passing it the information needed to compose and send the email message to a list of email addresses. The documentation for the Activity Starter describes several different ways to start an external activity. For example, to open a browser to a specific web page, you can set two properties of the Activity Starter: its Action and its DataUri:
Action: android.intent.action.VIEW DataUri: http://www.facebook.com
This is telling the Android system that you want to VIEW something and its DataUri begins with the HTTP protocol, which tells it you want to view a web page. The system will look for an app (i.e, a browser app) that implements that protocol. Sending an EMAIL We're going to follow this approach to send an email message. In our case the Action will be the same -- i.e., we want to VIEW something, but the DataUri will be the mailto scheme:
Action: android.intent.action.VIEW DataUri: mailto:[email protected]?subject=Test&body=Testing
When the ActivityStarter.StartActivity is called, it will open an Email app like Gmail on the device and let you view the message and hit send to send it. It will set the subject to “Test” and the body of the email to “Testing”, using the information in the example above.
The Code: Adding Members
Follow the steps below to add code to your app (using the BroadcastHubEmailText Template):
Create a global list variable for members (membersList) and set it to an empty list.
When the user types in an email address or a phone number into TextBoxPhoneOrEmail and clicks on ButtonAddMember,
add their input to the membersList
and display the list in ListViewMembers by setting its elements property to the list.
You could experiment with using the ContactPicker from the Social components instead if your device has saved contacts on it.
The Code: Broadcasting Messages by Email
Let’s first assume that only email addresses are entered into the member list and work on broadcasting a message by email to the whole list of members.
Create a global list variable for messages set to empty list.
When the user types in a message into TextBoxMessage and clicks on ButtonSendMessage,
add their input from the textbox to the messagesList,
display it in ListViewMessages,
and call a new procedure to broadcast the message giving the input from the TextBox as an argument.
The procedure broadcastMessage will use the Activity Starter to send email messages. If we wanted to simply send a message to one email address, the code would look like the following:
However, we need to send an email to all the members of the list. So, we need to loop through the membersList and construct a string of email addresses separated by commas instead of the second block “[email protected]” in the join block above. For example, if the memberList consists of [[email protected], [email protected], [email protected]], we would need to construct an emails string that consists of all 3 email addresses separated by commas to send an email to all 3 emails at the same time. The constructed DataUri below would produce the email message under it:
Action: android.intent.action.VIEW DataUri:mailto:[email protected],[email protected],[email protected]?subject=Test&body=Testing
To construct this DataUri, we will use a local variable called emailAddresses and a foreach loop to join in every member of the list to a string of emails separated by commas.
The Code: Sending SMS Text Messages (Optional)
If your device has an SMS texting plan or Google Voice installed on your device, you can continue with this tutorial to send messages by text. If you have set up Google Voice on your device, you can continue with this section to send text messages through WiFi, but you will not be able to do the next section to receive text messages through WiFi in App Inventor. Here are some directions for setting up Google Voice on your device.
The Texting Component in App Inventor is simpler to use than using the ActivityStarter for sending emails. We only need to set the Texting component’s PhoneNumber and Message properties and then call its SendMessage procedure.
If we allow members to enter either email addresses or phone numbers, we can test each member in the list to see if it is a number, and send them a text message instead of an email.
This new if statement that tests whether the member in the list is a number instead of an email will go inside the foreach loop in the broadcastMessage procedure:
The Code: Receiving SMS Text Messages (Optional)
If your device has an SMS texting plan, you can continue with this tutorial to receive messages by text. Unfortunately, sending texts via the Texting Component using Google Voice no longer works in App Inventor.
The Texting Component has a procedure called When Texting.MessageReceived:
When the device receives a text message, it should see if it’s from a member on the list. If it is, it can broadcast this message to everyone on the list. The text message could also be a request to joinHub in which case this new phone number can be added as a new member.
Here is a pseudocode for this algorithm:
if the message received is from a number already on the memberList
Append the message to the message log
Set it as the value of the Texting.message property
For each phone number on the membersList
Send the message to that phone number
else if the message received is ‘joinhub’
Add the sender’s phone number to the membersList
Display the list of phone numbers in the UI
else
Notify the user that a message has been received from a non-member
The if-else statement has three mutually exclusive cases (or branches). For each message received, only one of the following conditions will be true and only one of the associated actions will be done:
Condition: The incoming phone number is on the list:
Action: Send everyone the incoming message
Condition: The incoming message is ‘joinhub’:
Action: Add the phone number to the list
Condition: None of the above:
Action: Notify the user that a non-member message has been received
Here is the App Inventor code for this section:
Enhancements:
Here are some ideas for programming projects that could be done to enhance this app.
Abstraction: refactor your code to add more procedures with parameters, for example sendText(number, message), sendEmail(emailAddresses,message), addMember(member) which will add to the list and display the list, addMessage(message), etc.
Persistence: Add a TinyDb so that the members of the hub can persist from one use of the app to another.
Deleting Members: Modify the app so that a member can be removed from the hub using the User Interface. If you are able to receive text messages, you can also have a protocol that deletes a user based on a received text message like “remove me”.
Longer-term (Advanced) Project: Come up with your own variations of this app. For example, one variation might be to extend the app to have multiple types of hubs -- family, friends, etc. And, you could allow members to tag their messages with certain prefixes to indicate which distribution list should receive the message -- e.g. “family: The picnic is at 1 PM’. Another variation might be to use the Social/Twitter component to tweet messages to your member list.
8.15.3. Enhancements: Creative Projects
Here are some ideas for programming projects.
Abstraction: refactor your code to add more procedures with parameters, for example sendText(number, message), sendEmail(emailAddresses,message), addMember(member) which will add to the list and display the list, addMessage(message), etc.
Persistence: Add a TinyDb so that the members of the hub can persist from one use of the app to another.
Deleting Members: Modify the app so that a member can be removed from the hub using the User Interface. If you are able to receive text messages, you can also have a protocol that deletes a user based on a received text message like “remove me”.
Longer-term (Advanced) Project: Come up with your own variations of this app. For example, one variation might be to extend the app to have multiple types of hubs -- family, friends, etc. And, allow members to tag their messages with certain prefixes to indicate which distribution list should receive the message -- e.g. “family: The picnic is at 1 PM’. Another variation might be to use the Social/Twitter component to tweet messages to your member list.
8.15.4. Still Curious?
Learn more about how mobile phones are used in Africa. How is their experience similar to yours? How is it different?
8.15.5. Self-Check
8.15.6. Reflection: For Your Portfolio
Create a new page named Broadcast Hub under the Reflections category of your portfolio and write brief answers to the following questions:
How is the For Each loop used in this app? What is the significance of this loop?
Besides Texting and the For Each loop, what programming concept plays a significant role in the functionality of this app? Explain.
Last updated