Lecture 8


Rapidly building a mobile application



To confidently build a mobile app, you would typically need to spend about 5-30 weeks learning prerequisite material.


Thankfully, modern technologies allow you to rapidly setup, build, and deploy mobile apps with very abstract understanding. We will teach and demonstrate these high level basics.


However, you need to go in knowing that you will have a million questions, and you'll have to seek many answers yourself. Even if this course was stacked with 100 tutors, the nature of web and mobile development is VERY self-driven.


Regardless, when you have these questions, you should (in order):

  • Problem solve with your group
  • Find a number of online resources (some provided)
  • Pose your problems to the cohort in MS teams


If you have an ongoing interest in web technologies, you can consider enrolling in COMP6080 during your degree.

Modern Web & Mobile

React JS

React Native




Web Technologies

Native Technologies

Java + Android SDK

Swift + Apple SDK

React JS

React Native

Single codebase

Separate codebase

Exploring Expo

We can explore basic expo apps here.


Key things to take away from this include:

  • CSS & Styling
  • JSX and their similarities to HTML
  • The ability to write normal javascript in here
  • Understanding imports
  • Component based applications
  • Event driven actions (e.g. buttons)
  • The difference between React, React Native, Expo

Some useful terminology


An interpreter for javascript, it's like python3 but for javascript and not python


NPM (Node Package Manager) / Yarn:

Package managers for javascript projects, it's like pip3 but for javascript and not python



Setting up expo locally

Once you're comfortable playing around on the Snack web interface, you're going to find it much easier and comfortable to program on your own machine (or on the CSE machine via vlab).


  • On your own machine:
    • Follow steps 02-05 on the expo learn page.
  • On the CSE machine:
    • Follow steps 03-05 on the expo learn page
      • except replace "expo init" with "6771 expo init"



Let's go through an example together!!

  • Looking at tabs
  • Managing state (React.useState)

Storing your code

In DESN2000 we have set up a GIT repository for each of your groups. Each group member is a moderator, and can push/pull from this repository.


To setup an expo project in your repository, simply



git clone myProjectFolder
expo init myProjectFolder
git add --all
git commit -am "Initial commit"
git push origin master

DESN2000 20T2 - Week 5

By cs6771

DESN2000 20T2 - Week 5

  • 838
Loading comments...

More from cs6771