How To make dictionary application with app inventor

1. First, Open this page ai2.appinventor.mit.edu then u will show the page login gmail

2. Next Step, u will login with your account gmail, if u dont have account gmail, u can click link
sign up

3. The page will redirect to the page ai2.appinventor.mit.edu and u login as your account gmail,
then u click button continue in this window.

4. Click start new project

5. Please fill application name in the box. The name of project can not include space so u can
change with underscore

6. Then, the page will show features: palette, viewer, components, properties and screen screen1

7. Make a background in screen 1, u can select a menu background image and find file image in
your drive computer then click ok.

8. Please click ok and waiting a process upload until finish

9. Image file had finish upload and showing in the screen

10. Drag the clock in the menu sensors in the screen for make splash screen in the android
application

This is Icon clcok

11. Configure the timer/interval the clock, 3 second is same with 3000 interval

12. Then, u click menu blocks because before be position on the menu designer , in the blocks
menu, u can fill the function of the component application.

13. in the menu blocks there have a tab blocks, u can click the clock1 and select the function when
clock1.timer do and click the clock1 again then select the function set
clock1.timerEnabled.to

14. please click the control and select open another screen screenName then select the logic
false

15. Next Step, please click string text and fill the name of screen that u have, if your application
dont have the screen can make the screen with click button add screen

16. This is display of screen menu, u can drag a label in the screen .

17. U can give the background in screen, please select menu upload file in the properties window, if
u want use background with previously uploaded image u can select file type of image in the box
upload file

18. Drag layout HorizontalArrangement and drag user interface button in the screen and change
the text of the button

the function of menu :

1. Fontitalic used for member functions slant on text
2. Fontbold used to provide the function of thickening in the text
3. fontsize used to set the font size for text
4. FontTypeFace used to set the type style text
5. Image is used to select the type of image files to be uploaded
6. Shape is used to change the shape of the button
7. The text is used to provide text on the user interface is selected

19. Next Step, give the name of user interface button with click user interface button and click
button rename

20. The Result:

21. Make a new screen

select menu add screen

22. The screen will show the window new screen then give name of screen and select button ok

23. Then will redirect to screen that you created earlier

24. Next Step, please make a new screen video_player

25. If want back in the screen menu, please click tab screen and select the name of screen

26. It will be redirected in the screen menu

27. Then select a menu block to give a function of the user interface button

28. Click the button btnDictionary and select the function when btnDictionary.click do and select
control open another screen screenName

29. The next step please select text string to give a name of screen .

30. fill the name of screen that u select in the text string

31. in the screen of menu blocks will show the function that u created earlier.

Click right the function and select menu duplicate

be found in the screen it is an error

because previous button used 2 times
so please change other button that
want be given the function

32. different with button exit, because the exit button have function to close the application so
please change the function with select control close application

The Result :

33. Open the screen name dictionary

34. Drag layout horizontalarragement and drag user interface image

35. Upload file of image with select a menu picture in the tab properties

36. Then please find file type of image that u want upload.

37. Next step select the image in the your drive computer

38. This is, size of default image in the screen so the image need to set the width and height size of
image in the menu height and width in tab properties

39. Then drag button in the screen

40. The next step please give text in the button with click the button and fill the word in the menu
text in tab properties

41. The next step is please drag layout horizontalarragement and user interface button and
image in accordance with the previous steps.

42. Giving the name of component user interface in your created earlier in the button rename

43. To set the layout position to the right position then select the menu alignHorizontal and select
the selection option right

After

Before

44. Utilizing TextToSpeech that is used to convert text into audio and make 2 TextToSpeech then
drag to the screen.

45. Icon TextToSpeech

46. Setting language that will convert to text into audio

47. For the English language, country and language keyword is 'eng', whereas, for the German
language, country and language keyword is 'deu'

48. for TextToSpeech Indonesian language not supported so the alternative to give audio with
Indonesia language can use media player.

49. Drag player at tab media in the screen

icon player

50. Open menu blocks

Click button BtnIndonesiaFlag1 in the tab blocks

click media player1 at the tab blocks

and select the function when btnIndonesiaFlag1.click do

and select the function set

player1.source to

51. The next step please click tab blocks

and select text string ,
fill the name of player
of the type mp3 which will be used

result :

For the excersize text to speech

52. Click button btnGermanyFlag 1 then select the function when btnGermanyflag1.click do

53. The next step is click media textToSpeech and select function call TextToSpeech1.speak
message

54. Then click btnGermanyFlag1 and select the function BtnGermanyFlag1.Text

The Result:

55. For duplicate function click left pointer and select duplicate

56. Change name of button BtnGermanyFlag1 with name of button BtnGermanyFlag2

The Result:

The use of text to speech

57. Click button btnEnglishFlag1 and select function when btnEnglishFlag1.click do

58. Click textToSpeech2 and select function call TextToSpeech.Speak message

59. Click button btnEnglishFlag1 and select function btnEnglishFlag1.text

Result :

60. Duplicate function that has previously been made

61. Change the name of the function button in duplicate

Result :

Utilizing features of video player

62. Open the screen 'video_player' that have been made previously

63. Upload the image to change the background on screen 'video_player' and select the file to be
uploaded

64. Wait for the upload is complete

Display screen background

65. Select the video player on the media tab and drag it to the screen

66. Select the user interface button and drag it into the screen

67. Give the text on the button

68. Then give the name of the button by clicking the Rename button

69. Upload the video in the source menu in the Properties tab

70. How to upload a file there are two kinds can choose the file upload button to upload the new
files or take video previously uploaded
List files previously uploaded images

71. If you want to upload a new file select button to upload the file and select the file on a computer
drive

72. Select ok to upload a file

73. Wait until the upload is complete

74. After the uploader's finished open the menu 'blocks' and then select the function btnPlay click
'when btnPlay.Click do'

75. Then select the video media player 1 and select the function "call videoplayer1.start '

The Result:

76. Once the program is finished then save it in the drive computer with a select menu 'build' and
select the option 'app (save.apk to my computer)'

Tampilan Icon:

77. Wait for the process of 'building apk' finished

78. Then wait until the apk file download is complete

79. Manufacture dictionary application is complete.