Creating Mobile Apps with the Webmaker App

The Mozilla Foundation (best known for the Firefox browser) recently launched its Teach the Web initiative (#TeachTheWeb). The aim of this project is to support and encourage web literacy, helping more people take their first steps into developing for the web and connecting with a vast support community.

Webmaker is a Mozilla site offering lots of tools that promote web literacy, such as Appmaker, a desktop tool that makes it easy to create mobile apps.

More recently, Mozilla has started work on another project called the Webmaker App. This project provides a very simple interface for creating mobile applications directly from mobile. The project is still in beta mode and hence is currently hosted on Mozilla’s staging servers.

The Webmaker App can be utilized on devices running Android or Firefox OS. With more and more devices supporting Firefox OS worldwide, this is great news for learners in developing countries, as it enables easy development and distribution of applications.

Some Questions Answered

I recently had the opportunity to speak with some people at Mozilla who are closely associated with this project. They were able to shed some light on why Mozilla felt the need for another app creation tool next to Appmaker.

Andrew Sliwinski, Director of Learning Products at the Mozilla Foundation, explained that –

Both the Webmaker App and Appmaker allow users to create web apps. The differences between the two applications are in platform and barrier to entry. The Webmaker app is designed to allow users to build a web app on a mobile device itself without ever needing to use a desktop computer. Because of this, we believe that it will be more accessible to many people who are unable to access a desktop product like Appmaker.

Kate Hudson, Lead developer on the project, also explained that –

The Webmaker App will allow anyone with a smart phone to create and author apps, and be part of an online community of people who create for the Web. Creating apps has previously been something that requires specialized programming knowledge, and at least a desktop computer. People will be able to create apps in their own language, specific to the needs of their local communities.

Mozilla showed a public beta of the Webmaker App at Mobile World Congress in March. In a few months after the publication of this article, the app will be released to the Firefox Marketplace and Google Play stores.

Let’s Check It Out!

We decided to check out the application by launching it in WebIDE, running Firefox OS (2.2).

Whereas Appmaker (the desktop app) focuses more on teaching fundamental programming concepts like input/output, the Webmaker App’s focus is on empowering people to create useful local apps. We think it’s important for app creation to be accessible to everyone with a smart phone.

With the Webmaker App, one can create apps from scratch, adding different components to it such as text, images, SMS sender, caller, textbox, counter and submit button. That is, essentially all the components required for a minimalist and easy-to-make application. The framework currently has seven default templates on its home screen – Start from Scratch, Create a Blog, Create a Survey, Promote your Business, Share Community News, Create a How To Guide and Create a Safety App.

The Webmaker App has a simplified user interface that is being tested to ensure users who are unfamiliar with traditional coding or computer science concepts can use it to create their own content.

Let’s Make Something!

Let us build a small app for SitePoint that displays its name, a cover image and a button to enable users to visit the website. We select the Start from Scratch template and start editing the title of the app.

We then add a new text block and enter the description of SitePoint.

Now, let’s make the app attractive by adding that fabulous cover image of SitePoint!

We finally add a button and rearrange the order of the blocks in the app.

That pretty much concludes the work of building our little app. You can click on the preview button to have a look at your application before publishing. There is a share button as well, which allows the users to share their apps on the go and make them discoverable on the Webmaker gallery. This whole operation took less than five minutes!

Get involved!

The Webmaker App is an open-source project, with its code repository located at GitHub. Anyone interested in contributing can join in, by filing issues for bugs, feature requests or suggestions. Though the project started in vue.js, the developers are planning to port the project to react.js by the end of March.

Developers can build blocks/bricks on topics such as HTML5 geolocation and animations for the application. You can even contribute to the existing templates that are displayed on the gallery or add new templates that are more relevant to your region/country. Are you interested in being a Test Driver for the project? You can read the guide on field testing here.

Viva La Web Literacy

Web Literacy is a global issue that we all should care about. The Teach the Web initiative gives us a chance to make contributions to the open web by making content from which others can learn and which can be remixed or modified by others. Read the Webmaker Whitepaper to know more about web literacy and the Teach the Web initiative.