Digital Arabic Outfit App – SCOPES Digital Fabrication

Lesson Details

Age Ranges
Standards
Author
Additional Contributors

You need to login or register to bookmark/favorite this content.

Author

Studio 5/6
Studio 5/6
K-12 teacher
In line with the Ministry of Transport and Communications’ Digital Youth Strategy, STUDIO 5/6 is mainly aimed at nurturing youth as digital learners by sharpening their 21st century learning skills, as they develop in an all-pervasive digital environment. In fact,… Read More

Summary

In this 5 days program, participants are going to learn about the concept of Mobile app development and Digital fashion by developing a mobile application on Thunkable software. They will design the user-interface and program the logic of the app inspired by Islamic design.  

 

What You'll Need

  • Computer/ laptop.
  • Internet connection.
  • Thunkable platform.

 

Learning Outcomes

    • Recognize the interface structure of the platform.
    • Design the user-interface of the application.
    • Add and design multiple screens.
    • Prepare two collections of products.
    • Add a database component to the application.
    • Design the database to have the images of the two collections (Men & Women).
    • Use block coding to program the application.
    • Program the navigation between the different screens.
    • Program how images are read from the database and displayed on the screen.

     

The Instructions

Day 1: Design the app #1

Participants will be introduced to the concept of digital fashion and how digital fabrication can be used in fashion design. They will also discover the Thunkable platform and design the user-interface of the application.

Presentation:

1- Who are we and what we do in Studio 56.

2- Intro to Microsoft Teams interface.

3- Introduce the client letter.

4- What is fashion?

5- The combination of Fashion and Technology.

6- Examples of Digitalized fashion products.

7- The meaning mobile applications.

8- Types of mobile applications.

9- Video about the steps of developing a mobile application.

10- What is paper-based prototyping.

11- Intro to the Thunkable platform.

12- What we will be doing today.

 

Prototype:

1- Explain the UI of the Thunkable website and the structure of the platform.

2- Explain how you can add multiple screens to the application.

3- Explain how you can add different components to the screen and edit them.

4- Design the first screen (Start screen).

Add label and button components to the screen.

Edit the components to suit the theme of the application.

Add background image.

5- Design the second screen (Collections screen).

Add and edit buttons, images, labels.

Add background image.

Search for icons/images. 

 

Day 2: Design the app #2

Participants will learn about User-interface design and continue designing the screens of the application.

Presentation:

1- Overview on what was done on Day1.

2- What is user-interface design.

3- Video about User-interface design tips.

4- What we will be doing today.

 

Prototype:

1- Design the third screen (Women collection screen).

Add label and button components to the screen.

Edit the components to suit the theme of the application.

2- Design the fourth screen (Men collection screen).

Add and edit buttons, images, labels.

Add background image.



Day 3: Design the outfits

Participants will prepare two collections of outfits for their fashion house, Men collection and Women collection. They will also add a database to their application with the different products.

Presentation:

1- Overview on what was done on Day2.

3- Prepare two collections of products; search for unique products in tech-fashion.

4- Follow the Arab fashion theme while preparing the products.

4- What is a Database.

5- How to add a database to the application.

6- What we will be doing today.

 

Prototype:

1- Design the outfits of the Men collection.

Design the product.

Search for ready products.

2- Design the outfits of the Women collection.

Design the product.

Search for ready products.

3- Search for tech-fashion products for the 2 collections and save the pictures.

4- Add a database component to the application.

Add two columns (Men, women) to the database.

Add three rows to each column with the images of each collection.

Upload the images to the application.

Day 4: Coding the application

Participants will use block coding to program the application to take certain actions based on the user requests.

Presentation:

1- Overview on what was done on Day3.

2- What is coding.

3- Discuss the existing programming languages and their uses.

4- Explain the meaning of Variables and Functions in the coding field.

5- What we will be doing today.

 

Prototype:

1- Program the first screen (Start screen).

Navigate the user to the collections screen when the button is pressed.

2- Program the second screen (Collections screen).

Navigate the user to the Women/Men collection based on the pressed button.

3- Program the third screen (Women collection screen).

Program it to update the image component constantly when the user press on either “Back” or “Next” button.

Program it to read the correct image from the database and display it.

Program the “Collections” button to navigate the user to the Collections screen.

4- Program the fourth screen (Men collection screen).

Program it to update the image component constantly when the user press on either “Back” or “Next” button.

Program it to read the correct image from the database and display it.

Program the “Collections” button to navigate the user to the Collections screen.

Day 5: Test and share the app

Participants will test the final application, fix any issues, and share their final prototype with others.

Presentation:

1- Overview on what was done on Day4.

2- Discuss what they learned during the past week.

3- Video about PolyJet technology and how it is used in digital fashion.

4- What we will be doing today.

 

 

Prototype:

1- Run the application on the phone.

2- Test if the app is working.

3- Fix any problems found.

4- Ask the participants to share their prototypes with others.

5- Discuss what they have learned during the five days.

Standards

  • (Fab-Programming.2): I can create a program with more than one instruction.
  • (Fab-Design.2): I can participate in design reviews with prepared presentation materials as well as give and receive feedback from peers.

Lesson Feedback