Course Syllabus
App Development DRAFT |
| Semester & Location: |
Fall 2023 - DIS Stockholm |
| Type & Credits: |
Elective Course - 3 credits |
| Major Disciplines: |
Computer Science, Information Science, Design |
| Prerequisite(s): |
One year of computer science, a course in algorithms and data structures, knowledge of one object-oriented programming language (such as Javascript, C#, Java, or C++). Basic knowledge of web development and databases is recommended. |
| Faculty Members: |
TBA |
| Program Contact: |
Natalia Landázuri, Ph.D., csc-engr@disstockholm.se |
| Time & Place: |
TBA |
Course Description
Whether your company is a streaming giant or a startup for umbrella sharing, bringing your business and ideas to your customers, through smartphones and other computing devices, is essential. Thanks to the development of apps, smartphones have become an indispensable component of everyday activities. We no longer carry a phone around, but rather a complete computer capable of mediating, supporting, accelerating, and interpreting human needs. Apps are the heart of the popularity and utility of smartphones, making mobile development an increasingly lucrative field to work in. In addition, modern full-stack development has come a long way and we are now able to develop apps for multiple platforms at once, and deploy them to Android, iOS and Web.
In this course, you will learn programming basics to develop cross-platform Android and iOS mobile applications, with a strong focus on front-end and user interaction, with the ultimate goal of developing user-friendly and easy to understand interfaces.
Course goals
In this course, you will learn:
Full stack development
Learn the basics about technologies and processes involved in creating the front-end and back-end development for modern applications.
JavaScript and React
The JavaScript framework React is a free and open-source front-end library for building user interfaces based on UI components. It is the most used web framework as of 2021 with over 40% market share [statistica.com]. With React Native we can even develop apps for mobile devices.
Human-centered design
Human-centered design involves users right from the start of the app conceptualization and design process, and maintains users at the center of the prototyping, implementation and evaluation processes. Being a successful UX/UI designer means not only to make an app efficient and sleek, but to understand the user the app is made for.
Software tools (examples of possible tools in this course)
React
React (also known as React.js) is a Javascript library for creating user interfaces. It is created and maintained by Meta, and a large and active developer community. React can be used as a base in the development of web, mobile, or server-rendered applications, in combination with other frameworks. React is concerned with state management and rendering of the user interface. It uses encapsulated components that manage their own state, which are composed to make complex UIs.
React Native
React Native allows the development of React applications for mobile devices. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device, and communicates with the native platform. Many popular apps, such as Instagram, Discord and Pinterest, use this technology [reactnative.dev/showcase].
Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. It is a set with tools and services built for React Native and provides a list of tools that simplify the creation and testing of React Native app.
Amplify
Developed and provided by Amazon, Amplify is a toolset to let front-end web and mobile developers quickly and easily build full-stack applications on AWS (Amazon Web Services). With Amplify, you can configure an app back end and manage app content.
Visits and field Studies
Possible visits may include:
• Spotify: https://open.spotify.com/
◦ The once tiny startup is now a tech giant. The Stockholm offices are where it all started.
• Sinch: https://www.sinch.com/
◦ Sinch uses programmable communication tools to interact with clients and personalize engagement. From 2008 Sinch has grown from six people to an international powerhouse serving enterprises across the globe.
• itCraft: https://itcraftapps.com/stockholm/
◦ App Development company in Stockholm offering development services for clients, consultation, UX and UI workshops and user testing.
• Frostlight: https://frostlight.se/en/
◦ Web, Design and App Agency in Stockholm that offers consultation and initial technical assistance to startups
Approach to Learning
We will implement a hands-on approach to learning that incorporate multiple opportunities to try and test implementations. Every theoretical concept covered in the course is accompanied by a practical exercise to deepen and interconnect understanding. Students will develop a final project, where they will utilize skills learned during the course to develop apps.
Expectations of the students
- Students should participate during lectures, peer-led oral presentations, discussions, group work and exercises.
- Laptops may be used for note‐taking, fact‐checking, or assignments in the classroom, but only when indicated by the instructor. At all other times laptops and electronic devices should be put away during class time.
- Reading must be done prior to the class session. A considerable part of the class depends on class discussions.
- Students need to be present, arrive on time and participate to receive full credit. The final grade will be affected by unexcused absences and lack of participation. The participation grade will be reduced by 10 points (over 100) for every unexcused absence. Remember to be in class on time!
- Classroom etiquette includes being respectful of other opinions, listening to others and entering a dialogue in a constructive manner.
- Students are expected to ask relevant questions in regards to the material covered.
Evaluation and grading
To be eligible for a passing grade in this class, all of the assigned work must be completed.
Students are expected to turn in all the assignments on the due date. If an assignment is turned in after the due date, the grade of the assignment will be reduced by 10 points (over 100) for each day the submission is late.
During the semester students will work on multiple lab assignments to practice the skills learned. At the end of the semester, students will work on a final project in small teams to put all new skills in practice. Students will develop a fully functional full-stack application, choosing from several provided templates (such as an e-trading platform or a dating app). The final project will be presented to the class, and tested by the peers. Presentations and project materials will be part of the grade.
The factors influencing the final grade and the proportional importance of each factor is shown below:
| Assignment |
Percent |
| Participation (includes participation in class/exercises/projects/field studies, as well as behavior that is beneficial to the learning of peers) |
10% |
|
Mandatory assignments |
40% |
|
Final project: Project Materials |
30% |
|
Final project: Presentations and Test Run |
20% |
Readings
Houssein Djirdeh, Anthony Accomazzo, Sophia Shoemaker: Fullstack React Native: Create Beautiful Mobile Apps with JavaScript and React Native, Amazon Digital Services LLC,2019, ISBN: 1728995558, 9781728995557
OR
Nader Dabit: React Native in Action: Developing IOS and Android Apps with JavaScript, Simon and Schuster, 2019, ISBN: 9781638355892, 1638355894
Faculty
TBA
Guest Lecturers
TBA
Course structure
A total of 23 sessions, 80 min per session
• 18 theory sessions and 18 lab sessions: 9 theory sessions companied by a lab component.
• 4 final project sessions, to provide students with time, support and feedback while designing and implementing the final project
• 2 sessions for presentations and testing of final projects
Per class breakdown
Class 1: Intro
Topics:
• Introduction to app development
• Full stack: Front-end and back-end explained
• Getting to know the technologies used:
◦ JavaScript basics, Introduction of React, React Native and Expo
Learning outcome:
• Get an overview of the class:
◦ Learning objectives,
◦ Timeline
◦ Technologies
• Understand what is required and which technology is available to develop modern cross-platform apps
• Understand the difference between front-end and back-end development
Lab 1: Set-up
• Install all required software
• Create and set up the project environment
Exercises:
• Initiate project on own
• Basic Javascript exercises
• Initial tinkering with React
Class 2: React Fundamentals 1
Topics:
• Basic UI theory: A component based approach
• Introduction to React:
◦ Basic components – View, Text, Image, etc.
• Introduction of Layouts with Flexbox
• Flatlists:
◦ What is a flatlist and why it is at the core of so many apps?
Learning outcome:
• Understand of the basic idea behind React and how to use it
• Learn how to use simple React components
• Get ready to create the first simple UI
Lab 2: React setup
• First steps in React
• Static layouts and content
Exercises:
• Add a static view with text and images to the root screen
• Recreate a Layout Template with Flex
Class 3: React Fundamentals 2
Topics:
• Dynamic content in React
• Buttons, User Input
• Hooks, State, useState, useEffect functionality
Learning outcome:
• Deepen your understanding of React
• Learn how to create dynamic content that can change on user input
Lab 3: Dynamic React
• Add on to the project from the last lab with dynamic content
Exercises:
• Use React Hooks useEffect/useState
• Create a button to change content of the app on click
Class 4: React Fundamentals 3, UI Design basics
Topics:
• How to create multiple screens and navigate between them
• UI Design techniques and rules: How to design efficient user interactions
• Laws of color and space
Learning outcome:
• Increase familiarity with the last key components of React
• Understand how users see and interpret visuals presented to them on a UI and how to create better and more intuitive interactions
Lab 4: Multi Screen App
• Screen Navigation and Buttons
• Detailed view of the app.tsx file
Exercises:
• Create multiple screens and set up buttons to navigate between them
• Make use of design principles for the layout
Class 5: React Fundamentals 4
Topics:
• Reusable React components
Learning outcome:
• Be a more efficient React programmer by learning how to reuse code and components
Lab 5: Reusable Components
• Writing faster and better code
Exercises:
• Create several components that utilize different kinds of basic components
• Pass functions to those components
Class 6: Utilizing libraries
Topics:
• Why reinvent the wheel? Learn how using libraries is so important
• Introduction of several key libraries used for React like MUI
Learning outcome
• Get to know the most commonly used libraries for React
• Learn how to find and use libraries yourself
Lab 6: Libraries
• Integrating and using React libraries
Exercises:
• Use MUI components
Class 7: Human Computer Interaction
Topics:
• How do humans interpret the world around them and learn?
• Principles of discoverability, feedback and affordances
• Further UI/UX design
Learning outcome:
• Understand how to create intuitive user interfaces
• Learn how to create applications that are intuitive and can be naturally discovered by the users
Class 8: Amplify 1
Topics:
• Introduction to back-end services and databases.
• Amplify set up and integration with the Expo app
Learning outcome:
• Get to know the other side of app development and what has to happen behind the scenes
• Get a basic understanding of back end services and the communication setup between app and server
• Understand what Amplify is and why it is useful
Lab 8: Amplify setup
Exercises:
• Create an Amplify user
• Set up a basic relational database
• Connect your database to your system
Class 9: Amplify 2
Topics:
• Database operations and CRUD
• Persistent storage applications
• Subscriptions((real-time updates)
Learning outcome:
• Understand how to work with databases and the back-end part of your app
Lab 9
• Work with the created database
Exercises:
• Create your own CRUD operations and connect your app to the database created in lab9
Academic Regulations
Please make sure to read the Academic Regulations on the DIS website. There you will find regulations on:
DIS - Study Abroad in Scandinavia - www.DISabroad.org
Course Summary:
| Date | Details | Due |
|---|---|---|