Web
Article

Creating Mobile Apps with the Webmaker App

By Tanay Pant

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.

Webmaker-App-Home-Page

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).

Webmaker App running on WebIDE

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.

Creating an app from scratch

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.

Adding different components to an 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.

Editing the title

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

Editing the description

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

Adding an image

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

Rearranging the blocks

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!

Preview of the app

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.

More:

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Comments
MatsSvensson

I don't understand how you build actual apps with tools like this?
How do you make them communicate with the DB or backed?

tanay1337

@MatsSvensson Thanks for your question! Webmaker App is trying to cultivate a culture of consumers who are makers as well. So, many people who are not developers, find it easy to first make use of such a platform to gain confidence and idea of real-world developing.

chrisofarabia

I'm not sure about the app, but that Mozilla 'Teach the Web' page makes me think geocities could yet make a comeback...

MatsSvensson

That makes no sense.

Usually you start off people in programming by teaching them to write a short program that outputs "hello world" or similar.

But whenever you look closer at tools like these, that "lets anyone build an app", its always more like teaching people to open notepad and type "hello world" and then taa-daa: a program.

Say you build a "app" that just prints out the name of your your favorite color on the screen.
How do you build that app so that you don't have to edit the entire "app" if you change your mind about the color?

Yow do you for example build an app the allows people to add info, without handing out the right to the whole world go in and rewire your app every time?

tanay1337

@MatsSvensson Well, I wanted to point out that there are many developing and under-developed countries where people don't know the significance of learning programming and they can't get this kind of education. You might argue that the internet has a whole host of learning resources but a majority of the people in such countries don't even have access to internet data, since they don't want to impart their limited resources to something that they think is luxury.

This app is aimed to inspire such people so that they become interested in learning programming. Would you be interested in learning Stock Trading? Maybe Not. But the thing is unless a person is informed about the beauty of Equities, Bonds and Investing Opportunities, he won't have a strong will to learn. That's why the Teach The Web initiative is very important. Just my two cents smile

elioqoshi

The whole Webmaker initiative is not focused on established developers, so while it might be true that SitePoint has a lot of high technical contributors/readers, this is taken in a different context, concretely teaching consumers to be makers on the web.
True, there might be some technical bugs here or there in the app (hence beta), however the mission is the same; inspiring potential makers/developers/web enthusiasts to get involved with web technologies. As you can see, the numbers support it, every year thousands of Webmaker Maker Parties all around the world are organized by unpaid volunteers, being proof enough that this has gained a lot of traction and has impact on a lot of web enthusiasts, especially those who don't have accessibility to a lot of learning material like we do.

Indeed, it's not much use for someone who changes their JS frameworks like their socks, but again, this is not the context of the app here.

reyortega

Thanks for sharing us your wonderful ideas on creating mobile apps with the webmaker app. It was such a great article.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.