Android programming made so easy even your grandma can do it pt. 1
My programming path begun when I got my first PC 18 years ago and it was a big thing at the time. Best Christmas present you can imagine, until the first rule followed: “Only an hour per day, with software that I will install.” So everything had to go through censorship from my dad.
One of the few “games” that got approved was Logo the frog. Interactive programming language, where you are moving the frog over the screen with programming commands.
You can still try it out. Paste the following line, click run and watch the magic happen:
Penup forward 200 left 90 forward 200 left 45 forward 100 Pendown left 80 forward 200 right 80 forward 100 left 160 forward 150 left 100 forward 200 right 80 forward 100 left 160 forward 150 penup right 180 forward 200 pendown forward 150 right 160 forward 100 left 80 forward 300 right 100 forward 150 right 160 forward 100 left 80 forward 300 penup left 80 forward 50 left 155 forward 350 left 180 left 45 forward 100 pendown left 80 forward 200 right 80 forward 100 left 160 forward 150 left 100 forward 200 right 80 forward 100 left 160 forward 150
But I know you didn’t come here for this.
The tool that we will really be exploring in detail through this course is MIT app inventor. It helped a lot of my friends start programming and you can actually have something useful at the end.
App inventor is a visual blocks language, for building android apps. It supports drag and drop of components -> blocks in form of puzzles. Each block is designed to perform specific task, interact with phone sensors, calculate the mathematical or logical operations and so on.
This is how the blocks look like when connected together in a project.
In this series we will cover basic grounds how the blocks work, which blocks can be combined together and how to modify them. We will end up with the fully functional application and knowledge how to prepare development environment, debug code, compile it and run on the phone.
Tutorial is meant for complete programming beginners, so topics will be explained on a basic level that everyone can follow. Let’s start exploring.
Getting familiar with the interface:
App inventor can be found at http://ai2.appinventor.mit.edu/?locale=en. For successful login you will need to create google account, in case you don’t have one yet, or use your existing one. Accept the terms of service and you are ready to go!
App inventor supports live debugging, previewing the app and building it, all with the click of the button. These options are available at the top of the screen, to which we will return later.
Let’s start with creating our first demo project.
After creating and choosing the name, we will be greeted with viewer and palette full of blocks used to build our apps. For example, some of the block categories that we can choose from are:
- User interface
- Screen Layout options
- Media components
- Animation and drawing blocks, etc.
In our Viewer in the center of the page, we can preview all of the components dragged on the screen and arrange them into layout. It will give us basic preview of how our app will look like. Each component can be modified by applying properties to it. but we wil modify the looks later.
Let’s start with dragging one button and label from palette in the User Interface category:
After dropping, it will appear on the preview screen and in the components list on the right. It is wise to rename your components so you will know down the road which component you are working with.
Rename your button to btnMyFirst and label to lblMyFirst. Congratulations, you created your first User Interface! :)
At this step, we would want to view application in action on our phone, right? Go on and install MIT AI2 Companion from google play on your Android phone. The phone needs to be connected to the same network in order to collect your application.
Run MIT AI 2 Companion app on your phone, then go back to App Inventor on your computer, select the option Connect at the top of the screen and click AI Companion. QR code will be generated, scan it with your phone and voila, your first app is running on your phone! We configured our development environment and are ready to start.
I hope you found the first part interesting enough to follow and let me guide through the stepping stones to the beautiful world of programming. Let’s start exploring.
If you have any trouble with your app experiment, feel free to ask for advice in the comments.
Great article, it's very nice to see people creating more and more tutorials about these kind of subjects, especially for those who think programming and creating apps is only possible when you are an expert.
I have little experience with coding and app development, and I can say it's great when you work for hours to build something, when you finally finish and when it actually works.
Great article, keep creating awesome content, and best of luck!
Thank you, I am glad you liked it.
buahahaa xD i used a similar title on my last post xD
so that means that the new rating scale of dificulty is from 10 to grandma? :)
This comment has received a 0.07 % upvote from @booster thanks to: @shehryar.
Not sure about that ^^
Let her try it and decide by herself :)
Nice tutorial, but I think it's best that I don't show this to my programming teacher. He gets really mad over UI programming like this.
For sure @disbelieve If you have ever wrote at least hello world by yourself, this tutorial is not applicable anymore :) . This is for someone, who never saw the code before and wants to try it.
As a processionnal programmer, I understand the need for A "noob friendly" interface, but I believe the way you write code is not "noob friendly" because in the end you are writing code, it's just harder than actually writing it. it would be much more efficient to write it with help around. This way you can actually get used to writing instead of the blocks. And then when you transition to actual code with actual syntax you will have to learn the syntax and nothing more. I mean with the blocks too but it will take more time.
I feel like this is inneficient for not so much of a gain.
By the way if you like technology I'm writing about it, you might like it :)
I agree with you @howo, that this is not useful for production software and I am not using it for that :), but for someone, who is starting with it, it is much easier to concentrate on logic and flow without looking for a missing semicolon in the code for an hour. Someone still needs to understand how for loop works, before he can write it. And learning the syntax when you understand the way of logic is much faster.
I'm not a grandma, nor am I a grandfather but I am old enough to be one. What am I?
As much as I would like to take the time, at this very moment, I will have to simply bookmark this in the only way I know that benefits all...well as many as possible. ~smiles~ bookmar...er resteemed, upvoted and followed. Please don't feel obligated to reciprocate. Your contribution here is more than enough reward for me.
~may all hatred cease...let there be peace~