Unchive - View your AIAs Offline

Open Source Development
1

Hello!

For the past few days, I’ve been working on a script that can view AIA files without having to log into App Inventor and then import the project. More importantly, it can view your AIAs even when you’re offline. While this is something that can be done by downloading and compiling App Inventor’s sources, it certainly isn’t beginner friendly. I hope to overcome these issues with a simple-to-install, simple-to-use software.

Check out Unchive!
(Unchive = Un-archive = Un-archive App Inventor Archives)

Unchive is an extremely light-weight page written in vanilla JavaScript. Everything is done client-side, so there is no need to run a server. Installation of Unchive is simple – all one requires is a working version of python – meaning you can run Unchive on your device to view AIAs offline!

image
image.png1920×938 115 KB

Unchive displays the components and properties of your AIA in a cascading waterfall-styled list, making it easy to navigate your project even without a mock preview.

AIA files can either be opened from the buttons in the title bar, or be passed as a URL in the page’s request parameters. I hope this will be useful in showing a preview of AIAs uploaded here in the forums.

image
image.png982×531 33.5 KB

Unchive can also be embedded in forum posts, making it easier to provide support to users without having to import the AIA in our own accounts.

image
image.png1920×889 95.5 KB

Also shipped with Unchive is a highly stripped-down version of Blockly (weighing in at only 109kB as opposed to the 3mB file that is used in App Inventor) with which one can view all the blocks in a project.

image
image.png1920×939 91.1 KB

image
image.png1920×939 55.7 KB

Invalid blocks/components are highlighted, thus making it easier for members of the forum to debug apps.

You can also export your AIAs as optimised AIVs (App Inventor View files). AIVs are JSON objects that describe App Inventor projects. These AIVs can then be re-uploaded to Unchive. There are two main upsides to using AIVs over AIAs:

  1. AIVs load much faster than AIAs, sometimes more than 4 times faster.
  2. AIVs strip projects of .jar files, meaning users will be able to share projects that contain paid extensions without actually sharing their sources.

Lastly, Unchive shows you a summary of your project

image
image.png300×595 17.1 KB

This summary can then be downloaded as a zip, which can be distributed further. I believe this feature is especially helpful for students who make apps with App Inventor, for the downloadable zip file contains screenshots of all the blocks in the project along with other details, thus making it easy for them to submit their projects for assignment evaluations.
Thank you @Peter for the suggestion to make this a feature!

image
image.png1920×940 53.1 KB

This project is open source, so feel free to take a look at the code at https://github.com/Kodular/ai-unchive/

Please let me know of any feedback and/or suggestions you may have.
Thanks!

Vishwas

30 Likes
2

As of now, the project uses Kodular’s simple_components.json and translations files. If MIT would be willing to fork this repository, maybe I can make it work with AI’s sources too. :smile:

6 Likes
3

@Vishwas you did a great job in making Unchive and making it open source. :+1::+1::+1::+1: It will be very helpfull for students and for instance Power Users.

5 Likes
4

Can I add a translation?

3 Likes
5

Great project @vishwas! :+1:

You really did a great job and it’ll be very useful for everyone. :slightly_smiling_face:

3 Likes
6

Unchive opened my AI2 .aia files just fine, zero install from your Kodular URL.
This will speed up project diagnosis for Power Users.

Minor bug - Comment bubbles on blocks are restricted to the area of
their underlying block, and can’t be dragged to make them more visible.

(added to new AIA Tools section of FAQ)
https://sites.google.com/view/ai2-faq-view/home

4 Likes
7

Sure, once I finish moving all text to the corresponding translations files.

3 Likes
8

This looks totally great!
MIT should adopt the bright Kodular colors too!
Thank you, that will be very helpful in going through all the projects I have gathered over the years.
Online I just clicked on the link and it works, but how do I to start it offline (In the train or plane for example).
Cheers, Ghica.

5 Likes
9

That'd be really great if it'll happen as the current MIT block colors look very dull.

2 Likes
10

Having a different color scheme in the Blocks Images helps avoid wasting time trying to load a Kodular export onto AI2.
(Though the AI2 text blocks could stand being more red and less blue, to reduce the crowding in the blurple area of the AI2 color scheme.)

1 Like
11

We'll take it under advisement when we start working on the UI refresh. There's a lot of material out there in the world, especially in print, that would be difficult to update in light of a significant change, but since we'll be looking at changing the layout, etc., we might as well revisit the block colors while we're at it.

4 Likes
12

Projects made with AI2 will definitely open in Unchive without any errors as Kodular has all the components AI2 has. However, my concern is with the properties and methods of said components. Take for example, the Form/Screen component. Kodular's Screen1 has a designer property called "Receive Shared Files" which is not present in AI2. So while an AIA made with App Inventor will open, Unchive will also show properties like these which are exclusive to Kodular. That might confuse some users because the properties they see on AI2 don't match the properties they see on Unchive.

I would suggest using AI2's simple_components.json file to fix this issue.
In addition, to make Unchive more compatible with AI2, it's ideal to use App Inventor's translations files to reduce the network call overhead. Kodular has more components than AI2, meaning the translations files are much bigger. The extra translations simply add to the bulk of the page if a user is uploading a project made with AI2, which can be avoided by using .properties files from App Inventor's sources.

Lastly, I would use AI's blocks colours for projects made with it, for it puts users off to see their blocks change colour when uploaded to Unchive. I think this is especially the case in students who might use Unchive to submit reports of their projects for evaluation.

It would help a great deal if MIT could fork this repository so that I can make the required changes there. AI2 users will then be able to download Unchive from the fork and use it without hassle.

Thanks for reporting! I'll take a look.

Thanks! Glad you liked it. To set up Unchive on your device, you can download/clone the repo from this GitHub link: GitHub - Kodular/ai-unchive: AIA Viewer for Kodular.
Navigate to the root directory of the project and run python setup.py serve in the terminal. Unchive should be up and running at localhost:8000/build

5 Likes
13

FYI, I’m planning on working with maybe a Discourse Plugin or Theme, that somehow adds Unchive integration with Discourse
Like, if you upload an AIA, it will both display the download URL but also the unchieve iframe

6 Likes
14

Here’s an Unchive bug …

The for each item block’s item variable still
appears as item in Unchive after it has been renamed,
though references to it are renamed.

See attached.

Screen4%20Button1
Screen4 Button1.PNG1327×549 53 KB

3 Likes
15

I’ve been wanting to do a similar project to create a lightweight App Inventor project viewer that can be embedded in web pages (including the REPL manager), so that we can preview and test projects without needing to load the project into someone’s App Inventor account. I think this would go a long way to helping others try out projects, especially our power users when they’re providing assistance to others. Let me know if you’d like to collaborate on that.

9 Likes
17

Is there any news on the Unchive front? I use it regularly. Today i wanted to generate a summary but it showed this an after the report never came.
image

It was just a small aia that i wanted to show as a sample.

18

Unchive was updated a month or so ago to support the latest dictionary and related blocks. Could you please send the AIA across so I can take a look into what's wrong?
Thanks!

2 Likes
19

Hi @vishwas ,

How can we configure it for AI2?

And, I followed all the instructions in the GH page but still I was unable to run the unchiver in localhost.

Is there any alternative way?

Thanks.
-Nisarga

20

Hey @Nisarga_Adhikary it is written in readme.md file
https://github.com/Kodular/ai-unchive/blob/master/README.md

21

I read that.