What is *your* opinion about helper blocks in App Inventor? (GSoC Project - User Feedback)

I think this is a very worthy Project because all App Inventor Users will benefit from it.

The ability to define one’s own constants, perhaps an enumeration of related constants, would be of interest to many Users too - especially those who have experience of other languages.

6 Likes

I think I bit off more than I could conceptualize here.

Here is a more limitted but more practical idea, copied from the code generators of old that grew code from data base schemas. (I haven’t heard much of these lately. Maybe they weren’t such a great ides after all.)

This need not even be part of AI2. A separate tool could generate draggable PNG files from a schema, given enough reverse engineering of AI2 PNG files.

This samples is based on the sample at https://json-schema.org/understanding-json-schema/about.html
to represent a person

 {
   "type": "object",
   "properties": {
     "first_name": { "type": "string" },
     "last_name": { "type": "string" },
     "birthday": { "type": "string", "format": "date" },
     "address": {
       "type": "object",
       "properties": {
         "street_address": { "type": "string" },
         "city": { "type": "string" },
         "state": { "type": "string" },
         "country": { "type" : "string" }
       }
     }
   }
 }

Given such a schema, it could be automatic to create generators, getters, and setters as AI2 procedures for such objects as person and address

Here are sample .PNG outputs for such a schema (I’m throwing in my project too, for safe keeping.) …

address_city address_country address_state address_street_address

make_a_address make_a_person person_address person_birthday person_first_name person_last_name schema_enums_samples.aia (4.6 KB) set_address_city Uploading: set_address_country.png… Uploading: set_address_state.png… set_address_street_addres Uploading: set_address_street_address.png… Uploading: set_person_address.png… Uploading: set_person_birthday.png… Uploading: set_person_first_name.png… Uploading: set_person_last_name.png…

(Some of the uploads did not arrive, 21 files was too much. You get the idea, right?)

The value of a schema to procedure blocks tool comes from avoiding the opportunity for tag string typoes in dict lookup and setter blocks, if one wants to do object oriented programming with dict blocks. Once these boiler plate setter and getter procedure blocks have been dragged into the blocks workspace, they become available for typeblocking. On the other hand, I have cluttered up the procedure branch of the Blocks pallette.
At this point, AI2 starts to look like Java.

As I said at the top of this post, I have bitten off more than I can conceptualize.

7 Likes

Wow that seems really cool!

So the idea is that you create a schema for an object in json. Then a separate tool uses that data to create draggable png files that represent procedures for accessing properties. Then you can add those pngs to your workspace to give you an easy way of working with your object (which is a dictionary under the hood)?

– Or alternatively AI could take the json schema directly and convert it into blocks.

That’s a really cool idea. And I like how you talk about using dictionaries as a kind of “glue” to form more complex data structures. Not something I had thought about before!

I don’t think this necessarily falls under my project, but I do think it’s really interesting! I’ll be thinking about this for a while haha. Thank you for sharing :smiley:

4 Likes

@BeksOmega Yes, I agree that supporting more complex structures isn’t part of the scope of your project.

@ABG We have explored using GraphQL with dictionaries to provide a schema-like constraint when working with remote services. Longer term I’d like to see some object support (e.g., structs or classes) since it is such a common CS topic to cover. Dictionaries was a first step in that direction and a more formal set of blocks for defining objects and their behaviors with the corresponding autogenerated blocks could be valuable. Also, as part of the PUNYA (http://punya.mit.edu) project we explored the use of Semantic Web ontologies to drive the app UI.

Thanks all for the great material in this thread.

9 Likes

Hi! I just wanted to let everyone know there have been a few changes to the doc based on feedback I’ve gotten. Rest assured, all of the information is still there! And the User and Component Developer sections remained basically unchanged.

Changes include:

  • For Extension Developers -> For Component Developers
  • For Open Source Contributors -> Implementation Details
  • Adding a section near the top of the doc explaining the organization.
  • Expanding the prefaces to each of the 3 main sub-sections.
  • Moving the “Future Work” sub-section to the end of the “Implementation Details” section.
  • Adding some basic information to “Implementation Details” about how component processing works.

I am also working on creating a data structure diagram to make that section of the “Implementation Details” more clear.


So tomorrow is the last day we will be actively soliciting feedback! If you have any final thoughts be sure to get them in :smiley:

5 Likes

Hello! I'm here to give a one-month update on my project. There has been a lot of work done and almost everything is working. But... I haven't gotten any feedback on my project yet, so by next month everything may change!

Here is a short video demoing how the system currently works (with some info for extension developers at the end!)

https://youtu.be/RK1G4u_WK7w

For those of you that are more text-oriented:

  • Dropdowns exist in the drawer. They are attached to setters and methods that use them, and they also exist as stand-alone blocks.
  • Dropdowns create valid code. They can be passed to setters/methods and compared against return values (eg getters).
  • Dropdown blocks are defined using Java enums. Which is slightly different than what I put in my design doc, but I think it works really well!
  • Dropdown blocks can be added to components using an @Options Java annotation or by using the type directly. So it's easy to upgrade components in a backwards compatible way, but future components can maintain a clean design.
  • The blocks-editor is completely backwards compatible. If there is a function that currently takes in a number (eg the Bounce function demoed in the video) you can still use the number blocks just like you have in the past.

Remember all of the above could change! ^^^

If anyone has questions or comments I would be delighted to chat :smiley:

20 Likes

excellent! keep up the good work!
Taifun

5 Likes

It looks great!

2 Likes

unbelievable :astonished:

I have a question.
Which emulator are you using? :sweat_smile:

3 Likes

It is indeed! It might be tricky to get working if you aren't used to working in the sources though. What I did is:

  • I ran the emulator using Android Studio.
  • Then I drag-and-dropped the MIT AI Companion.apk you get from building the sources (build/buildserver/MIT AI Companion.apk) into the emulator.
  • Then I connected to the emulator via the ai2 site.

But people that are more experienced using emulators may know an easier way to get this working.

Thank you for your question! =)

3 Likes

This is basically what we do here as well for testing App Inventor on different versions of Android when we don't have devices available (especially common due to the pandemic as we're all stuck at home).

One optimization you can make though is if you've installed the aiStarter package is to edit the run-emulator script in commands-for-Appinventor to start the emulator from the Android SDK rather than the prepackaged emulator. Then you can just use the Connect > Emulator menu option without having to separately start the emulator.

5 Likes

Thanks @BeksOmega, this is great. A couple questions that you may want to think about:

  1. How do the blocks interaction with "Do It"? Does it just show the underlying integer/string value of the block?
  2. How do they interact with comparison blocks, e.g., does Horizontal Alignment Left == Vertical Alignment Top given that both reduce to the value 1?
  3. Have you had a chance to investigate i18n, and if so can you show an example of that?
3 Likes

Great work @BeksOmega. Really looking good and helpful.

3 Likes

Currently "Do It" looks like this:
DoItResults
While the underlying value is 3. Note: I didn't add that on purpose, this is just what the default behavior results in.

Nope :smiley: Dropdown blocks actually return an instance of the enum type. So if the comparison block has two enum instances, it compares those. If it has one enum and one more primitive type, it gets the underlying value of the enum and then compares that against the other primitive value.

Here's an example where both ScreenAnimation:Default and MapFeature:Circle have an underlying value of "Circle":

Yep i18n is working :smiley: Here is the direction dropdown in (hopefully correct) Spanish:
i18n

The OdeMessages file looks like this:

directionOptionList = Dirección
directionNorthOption = Norte
directionNortheastOption = Noreste
directionEastOption = Este
directionSoutheastOption = Sureste
directionSouthOption = Sur
directionSouthwestOption = Sur oeste
directionWestOption = Oeste
directionNorthwestOption = Noroeste

But the suffixes can be easily changed to whatever you like.

Thank you for your questions!

8 Likes

Hello! I'm back again, this time with a two-month update on the project. There was a lot of exciting discussion this month about trade offs of different implementation of these blocks, but the main visible output has been adding dropdown blocks to a bunch of different components.

https://youtu.be/izyDTJWUwZ8

I would also like to announce that I've created a test domain so that you guys can try out these blocks =) Here is a complete list of the new dropdown types, and the components they are associated with:

  • AndroidPermissions - Screen
  • Direction - Ball and ImageSprite
  • EndedStatus - PhoneCall
  • StartedStatus - PhoneCall
  • ReceivingState - Texting
  • HorizontalAlignment - Screen, Marker, Arrangements
  • VerticalAlignment - Screen, Marker, Arrangements
  • MapFeature - Marker, Circle, LineString, etc
  • MapType - Map
  • Units - Map
  • TransportMethod - Navigation
  • ScreenAnimation - Screen
  • ScreenOrientation - Screen
  • Sensitivity - Accelerometer Sensor
  • ColorSensorMode - Ev3 Color Sensor
  • GyroSensorMode - Ev3 Gyro Sensor
  • NxtSensorPort - Nxt Direct Commands
  • NxtSensorType - Nxt Direct Commands
  • NxtSensorMode - Nxt Direct Commands
  • NxtMotorPort - Nxt Direct Commands
  • NxtMotorMode - Nxt Direct Commands
  • NxtRegulationMode - Nxt Direct Commands
  • NxtRunState - Nxt Direct Commands
  • NxtMailbox - Nxt Direct Commands

I would really appreciate people testing these blocks out if anyone is interested :smiley: In particular if anyone has an Ev3 or a Nxt (and some time to burn :stuck_out_tongue: ) I would really appreciate you giving them a look.

But all testing and feedback is very much appreciated!

A few notes:

  • This is my first time setting up a test server, so something may go horribly wrong hehe.
  • There is no new companion required as we want dropdown blocks to be backwards compatible with old companions =)
  • Currently the site does not support building apks.

I also have a preliminary document describing how extension developers can add these blocks to their extensions. Note that in the last post I mentioned:

Dropdown blocks can be added to components using an @Options Java annotation or by using the type directly.

But this has been temporarily removed due to the afformentioned tradeoff discussions :confused: I hope to add it back in by the end of the summer if time allows!

You should be able to upgrade your components as described in the doc and upload them to the test server to test them.


I'm looking forward to a good third month! If anyone has issues with testing feel free to comment here or shoot me a message =)

13 Likes

Congratulations, incredible work! Saves time and makes the App Inventor much more didactic.

4 Likes

I have three little updates to the test server this week!

  • New screen names block.
    Screens
  • New assets block.
    Assets
  • Limited flyout width.

The asset blocks are associated with an annotation (like the @Options annotation, except in this case it is @Asset). There is documentation about this for extension developers, and they should be able to test it out on the test server. Also note that I'm not sure if file type filtering will make it into the final version.

Please tell me how you guys feel about the limited flyout width! With the added helper blocks, the flyout was starting to get huge and I didn't want it to start taking over the workspace. Personally I think the limited width still allows you to get enough information about the blocks, but I want to hear what you guys think!

Again, if anyone has questions or opinions I'm always available =)

10 Likes

Will the new features also work in the iOS version?

Is Screen1 worthy of inclusion in the Open Other Screen option list?

I have yet to see that work out well.

As far as I know, yes! One particularly nice thing is that the new "Permission" block means you don't need to to type android.permission.WHATEVER, which will make the apps more compatible with iOS =)

@ABG Hmm.. would you give me some more details about this? As you know, I'm not a very experienced App Inventor user hehe.

I assume there is an issue with people trying to navigate back to Screen1 from a different screen, but in doing so they keep pushing screens to the stack? That may actually need to be fixed at a deeper level, and I'm wondering if anyone has looked into it before.

Now I'm also wondering if it might be nice to remove the current screen from the dropdown... any thoughts?


Thank you both for your feedback! I really appreciate both of you taking the time to respond =)