📲💗 Mobile Applications Development Projects List

📋 Table of Contents

• 📲💗 Mobile Applications Development Projects List
  • 📋 Table of Contents
  • 📱 Applications
    • Main Code
    • Learning
    • HW1
    • HW2
    • HW3
    • Blog
    • Food
    • jsonserver
    • Group project – ScholarUp
  • ⚙️ Application Setup Requirements
  • ✨ Application Installation
  • 🤳 Running Applications
    • With Expo Go (mobile app)
    • With Android Studio
    • With Xcode
• 🪲 Common debugging
  • 💡 Acknowledgements & Resources

📱 Applications

Main Code Directory

Main Code

→ Main page, listing (almost, if not all) every project all on one page. Aesthetics currently not the best, because I was consistently adding to it throughout the semester. This project lists concepts and which projects we made with these new concepts. Individual work.

---

Learning FlatLists

Learning

→ One challenge, learning to use flatlists (with a Pokémon theme). Individual work.

---

HW1: Hello World!

HW1

→ Simple Hello World. Talked about my summer and went out of my way to make it scrollable, have color/font weight & styling, and have photos. Individual work.

---

HW2: Combat Game

HW2

→ [Unfinished] A turn-based mobile combat game. Could not get the monster to attack back and other small details. Individual work.

---

HW3: CRUD Heroes

HW3

→ A game closely modeled after our Blog project, which was worked on together in class. Following CRUD, you can Create randomly generated heroes, Read heroes listed in the rosters, Update by sending heroes to complete missions, and Delete heroes with bad rolls or that have died. Individual work.

---

Blog Application

Blog

→ Following the professor, we created a blog app using CRUD. This app was before learning persistent data.

---

Yelp! Clone

Food

→ Following the professor, we used the Yelp! API to create a Yelp! clone. RESTful API.

---

Persistent Data

jsonserver

→ [Unfinished] Server for persistent data.

---

ScholarUp

Group project – ScholarUp

Group project that ran for the entire semester!

→ 🥇 ScholarUp won 1st Place in oral presentations at InnovateUNO in November 2023.
→ 🎤 ScholarUp was presented at the University of Louisiana Academic Summit in April 2024.

⚙️ Application Setup Requirements

• Git
• Node Version Manager (nvm)
• Node Package Manager (npm) (version 16 or higher via nvm)
• Required npm libraries
  • ScholarUp: moment (JavaScript package), @react-native-community/datetimepicker@6.5.2 (React Native package)
  • Yelp! Clone (food/):
  • Persistent Data Database (jsonserver/):
• One or more of the following testing methods:
  • Expo Go app (best for computers with low storage)
  • Android Studio (Android emulation)
  • Xcode with iOS Simulator (macOS only; iOS emulation)

✨ Application Installation

Note: in-depth installation slides can be found here.

【 Install Node Version Manager 】
# Type the following into the terminal (one line):
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | bash
# EXIT terminal and RE-OPEN
$ nvm                               # You will get a response if the curl command was successful.

# Install version 16
$ nvm install 16
#Make your default alias
$ nvm alias default 16

【 Clone ScholarUp 】
# Navigate to a directory you want our repository to be cloned in (source/ recommended)
$ git clone https://github.com/Jenspi/mobiledev.git

【 Install Node Package Manager via ScholarUp/ 】
# Navigate inside your desired application ApplicationName/ (where App.js is located) and open a terminal window there
  # Your hierarchy should look like this when opening a terminal:
  # ApplicationName/
  # ├── src/                    # Source code (your app logic)
  # ├── assets/                 # Images, fonts, icons
  # ├── App.js                  # Main app entry point
  # ├── app.json                # Expo configuration
  # └── ...
$ npm install --legacy-peer-deps    # You will see a folder named `node_modules` appear in the directory if successful.


【 Install npm Libraries via ScholarUp/ 】
# Install JavaScript's "moment" package: 
$ npm i moment
# Install React Native's "datetimepicker" package:
$ npx expo install @react-native-community/datetimepicker@6.5.2

# Go on to the "Running ScholarUp" section! ♥︎

🤳 Running Applications

With Expo Go (mobile app)

Use npm start in the terminal and scan the QR code that shows up.

Note: You must have the Expo Go app, where this QR code will redirect to once scanned. Make sure you have the correct app downloaded: Apple Store | Google Play Store

With Android Studio

Open project in Android Studio > add a device in the Device Manager > npm start in the Android Studio terminal > press "a" for Android.

With Xcode

Open the iOS Simulator (Xcode menu > Open Developer Tool > Simulator) > npm start in your terminal > press "i" for iOS.

Note: You do not need to open the project in Xcode; simply launch the iOS Simulator. The Expo CLI will automatically deploy to any running simulator when you press "i".

🪲 Common debugging

• ReadableStream not defined:

ReferenceError: ReadableStream is not defined
at Object.<anonymous> ...........

1. Update node to version 18 with the following:
   1. Install version 16: nvm install 18.
   2. Make your alias: nvm alias default 18.
   3. Verify that node -v returns the correct version.

• Permission denied:

> expo start

sh: ....../node_modules/.bin/expo: Permission denied

1. Delete the expo file by running the command cd node_modules/.bin, then sudo rm -rf expo. (this will not disrupt anything)
2. Reinstall npm in the project root, if necessary, with npm install.

💡 Acknowledgements & Resources

• ⏯️ Dr. Ben's Lectures – YouTube Playlist