ICT 2ND PT REVIEWER PDF

MIT App Inventor 2 and Its Components App Inventor 2 1.​ Brief History of App Inventor 2 ​ A web-based application development environment that focuses on creating applications for mobile devices. ​ This project began in 2007. ​ Professor Hal Abelson was ins...

MIT App Inventor 2 and Its Components App Inventor 2 1.​ Brief History of App Inventor 2 ​ A web-based application development environment that focuses on creating applications for mobile devices. ​ This project began in 2007. ​ Professor Hal Abelson was inspired by the idea of block programming and the release of another major mobile platform - Android. ​ The early years of app inventor was done with Google but is now maintained by Massachusetts. ​ Institute of Technology (MIT) after Google Labs was closed in 2011. ​ Today, App Inventor 2 is widely used to educate young minds and beginners to learn the concept of programming and to create applications that can both run on Android and iOS devices. 2.​ App Inventor Designer Interface ​ To start using MIT App Inventor 2 go to this link: http://ai2.appinventor.mit.edu/ then create your account. Use your OLPS domain account in signing up to this platform. ​ Below is the basic interface of this application: ​ (A) Menu -​ Properties, Connect, Build, Settings, Help. ​ (B) Palette -​ User interface, Layout, Media, Drawing and animation, Maps, Charts, Data science, Sensors, Social, Storage, Connectivity, Lego Mindstorms, Experimental, Extension. ​ (C) Viewer -​ Canvas. ​ (D) Components -​ List of objects added to your canvas. ​ (E) Properties -​ Individual attributes/properties added/present in your canvas (viewer area). 3.​ Setting Up App Inventor 2 ​ There are 2 ways to set up your MIT APP Inventor 1. Install in your computer (download from the official website of MIT App Inventor then choose the operating system compatible with your computer https://appinventor.mit.edu/explore/ai2/windows 2. Access the official website then create your account and make sure that you have enough or good internet connection for this application. https://ai2.appinventor.mit.edu/  4.​ MIT APP INVENTOR 2 COMPONENTS (A) Layout Components – use to properly place each component on your screen. You can find these on the left panel under Layout 2 Basic Layouts ​ Horizontal Arrangement Layout - used if you want to place other components on the screen in a horizontal manner. ​ Vertical Arrangement Layout - if you want your components to be displayed in a vertical manner. Other Layouts Options ​ Table Arrangement Layout - if you want to place the components in rows and columns. ​ ​ Vertical Scroll Arrangement Layout - used if you want to place the components vertically, and if you want to allow the users to scroll up and down the screen. ​ ​ Horizontal Scroll Arrangement Layout - used if you want to place the components horizontally, and if you want to allow the users to scroll to the left and to the right of the screen. REMEMBER: ​ The size of the screen is in percentage for your layout. ​ Set the height and the width to 100 percent if you want to fill up the entire screen with any component. ​ Placing the elements is a lot harder than they think. It takes a lot of trial and error before successfully placing each component on the screen. ​ (B) User Interface Components -​ These are the building blocks of an application. -​ Tells how the app will look by its graphic design, typography, and colour. -​ It also establishes how people feel when using the app, engaging, and immersing them more in what they are doing. -​ it directs how users can easily navigate the application, and how fast they can acquire their needs. -​ To access these components, go to the left panel. By default, the User Interface panel must be open. Inside this panel, you will find a variety of components that you can add to your Project. ​ Button - a component that you can add if you want the users to trigger events or commands. This can also be your gateway to navigate from one screen to another. It can be modified by manipulating its properties. ​ Check Box - a component you can use to provide options for the user. It may be used to select some items on a grocery list or tasks from a task-managing app. ​ Date Picker - for applications wherein you have to enter your birthday for age verification, or to provide dates when booking flights or accommodations. ​ Image - used to display images on an application, such as the app’s logo or a user’s profile picture in a social media application. ​ Label - add text and labels on your application. ​ List View - user chooses his/her answer to a question from a list of possible answers. ​ List Picker - acts as a button and when clicked or pressed, a set of choices will be displayed for the user to choose. ​ ​ Notifier - a component that can be used as a manipulator for other component’s properties, such as changing a certain size of an object or lowering the volume of a sound.  ​ Slider - contains a thumb that can be dragged by the user. You can manipulate the look of the slider in the Properties panel. a component that can be used as a manipulator for other component’s properties, such as changing a certain size of an object or lowering the volume of a sound ​ Password Text Box - a lot of applications require users to create an account or log in using their personal information before they can continue using an application. One of these credentials is a password. ​ Spinner - Similar to List Picker and List View, the Spinner component allows users to choose items from a list by expanding the drop-down button. ​ Switch - making an application that triggers the use of your phone’s flashlight or allows the users to activate either the app’s light or dark mode. This is possible by adding the Switch component. ​ Text Box - ask for a user's input, use the TextBox component. This component looks like a white rectangular object where users can enter what is asked of them. ​ Time Picker - necessary for booking or reminders apps as it allows users to select a time. ​ Web Viewer - allows you to display web content in an application. Basic App Functions, Decision and Looping, Adding Sound/Animation, Conditional Statements 1. Basic App Functions Block programming ​ Considered the best way to learn programming as a beginner A.​ Drag-and-drop feature B.​ Predefined library of blocks of codes  ​ Teaches beginners the required logical and computational thinking skills, which are essential in programming. Code ​ Term used to describe text that is written using the protocol of a particular language by a computer programmer MIT App Inventor Built-in Blocks ​ Control blocks​ Link ​ Logic blocks​ Link ​ Math blocks​ Link ​ Text blocks​ Link ​ Lists blocks​ Link ​ Dictionaries blocks​ Link ​ Colors blocks​ Link ​ Variables blocks​ Link ​ Procedures blocks​ Link 2. Decisions and Looping Control blocks ​ Data structure used by operating systems to store all information about a process Applications ​ Contain processes that require data to be evaluated numerous times. Text block ​ Contains all the blocks needed to manipulate Text components. ​ To set the value for the equivalent, add the blank text block and attach it to the block that sets the text blank equivalent Label component. Loop Blocks ​ Repetition method 3. Adding Sounds/Animation Sound ​ Plays a big role in engaging users to use an application. ​ Helps the users know what to do, effectively delivering the necessary information. ​ Evokes emotional responses and cues the mood of what is going on in the screen, making the audience relate more to what they are doing. Sound effect ​ A sound that acts as a cue and creates a dramatic presentation for the components. Background music ​ Music that sets the mood of what is being displayed on the screen. Animation ​ A series of drawings or frames that create an illusion of movement. ​ Contributes to engaging the users. ​ Seeing the objects move on the screen sparks their interest. ​ Makes the application livelier and more unique by creating a distinct look. 4. Conditional Statements ​ To instruct the computer on the decision to make when given some conditions.  ​ These decisions are made if and only if the pre-stated conditions are either true or false, depending on the functions the programmer has in mind. Basic Calculator Setting Up the Basic Calculator’s Interface 1.​ Open a new project in App Inventor 2. 2.​ Add a VerticalArrangement layout as the main layout. 3.​ Add a Label component for the application’s title. 4.​ Add two TextBox components for the user input. 5.​ Add a HorizontalArrangement layout for the buttons. 6.​ Add a Button component. 7.​ Duplicate the button. 8.​ Add a Label component for the output. Topic 3: Adding Function to the Basic Calculator 1.​ Click on the Blocks tab. 2.​ Add a button event. 3.​ Add a Math block for the addition operation. 4.​ Add the Click event block for the subtraction button. 5.​ Duplicate the entire block. Topic 4: Testing the Application Using AI Companion 1.​ Download the MIT AI2 Companion app on your devices. 2.​ Connect the project to the companion app. Grade Generator Setting Up the Grade Generator Interface 1.​ Open a new project in App Inventor 2. 2.​ Add a VerticalArrangement layout as the main layout. Height: Fill Parent Width: Fill Parent. Align Vertical and Horizontal: “Center”. 3.​ Add additional Label components. 4.​ Add Text boxes for each quarter, equivalent to 4 text boxes. 5.​ Add 1 button for generating the final grade. 6.​ Add 2 HorizontalArrangement layouts: 1 for Final Grade and 1 for Equivalent. 7.​ Insert 2 labels on each HorizontalArrangement. 8.​ Add Control blocks to evaluate the final grade. 9.​ Open the Text built-in blocks. 10.​ Add new test conditions or comparison blocks. 11.​Repeat the same tasks until all equivalents are done. 12.​ Test the application.