Bus Pick-up Scheaduleing App How-to

Create the code in MIT app inventor and Firebase necessary to create a prototype app for scheduling pick-up by an intercity transit bus! This app minimizes interactions between users and employees and is a more accessible to non-verbal people and generally just more convienet.

-Ill teach you how to connect to firebase and all that jazz in the next few steps, but for now its important that you create an account with MIT app inventor so you can begin your first project! if you already have one, great, feel free to skip this step! just make sure to start a new project in your files!

-firstly, click on the big orange button at the top of the website on mitappinventor.com like shown in the picture that says ¨Create apps!¨

-from there it may either ask you to sign in using google, if not simply follow the steps on screen until you're taken to a page that says ¨my projects¨, if you're not there simply click on the button on the top that says my projects

-once there, click the button that says start new project, name your project and hit ok

-click on the projects name once it shows up next to the others and you're ready to roll!!!

MIT App Inventor, Firebase, limited use of YouTube

The date scheduled block allows for people using the app to write in what day they would like to be picked up

to code for the DATE scheduled block :

-switch from design to blocks

-scroll down on the blocks bar and select date_selector under horizontalarrangement1, and choose the option that reads .afterdateset

-scroll to date under vertical arrangement, and under that choose date-text and click and drag it into the afterdateset block

-under built in, choose the text button next to the pink block and choose join to fit into date-text

-to fill in the join block alternate under date sector and texts using date_selector-day, monthintext, year, ¨-¨ and, ¨ ¨

-click and drag ¨set date selector text¨ into the block and compliment it with ¨date selected¨

The time schedule blocks allows for people to specify what time on the day they would like to be picked up

to code for the TIME scheduled block:

-click and drag .aftertimeset from date_selector and create a new separate block

-click and drag time-text from time under vertical arrangement into aftertimeset block -click and drag same join block into time-text block

-alternate between time_slector hour & minute with text ¨:¨, and ¨ ¨ in between

-click and drag ¨set time selector text¨ into the block and compliment with ¨time selected¨

-switch back to designer on your project screen

-under experimental on the palette bar find firebasedb, and drag and drop the component onto your design screen (this is a non-visible component but it should still show up under your component bar)

-open a new tab and open up firebase, once there and signed in click go to console

-click add new project, enter your projects name, click through next and create project

-once you've created your new project on the left side bar under develop click database and click create database and then on the pop up next and done

-click on cloud firestore and select real time database -click on rules, and then on the code shown both of the false to true and true and then publish

-go back to data and copy the URL listed, go back to the MIT app and on the furthest right bar properties under firebase URL change it from default to the URL you just copied

Now any time you are saving received data you will use the purple call Firebasedb1 block within whatever other block you are using...

This block will function to store all of the inputted information by app users into firebase!

To code for this block:

-use blocks according to the photo, and remember to use firebase db1 as that is how the information is stored, and be sure to type in correct names for every label you're going to use

This block will code so that when a person using the app presses the button clear, all of the entered data will be removed from their respective text boxes and returned to how they were before

To code for the clearing block:

1. scroll down on left sidebar and click on clear under horizantalarrangement5, and from that click and drag ¨when clear .click¨ onto your screen and create a new block

2. under horizontalarrangement3 click and drag ¨set textbox1 text¨ from textbox1 into new block & compliment with " ¨ from text

3. click and drag ¨set name text¨ directly underneath ¨textbox1¨ block, compliment with ¨name¨ from text

4. click and drag ¨textbox1 visible¨ underneath ¨set name text¨ & compliment with true block from logic

5. repeat step two but with textbox3

6. click and drag ¨set pickup2 text¨ into block under textbox3 & compliment w/ ¨pickup location¨

7. repeat step 4 but with textbox3

8. repeat step two but with textbox2

9. Click and drag ¨set dropoff text¨ into block & compliment w/ ¨drop off location¨

10. repeat step 4 but with textbox 2

11. click and drag ¨set date text¨ into block & compliment w/ ¨date¨

12. click and drag ¨set time text¨ into block & compliment w/ ¨time¨

-In order for your app to actually function or make sense, you need a place for the data to go, show up, and be used

-Now you must design your first app ¨home screen¨

To create the actual buttons/operating parts

-Firstly, scroll down on the left side bar to layout, click on it, and under that click horizontal layout, click and drag onto your screen

-From there, create your save date and place for app users to enter the date requested, to do this firstly crate your save date button by clicking and dragging button on the left sidebar into the box created by your horizontal arrangement

-Under text on the furthest right sidebar properties type in the new name of your button, ¨save date¨

-Now, on the left sidebar under user interface click and drag datepicker into your horizontal arrangement alongside save date, and rename to ¨no date selected¨

-Now do the exact same thing, new horizontal arrangement included, but instead of naming you button save date it will be save time, and instead of selecting date picker select time picker and rename that no time selected!

-you guessed it a new horizontal arrangement, this one is for name input! Click and drag ¨label¨ from user interface on the left sidebar into your arrangement, and after that textbox (also under user interface) on the right side of it-then rename your label to say ¨name¨

-Do this same thing with a new horizontal arrangement each time for pick up and drop off location

-you need to add the current date and time buttons, and to do this instead of a horizontal arrangement use vertical! then insert two label boxes and name one date and one time

-Top this all off with your submit and clear buttons, inside a horizontal arrangement.. using buttons from user interface

-make sure to click and drag your non-visible components onto your screen, including tinydb1 under storage, firebasedb1 under experimental and notifier1 under user interface

To add an image onto your screen:

-first navigate to the image option on the left sidebar under user interface, click and drag it onto your phone ¨screen¨

-Select the image box now on your phone ¨screen¨ and now on the furthest right sidebar, select the text box under picture that reads none... and upload your file!

To create your receiving system for your app, navigate to the add screen button on the top of your screen, type in your new screen name and voila! there you are

-Now, you must code for a block that will constantly be running and updating the information in your receiving system

To code for this block:

-click and drag ¨when clock1 timer¨ from clock1 onto your screen and create a new block

-click and drag in 5 ¨call firebasedb1 .timer¨ into the block

-attatch 2 of the ¨ ¨ blocks from text to each firebasedb1 block, the first of which will have the name of your label (ex: name, pickup location, etc..) and the second will have ¨nothing¨ -this is so that if there is no new information, nothing will be changed or updated in firebase

-make sure you are in blocks mode at this point

-now, create a block that will take and hold onto the previous data from firebase

To code for this first ¨holding¨ block:

-Click and drag ¨when start click¨ onto your screen and create a new block

-from there do the exact same thing done in step 7!

-You're nearly done coding! for this part, you need to code a block that will take the information from the ¨holding¨ block and use it! This block will essentially take data and fill in the corresponding label on your apps new screen-which you will create just after this

To code for this block:

-under firebase on the right-hand panel click and drag in ¨when firebase gotvalue¨

-click and drag an if then else if block and fill in with corresponding blocks as shown in photo

-These get tag and their corresponding locations you will fill them in with will retrieve the information held by the previous block and assign it to the label box you give it!

It's time to design your 2nd and final screen for your app! Although obviously, this is different in design, hopefully, you are already familiar with this process from the 1st time you did this, even if you're not, here's how it goes:

-Click and drag a button onto your screen and name that button ¨start¨

-under layout, click and drag in table arrangement underneath your new button

-though it may seem like a lot, next you're going to click and drag in 9 different text boxes into your new table arrangement-you should have date, time, pickup and drop-off location on one side and name2, date2, time 3, pick2 and drop2 corresponding with them on the other side, name should be by itself on the right top side

-if you want, you can change the color of the individual text boxes to create a checkerboard pattern and make it easier to distinguish buttons from each other-or whatever you want

-insert your picture of choice! for instructions on how to do that, refer back to step 6

-Dont forget your non visible components, including FrebaseDB1 under experimental and Clock1 under sensors, clock actually serves in that every 15 seconds while the app is being used it should restart and search for new data being entered, which would then be stored in firebase