Intro to Mobile Development

MDB Training Program - Week 1

Welcome to MDB!

Introductions

Mohamed Zeidan

Amol Budhiraja

Satvik Muddana

Instructor

Mentor

Mentor

Important Resources

• https://mdb.dev/ - Important information about MDB and the club.
• https://learn.mdb.dev/ - Training program resources, videos, mini project specs.
• MDB Slack - Questions, concerns, or just chatting in general!
• Github - Code version control, tickets, code reviews.
• MDB Calendar - Information about club events and socials.

What are we doing here?

About Training Program

The new member training program is the first step of the MDB experience! We have redesigned it from the ground up to help our members develop cutting edge technologies and be prepared to work on any project!

​

Themes

• Introduction to Mobile Development
• General Mobile Development with React Native
• Native Mobile Development with Swift
• Applied Mobile Development with Machine Learning and Edge Computing
• Ideation - Introduction to creating and pitching ideas.

​

Projects

• Meet the Members - React Native
• MDB Socials - React Native
• NAME TBD - Swift
• NAME TBD - Machine Learning

Training Program Semester Schedule

Training Program Weekly Schedule

Important Logistics

• Extensions Policy
• Max 1 week extensions per project.
• All projects need to be done before Newbie Projects
• Attendance Policy
• We are very chill just tell us 24hrs in advanced!
• ChatGPT/Collaboration Policy
• Feel free to use it!*********************
• All projects are individual* except for Newbie Project.
• Classroom Environment
• Respect everyone. Don’t be weird.
• Please reach out to the mentors, instructor, or anyone on leadership with any concerns.
• Grading/Feedback Policy
• Effort/completion based.
• Need to complete all the projects and ideation to graduate training program. Failure to do so will result in probation (no retreat/socials + 1 month time to complete tp).

Let's get started!

Understanding Software Engineering

• Systematic application of engineering approaches to software development
• Encompasses various methodologies, tools, and techniques that ensure the delivery of high-quality software
• Understanding these principles is crucial for effective mobile app development

Programming Languages

A programming language is a system of notation for writing computer programs

​

Programming languages are described in terms of their syntax and semantics, usually defined by a formal language.

​

• In mobile development, Java, Javascript, Swift, and Kotlin are among the most popular programming languages.
• Each language has its unique features and is suited for different platforms.
• Familiarity with these languages is essential for creating robust mobile applications.

Integrated Development Environment

An IDE is a software application that combines common developer tools into a graphical user interface (GUI).

​

IDEs help programmers and software developers be more productive by simplifying software development and consolidating activities like editing, building, and debugging into a single tool

​

Most React Native developers use VSCode, which is what we'll be using.

​

To get started, download VSCode.

​

Then, install the following extensions:

• React Native Tools
• ESLint
• Prettier

​

The Command Line

The command line, also known as the command-line interface (CLI), is a text-based interface that allows users to input commands to interact with a computer's operating system.

​

It's similar to Windows Explorer or Finder, but without the graphical interface.

​

Commands to Know:

• ls - list all files
• cd - change directory
• pwd - print working directory
• open - open a file, or a folder

​

Note that "." refers to the current directory, and ".." refers to the previous (parent) directory.

​

Mobile Development Frameworks

A mobile development framework is a software library that provides a basic structure for developing mobile apps.

​

They provide a set of common features, functions, and interfaces for building apps.

​

Frameworks can be:

• Native: specifically for a particular operating system leveraging platform-specific programming languages
• Hybrid: combination of native and web solutions
• Cross-platform: allow developers to write code once and deploy it on multiple platforms

​

Frameworks like React Native, Flutter, and Xamarin facilitate cross-platform mobile app development.

Version Control Systems

Git is our version control - it's how we keep track of different versions of files.

​

GitHub lets us store our projects & Git History in the cloud, with extensive support for collaboration & working on large software projects in teams.

​

Install Git here (before installing, check to see if you have Git by typing git --version in your Terminal).

See MDB's Git Workshop here.

Version control, also known as source control, is the practice of tracking and managing changes to software code. Version control systems are software tools that help software teams manage changes to source code over time.

Iterative Development: Agile

The Agile methodology is a project management approach that involves breaking the project into phases and emphasizes continuous collaboration and improvement. Teams follow a cycle of planning, executing, and evaluating.

​

​

Projects are broken into bits called user stories, given priority order, and continuously delivered usually in two week cycles called sprints.

​

Advantages:

• Working software delivered frequently
• Design changes are welcome even late into the game

​

Disadvantages:

• Difficult to assess effort required at the start of development life cycle
• When end goal is not clear, the project can easily be taken off track

​

Expo Onboarding

NodeJS & Expo

NodeJS is a JavaScript runtime. Install it here.

​

Expo is a framework and a platform for universal React applications. To install Expo, run the following command* after you've installed NodeJS (full guide here).

​

npm install --global expo-cli

​

Then, create an Expo account using:

expo register

​

20

*If you run into permission issues, try this, or try sudo npm install --global expo-cli

Expo Client

The Expo CLI (Command Line Interface) allows you to run development apps directly on your phone over your local WiFi network! In order to do so, you need the Expo Client app on your iOS or Android device.

​

Download on iOS

Download on Android

​

Once you download the app, when you're presented with a QR code during development builds, you'll be able to just scan the QR code with your camera to run/debug your latest development build in the Expo Client app.

21

Yarn

Yarn is a JavaScript package manager. Install it here.

​

Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.

​

​

22

npx create-expo-app

23

Type "npx create-expo-app@latest first-app" to create a new Expo project called first-app. Choose blank and managed when prompted.

cd my-app && npx expo start

24

Install the Expo Client app on your iOS/Android device. Then, scan the QR Code in your Terminal.

HOMEWORK

• What is React Native?
• React vs React Native
• Office Hours when2meet

Questions?

MDB Training Program - Week 1