Make an app in a week

By Martin Sexton and Katie Sanders-Pope. Posted

Students from Mildenhall College Academy with the code behind their app, which is now used by the school to share information with students

Originally published in Hello World Issue 9: Computing and the arts, July 2019. All information true at the time of original publishing.

Finding work experience in tech can be tricky, so Martin Sexton and Katie Sanders-Pope decided to set a group of their students a challenge

Meaningful work experience for students interested in programming can be incredibly difficult to source. So, last year, our school invited a small group of Computer Science and Maths students to join our Director of Sixth Form for a briefing on the first morning of their work experience week. The students were posed a challenge: to create an app through which the academy can share information directly to students’ phones.

This project would help students with an interest in working in the technology industry to see how developing a piece of software for an end user works in reality. The students would be able to carry out the full software development life cycle and face real issues when trying to meet the requirements of the client.

A cross-platform framework

One of the biggest issues with developing apps is that iOS and Android use different languages. The students researched this problem and found a few options. 

The first of these was Microsoft’s Xamarin. This is a cross-platform way to create apps, but it had a few issues that made it unsuitable. For example, the students would have to be coding in either C# or Ruby, which none of them had used. This would have meant most of their time would be taken up learning the language and their deadline would not be met. There is also limited support for features in the free version. 

The students therefore decided to use PhoneGap. PhoneGap is a free and open-source cross-platform framework for building apps using web technologies: HTML, CSS, and JavaScript. PhoneGap allows the source code for the app you are building to be hosted on your computer and then run via the PhoneGap app, allowing for quick testing. This was essential for the prototyping and allowed the team to swiftly alter the design and understand how the app would look on a phone or tablet. Using HTML and CSS made designing straightforward: it was a simple process for the students to turn their ideas into a functional user interface.

The app in action

One essential component the students had to learn about in order to use it on both the web app and main app was AJAX. This was important because the students did not want the app to freeze every time it was waiting on the server – students wouldn’t use the app if they had to wait upwards of ten seconds to use it! AJAX allowed the team to overcome this by using asynchronous calls, which then used callback functions to execute once the requests had been completed. This allowed data to be dynamically loaded whilst the user was browsing the app, and then automatically update the display with the new data without disrupting the user experience. This was also used on the admin site to allow them to search, update, and delete user data.

The academy was thrilled with the app, which incorporated the functionality requested. Now, staff are able to share daily student announcements specific to student groups, and maintain a web links page. The targeted student announcements allowed teachers to send daily study tips to Year 13 during the Easter break, encouraging students to use their time wisely!

The students are keen to take on the app development and increase its functionality. One idea is to integrate individual student timetables into the app linked to the student signed in. Staff are extremely proud of the determination shown by the students in creating the app, and are delighted to share their achievements!  

PhoneGap

PhoneGap is a platform which enables developers to use existing web development skills to create apps for iOS, Windows, and Android. It uses a combination of HTML, CSS, and JavaScript and distributes to each of the three main vendor app stores.

Full details of how to use PhoneGap can be found at helloworld.cc/phonegap.

A student’s view by Finlay Boyle

Finlay Boyle is a sixth-form student at Mildenhall College Academy and was the lead developer of his school’s information-sharing app

Finlay Boyle

Creating an app was not something that any of us had done before, let alone in a week. We wanted the app to be something that would appeal to students, was aesthetically pleasing, and simple to use. As we did not have much time to attempt to build a prototype, we had to prioritise and plan effectively.

We spent approximately two hours on the first day planning and researching what we were going to do. We created a mind-map to visualise the different components of the app, as we realised that we would need to create two separate applications: one for mobile devices, and a web application for managing the content. 

Once we were satisfied that we had a basic understanding of our objectives for the app, we began to implement it. Since we had done minimal planning, we decided to continually review our work as we created it to ensure that we would be able to integrate each section together. As a team, we decided to use GitHub to manage our code so that we could each produce different bits of the project at the same time. 

In the team, Callum and Dan focused on researching and setting up PhoneGap, which we would use for the main app for students and staff. Freddie and Jake began to think about designs for the app and the admin web app. Whilst they did this, I began preparing the back-end. Since the main app and admin web app would need to simultaneously send and receive data, we decided that a secure API would be the best method for the main app to fetch data from the server, whilst the admin app would upload content via PHP directly on the web server. To plan this, I created a rough overview of each of the endpoints we would need and designed the login flow so that we could secure it. 

Due to the time constraints, we decided to repurpose some of the code from my A-level coursework to reduce the time spent on layout and coding of the admin pages. This allowed us to move on to creating new features for the app instead of spending time rewriting the base for our code.

Authors

Martin Sexton

Martin Sexton

Martin is the Lead for Computer Science and STEM Coordinator at Mildenhall College Academy in Suffolk, England. He is also the CAS Community leader for Mildenhall and a Barefoot volunteer.

Katie Sanders-Pope

Katie Sanders-Pope

Katie is the Director of Sixth Form at Mildenhall College Academy. 


UK Educator

Free

If you’re a UK-based teacher, volunteer, librarian or something in between, we'll send each issue free to your door.

Digital

Free

Just want to read the free PDF? Get each new issue delivered straight to your inbox. No fuss and no spam.

Buy

From £6

If you are UK-based but not involved in education, you can get hard copies by buying back issues.