PlantCare is an example of ecommerce based on an online store for selling outdoor and indoor plants.
Its design can be adapted to different devices, sizes, and technologies. Therefore, the application can be used on cell phones, tablets, and desktops, both as a native app and as an app to run in a browser.
This example is intended to show a multi-interface application with a modern Sketch design provided by a designer.
Also, it shows the power of GeneXus’ multi-experience modeling. From a model –a Panel– GeneXus generates native apps for Apple and Android, as well as Progressive Web Applications (Front end Angular) that can run on these device browsers or on any desktop or device that runs a browser.
KB overview (Spanish): https://youtu.be/vfEse6YxHrA
Angular App: https://apps-angular.genexus.com/Plantcare2/PlantCareHome
QR for Apple App (via KBN) and Android (.apk): https://apps5.genexus.com/Plantcare2/developermenu.html?qrcode
: PlantCareHome is the Main Object
for Angular. PlantCare is the Main Object of Apple and Android.
Disclaimer: This live demo is deployed on a prototyping environment which is not optimized for best performance (i.e. not compressed, minified, etc)
Sketch file: It is the 'PlantCareSketch' File object in the KB.
License: Apache License 2.0
GeneXus 17 Upgrade 10, GeneXus .NET Generator
The appropriate generator must be configured according to the device:
The application has an integrated test dataset for testing it after the build process has been completed.
To this end, the “PlantCareCli” program will be used. It is a GeneXus main procedure that can be executed by command line to perform different actions depending on the parameter received.
PlantCareCli can receive one of the following parameters:
- UNZIP: Unzips the test data.
- IMPORT: Imports the test data. If data exists, it will be deleted.
- CLEAR: Deletes the test data.
Based on the above, and taking into account that the build process automatically extracts the “PlantCareTestData.zip” file, it will be unzipped using the “UNZIP” parameter:
Next, the data will be imported with the “IMPORT” parameter:
Several features and criteria of the development process are highlighted below.
The design was made in Sketch and then imported into the GeneXus KB through the Design Import option.
Once imported from Sketch, some minor adjustments were made to the layouts to achieve maximum consistency in each device, also adding logic and implementing the database connection.
The import from Sketch functionality allowed the development process to be more focused on the business logic.
It was originally developed in GeneXus 17 Upgrade 9 following the GeneXus Development Guide to create consistent, high-quality code.
Several design components can be reused. After importing from Sketch, different Stencil objects have been created which enable the reuse of design components, thus increasing productivity.
In some cases, when the logic can also be reused or encapsulated, Components were used.
To simulate a shopping scenario, a session per device is created using the ClientInformation.Id Property. The transactions associated with this functionality are Session, SessionFavorite, and SessionCart.
To turn this example into a real application, you will probably need to use GeneXus Access Manager (GAM) for security and user management purposes.
In addition, since the checkout function is not implemented, to extend it by implementing online purchases it is possible to use APIs to integrate with payment methods.
The panel header is componentized to encapsulate its operation. In this way, the events and characteristics are programmed in one place and used from most panels. A special feature is the use of the GlobalEvents external object, which is used to update the cart items.
The example has unit tests for managing the shopping cart. They can be reviewed in the “apiCartUpdateUnitTest” object.