How to be more effective when teaching mobile app development

THE PROBLEM

How to empower students with mobile app development knowledge that can provide them with a career edge? When teaching technology based skills, it is always a trick to leverage constantly evolving coding skills and tools with life-long skills such as strategy, logic and design thinking. For the fall 2020 Mobile App Design course within the University of Houston's Digital Media program, I set out to strike that balance.

THE CHALLENGES OF MOBILE APP DEVELOPMENT

There are several mobile app development challenges that relate to strategy and app development efficiency:

• SAVE TIME & MONEY: An app development budget is based on service hours for designers and programmers. A good producer is always seeking to refine the production timeline to save time and money.
• EFFICIENCY: Creating a wireframe with art and assets that are then re-created for coding means a loss of hours due to a doubling up of effort. Surely there is a better way the design team can set up files to IMMEDIATELY be used by the coders.
• CODE BARRIERS: Speaking of coding, to maintain the app a producer also has to deal with folks, (such as the business team), who have no coding knowledge. How can a producer keep everyone on the same page during development when knowledge sets are mixed?
• FUTURE THINKING: Native apps are not the only way to create and distribute an app. There are also Progressive Web Apps (PWA) which run within a web browser yet behave like a native downloaded app. They offer quite a few advantages to those in the know.

As a professor, when seeking to train for this space, I always seek ways to provide young talent with skills that allow them to be the best strategists and interactive producers they can be with the goal of saving their employers time and money.

To enable these goals I sought out a new tool, Clutch.io, that could offer young talent the ability to more rapidly prototype and create a progressive web app.

WHAT IS A PROGRESSIVE WEB APP?

For those who might not be familiar with the term, a progressive web app (PWA) is an in-browser app. You do not have to download and install it like you do a native Apple or Android app. Rather, you go to a URL (just like a website), and the browser loads in a web app with native app-like experiences that are operating in the background.

Mozilla notes that a PWA “should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe” (2021).

To be officially labeled a PWA, the application has to incorporate some specific backend features such as Secure Contexts (which means the web app must be served over a secure network -- think HTTPS); the app must have one or more Service Workers (scripts that tell a web browser how to handle network requests and asset caching for faster performance); and a manifest file (which is a JSON file that controls how your app appears and is discovered by the user).

THE PWA BOTTOM LINE

For non-techie people the bottom line offers a lot of incentive. By not going through the app stores, you have better control of your data; a closer connection to your users; no need to force people to download and install an app; no need to have a developer account with Apple or Google nor deal with their polices (which might ban or terminate you at whim); potential cost savings in terms of development hours (in-browser apps means you get a website plus an app); faster performance, better security, and the likelihood for stronger sales.

Stronger sales and lower development costs have driven a lot of large companies to create PWAs. Examples include: Starbucks, Flipboard, Soundslice, Uber, and Pinterest (Simicart, 2021).

Like anything, there are trade-offs. Video games rarely go the PWA route since they can have performance issues when running through a web browser. If you need certain hardware dependent features, linking through a web browser is not always the best choice.

Having said all that, let's get back to the task at hand. Faster production, more features, less build time and flexible teaching options were needed for a class of students who were all pretty much beginners in both code and software building.

TOOL OF CHOICE: CLUTCH.IO

Julian Herrera, the Lead Content Producer at Clutch.io, has been a staunch supporter of the University of Houston's Digital Media program. He has kindly donated many hours of student mentorship in showdowns that I have produced and run, including the Healthcare Games Showdown? and the XR Showdown?, both of which sought to have students be matched with professional mentors as they created healthcare video games and XR enterprise solutions.

Utilizing Clutch.io allowed my students the ability to:

1. Compose products in Real-Time with Multiple Users. This is pretty huge considering that the normal pipeline of development separates a team into a creative group along with a developer group with each group using different software tools that neither use. They seek to communicate either in standup meetings throughout the week, or looking over one another's shoulders if they are in the same room. Composing in real-time meant students could open up a project in the web browser, and do creative or development work on the fly and see results instantly (just like a Google Doc). Within Clutch, creative and development teams are not separated. They were in the same document working together on the same project.
2. Leverage Reusable Components. Clutch is built off of React (JavaScript) and leverages components (think code-based Lego bricks), that can be reused. As an example, a student could make a "card" to hold profile information like a name, profile photo and bio. That "card" was created by dragging and dropping components onto a canvas, then linking the components to the database to be filled. Just like Legos can be used to create lots of projects (as long as you have the right Lego set), so too can you reuse a component to build lots of other apps. In this example, that profile "card" could be reused within that project and with lots of other projects. Build one (correctly) and reuse! That saves time and money as a library is developed within a company.
3. Visual Feedback. I will tell you a secret. Even coders get sick of looking at lines of raw code. They also love to see the live results of their work. In Clutch, rearranging components (or coding raw) provides live feedback via a composing canvas. This also REALLY helps when teaching students since they need to see results instantly–not compile, then review, which is another set of steps used in a traditional coding environment. Needless to say, the creative team also likes seeing real-time results.
4. Dynamic Data. An operating app means it is connected to some type of database which feeds it information such as a user's name. When you are in the middle of an app build, coders often use placeholder data, since the app is not live and there are no users. In Clutch, the students got to immediately use data, such as "Star Wars" facts, to use as a way to test their design and see, "Is my code properly linking to a database and calling things correctly? Does it look and behave well?" Under a normal software pipeline, live data feedback does not easily occur. It's another series of steps that causes more developer time to be lost (cost!), plus the creative team lacks being able to see and engage with changes until later in development.
5. Do as Needed. Most platforms or tools have issues with flexibility. Clutch is really powerful in allowing code to be downloaded, reconfigured, and with no limits to backend support. This means more creative options for projects along with company support.

RESULTS THUS FAR

The most important result of teaching is seeing if the results made an impact with the students. Some loved the PWA development methodology. Others did not.

Not every student liked creating a PWA over a native app. Some expressed that they would have liked to have developed a traditional native app during the course. Others also expressed concern over using the beta version of Clutch.io.

In closing, over 80% expressed that they would like to take the course again if they could (UH end of course evaluations, 2020).

A huge thank you to Julian Herrera and Clutch.io for providing expertise and the platform at no cost. As a professor, I greatly appreciate your support.

ABOUT Karen Snyder, MFA

The Managing Director of TYM Studio?, an internship training studio, and a Professor of Digital Media at the University of Houston, Karen Snyder has over 20 years of experience in developing and creating creative and technology projects. An advocate for serious games, she is creating and producing various showdowns that allow young talent ways to work with enterprise as they develop serious simulations. 

https://kysrealm.com

https://tym.studio