Mobile Development - Lecture 22

 

Mobile Development- Using React Native - Lecture 22

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Recap

## LECTURE 22  RECAP


    -> NEW COMPONENT OF REACT NATIVE 
        -> Button, Input, 
            -> we made login ( REGISTER )
        -> Image 
            -> URL, LOCAL image
        -> Flex and Styling 
            -> basics
    -> FILE MANAGMENT kasa krni h
        -> ../../src/component/data.js 
        -> ./
    -> Basics of Github
        ->use via VSCODE Gitlens and git panel
    -> Extentions
        -> basics RN extention
    -> Payoneer
        -> basics of what it is
        -> jazzCash(mobilinkMF)/Zindgi(JSBank)
    -> Password manager
        -> LastPass
    -> Packages
        -> Authentic package 
            -> wix,shopify,facebook,amazon, expo, react-native-community,
            -> React native Awesome ( repo of many many packages and learning resources )
            -> The Net Ninja ( to watch expo guide )
        -> how to use the package
            -> package install
            -> after install file changes
            -> how to use package in your code


===========================================================================


PACKAGES=>
    => we will be installing 3rd party codes for our app
        e.g. react native calendars



https://coolors.co/

Border 
Radius
Margin (up,down,left,right) ( extrenal spacing )

ALignSelf ( it works on the component that you are using )


Padding  : ( internal Spacing )

Read More

Mobile Development - Lecture 21

 

Mobile Development- Using React Native - Lecture 21

Lecture Outcome:

At the end of the lecture, students will be able to know about

• What are packages or dependencies
• Payoneer Account Registration

# Lecture 21

# What are packages or dependencies  
    npm ( packages )
    nodeProject ( dependencies )


# how to install  a package

- 'npm install {{package name}} -- {{flag}}'
    - npm install --save react-native-calendars


# what happens after we get a package installed
-  you get a change in package.json ✅
    - we get the package name in dep-block  with a version name *1
-  a change in node_module
-  a change in lock files 


# *1 VERSION
    - with time packages update and improve 
    💡 0.001  (beta version ma hain hm) (BETA === NOT FULLY DEVELOPED YET)
    💡 1.22 (ak alpha build rooled out)
    💡 ~ === approx (currently installed version might be update into another number soon) 

## How to Use package
    you have to import the details out of the package!

IMPORTANT TIP

  -> DO NOT PASTE YOUR SENSTIVE DETAILS IN A NOTE
  -> alaways use hard passwords and save thme in a password Manager
  -> secure notes 
  - >  LASTPASS 
 2FA

Read More

Mobile Development - Lecture 20

 

 Mobile Development- Using React Native - Lecture 20

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to RN Styling, extensions and Packages

# RN Styling, extentions and Packages

💡 always do authenitc extentions in your vscode


## Packages

third party code that helps us in the working of our applications/softwares
the service for 3rd party we use is 

npmjs.com (node pacakge manager )

npm will help us to install packages


https://reactnative.dev/docs/navigation
https://reactnative.dev/help#reactiflux-chat


💡 based on NODE we got EXPO(which is a package for RN to help us make mobile apps)
Electron



## how to install and make sure package is working

 - npm install {{PACKAGE_NAME}}  --{{flags}} ✅
    - 3 things will be updated
     -lock file updation
     -node_module updation
     -package.json updation 🏋🏽

- what happens in package.json
    - 

Read More

Mobile Development - Lecture 19

 

 Mobile Development- Using React Native - Lecture 19

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Github (Practical)

# Directories and Github In Practice
# Some Components from React Native


## Directories
💡 you have to be a super user of your computer! 💡

WINDOWS =>  \ \\ . .. (directories)
Mac/linux => / // . .. 

(powershell) GIT Bash 

### Define and read directories

"." === ./ (current folder/directory)
    e.g ./src = (src folder k andr)
".." == (go back one directory)
    e.g ../../src/assets
    

# GITHUB in ACTION
- repos (we made a repository)
- remote (using remote we link our code with that repository AKA CLONE)
- stage (choose what you want to send to the remote repo)
- commit 
(give a name*1 to all the things that are in staged changes area) 
*1: name AKA snapshot

- branch
push
pull
fetch



💡 install gitlens extention that will make your VSCODE git usage super smart and easy 💡

Read More

Mobile Development - Lecture 18

 

Mobile Development- Using React Native - Lecture 18

Lecture Outcome:

At the end of the lecture, students will be able to know about

• How to add image in background in App.js
• Introduction to github

lecture part 1
How to add image in background in App.js
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Image, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      <Image
        source={require('./assets/dp2.png')}
      />
      <Image
      source={{
        uri: 'https://cdn.pixabay.com/photo/2020/04/11/18/05/red-matrix-5031496_1280.jpg'
      }}
      style={{
        width:"100%",
        height:"100%"
      }}
      />
  
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

# lecture18.md

# TOPIC 2 new RN Components + github basics

github  (code should be free for everyone to see or give suggestions === OPEN SOURCE) => MICROROST OWNED

 -> github.com 
    - Account creation ✅
    - how git works on it 

## GITHUB IS MADE UP OF:
- REPOSITORIES
    => project/s ( single project (standalone-repo ✅ ) vs multi project (mono-repo)
    )
- Contributor
    => OWNER
    => someone else can update your code will be called contributor
# GIT WORKING

### we have 3 areas in git 💡

- unrevisioned files area 
( you made a file and did not revise it for git)


- staged files area 

(you revised and added the files to be committed later)

- committed files area
 (named those staged files under a single meesage for git)


### pushppa pullpa algo of git

either you can push the code
or you can pull code (fetch the code info)
- push 
- pull
- fetch

# CLONE 
you have a backup that mocks the back up on github.com

# Branch
Exam Area/block (main branch)
you can have as many branches as you want!

# remote 
your controller that talks to your clone




💡 COMMAND OF GIT INIT? 
    => puts info about the clone in your local project  (hidden folder will be made .git)

Read More

Mobile Development - Lecture 17

 

Mobile Development- Using React Native - Lecture 17

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to MyBooks App
• login page design (Hint: Successfully Run)

# Lecture 17

## how to take user input? and use it as well
   Text Input
   for text input you are suppposed to use Input Component from ReactNative



## Git vs Github 

    Bill Gates ( microsoft )
    Steve jobs ( apple )
    linus Torvald (linux) free products
        -> Linux (OS)
        -> Git (code helping software)

git => german word (Dheet)

 based on GIT companies got formed. (github,gitlab,bitbucket,MS Azure cloud)
 => git helped them to share/read/save/deploy code online! 

 github

 -> user signup
 -> project at github.com
 -> attach the github project to local project on your machine using GIT (origin remote attachement)
 -> stage your code ( sperate out the files to commit)
 -> commit your code (staged file under a keyname(snapshot))
 -> push your code (send your commit/s to origin remote)



## ASSIGNMENT
    => make a dummy Signup Page 
        -> name, email, password, button

login.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, View } from 'react-native';

function Login() {
  return (
    <View style={styles.container}>

    <View style={styles.upperContainer}>
        <Text style={styles.title}>MyBooks</Text>
    </View>
    <View style={styles.midContainer}>

      <Text>Email</Text>

      <TextInput
        placeholder='Enter your email'
        style={styles.input}
        onSubmitEditing={(inputData)=>{
          alert(inputData.nativeEvent.text)
        }}
        keyboardType={"email-address"}
      />

      <Text>Password</Text>

      <TextInput
        placeholder='Enter your Password'
        style={styles.input}
        secureTextEntry={true}
      />

    </View>
    <View style={styles.bottomContainer}></View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },

  upperContainer:{
    flex:1,
    justifyContent:'flex-end',
    alignItems:'center'
  },
  midContainer:{
    flex:2,
    padding:10,
  },
  bottomContainer:{
    flex:1,
    backgroundColor:'red'
  },

  title:{
      color: 'blue',
      fontWeight: 'bold',
      fontSize:30
  },
  input:{
    borderWidth:1,
    height:50
  }

});


export default Login;

App.js
import { StatusBar } from 'expo-status-bar';
import Login from './src/screens/login';


export default function App() {
  return (
    <Login/>
  );
}

Read More

Mobile Development - Lecture 16

 

Mobile Development- Using React Native - Lecture 16

Lecture Outcome:

At the end of the lecture, students will be able to know about

• MyBook App (Practical)

# Lecture 16

# MyBooks App p#2

  we need to align component in a container!

  VERTICAL (FLEX )

  - JustifyContent ( default === Flex-start(left)) works verticaly
  - AlignItems ( works horizontly )

# WHAT WE NEED

- DASHBOARD ( listing the books and asking for user AUTH(login/signup))
- Login
- Signup
- ForgetPassword
- Profile
- Book Search
- Book Detail Screen
- Favourite this book for me


 ### GENERAL_INFO
- BACKEND (DATA storage and management)
    - SERVER_SIDE
    - FIREBASE( we will be using this as our backend service )




# ============= PART TWO ===============

proTip:  always document your steps

- folder structure basic (v1)
- login UI into code
- make sure it runs on Both OS
- backup of code (ignoring of node_modules)



login.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

function Login() {
  return (
    <View style={styles.container}>

    <View style={styles.upperContainer}>
        <Text style={styles.title}>MyBooks</Text>
    </View>
    <View style={styles.midContainer}></View>
    <View style={styles.bottomContainer}></View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },

  upperContainer:{
    flex:1,
    justifyContent:'flex-end',
    alignItems:'center'
  },
  midContainer:{
    flex:2,
    backgroundColor:'purple'
  },
  bottomContainer:{
    flex:1,
    backgroundColor:'red'
  },

  title:{
      color: 'blue',
      fontWeight: 'bold',
      fontSize:30
  }

});


export default Login;



App.js
import { StatusBar } from 'expo-status-bar';
import Login from './src/screens/login';


export default function App() {
  return (
    <Login/>
  );
}

Read More

Mobile Development - Lecture 15

 

 Mobile Development- Using React Native - Lecture 15

Lecture Outcome:

At the end of the lecture, students will be able to know about

• What is Software Engineering and our First App

• Figma

# Lecture 15

# What is Software Engineering and our First App

 - its all about the Requirements
    (target app ma client/idea bnwana kia chahta h?)
- its always best that you detail out a page of roughly what is in your head or clients' head

    ##PRO_TIP CLIENT KO IDEA NEI HOTA K WO KIA CHAHTA H

### ENGINEERING 
    - UI and UX 
        => hire a designer/ask client to give mocks/self draw using some UI/UX tool
    - Project init via code 
        - BACKUP arrange #advance (GITHUB/GITLAB)
    - UI to Code
    - Navigation and theming
    - integration of data and UI
    - client build process (APP) 


### Start UI and UX 
     we have tools like FIGMA/inkscape



Sample website
https://www.uplabs.com/

tech ninja
( expo tutorials ) 

Read More

Mobile Development - Lecture 14

 

Mobile Development- Using React Native - Lecture 14

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to Import and Export in RN

# Lecture14

# REACT NATIVE BASICS PART Three

# WHAT IS EXPORT AND WHAT IS IMPORT

export 
import 

# Types 
regular/genral
default

## EXPORTING 
export const x; or export {x}  (general export)
export default x; (default export)


// you can only default export once in a file 


## Importing

general import   you always wrap it in a {} 
import {Footer} from 'file/path'

default importing you always use it as a varibale

import Login from 'file/path'



## DEFAULT EXPORTING 
 if there is a component with same name as the file/container component you export it via default ( its just sytentical sugar )





 =====================================================


 # PACKAGES (majmooa) === library
   bundle of helper code/s
   e.g. rn-ui-lib, react-native, react, react-native-calendar, react-native-image-picker, react-navigation,

## usuability of packages 
    npmjs.org (node package manager) where all packages reside
    every package will have its documentation


## to know what pacakges you have in ayour app 

        you have to see the package.json for it!

app.json

{
  "expo": {
    "name": "our_first_app",
    "slug": "our_first_app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

login.js src/screen/login.js

import {View, Text} from "react-native";

const Login = () => {

    return (
        <View>
            <Text> hie i am from LOGIN.js new test</Text>
        </View>
    )

}


const Footer = ()=>{
    return (
        <Text>privacy policy saved by erozgaar</Text>
    )
}

export default Login;
export {Footer};

Read More

Mobile Development - Lecture 13

 

Mobile Development- Using React Native - Lecture 13

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Structure of RN App

# Lecture13

# REACT NATIVE BASICS PART TWO-

# Tags, Tag types, Tags Styles, Flex

# Strcuture of an RN App

React native does not ask you to have strict structure

## src  === Source (all support code will be here)
## app will have an entry point ( a file which inits the app ), it will be out of src
# config === configuration (pre-made files to help us code)
    - e.g   (asi file/folder jis ka name "." sa shuru hota)
# NODE PRESETS === files that nodejs compiler needs 
    - e.g ( package.json, yarn.lock, package-lock.js,
     node_modules)



## in an SRC Folder what should we have
    - screens
    - components
    - services
    - utils
    - theme

Read More

Mobile Development - Lecture 12

 

Mobile Development- Using React Native - Lecture 12

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to RN and libraries

# RN HOW KNOW?

View are the divs
style props are the CSS
CSS outline (OUTLINE STYLING) 
couple of other builtin UI COMPONENTS (IMAGE)


# SCREEN
    => width + height  = "100%"

FLEX => number system    5 ( we can do design responsive divisions)
 FLEX ALSO HLEPS US IN DIRECTIONS


 SOME REUSEABLE COMPONENTS are next


 HELPER UI LIBS


 https://wix.github.io/react-native-ui-lib/docs/components/basic/Button

 https://reactnativeelements.com/docs/components/button

FLEX EXAMPLES.js


import {View,Button,StyleSheet} from "react-native";

export default function App() {

  return (
    <View style={styles.mainContainer}>
      <View style={styles.childOne}/>
      <View style={styles.childTwo}/>
      <View style={styles.childThree}/>
    </View>
  );
}


const styles = StyleSheet.create({
  mainContainer:{
    flex:1,
    backgroundColor:'black',
    flexDirection: "row"
  },

  childOne:{
    flex:1,
    backgroundColor:"orange"
  },
  childTwo:{
    flex:1,
    backgroundColor:"pink"
  },
  childThree:{
    flex:1,
    backgroundColor:"red"
  },
})

Read More

Mobile Development - Lecture 11

 

Mobile Development- Using React Native - Lecture 11

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to React Native

# Lecture 11

ReactJS ?
    REact  === ReactJs 
    Framework for WEb app development using 
    Reactive Programming with JS
React Native was build with help of ReactJS and it was to build UI for mobile.

## React How Know?
-> Components
-> Functional Component vs Class Component
-> StyleSheet is used to make and reUse Design values for the compoents in react.
-> Flex
    => [width, heigth === sizing of components]



## TAGS ##

### NISHAN DAHI ##
=>    <Text>  <!-- Tag started !-->
=>    </Text>  <!-- Tag closed !-->
    => e.g  <Text> Erozgaar </Text>

### WE CALL IT ☝️ "CONTAINER TAGGING"

=> <Text/> <!-- Self Closing Tags !-->


### Properties === props

<Title value = "my Title" />
<Title 
value = "my Title2"
style = {"style Value"}
 />

<!-- we have aself closign tag called title along side a prop of value !-->

<!--  Tag Props can be written in two ways?
    propName = "value of prop"
    propName = {"value of prop"}
!-->


<!-- HOW TO DESIGN !-->
 
 INLINE DESIGNING
 <!-- you write a style inside a prop of a tag !-->
  e.g  <Tag
        style = {{color:"purple", width:100,
        height:100,
        }}
        />

 EXTERNAL DESIGNING




NOTE:
 VYSOR is an app to control phone from laptop screen (contains ads)



 IMPORTING AND EXPORTING 
 (NODE JS WORKFLOW is based on it ☝️)

App.js

import {View,Button} from "react-native";

export default function App() {

  return (
    <View style={{
      flex:1,
      backgroundColor:'red',
      justifyContent:"center",
      paddingRight:10,
      paddingLeft:10,
      }}>
     <Button
      title="My Button 1"
      color="yellow"
     />
    </View>
  );
}

Read More

Mobile Development - Lecture 10

 

 Mobile Development- Using React Native - Lecture 10

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to OOP and How to react

RETURNER FUNCTION HELPS US to SHOW THE UI, UX handling helper as well


in RN 
every Return should be 
one TAG CONTAIN ALL manner


VIEW is replacement of DIV in RN( for Mobile)

# INTRO to OOP ( basics) and React How Know?
# AccessModifires TODO
OBJECT ORIENTED PROGRAMMING
    => CLASS 
    => INHERITENCE (Classes communication is done by using this)
    => Interfaces
    => POLYMORPHISAM ()
    => Abstraction


# CLASS (1stClass CITIZEN VVVIP)
    => 

<!--  

- if you see there is no constructor written in a class
    it still has one!
- every class will have functions and some might not wanna share them while some do!
!-->
public class MyMainClass {
    const x = 3;

    function Duster(){

    }

    private function BlackBoard(){

    } 

}


<!-- INHERITENCE === extends 

e.g 
class kia extends CarClass 

!-->


App.js

import {View} from "react-native";

export default function App() {

  return (
    <View
    style={{
      backgroundColor:"pink",
      width:"100%",
      height: "100%"
    }}
    >
        <View
        style={{
          backgroundColor:"purple",
          width:"100%",
          height: "50%"
        }}
        />
        
        <View 
        style={{
          backgroundColor:"yellow",
          width:"100%",
          height: "50%"
        }}
        />
    </View>
  );
}

Read More

Mobile Development - Lecture 9

 

 Mobile Development- Using React Native - Lecture 9

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Practical Base work. Run Project. create post.js and make changes to App.js

# Lecture 9
- by default RN ke app from expo starts with a returner ENTRY FUNCTION
- using arrays we can reUtilize the code equalz to the amount of array size
- OBjECT
    -> any data type can be handled here

FACEBOOK
    -> POST
    -> GROUP
    -> message
    -> ads

App.js

import { StyleSheet, ScrollView, View } from 'react-native';
import {Post} from './src/components/post'

export default function App() {

  const myPosts = {
    0: {
      rollNumber: 12,
      present: true,
      name:"sohail",
      img: "https://images.unsplash.com/photo-1626968361222-291e74711449?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
      description: "this is sohail's post data",
    },
    1:{
      rollNumber: 11,
      present: true,
      name: "Zainab",
      img:"https://images.unsplash.com/photo-1630319325392-1f6518d2db52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      description: "this is Zainabs's post data"
    },
    2:{
      present: true,
      rollNumber: 10,
      name: "Bilal",
      img:"https://images.unsplash.com/photo-1616868560403-b4675d3a545b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      description: "this is Bilal's post data"
    }
  }


  return (

      <ScrollView>
    <View style={styles.container}>
      {
        Object.keys(myPosts).map(key=>(
          <Post data={myPosts[key]}/>
        ))
      }

    </View>
      </ScrollView>


  );
}

const styles = StyleSheet.create({
  container: {
    width:'100%',
    height:'100%',
    paddingHorizontal:10,
    backgroundColor: 'purple',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle:{
    fontSize:30,
    color:'white'
  }
});

create post.js at /src/components/post
post.js
import { StyleSheet,
    ImageBackground,
    Text, View, Image } from 'react-native';

export function Post({data}) {

  return (
      <ImageBackground
      source = {
          {uri:data.img}
    }
    style={styles.container}
      >

    <View style={styles.dataContainer}>
        <Text>{data.name}</Text>
        <Text>RollNumber: {data.rollNumber}</Text>       
        <Text>Is Present: {data.present ? '✅' : '❌'}</Text>       
        <Text>{data.description}</Text>   
    </View>
    </ImageBackground>

  );
}

const styles = StyleSheet.create({
  container: {
    width:'100%',
    height:300,
    margin:10,
    marginTop:20,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: 'white',
  },
  dataContainer: {
    width:'100%',
    height:300,
    margin:10,
    marginTop:20,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: 'rgba(23,255,255,0.2)',
  },
  textStyle:{
    fontSize:30,
    color:'white'
  }
});

Read More

Mobile Development - Lecture 8

 

 Mobile Development- Using React Native - Lecture 8

Lecture Outcome:

At the end of the lecture, students will be able to know about

• COLLECTIONS AND INTRO TO OOP (FOR REACT USERS)

• run COLLECTION.js using VS Terminal (Practical)

# COLLECTIONS AND INTRO TO OOP (FOR REACT USERS)

# COLLECTIONS
    -> SET ({1,3,4,2} {'a','b','c'} {"asf","saf","saf"})
        -> [1,2,3,4,5], [1,3,4,3,2,1] ✅
        -> [1,2,"name",3, true] ❌
            SET ===  ARRAY 
<!-- IN AN ARRAY DATA TYPE OF ELEMENTS SHOULD BE SAME -->
    -> FreeHand
        -> OBJECT
            {'a',1,[1,3,4], "ahsfha", true }
<!-- FREE HAND IS AGNOSTIC FROM DATATYPE SIMILARITY -->

<!-- KEY PAIR SOLUTION -->

        KEY : VALUE
      {
          x : 33,
          y : "erozgar",
          z : false
      }

<!-- to create an OBJECT we have to use KEY PAIR structure -->


## ACCESS OF A VALUE OUT OF COLLECTIONS
     
     myArray  =  [1,44,3,4,5]
              
    const firstValue = myArray[1] ==> 44

# INDEXING ==> 0  = 1
<!-- COMPUTER STARTS COUNTING FROM 0 -->
<!-- trying to access an index which is not there is known as ArrayIndexOutOfBoundException -->

COLLECTION.js

const arrayOne = [1,2,3,4,5]


const objectOne = {
    1: "value",
    2: 33,
    3: [1,3,4],
    4: true,
    5: 'a'
}

// console.log(objectOne);


/// lets access the value in an ARRAY

const myArray = [33,22,11,44,55]
const firstValue = myArray[5]
console.log("firstValue", firstValue);

Read More

Mobile Development - Lecture 7

 

 Mobile Development- Using React Native - Lecture 7

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Recap
• run js file lecture7Test.js
• run switchPractice.js
• js syntax is different

### Recap
    `programming basics p3,p4, -> data-types, conditional operators,`
    number, string, object, boolean, 
    opertors,
     if , if else, ifelseif
     

`
    if(x===3) {

    }else if(x===4){

    }else if (x===10) {

    }else {

    }
`


<!-- WHEN TO USE IF and WHEN NOT USE IT -->

<!-- 
    - when you have more than 5 checks DONT USE IF  ELSE
        - e.g. CAPITAL LETTER, number, special character, small letter, total length 8,  EMPTY PASSWORD, not have white spacce
 -->

 <!-- WE HAVE ANOTHER CONDITIONAL HELPER CALLED SWITCH/WHEN -->

lecture7Test.js

const x = 202020

if(x === 10){

    console.log("===========");
    console.log(x);
    console.log("===========");

}else if(x===22){

    console.log("===========");
    console.log(x);
    console.log("===========");


}else if(x===33){

    console.log("===========");
    console.log(x);
    console.log("===========");

}else {

    console.log("===========");
    console.log('last else block chla');
    console.log("===========");

}


switchPractice.js
const x = 89898

switch(x){ 
    case 33: {
        console.log("33")
        break
    }
    case 22: {
        console.log("22")
        break
    }
    case 11: {
        console.log("11")
        break
    }
    default: console.log("defualt")
}



// SWITHC MULTI CASE ASSIGNMENT ISSUE

const x = 33

switch(x){ 
    case 33,22,11: {
        console.log("jpafjafjj")
    }
    default: console.log("defualt")
}

// swith k andr multiple case combinings 
// for same out put!




# TALK
 -> when you are learning something 
    -> teacher agnostic
    -> forget what you know already
        -> e.g. if glass if full and you poure the water will out flow
    -> proud ( is a sin ) so dont be like that

-> TECH PEOPEL
    -> JAVA
    -> KOTLIN
    -> SWIFT
    -> C #
    -> DOT NET
    -> python

SYNTEX DIFFER FROM EACH OTHER,
 JAVASCRIPT ( IS DIFFERENT )

Read More

Mobile Development - Lecture 6

 

Mobile Development- Using React Native - Lecture 6

Lecture Outcome:

At the end of the lecture, students will be able to know about

• BASIC DATA TYPE

• Programming basics

# BASIC DATA TYPE TALK
## DataTypes

## language builtins ( imperative data types )

number = integer/number
letter = 's' char
conditonal = boolean  {0|1} {false|true}


# non-imperative data type ( asi types jo kisi ko b apna ma convert kr la )
words =  "strings"
object = {}
    var x = {"value1":3, "value2": 2}

## javascript hates types #javaScript is typeAgnostic

<!-- //in other langaugee -->
const string x = "value";

<!-- in JS -->
    x = "value"
    x = 33
    x = 3.3
    x = true
    x = false



<!-- // in react we have prop-types package to handle type issues in JS -->

<!-- if you are going towards heavy math calculations do not use JS -> TS -->

# Programming basics p4

# conditionals

<!-- symbolic language/operators -->

= "barabr j, equals to"
== "shallow comparisons" ❌  '3' ==  3
=== "strtict compare" ✅ 
! "NOT"  
<!-- ya jis k sath lgta h uski qeemat ulat daita h
e.g
    x = true
    console.log(!x) => FALSE
 -->

 > "is Larger"
 < "is smaller"

 !== "not equals"

 !> "not larger/greater"
 !< "not smaller"


 <!-- x !> 30 -->
 <!-- car === corrola  -->
 <!-- BATMAN !> AquaMan  -->
 <!-- var doll = "elsa"   -->




 # conditionals

  - ifis 
  - switchers
  - (C-OP === "conditional operator" ?: )
  - C-OP door ka cousins ( && , || )


 # ifis

    if(x === 3) {}

<!-- for damange control we have ELSE HANDLERS  -->

    if(x === 3) {

    }else{

    }  
    
<!-- if Slip-Ups  -->

    if(x === 3) {

    }

    if (x ====4 ) {

    }

    if( x !== 3) {
        
    }

testTheories.js
// var x = 50

// if(x ===  30) {
//     console.log("yes its 30");
// }else {
//     console.log("ELSE BLOCK CHLA H");
// }


// if slipups

var x = 50


if (x === 50) {
    console.log(x);
    x = 40
}


if (x !== 50) {
    console.log(x);
}


testTypes.js
x = "hie"
console.log("=========================");
console.log(x);
console.log("=========================");

x = 33
console.log("=========================");
console.log(x);
console.log("=========================");

x = 3.3
console.log("=========================");
console.log(x);
console.log("=========================");

x= 's'
console.log("=========================");
console.log(x);
console.log("=========================");
x = false

console.log("=========================");
console.log(x);
console.log(

Read More

Mobile Development - Lecture 5

 

Mobile Development- Using React Native - Lecture 5

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Programming Basis

• HOW TO RUN A JS FILE WITHOUT ANY FRAMEWORK

• HOW TO WRITE A FUNCTION 

• FUNCTIONS 

# PROGRAMMING BASICS 

## Variables/Constants  ===> var / const 
## Functions ==> namedFunctions, anonymousFunction, CurriedFunctions
## Operators => assigners, conditional operators,
## LOOPERS => ak kam ko repeeat krna (loop/itteration) , (map, reduce, filter,for,while)


## PROGRAMMING STRUCTURE 
- FUNCTIONAL PROGRAMMING 💚
- OOP PROGRAMMING

## FUNCTIONS 

 - how to write/see/understand ( recognise a function )  



 ## CODE EDITOR VS IDES  #ASSIGNMENT  

 ## What is LOGING , WHAT IS A CONSOLE
    -> console is the hidden softwarea command runner
    -> LOGING -> write somthing 


# CODERS HATE WHITE SPACE so does the COMPUTER 
    -> javascript hyphen (Dash) -    sa b nafrat 
    -> _ (underscore) we kinda have love hate relationship



## TEMPLATING 
   {{YOUR_NAME}}




   ## TO REFRESH CONCPETS

   https://www.youtube.com/watch?v=PkZNo7MFNFg 

# HOW TO RUN A JS FILE WITHOUT ANY FRAMEWORK

make a new file and save it with an extention of `.js`

e.g.  `myFirstFile.js`

- go to your terminal/cmd/powershell
- cd to the folder where you saved the file
- call your NODE COMPILER TO HELP YOU COMPILE THE CODE
 e.g. `node myFirstFile.js` 


// HOW TO WRITE A FUNCTION 

function functionOne(){}

// init krna 
function functionTwo(x = 3){
    console.log(x);
}

// to run a function you have to call it   {{FUNCTION_NAME()}}

functionTwo()



// () anythin in it has to be used later 
// {} scoper ( scope/range )

## FUNCTIONS 

- () => props #properties #perks #parameters #arguments
- {} => scoping, structuring, 

-> function types
    => a funciton can be without props or with prop/s


<!-- non-prop function  -->
<!--  a function with no parameter is call non-parameter -->

function myFunction() {

}


<!-- proped/parameterd  function -->
<!-- asa function jo ak ya ak sa ziaada params -->

function myFunc(x,y,z){

}


<!-- returners function/pure function  -->
<!-- returners function is  a func whihc has a return at the end of its curly braces-->

function myReturner(){

    return;
}


function sum(x,y){
    return x+y
}

Read More

Mobile Development - Lecture 4

 

Mobile Development- Using React Native - Lecture 4

Lecture Outcome:

At the end of the lecture, students will be able to know about

• How to Open and Run Project in VS
• Programming Basis

## EXPO GOTCHA's

# INTERNET
# EXPO INIT ( SHELL/CMD/POWERSHELl/CMDline) #notAdministrator
# cd into your project
# if you dont like CD

## GO TO VSCODE 
    -> OPEN 
        -> your project 
            -> in terminal

## in terminal
    -> npm run start (local, LAN, TUNNEL) 
    -> TUNNEL install it ( then you can use it to other phones/laptops without same internet)

### PROGRAMMING BASICS 
    symbols ( operators )   ISHAARAY
    function   EVENTS/TAKREEB
    variabls/constants   Zaray ( kam krna ma madad dain wali cheezain) 

FAIl, FAAAILL, MAFOOL 


`
const first = 20;  

if( first === 20 ) {
    print('20 chla h')
}else {
    print('nei yara 20 nei h')
}

# NODEJS
### PACKAGES WORKING
    - every package has scripts ~
    - every script can/can't have flags  e.g "expo start --FLAG"
## WHAT ARE FLAGS FOR
    - flags help us to do specific variations on a command


## TANA BANA ( TAKE AWAYS )
    => NODE JS is EVERYTHING
        => we get Frameworks(EXPO,RN,REACT,ANGULAR)
        => We get packages (react- native-calender) 
            => scripts help us to runa command/function/code/anything

### Rizwan 🏴‍☠️ asked us to install NODEJS then he went on to install EXPo and then created a project and asked us to run scripts

Read More

Mobile Development - Lecture 3

 

Mobile Development- Using React Native - Lecture 3

Lecture Outcome:

At the end of the lecture, Student must able to know about 

• Powershell
• cmd
• Terminal in VS

Read More

Mobile Development - Lecture 2

 

Mobile Development- Using React Native - Lecture 2

Lecture Outcome:

At the end of the lecture, students will be able to install the software which we shall use for the purpose of development.

Dear Trainees/ Students, You can download the required software from the below mentioned links. 

1. https://code.visualstudio.com/Download
2. https://nodejs.org/en/download/
3. https://docs.expo.dev/

You need to install these three software which we shall use for the purpose of mobile development. Beside these, also install Expo Go app on your android phone for running hello world app "Open up App.js to start working on your app!". Also you can test on your browser. 

Note: Follow Installation Guide as guided on link https://docs.expo.dev/

Create new app using https://docs.expo.dev/get-started/create-a-new-app/

Read More

Mobile Development - Lecture 1

 Mobile Development- Using React Native - Lecture 1

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to Mobile Development

Introduction to Mobile Development

  Talking about the mobile applications, the first thing that comes to mind are the apps like Whatsapp, Instagram, swiggy, etc that we use in our everyday life. Ever thought about how these apps are made? Which technology is used? Let’s discuss what technologies or frameworks can be used to develop a mobile application.

Mobile apps are majorly developed for 3 Operating System. :

1. Android  
2. IOS
3. Windows

There are 3 different ways to develop Mobile apps: –

1. Native App development
2. Progressive web Application
3. Cross-Platform Application

1. Native App development: –

These types of apps normally run in the native devices, that is, it runs only in the OS that it is specifically designed for it. These apps cannot be used on different devices using a different OS. The apps that are developed for android are normally coded using Java or Kotlin languages. The IDE normally used for android app development is Android Studio which provides all features and the apps that are developed for IOS are generally coded in Swift language or Objective-C. The IDE suggested for IOS App Development is XCode. 

Advantages of 1st Party Native App development:   

1.  The performances of these apps are very high these apps very fast compared to any other apps.
2.  We have easy access to all the features and APIs.
3.  The community is widespread so all your doubts and errors can be discussed and solved easily.
4.  Updates are available on the same day.

Disadvantages of 1st Party Native App development:   

1.  The development speed is too slow as we have to code it again for different OS.
2.  And this category doesn’t support open source.

2. Progressive web Application: –

Progressive web apps are essentially a website which runs locally on your device. The technologies used are Microsoft Blazor, React, Angular JS, Native Script, Iconic. These technologies normally used for web development propose. The apps’ UI is developed the same way as they are developed while developing the website. This category has many ups and downs let’s start with the advantages of Progressive web apps.

Advantages of Progressive web Application: 

1. The main advantage of this process is that its development speed is fast the same code base is used for IOS, Android, web applications.
2. The web development team can be repurposed to develop the mobile application.
3. No installation required.

Disadvantages of Progressive web Application: 

1. The major disadvantage is that PWA don’t have access to all the feature and so the user experience is not that good IOS does not support all the features of PWA  
2. The UI for development is bespoke i.e. the buttons, edit texts need to be programmed which was not necessary for the 1st party native Apps.
3. The community is not that wide spread.
4. No extra room for business model i.e. it is still a challenge to develop a revenue model or advertising opportunities for PWAs. At the moment, there are fewer options than among native apps to subscribe to.

3. Cross-Platform Application: –   

These are frameworks that allow developing total native applications which have access to all the native features of IOS and Android but with the same code base. These apps run on both Android and IOS. So normally the development speeds of these apps are very fast and the maintenance cost is low. The performance speed is comparatively low to 1st party native apps but faster than PWA. 

Xamrine is Microsoft cross-platform solution that uses the programming languages like .NET, C#, F#. The IDE preferred is Visual Studio. The UI/UX is totally native giving access to all features. This technology is having a wide community. And whenever an update is released by Android and IOS the same updates are released by Microsoft through Visual Studio. 

React Native is Facebook’s cross-platform solution which uses the language JavaScript And the preferred IDE is WebStrome & Visual Studio Code. Same like Xamrine React Native has totally native UI/UX and gives access to all features. And the updates are released the same day by Facebook as Android and IOS. 

Flutter is Google’s cross-platform solution which uses the language, Dart. The IDE preferred is Android Studio, IntelliJ IDE, and Visual Studio Code. The UI/UX is bespoke and Flutters has to come up with their new libraries whenever Android and IOS comes up with an update to mimic those update. The community is fast growing.  

Advantages of Cross-Platform Application:  

1. The apps’ development speed is very high as they use the same code base for both Android and IOS.
2. The apps’ maintenance cost is low as the errors and updates as to be countered only once.

Disadvantages of Cross-Platform Application: 

1. Slow Code Performance With Limited Tool Availability.
2. Limited User Experience i.e. these apps does not have access to Native only features. 

Read More

Mobile Development - Course Outline

 Mobile Development - Using React Native - Complete Course

Javascript

 

INTRODUCTION 

·         Javascript Overview

·         Javascript Editor

o   Visual Studio code

·         The RN choosing

·         Using RN via Expo Displaying Hello World

 

 

VARIABLES & DATA TYPES  

·         Variables

o   What is a Variable

o   Variables Declaration & Initialization

o   Nullable & Non-nullable variables

o   Naming Rules

o   Printing Variables

o   Understand variable’s default values

·         Basic Types

o   int

o   double

o   Boolean

o   string

o   String interpolation & Concatenation

·         Defining Constants (let & const)

·         Comments

o   Single Line Comments

o   Multiline Comments

o   Documentation Comments

 

 

 

 

 

OPERATORS  

·         Arithmetic Operators (+, -, *, /, %)

·         Prefix & Postfix increment & decrement

·         Equality & Relational Operators (==,===, !=, >, <, >=, <=)

·         as Operator

·         Assignment Operators (=)

·         Logical Operators (&&, ||)

CONTROL FLOW STATEMENT  

·         If and else

·         for loops

·         while & do-while loops

·         break & continue

·         switch & case

·         Error Handling & Exceptions (Throw, Catch, Finally)

·         Map, filter

 

 

 

FUNCTIONS  

·         Intro to Functions

·         Expression/Arrow Function

·         Parameters

o   Required Params

o   Optional Params

1.      Positional Named Params

2.      Optional Positional Params

·         Default parameter values

 

CLASSES & OBJECTS   

·         Intro to Classes

·         Class members

o   Instance variables

o   Instance Methods

·         Constructors

o   Default Constructor

·         static & this keyword

 

·         Getters and setters

·         Abstract Classes & Abstract Methods

·         Interfaces

·         Extending a Class

·         Method Overriding

·         Generics

o   Lists

o   Set & HashSet

o   Map & HashMap

o   forEach method

·         Closures

React Native (EXPO and CLI )

 

SECTION-1  

·         What is RN and EXPO?

·         Install RN on Mac

·         Install RN on Windows

o   Setup RN SDK

o   Install Android Studio

o   Setup Android Emulator

·         Install RN on Mac

o   Setup RN SDK

o   Install Android Studio

o   Install XCode

o   Setup Android Emulator

o   Setup iOS Simulator

·         Run Hello World Application

·         Testing & Debugging

 

 

SECTION-2  

·         UI Designing

o   Introduction to Components

o   Stylesheets

o   Helper packages

·         State Management

·         Basic Components

o   Text

o   View

o   Image

o   Button

·         Flatlist

·         ScrollView

·         Styling Components & Responsiveness

·         WebView Integration

·         Fetch REST APIs Data

o   Setup use http package

o   Make a network request

o   Parse Data

·         Firebase Setup

·         Deploy App to Google & App Store

Read More