GithubHelp home page GithubHelp logo

chrv / vsf-odoo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cristian-g/vsf-odoo

0.0 1.0 0.0 3.05 MB

๐Ÿ’œ Odoo module for Vue Storefront

License: MIT License

Python 99.66% HTML 0.34%

vsf-odoo's Introduction

Odoo module for Vue Storefront

Logo

Why Odoo?

In contrast of eCommerce integration solutions, Odoo is unique in that it includes ERP, eCommerce and CMS functionalities without the need for additional solutions. As explained in the official website, Odoo is a suite of open-source business apps that cover all the company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc. All in all, Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

Why Vue Storefront?

Vue Storefront offers a mobile native-like user experience:

  • A look and feel that is integrated with the native platform, which implies:
    • An app icon on the home screen.
    • App is able to run full screen.
  • A decrease in loading times after the app installs the Service Workers, thanks to caching layouts and content. The mobile app tries to act as immediately as possible on user input, avoiding the use of the internet connection as much as possible.
  • Re-engaging with users via push notifications.

Vue Storefront avoids the complexity of having to maintain several native developments โ€“ for instance, one for Android and one for iOS โ€“, having a single platform to avoid extra development costs. Furthermore, with the possibility of enabling Server-Side Rendering for the load of the first webpage, we can remark the importance of SEO within the eCommerce industry and offer a solution capable of being crawled by search engines.

Modifying the default architecture of Vue Storefront

By default, Vue Storefront includes a NoSQL/ElasticSearch database back-end within its architecture (https://docs.vuestorefront.io/guide/#what-is-vue-storefront). However, in order to avoid the maintenance of two different data stores, the proposed architecture for this project removes the Elastic Search data store in favour of directly connecting the front-end with the Odoo back-end. As a result, the new architecture is based on the fact that the front-end should be able to directly crawl the Odoo back-end API, as it is presented with the following diagram.

Architecture

The class called SearchAdapter is a client-side code which is responsible of retrieving the following data from the back-end:

  • Product
  • Attribute
  • Category
  • Tax rule

UML class diagram of SearchAdapter client-side class

As a result, this class is responsible of loading the product listing that appears on the home screen and category pages, not only when the user makes a search. While the default SearchAdapter provided by Vue Storefront retrieves data from the ElasticSearch back-end, this project uses a RESTful API using JSON format as back-end.

Changes that must be done in order to achieve a working communication between the front-end and the Odoo back-end are avaliable on this repo:

https://github.com/cristian-g/vue-storefront

Odoo module

The API development of this project is packaged as an Odoo module, which is composed by the following elements:

  • Controllers
  • Business objects
  • Data files
  • Static web data

Class diagram

Controllers

They are declared as Python classes that handle requests by extending the Controller class from odoo.http package. In the case of this project, there are three Controllers:

PublicAPIController

  • Handles requests which do not use user authentication.
  • Examples: retrieve products, sign up, etc.

PrivateAPIController

  • Handles requests which can use user authentication (it can either be required or optional).
  • Examples: add product to cart, edit profile, etc.

TokenAPIController

  • Handles requests about generating or invalidating authentication tokens. It receives the credentials of the user โ€“ email and password โ€“ and then returns the computed token.

Business objects

They are declared as Python classes extending Model class from odoo.models package which integrates them into the automated persistence system (database). In the case of this project:

  • AccessToken is a new model created to encapsulate the attributes of each authentication token, such as its lifetime and the related user.
  • User model has been explicitly created in order to extend the existing User model to add the related identification tokens.

Data files

In the case of this project, it consists in an XML file declaring configuration data (module parameterization). It is named "ir_config_param.xml" inside the "data" folder and contains a parameter, which is the number of seconds of lifetime of the authentication token.

Static web data

They are static assets, such as images, CSS files or JavaScript files that can be used by the web interface or Odoo website. In the case of this project, they are located inside the "static" folder, which includes the "description" assets, which are used to display the module within the Odoo administration panel.

  • icon.png
  • index.html (contains module title and description)
  • main_screenshot.png

Installation of the Odoo module

  1. cd C:\Program Files (x86)\Odoo 12.0\server\odoo\addons
  2. git clone https://github.com/cristian-g/vsf-odoo.git vue_storefront
  3. Copy data/ir_config_param_example.xml to data/ir_config_param.xml and set your desired params
  4. Update apps/modules list List Update list
  5. Install module Install Installed

Installation of Vue Storefront

Note that the Odoo module just includes the needed API.

Install Vue Storefront, including my SearchAdapter from my repo: https://github.com/cristian-g/vue-storefront

Remember to set useExactUrlsNoProxy to true, if you are not using ImageMagick or similar.

In order to set up a production environment, it is recommended to follow this instructions.

Otherwise, in case you are just developing, just run yarn in order to install the dependencies and then yarn dev in order to compile and run the front-end in your browser.

Examples

Product listing

Product listing

Categories and subcategories

Categories and subcategories

Variants

Variants

Roadmap

  • Open-source alpha release (June) - Done
  • Beta release (July) - Done

Compatibility

  • Odoo v12
  • Vue Storefront v1.9.2

The license

Odoo module for Vue Storefront source code is completely free and released under the MIT License.

Contributing

If you like the idea behind Odoo and Vue Storefront and want to become a contributor - do not hesitate and check our list of the active issues or contact me directly via [email protected].

If you have discovered a ๐Ÿœ or have a feature suggestion, feel free to create an issue on Github.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.