{"id":245,"date":"2014-11-04T18:32:46","date_gmt":"2014-11-05T02:32:46","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=245"},"modified":"2014-11-04T18:32:46","modified_gmt":"2014-11-05T02:32:46","slug":"a-tip-calculator-app-written-in-app-inventor-version-1","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/04\/a-tip-calculator-app-written-in-app-inventor-version-1\/","title":{"rendered":"A Tip Calculator App (version 1) written in App Inventor"},"content":{"rendered":"<p><strong>What the App Does<\/strong><\/p>\n<p>This is a simple app to calculate the tip and total bill at a restaurant &#8211; or other service provider where a tip is common place.<\/p>\n<p>This is the first of 3 apps that will implement a tip calculator.<\/p>\n<ul>\n<li>Version 1 (this tutorial) introduces the basic app and demonstrates the use of error checking to handle user data entry mistakes.<\/li>\n<li>Version 2 will introduce an App Inventor feature that makes the app more interactive and reduces data entry errors.<\/li>\n<li>Version 3 will introduce a way to avoid user data entry errors &#8211; by designing the app in such a way that the user can enter only correct values.<\/li>\n<\/ul>\n<p><em>Check back in the days ahead to see how this app evolves to Version 2 and then Version 3. I think you will learn a lot, have a bit of fun, and end up with an app that might be rather useful<\/em>!<\/p>\n<p><strong>The Tip Calculator User Interface<\/strong><\/p>\n<p>In version 1.0, The user interface features two inputs: one for the amount of the bill and one for the tip, as a percentage (such as 20 for 20%), plus a button to calculate the amount of the tip and the total bill including the tip.<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorUI.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-239\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorUI-614x1024.png\" alt=\"TipCalculatorUI\" width=\"382\" height=\"637\" \/><\/a><\/p>\n<p>A <em>Notifier<\/em> component displays\u00a0a warning message when non-numeric values are entered for the amount of the bill and the tip. See &#8220;<a href=\"http:\/\/appinventor.pevest.com\/?p=81\">Display Warning and Alert Boxes in App Inventor apps<\/a>&#8221; for a tutorial on the use of message boxes.<\/p>\n<p>The label fields below the button display the result of the calculation.<\/p>\n<p>The arrangement\u00a0of the user interface controls relies on\u00a0<em>vertical<\/em> and <em>horizontal<\/em> <em>layouts<\/em>. \u00a0Please see &#8220;Chapter 4 &#8211; Layouts in Detail&#8221; &#8211; <a href=\"http:\/\/www.amazon.com\/gp\/product\/B00KCZ81I6\/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=390957&amp;creativeASIN=B00KCZ81I6&amp;linkCode=as2&amp;tag=commonsensevi-20&amp;linkId=XFYYYJXNG32RKH4K\">available here<\/a> &#8211; to learn how to use the layout features to arrange components in the user interface. The layouts are arranged as shown in this components list:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorComponents.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-240\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorComponents.png\" alt=\"TipCalculatorComponents\" width=\"235\" height=\"527\" \/><\/a><\/p>\n<blockquote><p>If layouts are confusing for you, you may\u00a0just drag and drop controls on to the Viewer any way you wish, but by using the <em>Vertical<\/em> and <em>Horizontal<\/em> <em>Arrangement<\/em> layouts, the controls can be arranged in a more pleasing way and centered on the screen. Your best bet is to learn how to use layouts as they provide a way of creating nice user interfaces that work in both portrait and landscape modes &#8211; automatically. Refer to <a href=\"http:\/\/www.amazon.com\/gp\/product\/B00KCZ81I6\/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=390957&amp;creativeASIN=B00KCZ81I6&amp;linkCode=as2&amp;tag=commonsensevi-20&amp;linkId=XFYYYJXNG32RKH4K\">Chapter 4-Layouts in Detail<\/a> for a tutorial on layouts.<\/p><\/blockquote>\n<p>The labels used to display the calculation result are shown in\u00a018 point font size. To set the font size, select the\u00a0label in the Viewer and then enter a <em>FontSize<\/em> value of 18 (or other size &#8211; your choice) as shown here:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorPropertiesLabel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-242\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorPropertiesLabel.png\" alt=\"TipCalculatorPropertiesLabel\" width=\"170\" height=\"480\" \/><\/a><\/p>\n<p>For the text box data entry, use the <em>Hint<\/em> property to enter an example data entry, as shown below:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorPropertiesTxtBox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-241\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorPropertiesTxtBox.png\" alt=\"TipCalculatorPropertiesTxtBox\" width=\"186\" height=\"551\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>The Blocks Code<\/strong><\/p>\n<p>This tutorial introduces data error checking &#8211; specifically, if the user enters non-numeric values for the bill or the tip amount, then a message box is displayed. The blocks code, below, is too large to display full size. However, you can view an enlarged version by clicking on the image. Depending on your Internet browser, <em>you should be able to click a second\u00a0time to zoom in on the image.<\/em><\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorBlocks.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-243\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/11\/TipCalculatorBlocks-1024x502.png\" alt=\"TipCalculatorBlocks\" width=\"625\" height=\"306\" \/><\/a><\/p>\n<p><strong>How This Works<\/strong><\/p>\n<p>An i<em>f-then-else<\/em>\u00a0block is used &#8211; together with the <em>is a number?<\/em> block &#8211; to ensure that only valid numbers\u00a0are processed by the program. Note that there are two <em>if-then else<\/em> blocks &#8211; the first checks that the entered bill amount is a numeric value, and the second checks that the entered tip value is numeric. If either data entry contains non-numeric characters, a message is displayed on the screen about the problem.<\/p>\n<p>The calculation of the tip is straight forward. The percent value (such as 20 for 20%) is converted to a decimal fraction &#8211; 20 becomes .20 &#8211; by dividing the percent (20) by 100. The bill amount is then multiplied by the tip percentage. For example, if the bill is 30 and the tip is 20 (%), the tip is 30 x 0.2 or 6. (I am leaving off $ signs to make this tip calculator generic for any currency.)<\/p>\n<p>The total bill, including tip, is just the sum of the calculated tip amount and the original bill.<\/p>\n<p><strong>Key Features Shown<\/strong><\/p>\n<ul>\n<li>Use of <em>is a number?<\/em><\/li>\n<li>Use of error checking and processing<\/li>\n<li>Use of layouts<\/li>\n<\/ul>\n<p><strong>Downloads<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/source\/tutorials\/TipCalculator1_Final.aia\">Source code App Inventor \u201c.aia\u201d source file<\/a>\u00a0(App Inventor source code files have the filename extension .aia)<\/li>\n<li>Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select \u201cImport project (.aia) from my computer\u2026\u201d<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What the App Does This is a simple app to calculate the tip and total bill at a restaurant &#8211; or other service provider where a tip is common place. This is the first of 3 apps that will implement a tip calculator. Version 1 (this tutorial) introduces the basic app and demonstrates the use &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/11\/04\/a-tip-calculator-app-written-in-app-inventor-version-1\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">A Tip Calculator App (version 1) written in App Inventor<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[22,28,51,84,125,168],"class_list":["post-245","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","tag-app-inventor","tag-appinventor","tag-calculator","tag-error-box","tag-message-box","tag-showmessagedialog"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}