WEB APPLICATION PROTOTYPING

Web application prototyping

In this learning content, we will prototype an I have an idea web application for which we have prepared the screen designs. Throughout the learning content, we will make use of various system actions offered by the Kuika Low-code platform. In this way, you will discover ways to quickly and effectively turn your ideas into reality. 

In this learning content, we will prototype an I have an idea web application for which we have prepared the screen designs. Throughout the learning content, we will make use of various system actions offered by the Kuika Low-code platform. In this way, you will discover ways to quickly and effectively turn your ideas into reality. 

Let's start prototyping.

  1. Open the Master Screen. 
  2. Select the Menu item representing the Dashboard screen. Add the Navigate action.
  3. Select the Dashboard screen as the screen to open and select Current as the screen open format.
  4. Now do the same for the other menu items. After completing the work in Master Screen, open the Dashboard screen.
  5. Select Content Menu through the Item Tree.
  6. Select Profile and add a navigation action.
  7. Select the Profile screen and select Drawer as the screen opening type and Right as the direction.
  8. Then select Logout and add the Logout action in Authorization actions.
  9. To access the detail screen for the ideas on the screen in the dashboard, select the Column in GalleryView and add the Navigate action.
  10. Select the SuggestionDetail screen to be navigated to and select Drawer.
  11. In the area where the ideas are listed, add the Navigate Action to the Vote and Comment icons to redirect to the relevant screens, select the screen opening formats and edit the screen sizes. We have performed the system action binding operations on the Dashboard screen.
  12. Now open the User listing screen.
  13. Select Content Menu from the Item Tree.
  14. Just like in the Dashboard screen, select Profile and add navigation action.
  15. Select the Profile screen and select Drawer as the screen opening type and Right as the direction.
  16. Then select Logout and add the Logout action in Authorization actions.
  17. Select the eye icon in the Table. Add Navigate action.
  18. Select UserDetail as the screen to open and select Drawer as the screen opening type.
  19. Select Right as the opening direction. After the list screen, let's continue with the form screen.
  20. Open the add new idea screen.
  21. Select the icon in the header.
  22. Add the GoBack action. Let's do the same for the UserDetail screen.
  23. Open the UserDetail screen.
  24. Select the close icon in the header and add the Goback action.

We have completed the prototyping of the screens whose designs we prepared together for the web application. If you want, you can test your prototype by clicking the Run button.

We expect you to perform the operations in this learning content for the form screens, detail screens and profile screens that were previously presented to you as homework.

In this learning content, we will prototype an I have an idea web application for which we have prepared the screen designs. Throughout the learning content, we will make use of various system actions offered by the Kuika Low-code platform. In this way, you will discover ways to quickly and effectively turn your ideas into reality. 

In this learning content, we will prototype an I have an idea web application for which we have prepared the screen designs. Throughout the learning content, we will make use of various system actions offered by the Kuika Low-code platform. In this way, you will discover ways to quickly and effectively turn your ideas into reality. 

Let's start prototyping.

  1. Open the Master Screen. 
  2. Select the Menu item representing the Dashboard screen. Add the Navigate action.
  3. Select the Dashboard screen as the screen to open and select Current as the screen open format.
  4. Now do the same for the other menu items. After completing the work in Master Screen, open the Dashboard screen.
  5. Select Content Menu through the Item Tree.
  6. Select Profile and add a navigation action.
  7. Select the Profile screen and select Drawer as the screen opening type and Right as the direction.
  8. Then select Logout and add the Logout action in Authorization actions.
  9. To access the detail screen for the ideas on the screen in the dashboard, select the Column in GalleryView and add the Navigate action.
  10. Select the SuggestionDetail screen to be navigated to and select Drawer.
  11. In the area where the ideas are listed, add the Navigate Action to the Vote and Comment icons to redirect to the relevant screens, select the screen opening formats and edit the screen sizes. We have performed the system action binding operations on the Dashboard screen.
  12. Now open the User listing screen.
  13. Select Content Menu from the Item Tree.
  14. Just like in the Dashboard screen, select Profile and add navigation action.
  15. Select the Profile screen and select Drawer as the screen opening type and Right as the direction.
  16. Then select Logout and add the Logout action in Authorization actions.
  17. Select the eye icon in the Table. Add Navigate action.
  18. Select UserDetail as the screen to open and select Drawer as the screen opening type.
  19. Select Right as the opening direction. After the list screen, let's continue with the form screen.
  20. Open the add new idea screen.
  21. Select the icon in the header.
  22. Add the GoBack action. Let's do the same for the UserDetail screen.
  23. Open the UserDetail screen.
  24. Select the close icon in the header and add the Goback action.

We have completed the prototyping of the screens whose designs we prepared together for the web application. If you want, you can test your prototype by clicking the Run button.

We expect you to perform the operations in this learning content for the form screens, detail screens and profile screens that were previously presented to you as homework.

Files

Auxiliary resources

Glossary