DESN2000

Lecture 8

 

Rapidly building a mobile application

 

Disclaimers

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

HTML

CSS

Javascript

Web Technologies

Native Technologies

Java + Android SDK

Swift + Apple SDK

React JS

Expo.io

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

Nodejs:

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