Plants4Future – Intelligent gardening with SAP AppGyver – No Code Challenge

[patty_1982]

Hello to low-code programmers and pro-code programmers,

Today, I am here because I have accepted the #SAPLowCodeNoCodeChallenge. After so many  years of programming and many code rows, I had a lot of fun trying SAP Appgyver. When I created the first view using the Composer Pro, I have to admit, my first thought was, "okay guys, where is the expert view button to switch to the code editor?!??" 🙂 Yet, I told myself… "you can do it," and…I did it, so here we go.

 

Purpose

The COVID-19 pandemic and quarantine times made me adopt a puppy, my little Joker. Since then, I have spent most of my time closer to nature, especially enjoying the lights of dawn, soaking up as much vitamin D as I could. Before starting my work day, I used to go on long walks on roads having beautiful landscapes, which refreshed my mind the best.

My little Joker

Most of the time, I really like the plants and flowers I see, and I try to identify them because I would love to have some of them in my backyard garden. In addition to the name, I always wondered, what should I do to keep them thriving?
Unfortunately, I am not a botanist; ironically, I am familiar with Fiori (oops, SAP Fiori 😄 ). One day, talking with my colleagues, I had the idea to let AppGyver help me take care of my home "garden", so I created Plants4Future.

My Balcony

Plants4Future

The application I developed using AppGyver allows me to recognize a plant by taking a picture of it or retrieving information by writing its name manually if I already know it. In this way, I can add it to a virtual garden storing a lot of information (e.g., how much to water it).
Its mechanism is straightforward; let me explain it to you:

 

We take a picture of the plant then the app calls the Plant.ID APIs: if it can recognize the plant, it retrieves the botanical name. Otherwise, an error message will appear on the screen.
A second API will be called using the botanical name retrieved. In this way, we will be able to get other useful information about the plant. We are not forced to take the picture; we can choose it from our device gallery or jump this step by writing the name manually.
In this last case, only the second API will be called because we don't need to recognize any picture (the item will be saved without a picture).
In any case, if you select/take the picture and the first API fails to recognize it, but you know the plant's name, you can write it manually. After calling the second API, the app will be able to add the plant with a picture inside your virtual garden.



The app includes:

• Home: it is the access point of our application (to notice, the picture you are looking at is one of mine taken during my hiking activities 🙂 )

Home Mobile Version

 

Home Browser Version

 

• Spaces: we can create a virtual garden setting in our home. It is nice to organize our plants by spaces.

Spaces

 

• Add Plant: we can recognize plants and store them in our virtual garden on this page.

Add Plant

• My Plants: we can explore our garden, and the app will show us if our plants need to be watered. Once we switch to "watered" status, the information will be saved on our table, taking note of the operation date. In this way, automation created on Airtable will check if the last day on which we watered the plant is less than the actual date. If it is true, the flag "watered" will be reset.

My Plants

Plant Detail

Plant Detail

 

We are already thinking about new app features, such as tracking how many times I water my plants, managing the push notifications, and thinking of my dog, I would like to know if they are dangerous for pet animals. It could be handy information for animal lovers.

 

Exploring AppGyver

• Application look & feel: I am used to manipulating CSS files to adapt the style of my Fiori Applications, so it was a little difficult for me to understand how to adapt some controls on the page, such as scroll, buttons, header, rows using a User Interface. I've just understood that the best way is to use many containers to align the screen elements.

• Data: we added 4 data sources for discovering how they work:
  
  
  
  • MyGardenDB: We used Airtable (another low-code platform) to save our data (the list of plants in our virtual garden). Airtable provides APIs for reading/writing/updating/deleting data.
  
  
  • Rooms: It is another Airtable table for managing the spaces of our home.
  
  
  • FlowerChecker: It is the Plant.ID API for recognizing plants by pictures (the trial version provides only 200 identifications, once expired, a quota exceeded error will be shown).
  
  
  • WaterForPlants: It is a free API for retrieving some valuable plants information.
  
  
  
  

• Component Market: It is beneficial for citizen developers to have a market where they can find suitable components inside their own applications without wasting time creating everything from scratch. We used one of them for managing the badge ("to be watered") on the plants' list.


• Flow Function Market: We used a couple of functions to allow the selection of files from our own gallery and to convert them to base64 (the recognition API needs it).

Some considerations about AppGyver

It was my first experience with Composer Pro, so I needed to discover its functionalities (and formulas). One of the good things is finding many helpful videos in the Community.

During my experiment, I faced some issues, especially regarding APIs. Initially, I found another API for recognizing plants by picture. Still, I could not use it because it needs the multipart/form-data as value of enctype attribute (which is used in form element that has a file upload). Appgyver doesn't support it (at least I didn't find it in the official documentation). I could use a javascript flow function, but my scope was to use AppGyver without writing code 🙂 (shhhhh, can you keep my secret? I disabled my keyboard to avoid it. Hahahaha… 😄 😄 I'm kidding, but it means you can create an application using just the mouse for most of the time with the drag and drop functionality).

I've noted some points/doubts about studying in deep as:

• the possibility to manage the visibility of the objects based on roles/users,


• the best way to create mockups


• I18n - the best way for managing different currencies, date formats, and so on...

It has been an exciting challenge. I was able to get to know AppGyver. I'm looking forward to developing other applications and exploring other exciting AppGyver functionalities soon.