Suggestions and Ideas for B2B Ordering App

Frappe Framework App Development
, ,
1

Hi There,

We want to develop a mobile application to enable our customers to place orders. Front-end is expected to be built on Flutter with back end handled by ERPNext through APIs. I am not a developer, nor do we have in-house engineering team, so please excuse my lack of knowledge. We will be outsourcing this project to a company.

We are only developing and MVP at this stage and the following are the functionalities we are considering for the MVP.

1. User Login

  • At MVP stage we have not yet decided if we want user registration or not. For the time being user registration can be done manually.
  • User login will be controlled by ERPNext’s ‘Customer User’ functionality.

2. Category Listing

  • Once the user logs in, they will be able to see the categories of products.
  • Right now we only have 5 to 8 categories.
  • Intending to utilise ERPNext Website Item Categories table.

3. Product Listing

  • Once the user clicks on a category, they are taken to product listing page.
  • We currently have only 80 to 100 SKUs.
  • Only product listing is required in MVP. Detailed product page not required.
  • Utilise ERPNext website item.
  • Each list item should have Thumbnail Image, Item Name, Item Code, Price, Qty selector and Add to Cart button
  • Clicking on the thumbnail should enlarge the image or should open item images gallery as a pop-up or modal.
  • Price will be as per Customer’s default price list. Or fallback to Default Price List.

4. Cart

  • Utilise quotation functionality for cart. ie. when a customer adds an item for the first time, a new draft quotation for the customer should be opened. Whenever customer adds the product to cart, the quotation should be updated.
  • Alternatively, can have the cart as a functionality within the app itself.
  • Functionality to remove and change qty of the items.
  • CTA - “Proceed to Order”

5. Shipping Address Selection

  • List down all shipping addresses linked to the customer from ERPNext.
  • Customer should be able to select 1 address.
  • CTA - “Proceed to Checkout”

6. Checkout

  • Display order total and shipping charges. All fetched from ERPNext quotation.
  • We have two payment methods - either advance payment or credit. This can be controlled through ERPNext itself using customer’s default Payment Terms.
  • If the customer has credit, display CTA “Confirm Order”. Clicking on “Confirm Order” should submit the quotation in ERPNext and automatically convert and submit it to sales order
  • if the customer has no credit display CTA “Proceed to Pay”. Upon clicking “Proceed to Pay” UPI link should be triggered to open GPay. Alternatively RazorPay can be used. Once payment is successful, submit Payment Entry, submit quotation, convert and submit quotation to Sales Order.

7. Confirmation

  • Upon successful checkout, display “Order Confirmed” with Sales Order number.
  • Send an email to customer mail ID with a copy of the sales order from ERPNExt.
  • Send an SMS to customer with sales order number from ERPNext.
  • Send a whatsapp message to customer along with a copy of the sales order from ERPNExt.

Since, I am not a developer, can the community please help me with better ideas or problems in the above workflow. New ideas and functionality also invited :smiley: Once again please excuse my lack on knowledge.

2 Likes
2

Dear Azhar,

A couple of things come to my mind:

1. Choice of technology

Flutter is a valid choice, but I would also recommend taking a look at React Native. The advantage is that the same language (JavaScript or TypeScript) is used on the web and also on Mobile, thus leading to more easy code sharing.

React Native also has an option to use practically the same code that was used in mobile and turn it into a web application with the look and feel of a native app. You could provide this as a “near app experience” for those customers, who don’t have the native app installed yet.

Please note, that while Flutter offers a similar solution, it is not the same: it will need the full Flutter runtime to be loaded into the browser, while the React Native Web solution can use the browser as if it was a regular web application. It is even possible to create websites with React Native Web with practically no overhead.

While Frappe started to implement the now deprecated ERPNext Mobile app with Flutter, it is pretty straightforward to build React Native apps for ERPNext.

Full disclosure: We at Migeran are working on a new solution that allows the definition of the React Native screens and forms in a visual editor that is already integrated with the ERPNext Desk App. We hope to release this solution soon.

2. Data fetching

Depending on how frequently your SKUs change, I would recommend downloading the full product listing to the device, except maybe for the images - or at least the images should be downloaded only if the user is on an unmetered mobile/wifi connection.

The reason I am suggesting this is because one of the big benefits of an app is to be less dependent on the network. If the product listings can be read by the app from a local cache, then the app will have a great User Experience, even if the user’s network connection is slow or unreliable.

3. Cart

I would suggest the same for the Cart: it should be managed by the app with asynchronous synchronization to the ERPNext backend. While a Quotation could be the answer for the backend representation, depending on your use case a more specific data structure might be a better solution. This way a cart would only turn into a Quotation when the customer selects the Proceed to Order button (before the shipping address selection).

For Example, some ordering apps let the user use the Cart as a shopping list, or even define multiple lists and then convert any of those lists to an Order. A use case like that might be better represented as a different data structure from a Quotation.

4. Design a future-proof architecture (even for an MVP)

Building an MVP is a great strategy to get to the market quickly. At the same time, it is a good practice to design an architecture that will work well for the planned future features.

One such feature is disconnected operation: Usually, this feature is among the first to be removed from the MVP feature list. At the same time, as I described above, designing for limited connectivity from the start is a good practice that can lead to a superb user experience.

I hope my thoughts will be helpful. Please let me know if you have any more questions.

Kind regards,
Gergely

4 Likes
3

@kisg Thanks for the valuable inputs. I shall definitely take these into consideration.

1 Like
6

Hope you did it, if yes can you share the code for community members?