/How to Create a Product Catalog Mobile or Web App in Minutes

How to Create a Product Catalog Mobile or Web App in Minutes

Video: How to Create a Product Catalog Mobile or Web App in Minutes


– [Instructor] Hello, this is Eddie from AppSheet here to help you build a product catalog app in minutes. Here you can see that I've pre-populated a simple spreadsheet for a product catalog app. Our column headers, which should always be located in the first row include brand, product name, image, price, clearance item, description, and specs. You can see that we have three brands. We have Authentic Foods, Best Aid, and Pallet and Cask, an assortment of products, images as referenced by URLs, prices, whether this is or is not a clearance item, description, and for our furniture-related items, specs.

If you'd like to get started building your own app, you can go ahead and download this sample dataset in the description to follow along.. There are two ways to get started. You could utilize the AppSheet add on, or you could head over to appsheet.com and start for free. If it's your first time in the system, it'll walk you through a quick signup process. In here, we'll go to new app and we'll start with our own data. We'll call this product catalog app and we will use our Google data source, in this case. We'll search for product catalog app example. So here, you can see that AppSheet has pre-populated our app from our Google Sheet, but it could just easily do so from Excel and Office 365, DropBox box, SQL databases, and cloud software like Smartsheet and Salesforce. Keep in mind that I'm going to gloss over many of the platform's most powerful features and things like that. So here, you can see that we have our data table inventory. In this case, let's go ahead and make this a read-only table since this is a product catalog.

READ  Mario's NEW FRIENDS! - Mario + Rabbids Kingdom Battle Gameplay - Episode 1

If we enabled adds and deletes, then we could go ahead and add and delete rows of data from the app, but in this case, that's not something we're interested in. We could add additional tables, if we'd like, but in this case, our one table is sufficient. Here, you can see that we have our data columns and AppSheet has done its best to assign a type to each of our columns of data. And here we have slices, which are basically a subset of our data, and so let's go ahead and make a slice. We'll call this clearance and we will say that when clearance item is equal to yes, so as you can see, when clearance item is equal to yes, then this will fall under the clearance slice. So we'll save that, and by the way, the row filter condition which I just used is an example of an AppSheet expression which are very much similar to Google Sheet and Excel formulas. So from here, let's jump over to our UX, and you can see that we have our inventory view and I could just easily change this into a table or gallery view. Let's actually stick with our deck view.

And we will group this by our brand. So now we have Authentic Foods, Best Aid, and Pallet and Cask, and let's sort this by product name. Since we already have our brand located in our header, we don't need it in our secondary headers, and so let's go ahead and change our secondary header to price. And from here, let's jump over to our display and we will use a shopping cart. So now we've created our first view. Now let's go ahead and create a second view and we're actually just gonna copy this inventory and we will call it clearance. And we'll use our clearance slice dataset. Let's put this in the right side. So now you can see, we have the items on our clearance discount rack in a separate view. We could have up to five views on the bottom, and additional views in our side panel and at any given time, we could also preview our app and other form factors. And so here you can see it on a standard smart phone-type device.

READ  Assign unique Ringtone to Contacts on iPhone (Easily!) - 2017

We could rotate this, we could see this in tablet view, and we could also open this up in full screen as a web app. Here in our behavior section, we could easily enable actions, which allow us do things like send text messages, emails, jump to different views within the apps, but in this case, it's a very simple product listing app, and so we don't need those. Likewise, with workflows, we could set up rules to send out emails or texts or notifications and reports, as well, but we'll skip all that, head over to security. With most apps, what we'll end up doing is having a required user sign on and domain authentication provider. In this case, since this is a public product catalog app, we can go ahead and disable that and yes, this app is public.

Yes, I am authorized to set up an insecure app, and we'll save this. And here I'll briefly show you, as well, that at any given time, we'd easily send out an email to a tester or an actual user just like that. And when you're ready to go, you can go ahead and hit not deployed and this will run a deployment check and we will go ahead and move our app to a deployed state. And now I want to give you a brief tour of what this looks like on a actual device. So here, you can see that I have my personal tablet, and I'll go ahead and go to my email. And here, AppSheet has sent us the product catalog install link, and so we'll install this, if you're on an iOS device, go to Safari. If you're on a Android device, go to Chrome. If it's your first time walking through this, it'll make you download the AppSheet app, and now we will create our shortcut, as well. And just like that, we have the ability for a user to scroll through and see any of the items on display.

READ  Bose ControlSpace Designer - Parameter Sets Overview

If we wanted to, we could also make this detail view the default view, and they could literally browse through by swiping. And they also have the clearance view where they see the items on clearance. Keep in mind, this is a really simplistic app, so if you wanted something more complex, we could easily add features and functionalities like inventory management, order management, and even things like barcode scanning, maps for where the inventory is stored, and things of that nature. And that is how you create a product catalog app with AppSheet. So let us know what you think. We'd love to hear from you in the comments. Don't forget to subscribe to our channel and get started building your first app anytime by following the links in the description or heading over to appsheet.com. Thank you so much for watching.