Build­ing a Unit Con­ver­sion Ap­pli­ca­tion in App In­ven­tor 2

If you haven’t joined the An­droid app de­vel­oper band­wagon yet, then wel­come to App In­ven­tor 2. If you are a first timer, we sug­gest you read our pre­vi­ous ar­ti­cles (which have been fea­tured here for around a year now). If you’ve al­ready got a few apps in y

OpenSource For You - - Contents -

For the past year, we have em­barked on a jour­ney of de­vel­op­ing apps us­ing App In­ven­tor. Dur­ing this pe­riod, we de­vel­oped mul­ti­ple ap­pli­ca­tions and I hope you have also ex­per­i­mented with things on your own. If your ap­pli­ca­tions have been pub­lished in the Google

Play store, I would like to check out your work; so please share your app down­load links via email.

In App In­ven­tor, we have mas­tered the com­po­nents avail­able for use in the pal­ette. Play­ing around with the de­signer and block edi­tor is so much fun.

A unit con­ver­sion app or soft­ware is quite a ne­ces­sity in our daily lives. There are mul­ti­ple in­stances when we need to con­vert some unit to an­other and vice versa. The ap­pli­ca­tion comes handy for faster cal­cu­la­tions. So let’s de­velop a sim­ple, yet fun filled An­droid util­ity ap­pli­ca­tion. You have prob­a­bly prac­tised unit con­ver­sion in math­e­mat­i­cal prob­lems in school. In this ar­ti­cle, we will re­vise your knowl­edge of units.

The theme of the ap­pli­ca­tion

The theme is pretty sim­ple -- we need to de­sign and pro­gram the ap­pli­ca­tion so that it can con­vert one unit to an­other. Rather than do­ing sin­gle unit con­ver­sions, let’s give users op­tions to pick from a range of al­ter­na­tives.

GUI re­quire­ments

For ev­ery ap­pli­ca­tion, we have a graph­i­cal user in­ter­face or GUI, which helps users to in­ter­act with the on-screen com­po­nents. How each com­po­nent re­sponds to user ac­tions is de­fined in the block edi­tor sec­tion.

GUI re­quire­ments for Screen1

1. La­bels: The la­bels are the static text com­po­nents used to dis­play some head­ings or mark­ings on the screen.

2. But­ton: A but­ton will let you trig­ger the event and is a very es­sen­tial com­po­nent.

3. Hor­i­zon­tal ar­range­ment: Th­ese are spe­cial com­po­nents which keep all child com­po­nents aligned. Hor­i­zon­tal com­po­nents keep all the child com­po­nents hor­i­zon­tally aligned.

4. No­ti­fier: This is used to dis­play some in­struc­tions or con­trol your ex­ist­ing com­po­nents. You will see its func­tion­al­ity in more de­tail as we im­ple­ment it in our app.

5. List picker: This is the GUI com­po­nent which presents a list to users, who have to choose from the dis­played op­tions.

6. In­put box: Th­ese ded­i­cated user in­put boxes al­low the user to type the in­put. Dur­ing the de­sign­ing stage, you can set the type of ac­cepted in­put, e.g., nu­mer­i­cal only, multi-line, etc.

Ta­ble 1 lists the com­po­nents that we will need for this ap­pli­ca­tion. Let us drag them to the de­signer from the left hand side pal­ette.

1. Drag and drop the com­po­nents men­tioned in the ta­ble above the viewer.

2. Vis­i­ble com­po­nents can be seen by you, while the non-vis­i­ble com­po­nents will be lo­cated be­neath

the viewer un­der the tag ‘Non­vis­i­ble’.

3. We have placed a la­bel so as to name the ap­pli­ca­tion.

4. All but­tons need to be put within the Hor­i­zon­tal ar­range­ment so as to keep them aligned hor­i­zon­tally. 5. If you have dragged and placed ev­ery­thing, the lay­out will look some­thing like what’s shown in Fig­ure 1.

6. Make the nec­es­sary prop­erty changes, like we did in chang­ing the text prop­erty for the la­bel and but­ton com­po­nents. Ta­ble 2 de­picts this more clearly.

7. Re­nam­ing the com­po­nents helps to iden­tify them in the block edi­tor. 8. So now your graph­i­cal user in­ter­face is ready. The ap­pli­ca­tion will look like what’s shown in

Fig­ure 2 af­ter the in­stal­la­tion.

9. Fig­ure 3 gives the hi­er­ar­chy of the com­po­nents that we have dragged to the de­signer.

If you are con­fused af­ter look­ing at the de­signer and the com­po­nents viewer, let me ex­plain things a bit more. Here is the hi­er­ar­chy that we have placed for our ap­pli­ca­tion.

1. At the top, we have the ti­tle for our ap­pli­ca­tion. It’s al­ways a good prac­tice to name your ap­pli­ca­tion and dis­play it on the screen as well. We have put a la­bel for that and have set its text prop­erty to the name of the ap­pli­ca­tion.

2. Be­low that we have an­other la­bel, which will work as a prompt for the user to se­lect a con­ver­sion type from the avail­able op­tions.

3. Next, we have placed three check boxes in a row, putting them all within a hor­i­zon­tal ar­range­ment. We will code them to work as the HTML ra­dio but­ton so that once a check box is se­lected, the other one is de­s­e­lected au­to­mat­i­cally.

4. Then we have a list picker to se­lect the in­put unit.

5. Within the user types, the in­put will be only nu­meric, as we have set the prop­erty of the text box to take only nu­meric in­puts.

6. An­other list picker will de­cide the out­put unit.

7. The Con­vert but­ton will ini­ti­ate the con­vert cal­cu­la­tion and, de­pend­ing upon the user in­puts, it will dis­play the con­ver­sion out­put to the ded­i­cated la­bel.

The block edi­tor

Now let’s head to­wards the block edi­tor to de­fine its be­hav­iours. So, what is the ex­act func­tion­al­ity that we ex­pect from our ap­pli­ca­tion?

1. First, the user will se­lect the type of con­ver­sion, i.e., whether it is weight con­ver­sion, length con­ver­sion or tem­per­a­ture con­ver­sion.

2. De­pend­ing upon the user se­lec­tion for the check boxes, the list picker op­tions should be pop­u­lated.

3. Next, the user will pro­vide the nu­meric in­put in the text box pro­vided.

4. The user has to se­lect the out­put con­ver­sion unit.

5. Upon click­ing the Con­vert but­ton, the out­put digit should be pop­u­lated. So let’s move on and add th­ese be­hav­iours us­ing the block edi­tor. I hope you re­mem­ber how to switch from the de­signer to the block edi­tor. There is a but­ton avail­able right above the Prop­er­ties pane to do so.

Block edi­tor blocks

I have al­ready pre­pared the blocks for you. All you need to do is drag the rel­e­vant ones from the left side pal­ette and drop them on to the viewer. Ar­range the blocks in the same way as shown in Fig­ure 4. I will ex­plain what each one does and how it is called.

The code blocks in Fig­ure 4 de­pict what should hap­pen when the weight check box is se­lected. It is ob­vi­ous that, at one time, we will have only one type of con­ver­sion; so, if any of the other two are se­lected, they should be de­s­e­lected. And, ac­cord­ingly, we will be set­ting the val­ues for the ‘From’ and ‘To’ drop­down menus.

Fig­ures 5 and 6 give the code for the other two check boxes.

As soon as the user has se­lected the drop down value, it should be re­flected as the text value of the same. The code given in Fig­ure 7 makes this con­ver­sion.

We want the con­ver­sion to hap­pen as soon as the but­ton is pressed, but we also need to make sure that the users have pro­vided all the nec­es­sary in­puts, i.e., they should have se­lected at least one of the con­ver­sion modes, have se­lected the ‘From’ unit from the first drop down box, pro­vided some in­put value in the in­put text box and, fi­nally, given the con­ver­sion unit for the ‘To’ drop down box. Listed be­low are the val­i­da­tions for each case.

Check­ing the check­box sta­tus

(Fig­ure 8).

Fur­ther check­ing whether or not the user has pro­vided some in­put value (Fig­ure 9).

If ev­ery­thing seems okay, the out­put value should be cal­cu­lated (Fig­ure 10).

Now we are done with the block edi­tor too. Let us move to down­load­ing and in­stalling the app on the phone to check how it works.

Pack­ag­ing and test­ing

To test the app, you need to get it on your phone. First, you have to down­load it to your com­puter and then move it to your phone via Blue­tooth or USB ca­ble. I’ll tell you how to down­load it.

1. On the top row, click­ing on the ‘Build’ but­ton will show you the op­tion to down­load the APK to your com­puter.

2. You can watch the progress of the down­load and, af­ter it is suc­cess­fully done, the ap­pli­ca­tion will be placed in the Down­load folder of your direc­tory or the pre­ferred lo­ca­tion you have set for it.

3. Now you need to get this APK file to your mo­bile phone ei­ther via Blue­tooth or via USB ca­ble. Once you have placed the APK file on your SD card, you need to in­stall it. Fol­low the on-screen in­struc­tions to in­stall it. You might get some no­ti­fi­ca­tion or warn­ing like, ‘In­stall from un­trusted source’. Al­low this from the Set­tings and af­ter the suc­cess­ful in­stal­la­tion, you will see the icon of your ap­pli­ca­tion in the menu of your mo­bile. This will be the de­fault icon, and I will tell you how it can be changed as we move ahead. As you can see, we have put in place the logic to con­vert units of weight. Now you need to think about the logic for the re­main­ing con­ver­sions.

I hope your ap­pli­ca­tion is work­ing ex­actly ac­cord­ing to the specs you have given. Now, de­pend­ing upon your us­abil­ity and cus­tomi­sa­tion re­quire­ments, you can change var­i­ous things like the im­age, sound and be­hav­iour too.

De­bug­ging the ap­pli­ca­tion

We have just cre­ated the pro­to­type of the ap­pli­ca­tion with very ba­sic func­tion­al­ity, but what else might the user be in­ter­ested in? There are var­i­ous use cases that re­quire se­ri­ous thought so as not to an­noy the user. Con­sider the fol­low­ing use cases:

1. How will you code it to pick the con­ver­sion type and then ap­ply the mul­ti­pli­ca­tion fac­tor?

2. If there is more than one value in the drop down menu, how will the mul­ti­pli­ca­tion fac­tor be de­cided?

3. What if the user doesn’t se­lect the drop down value and it re­mains with the de­fault ‘Se­lect’ text?

Th­ese are some of the sce­nar­ios that might oc­cur and users will be pretty happy see­ing th­ese ad­dressed.

Think over all th­ese sce­nar­ios— how can you in­te­grate them into the ap­pli­ca­tion? Do ask me if you fail to ac­com­plish any of the above use cases.

You have suc­cess­fully built an­other use­ful An­droid app for your­self. Happy in­vent­ing!

Fig­ure 3: Com­po­nents view

Fig­ure 4: Block Edi­tor Im­age 1

Fig­ure 5: Block Edi­tor Im­age 2

Fig­ure 6: Block Edi­tor Im­age 3

Fig­ure 1: De­signer screen

Fig­ure 2: How the ap­pli­ca­tion looks

Fig­ure 7: Block Edi­tor Im­age 4

Fig­ure 9: Block Edi­tor Im­age 6

Fig­ure 8: Block Edi­tor Im­age 5

Fig­ure 10: Block Edi­tor Im­age 7

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.