Building a MusicShop App Using Model and Storage

Recently, the App Builder was updated with several significant features. One of the most important and fundamental changes was the introduction of Model and Storage notions. To show the best practices of using these features, we created a MusicShop app and step-by-step tutorial which describes in detail how to build such an app from scratch. This tutorial also has a MusicShop app backup attached to allow you to pay more attention to Model and Storage usage (you shouldn’t create the app step-by-step in this case, just create it from the backup).


With the introduction of Model and Storage, we suggest developers use the following development process:

  1. Instead of using UI-centric app design, we suggest describing all the app entities by using Models before the actual development. This will prevent you from recreating collections structure, and modifying the app UI multiple times, and so on. There are the following Models in the MusicShop app:
    • instrument – Model that describes the instrument entity with all its properties.
    • musical_instruments – Model that is an array of the instrument Models.
    • cart_item – Model that describes the instrument added to the cart.
    • cart – Model that is an array of the cart_item Models.
  2. When the app data structure is clear and defined, build the UI and create the database with appropriate data.
  3. Use Storage variables based on defined Models to store incoming data (data is usually retrieved by using a REST Service).
  4. Use Mapping to display data stored in Storage variables on any page or use the Storage API to access data directly from JavaScript.

Go ahead and try MusicShop app tutorial to personally see the convenience of using Model and Storage. You can always contact us via email or through the forum if you have any questions or difficulties.