This is our first tutorial to teach you to how to build your own Android app with ZERO CODING. To do this, we use a special tool called "MIT App Inventor 2 (AI2)". This is a great tool invented by MIT university. This tool is developed to use build Android applications which are using for IOT (Interent of things) related services. As an example you can use AI2 to develop an Android application to control your Arduino board, send/receive data etc. Also we can even build some simple yet interesting games with AI2. So lets get started.
- Go to MIT app inventor 2 using this link
- Sign in with your google account
- Go to project and start a new project
- Now you are ready to develop your android app. There are some pannels that provide variouse facilities to you.The left most pannel is the main pannel which allows you to add buttons, text boxes, maps etc.
- In the middle you can see a preview of the app you are building.
- Right most pannel allows you to edit properties of each item that you use from left most pannel.
Building a simple Facebook browser app.
Now lets play with some functionalities of the AI 2. Here we are going to build a simple Facebook browsing app using web view function.
- Go to the pallet and insert a horizontal arrangement (Always drag and drop items from pallet to the workplace). Make the horizontal alignment to center and width to fill parent as shown in the picture.
- Now add a text label to the horizontal arrangement and set text size to 20 and change the label text to "Facebook browser".
- Then go to the pallet again and add horizontal arrangement and set width to fill parent and height to 300 pixels.
- After that go to pallet and add a web view on top of the horizontal arrangement.
- Then again add a horizontal arrangement to the layout and set both height and width to fill parent.
- Then add a button on top of the horizontal arrangement and set button text to "Go to Facebook" with fonts size of 20.
- Now we have finished creating our layout or the UI of the Android app. Now lets add some functionalities to the app. Our main goal is to create a facebook browser which simply go to facebook website when press the "Go to Fcaebook button".
- Go to the blocks section. This is the most crucial section of this tool. This allows to add lots of functionalities to the app. The good thing is we have almost all the basic Android function calls and we don't have to write codes to use them. MIT has introduced a block mechanism which is very easy to understand. You have dedicated function blocks for each item. You just have to drag and drop each functionality to the work area and make the app by combining them.
- Go to the btton functionality and add "when btton click" arguement.
- Then go to webview function calls and add "call webview > go to url" arguement.
- Then go to text tool and add text string and set it as "https://www.facebook.com".
- Now our completed funtion block will be as follows.
- Now we have completed our app. Lets install it to our Android phone.
Installing finished app to your Android device.
- Go to Build menu. You can see theere are 2 options.
- USING QR CODE
- Go to Google play store and download AI2 companion app. LINK
- Then select scan QR code option from build menu.
- Then AI2 will compile your app and provide a QR code.
- Then open the AI2 companion app from android device and scan the QR code.
- Then the app will be automatically downloaded and installed.(have to have internet connection on both android device and PC)
- USING .apk
- Select "save .apk to my computer".
- The send the downloaded .apk file to mobile device and install it manually.
- Now you have successfully installed your new app into your Android phone. Open the app and press "Go to Facebook" button. Then Facebook login page will be loaded onto your screen as follows.
Hope you got a basic understanding to use MIT App Inventor 2. Please make a comment if there is any unclear instructions. Also like our Facebook page to stay up-to date. Lets meet again with another tutorial.✌
0 Comments