A single-view application that places text phrases at the top and bottom of a static photo. This app is created as part of the Develop in Swift AP CS Principles (Teacher and Student) course and Apple's Develop in Swift Explorations (Teacher and Student) course. The project can be found in Unit 4 starting on page 384 in the Student book and starting on page 589 in the Teacher Guide.
This project works under the assumption that you or your students are learning the Swift programming language and building apps in Swift using Apple's Develop in Swift AP CS Principles or Develop in Swift Explorations course.
This is a great app project that introduces students to the segmented control action, implementing and learning about gesture recognizers, layering storyboard elements, practice with storing data in an array, and making an app that is fun to build and fun to create.
The project enables students to build another app from scratch including the planning and prototyping process of storyboarding the app in Keynote.
Students will complete a Meme Maker app from scratch. Students will review a variety of concepts covered in the course and build the user interface, the model data, and the controller objects that make up the entire application.
- ATP.CS.9-12.A.a - Write programs that use library methods and control structures and methods to solve a problem.
- ATP.M.9-12.A.c - Create programming solutions by reusing existing code (e.g., libraries, Application Programming Interface (APIs), code repositories).
- ATP.VDR.9-12.F.a - Identify types of variables and data and utilize them to create a computer program that stores data in appropriate ways.
- ATP.PD.3.a - Use a design process to plan the development of a program that solves problems.
- ATP.PD.3.b - Using a given program known to contain errors, identify and debug errors to ensure it works.
- ATP.M.9-12.A.b - Design or redesign a solution to a large-scale computational problem by identifying generalizable patterns.
The general process and flow of this project is in the format of an Apple Teacher Portfolio lesson. There are three parts/phases to the lesson
- Activate
- Explore
- Apply You can learn more about and sign up for Apple Teacher here: Apple Teacher.
We want our students to activate any prior knowledge on the topic. Since the students have previously made the MemeMaker app, they will all have the starting point of the project. However, the goal of the project is to greatly improve the app and enable the user to use their own photos to create a meme. Here is the activity I use with my students:
- Take a selfie.
- Open Keynote and pick a basic white or basic black project.
- Insert your selfie into the slide, adjust the size of the picture so that it covers the entire slide.
- You can adjust the transparency level of the picture to mimic a filter feature.
- Add a text box to the top and bottom of your slide.
- Add phrases of your choosing to your textbooks.
- Think, pair, share with a partner about how easy it was to make your meme and how we could make the process of making the meme easier.
Students will now create a prototype of a meme making app.
- Open Keynote.
- We are going to prototype a meme making app.
- Set the slide background color to be the same color you would have for a meme making app that you would build.
- Search shapes for phone. Drag the iPhone onto the screen and resize it so that it is the full height of the slide.
- Use elements in the Shape section and text boxes to create your meme app prototype. Be sure to include your meme from the Activate lesson as the example meme for your prototype.
In this part of the project we build the app.
- The instructions and process of building the app starts on page 384 in the student book.
- Individual steps and further explanations can be found as comments in each code file in the project.
Students will demonstrate a fully functional app that operates as intended. The demonstration will be done in the iOS Simulator app and recorded using the built-in macOS screen recorder (shift-command-5). Students submit their screen recording and a PDF of their code.
If you would like to extend this project to include extra functionality of picking an image from the user's photo library and saving the meme you can find how to do it here: MemeMaster.