How to use MIT App Inventor 2 course | Een jeen - | Skillshare

How to use MIT App Inventor 2 course

Een jeen -, Learning anywhere

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (33m) View My Notes
    • 1. Why every App Inventor 2 beginner should watch this course

    • 2. Why App inventor is the best no code app development platform

    • 3. Understand how app inventor works in just 4 minutes

    • 4. Create your first app with app inventor 2

    • 5. How to test your app while using App Inventor 2

    • 6. Why do we need blocks

    • 7. What is a screen why is it needed

    • 8. Advantages of the components tab in App inventor 2


About This Class

Even though App Inventor is the easiest no-code app development platform many people get confused while visiting its website for the first time. There are two major reasons behind this

1. You may be confused as you are completely unaware of How programming works.

2. You may be confused due to the numerous options available on its website.

The main aim of this course is to remove that confusion from your mind and help you to develop a good understanding of how the App inventor works.

***This course is completely focussed to help you get started with app inventor easily***


1. Why every App Inventor 2 beginner should watch this course: Even though have inventories the easiest no code app development platform, many people get confused while visiting its website for the first time. My journey with App Inventor do is no different. I felt the motivated so many times because of not being able to understand it. What I observe is that usually there are two reasons behind this confusion and demodulation. You may be confused or demotivated because you are completely unaware of how programming works. Or you can also be confused because of the numerous options available on its website. The main aim of this course is to remove that confusion from your mind and help you to develop a good understanding of how App Inventor works. Before further explanation, I would like to make it clear that this goes completely focused to help you get started with App Inventor easily. There are few books available on Amazon. There is a documentation from bankable and recently abstinent or has also created new documentation. But none of them will help you because as a non-programmer, It is not something that you actually need. You are not familiar with the process of app development and you haven't figured out how to adhere to this new environment. So first of all, it is very important for you to know the answers for questions like, what is this platform App Inventor to? What is the procedure of developing apps? If I have doubts, then where should I look for solutions? Once you have the answers to these few cushions, then you can use this platform with full confidence and without any confusion. In addition to that, you will also have a guided path, will look for solutions and go further with your app project. I will help you to find answers to these important cushions. By following me, you can cut short the time required to learn about the platform. A wide and lot of struggle and start creating apps. How already created many courses on App Inventor, like MIT App inventor to advanced course. But none of them is directly oriented for beginners. So this time, instead of helping the fellow App Inventor's, I wanted to help people who are new to it. I want you to take the full benefit of these new tutorials and not miss the opportunity. So enrolled in the course right now. 2. Why App inventor is the best no code app development platform: up inventories and no Cord AB development platform created by a mighty university. It has been created using Google's programming language called Block Lee. I believe after Android Studio Up, invented to is the best platform to create 100 APS. And in this video, I'll explain why I am I so confident that is the best platform. To understand its importance, you have to first understand how programming works. In order to perform different operations on your computer, you need to learn programming languages like Java, sea placeless or python. It may take a long time to learn these languages and to use them efficiently in order to write a program, you should have knowledge about different keepers operators on other programming elements about from that usually a white typing mistakes known as syntax errors and arrange the program in a proper sequence to be executed ble. If any off these mistakes exists in the program, then it cannot be executed on your computer and as a result, you have to spend a lot of time finding and fixing those errors. However, in APP inventor, there is no chance for such errors to exist because here we use graphical blocks instead of typing the programming statements. Blocks are very simple to understand. They look like pieces off puzzle, and you have to just snap two blocks to create a programming statement. APP Inventor has a simple interface, which makes it easy to understand, unlike the Android Studio. Moreover, ID's that is in the greater development environment like Android Studio are very difficult to set up. Whereas TAP in winter does not require any set up, you have to just go to their website, log in with your Google account on, start creating a project. It is a cloud based to have up which towards your projects in the cloud database and allows you to access your projects on different devices. Advantages off up in winter over other no cold up development platforms, unlike other no code of development that forms happened under allows us to create APS from scratch. Moreover, you have the ability to design the user experience. You also have control over each and every competent, which may not be available in any other no called up development platforms. You can also use other services like Google translate a B I, Microsoft Emotion, recognize er through a Web FBI confident you have got variables less and much more in a single sentence. Up in vendor is a no cold up development platform with the flexibility closed toe android studio. 3. Understand how app inventor works in just 4 minutes: the process off. Creating an app with APP inventor can be divided into four parts. First he's designing. Second is connecting the blocks third East testing, and the final part is publishing by the way, toe use up in middle. Do you need to sign in with a Google account? Hands. If you don't have a Google account, then please do create one. It's very easy talking about the first pot to design and up Using APP. Inventor. You have to make use off different confidence. Some confidence are for user interaction like button, which went up or click allows the after perform any function. Some are used to arrange and align other competence for a better look and a good user interaction like horizontal arrangement. Competent medical arrangement. Competent and more some confidence are used to save the data like 90 db. Some are used as sensors like block pedo meter etcetera. So in the design section, your drag and drop different competence that you want to use in your art project. And then you change their default properties and align them properly for a good design. Talking about the second part anything. The blocks every competent has different feature, which we want to customize and use in our app. In the block section, you can manage the features off the competence which you have added on the screen. In addition to the blocks off different competence. Some building blocks like mad blocks billions variables less text blocks are also available . That will help you to manage and customize the use off different competence. A combination off blocks is used to perform specific us. For example, if you want to change the background off the app when a user clicks a button, then you can create such a task. Here in the block section, using a few building blocks and the blocks off that button instable words, we are going to use blocks toe communicate with a mobile phone to perform specially us our operations. Talking about the third park. Initially after we have completed designing and connecting blocks be a gym. Everything is perfect. But once we does the app, it is usual that most offers will discover many errors. You need not feel bad about the errors because they are common. However, you need to find a solution and eliminate and enter for your app to run smoothly. The process off developing an app is the cycle of these three steps. It's often essential to repeat those steps again and again, to design the A properly and to eliminate all the errors because no one can develop a perfect up within a single attempt. In app. In vendor, you can easier just the up with help. Often a I companion, A. I companion, is an and right up, which you can download at the play store. It allows you to adjust any off the projects as many times as possible without downloading it. And finally, we are going to talk about the final part that is publishing the app after several alterations off the previous three steps human finally, how developed a perfect up, which is ready to be shared with others. Sharing Europe by uploading it to cloud services like Google Drive is okay if you're sharing it with your close friends and family members. But if you're wanting a large audience to download your app, then it is better to upload it to a marketplace like play store, where they will check your up and make it easy for a large number off Android users to discover your app and install it on their devices. You need a Google play console account to publish your app to play store. It costs one time fee off about dollar 25. There are even other platforms like the Amazon App store, etcetera if you want to publish your app for free. So this is a brief explanation off how to create apse with up in winter. 4. Create your first app with app inventor 2 : Welcome back to the second video in APP Inventor Beginner Series. In this video, we will actually create an app using up inventor. So first of all, what you have to do is go toe the website off APP inventor and then you need to sign in with your Google account. If you don't have a Google account than please to create one, you will find a blank and dear space after signing in. It is a project area where a list of projects that you create will be available, but as off no as we have not created any project, and it's the first time that you're visiting this website. It's completely black. So in order to fill this blank space, you need to create products. So let us create a project here on the left hand side. You how? Start new project button. Click that button and now it will open a pop up where you need to add a name for your project. There are some rules for adding a name to your project, the name of the project and arthouse spaces between the words or let us it cannot how a special character like percentile hyphen or anything else like that. It can only contain letters Numbers on underscores our added the name as a counter. So we will be creating a counter up where, when your tap a button, the value off a number will be increased. It'll be very amazing to know how you will be using simple mats in this project. So for adding the name, it will open the project. And here on the left hand side, we have different competence in the user interface section, and from that drag a label competent. So this is a label confident drag and drop it here on the mobile screen that your scene. So this is a label competent, and now it's a part of the app that we're creating after we have that and brought it here. And this is the way you should add components in your up in order to include it offer. Adding this label letters are another competent, which is a button. It is available here at the top. Drag it and drop it here when the label be about the bottom. If you have this misplaced and if the Baron is at the top off the label, then please drag it below the label one competent. So this is Ah, simple way off. Just moving the competence within the app. So this is a part of design, right? You move the confidence, arrange them properly. All this stuff is a part of designing The level component here is used to show any text to the user on the but incompetent is used to know the interaction from the user. So whenever the user clicks are Napster button, we will get to know it from the block section. And there we can do some other background stuff, which I will explain it later in this lecture. The interface is not so good. Let us make some adjustments to it. So in order to make the adjustments, first of all, come here. On the right hand side of the screen, we have the competent stop. And here we have the screen. One click this screen one and then be how you have the property. Stop where the properties of the screen one competent are visible. From there, the align horizontal option is available. Just changed that from left to center. It was actually left. We have changed it to center and you can know the changes directly visible here on the phone screen. The competence were actually on the left hand side before we have changed the horizontal alignment to center, and now it's on the center off the screen. In the same, they changed theological alignment to center, and this is how I need the up to be as off. Now, the button on the label present at the center off the screen offer that. Select the label one competent. You can select the competent right here on the screen. Or else you can select it here in the competent. Stop. For example, if I select button one now with the property soft but on one will be visible. If I will select the label, one properties off label one competent will be visible. I don't even select this in the same way the competence within the phone screen. So let us change few properties off the label, one competent in a property section. Let us personal change the phone size off this label. One confident I want to make it a D. It is actually 14. Let me change it to a T and OK, don't get confused I will show you what I actually want. So there is a lot of text and hence most of the Texas no visible because we have increased the phone size more than the permissible limit. OK, however, come back to the property section and here in the next section, just replace this text that is extra label one with ah, number zero and click enter. So this is what I wanted. Hence, that's why. How? Choosing 80 as a phone size offer. Changing the properties off Label one now select button one. And here, first of all, let us change its text, do, uh, less symbol. So how changed it and offer changing its, uh next Let me change its foreign size to 25. Yeah. Now it seems pretty good. You can see the addition button on. Even the text are clearly visible, and it is easy for the user to use it. So this completes the design process off the app. We finally have a look. That is good enough. The competence are clearly visible and easy to use. Now notice test over. In order to test it, you need to download the A I companion out created another tutorial Where how explained about how to download the A I companion on what are the different other methods which you can use Do dust the up The link is provided in the description You can watch the video and come back here after downloading the A I companion are choosing any other methods for testing the app So he always over up. And this is an order emulator that I'm using. If you have watched that video, then you must probably know what an emulator is. The design of a rap looks good and when I click this button you can see that it is not functioning. It is not functioning for an obvious reason because we haven't yet added any functionality using the blocks. So let us go to the block section in order to add the functionality using the blocks. So I am back. Teoh, inventor And, uh, let me go to the block section Here in the block section on the left hand side you have building blocks and the blocks off different confidence are available. Usually these blocks were not be visible All together you need to click the categories and once you click the category, you will get the list off blocks that are under it. So for control blocks, if I want it that I had to click this category and if I want a math block, then I had to click it. Similarly, I need to select the competent to access its blocks. You can clearly see here the blocks off the label one competent. They are very simple. They just provide the information off the background color are just allow us to set the background color so the properties off their confidence are the features of the proper confidence can be found or can be changed here in the block section over selecting the label one competent I need to drag this block called set label Wonder Ext. Law. So this block will actually allow me to change the text that is being shown with off this label. One competent, you can also get to know about what a particular block does by just keeping the cursor over it. And after of this right in this block, I need to drag another block, which is Ah, the more important one. It is a block called when but in wonder Click so select the button one competent and dragged this block, saying when but and one dot click This block is known as an even block, and it will go from the different activities that are given to it whenever the user clicks the button or taps the button. So you need to dodge whatever the operation that you want to perform to this block in order for that Operation toe happen whenever the button will be clicked over that I will select this Matt Block category and from here I will drag this addition block so it will turn into some off tuna. Miss, that are provided in this sockets and I will attach it to this block which is set label one . Not next to initially what I want to find here or what I want to connect here is the current number being shown with a label one competent in orderto know the number that is being shown with the label incompetent. You need to use a block seeing level one dot text This block will written the value off the number or the X that is being shown with the help off label one after that other main goal is to increase the value off. The number by one went over the button one that is the addition. But, um is being flicked. So I need to add in the socket on number one so back to the mat block category and dragged this ah block, which is representing the number zero, and you need to edit it and change its value to one. So now you can clearly understand what this complete block is doing. Whenever the button one will the clicked, it will trigger an operation where the text off the label one will be changed and the value that it will replace will be the value off previous number increased by one. So after adding all this blocks, we need to test the app. So let me open the emulator. And now let me click the button one, and you can see the value off the label. One is changed. It is performing the addition operation. So hooray! It's working and you have created a simple counter up. The components have different features. You add them in your up when you need, then you arrange them properly and change their properties to ensure a good user interface . You add different competence to use their features and to use their features. You need to go to the block section. Here you will use their blocks and create different operations. And this is what we have done in this tutorial. Firstly, we have added the button and label competence. Then we have aligned them to the center off the screen. Next we have changed their properties such as text and phone size. There we have moved to the block section to create an addition. Operation hope you have found it easy to understand the process off Creating the app using APP Inventor will be using the same method to add more and more features to our 5. How to test your app while using App Inventor 2: downloading the app every time to just find out whether everything is working properly or not is a tedious process. So you need a more simple, easy and fast matter because the app the good thing is up in vendor has a solution to this problem. In the header section off Happen Vendors website There are so many drop downs on the 2nd 1 from the left hand side is the clinic option. There you have got three ways to dust. The app one is through a I companion Second is toe emulator and the last one is through USB connection. A companion is a mobile. You get downloaded from place door for free. To use it, you need to first select the air companion option in the website and it will open a pop up with a cure cord. Open the app in your mobile phone and then enter the court either by typing are by scanning that your code and Lola you're up will open within seconds. The condition for testing the app using the air companion is that your mobile phone and the computer on which you are using the APP Inventor website should be on the same by fi network talking about a secondment there emulator. If you don't have a mobile phone, then don't worry. You can test it right on the computer using the android emulator. There is a detailed guide on how to install the emulator on happened Render step site. I will provide that link to you. Emulator is simply an android phone used for testing the app on your computer screen. Well, using an emulator you need not bother about a mobile phone and the WiFi network. All you need is to just quit the emulator option in the tenant, drop down and it will open the app within a few seconds. However, it may take more time compared to the A I companion. Now, let us talk about the last minute off testing testing through USB connection they used the option is pretty much comfortable for testing as it is fast and doesn't require you to add any code. But this misery small complex to set up on a few mobile phones. Two ucsb option. Everyone needs to download both the companion and also android emulator. And after that, you need to enable USB debugging on your device. I would like to find out few of the known issues that human encounter while sitting this test emitted. Finding out the years really working option on a few mobile phones is a bit tricky, but a quick Google search like how to enable USB debugging on exploits that bow will mostly help you. You may also need to install a USB driver on windows. For some, mobile phones have been wonder has created a good documentation to help you. I would provide this link so that you can look into it while setting this testing method. 6. Why do we need blocks : blocks, blocks, blocks. What are they? Why do I need to use blocks? Gun, my absently work offer, adding the confidence Every non programmer will come across these types off cushions while starting to use app inventor. In fact, I'm myself was confused about the Brock section at the beginning. So let me help you clear all those starts when he used any app. You're just seeing the things which are visible on the screen. But there is a lot of programming than in the beforehand by the developer, which commands the app to work in that way. For example, let us assume you have flicked a thought button in an E commerce staff on the next thing, which is visible on the screen off your phone are mobilised off items that you have added their individual costs, total costs, any tax and fuel the recommended products. If you break down what the APP is doing here, then you will realize that it is collecting the info off the selected items. It is collecting the information about the quantity off each item. Then it is calculating the total cost and also the taxes it is refining. The recommendations based on the products in your cart and much more so the guard page and not show the information. If all these operations have not been programmed by the Abdullah Per wait, you may be thinking APP inventories and no called Abdullah Bin platform. Then why should I need to program the app? Yes, it's true that you don't need to program, but as you are the mind behind it, you should be able to command it to work in the way that you want. And that is why happened. Winter has blocks blocks already made puzzle like pieces, which are very easy to understand and command the phone. The main application off blocks is that it eliminates typing off code and hence errors. You do mistakes in typing known as syntax. Errors are eliminated. Every operation in the APP is dependent on the user's indon. In fact, the opening off the APP is also due to his art. Her invention off using it in happened wonder do we can allow the user to interact with help off user interface competence on growing confidence. The interaction is then directed by the even blocks like when Butterman clicked, do when screen one initialized do and more. After an interaction takes place, we want the apt herbal from specific operation connected to it on operation is created using a combination of different blocks. And then we connected to an even blocked so that it will run every time when a particular interaction has taken place between the user on the APP. Broadly, the type of blocks can be classified into two categories. Building blocks and competent locks. Building blocks are available to help us in various operations, like comparing this other than my logic blocks arranging this is them a lists adding, which is on my mad loss and more. But as the blocks of different competence are helpful in using their features, the confident logs can be further glass find as even blocks method blocks commands, expressions and more. A combination of different blocks are used to create operations like calculating percentage , moving to a new screen, saving contacts, opening of a page, playing a video, capturing an image and whatever you want the up to do 7. What is a screen why is it needed: any APP project can be divided into different screens. A screen is something like a paid off a book. Every new page has new next on new information in a similar manner. Every APP has different screens, and every screen has different features, which means you can are completely different competence and blocks in it. For example, an e commerce app has a separate screen for a catalogue or list of products, another screen for card and caught items and yet another screen for order placement. Another example is off game app. A game APP has different screens for a single player game, multiplayer game and for a leader boat and obviously another screen for, ah, home page leading to anyone off these three screens. In the case of a book, you have different properties to choose, like phone size, foreign type colors, margins and more. In a similar way, you have different properties for a screen to choose, like selecting the alignment, changing background color or image screen orientation, team ideo and more other facts about a screen. Every APP has a default screen that is screened one you need to create other screens for other purposes. You cannot change the orders off screens. Hence, you should be careful to decide whether you are going to use screen one as a home screen or for a splash screen or for a direct application screen. One has more properties when compared to other screens, like adding up name, adding icon for the up and more. Moreover, while all other screens can be deleted screen, one cannot be deleted information from one screen toe. Other screens can be shared using blocks. However, the type of information to be shared is restricted to values. The value shade from other screens can be used for deciding the type of operation to execute in the current screen or for any other similar purpose. 8. Advantages of the components tab in App inventor 2: in the design section, 1/3 up from the right East named as the competent Stop. You have used it to select the confidence that you have added onto your screen and edit their properties. But have you ever thought, Why is it needed if we can select the competent right in the weaver? Here are the three applications off components Stab confidence three. It describes the sequence off different competence in the screen. In the most desirable format, the Competence Tree starts with the name off that particular screen. Each new screen has a different, competent street. The second application off the competent stab is naming the competence and the confidence stab we can you each competent a different name. For example, here we have Button one, which we can replace it to add button. Renaming a competent is very helpful, especially while working in the block section, because every block that you add will create a proper meaning when combined with other blocks. For example, see this blocks when our button is clicked, set the count text to count next less one. So this is how many abilities the application of the competent stab is the leading. The competence. To delete any competent, you need to select the competent and then click the delete button available in this stop. It will ask for confirmation before you are going to delete the competent. So these were the three applications off competent stop and hope you will apply all these things while you are actually working with APP inventor, because it will truly reduce your time while understanding the block that you have use and also arranging the competence that you have added onto the screen.