Official Content

PlantCare is an example of ecommerce based on an online store for selling outdoor and indoor plants.

PlantCareCoverimg

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.

Last but not least, from the same Knowledge Base, you can generate the Sweet World Sample. The only differences are the Design System and the dataset. Moreover, the design system is selected in runtime, based on the dataset. So, this is also a sample of the flexibility of the generated solutions. You can deploy different systems, modeling just one time all but the design system itself.

SweetWorldCollage

Live demo, etc.

Demo: https://youtu.be/lC9S1yqwiWg
KB overview (Spanish): https://youtu.be/vfEse6YxHrA

PlantCare Angular App: https://apps-angular.genexus.com/Plantcare2/EHome
SweetWorld Angular: https://apps-angular.genexus.com/SweetWorld/EHome
QR for Apple App (via KBN) and Android (.apk): https://apps5.genexus.com/Plantcare2/developermenu.html?qrcode

Note: EHome 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)

Sources and requirements

Design

Small: https://share.goabstract.com/c9647426-e23c-45d1-b22c-aad2f379c7d6
Medium: https://share.goabstract.com/2bab2cc0-b48a-4542-b95b-93c1c7823f48
Large: https://share.goabstract.com/c2667a33-e555-4647-bdbf-f4715942b17b

Sketch file: It is the 'PlantCareSketch' File object in the KB.

KB

GXServer: http://samples.genexusserver.com/v18
KB: PlantCare
License: Apache License 2.0

Requirements

GeneXus 18 Upgrade 4GeneXus .NET Generator
The appropriate generator must be configured according to the device:

Steps to run it

(*) Sample data load

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:

  • IMPORTPC: Imports the PlantCare test data. If data exists, it will be deleted.
  • IMPORTSW: Imports the SweetWorld test data. If data exists, it will be deleted.
  • CLEAR: Deletes the user's data.

Based on the above, and taking into account that the build process automatically extracts the “PlantCareTestData.zip” file, it will be unzipped and the data will be imported with the “IMPORTPC” parameter:

image_2023103233126_1_png

Development process

Several features and criteria of the development process are highlighted below.

Import from Sketch

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.

Development with a coding standard

It was originally developed in GeneXus 17 Upgrade 9 following the GeneXus Development Guide to create consistent, high-quality code.

Component reuse

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.

Shopping cart

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.

Header

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.

Unit testing

The example has unit tests for managing the shopping cart. They can be reviewed in the “apiCartUpdateUnitTest” object.


Subscribe to KB feed
KnowledgeBase PlantCare
GeneXus Server URL here
No news available on this feed
Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant