Web Apps: Using web apps to build amazing functionality without programming. I Love Web Apps. They re Awesome.

Size: px

Start display at page:

Download "Web Apps: Using web apps to build amazing functionality without programming. I Love Web Apps. They re Awesome."

Jonas Franklin
8 years ago
Views:

1 Web Apps: Using web apps to build amazing functionality without programming. I Love Web Apps. They re Awesome.

2 What s a Web App? Web Apps are a way to define and manage collections of a custom type of content. Each content item is then searchable and displayable in different ways. Examples: A catalogue of boats Home plans

3 How it Works There are two parts to Web Apps: The creation and definition of what the web app is and how it looks. You, the designer, usually does this. The use of the web app - i.e adding items to it. Your client usually does this. So the steps in building a Web App are: 1. Plan your Web App 2. Create the Web App 3. Customize the Web App Layout 4. Add items to the Web App 5. Add your Web App to your site.

Your client usually does this. So the steps in building a Web App are: 1. Plan your Web App 2.

4 Today s Example: Real Estate Listings A website wants to provide real estate agents with the ability to post their properties that are for lease, and display them to the customer.

5 Planning your Web App First consider: What do information do you need to store? Now plan the Web App on paper. Real Estate Listings Need: An address (text) Some pictures (images) A price (number) Date available (date) Number of bedrooms (option: 1 to 5+) Number of bathrooms(option: 1 to 5+) Anything else?

Real Estate Listings Need: An address (text) Some pictures (images) A price

6 Building your Web App Build your web app according to the plan you just came up with. Every Web App has default item name & description fields, so no need to add those.

7 Customizing your Web App: List, Details and Backups There are four layout templates to customize for your web app. List Template for lists of items List Template an alternate list layout Detail Template viewing one item Edit Template for when a customer edits a web app via a secure zone.

List Template for lists of items List Template an alternate list layout

8 Customizing your Web App Customize each layout using special tags to decide where the data goes, and use HTML and CSS to lay it up.

9 Adding Items to your Web App Once you re ready, you can start adding items to your web app. Notice that the fields you added are there for you to fill in.

10 Web App Item Import/Export You can import (and export) all your Web App items in one go! Choose your web app, download the template and then upload your items.

11 Displaying Web Apps Now you can add the web app to your site! Choose the page you want them displayed on and add All Items via the module manager.

12 The Web App Search Search capabilities are built into every Web App. Insert the search form onto a web page and you re ready to get started!

13 Web App Search: How It Works The search form always has a Keywords field. This searches the item Name and Editor content (description), which are default fields. Conditions across fields must all match in the search results. You can customize the search form to suit your app!

14 Web App Search: Customization You can customize search options to display different, easier to use options, and you can make search results appear on a different page. Customizations require some HTML knowledge Refer to our support wiki for in depth code examples.

15 Web App Submission Your customers can submit Web App items to your site. We will set this up when creating/modifying the Web App. In this example, we want Real Estate agents to add, edit and delete their properties, and pay for the privilege.

16 Web App Submission Form Now we add an item submission form to the web site, to allow the real estate agents to add their listings. This form can be added to any page.

17 Web App Editing Your customers can edit the web apps they have already submitted! To allow this: 1. Add the module Web App items submitted by a customer to a web page. 2. Add two tags to the Web App List layout template:

Add the module Web App items submitted by a customer

18 Web App Editing: Customization You may want to customize the Web App editing form to suit your needs. Choose the Edit Template when customizing your web app layout.

19 We re Done! We ve built a lot in a short period of time! We can add property listings All real estate listings are searchable Agents can submit their own listings Agents can edit their own listings We can manage and approve their listings We can collect payment for each listing

Agents can submit their own listings Agents can edit their own

20 Questions? A few more examples: Property listings Job listings Recipe finder

Wiki Server. Innovative tools for workgroup collaboration and communication. Features

Wiki Server. Innovative tools for workgroup collaboration and communication. Features Wiki Server Innovative tools for workgroup collaboration and communication. Features Single site for group collaboration Project-specific wiki accessible via web browsers on Mac, PC, iphone, and ipod touch