diff --git a/w2/2.sql-lite-1/README.md b/w2/2.sql-lite-1/README.md index 55daa7a..6e155ae 100644 --- a/w2/2.sql-lite-1/README.md +++ b/w2/2.sql-lite-1/README.md @@ -1,18 +1,20 @@ ## RN Architecture, Securrity and SQL Lite 1 +- React Native Architecture +- Security +- Firebase ApCheck +- SSL Pinning - SQL Lite - Use Database - - Basic CRUD Operations - Create Table - Insert data into table - Delete table -- React Native Architecture -- Security -- Firebase ApCheck -- SSL Pinning # Coding: 1. Live: - Basic application with API integration for SQL-Lite Storage. + - SQL Queries 2. Assignment: + - Create a React Native Calculator. + diff --git a/w2/2.sql-lite-1/assignment.md b/w2/2.sql-lite-1/assignment.md index 42ebbf5..c85d988 100644 --- a/w2/2.sql-lite-1/assignment.md +++ b/w2/2.sql-lite-1/assignment.md @@ -1,6 +1 @@ -Create React Native Calculator with Memory Option. - -- All the calculations should be shared on memory -- Pressing M+ button should display next stored calculation -- Pressing M- button should display Previous stored calculation -- Pressing Mc button should clear all stored calculations +- Create a React Native Calculator. \ No newline at end of file diff --git a/w2/3.sql-lite-2/README.md b/w2/3.sql-lite-2/README.md index ee3ee68..c3a8313 100644 --- a/w2/3.sql-lite-2/README.md +++ b/w2/3.sql-lite-2/README.md @@ -10,4 +10,12 @@ 1. Live: - Task List Part 1 + - create table + - insert data + - delete data 2. Assignment: +- Update React Native Calculator with Memory Option. + - All the calculations should be shared on memory + - Pressing M+ button should display next stored calculation + - Pressing M- button should display Previous stored calculation + - Pressing Mc button should clear all stored calculations diff --git a/w2/3.sql-lite-2/assignment.md b/w2/3.sql-lite-2/assignment.md index 71f2d3f..d898eff 100644 --- a/w2/3.sql-lite-2/assignment.md +++ b/w2/3.sql-lite-2/assignment.md @@ -1,2 +1,5 @@ - -Implement business logic on previous day project. +- Update React Native Calculator with Memory Option. + - All the calculations should be shared on memory + - Pressing M+ button should display next stored calculation + - Pressing M- button should display Previous stored calculation + - Pressing Mc button should clear all stored calculations \ No newline at end of file diff --git a/w2/4.sql-lite-3/README.md b/w2/4.sql-lite-3/README.md index 86fd275..80e4f81 100644 --- a/w2/4.sql-lite-3/README.md +++ b/w2/4.sql-lite-3/README.md @@ -11,4 +11,12 @@ # Coding: 1. Live: + - Project : Task List Part 2 + - long press on the task to complete it. Display completed tasks in different color + - press on completed task to delete it. ask confirmation before deleting task + - press on uncompleted task to edit it. + - Create APK & AAB through EAS CLI 2. Assignment: + - Create APK of React Native Calculator + - upload to google drive + - share the link diff --git a/w2/4.sql-lite-3/lecture.md b/w2/4.sql-lite-3/lecture.md index 9b51f6a..6265315 100644 --- a/w2/4.sql-lite-3/lecture.md +++ b/w2/4.sql-lite-3/lecture.md @@ -5,246 +5,12 @@ Implementation of - Update data of Table - Delete data from table - ## Project : Task List Part 2 - long press on the task to complete it. Display completed tasks in different color - press on completed task to delete it. ask confirmation before deleting task - press on uncompleted task to edit it. -```js -import React,{useState, useEffect} from 'react'; -import { Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Alert } from 'react-native'; -import {openDatabase} from 'expo-sqlite' -import AntDesign from 'react-native-vector-icons/AntDesign' - -const db = openDatabase("mydatabase1.db"); -const tblName = 'todotable'; - -// long press on the task to complete it -// press on completed task to delete it -// - ask confirmation before deleting task -// press on uncompleted task to edit it - -export default function App() { - const [todos, setTodos] = useState([]); - const [val, setVal] = useState(''); - - // Create Table - const CreateTodoTable = async() => { - ExecuteSql( - db, - `CREATE TABLE IF NOT EXISTS todotable(id INTEGER PRIMARY KEY AUTOINCREMENT, task VARCHAR(20), status INTEGER(1))`, - ).then(t => console.log(t)) - .catch(e => console.log("Error creating table")) - } - - // Add Task - const addTask = () => { - ExecuteSql(db, 'INSERT INTO todotable (task, status) VALUES (?,?)', [ - val, - 0, - ]) - .then(async res => { - console.log(res, `Inserted :${res.insertId}`); - let data = await ExecuteSql( - db, - `SELECT * FROM ${tblName} WHERE id=${res.insertId}`, - ); - setTodos(prev => [...prev, data.rows.item(0)]); - setVal(''); - }) - .catch(e => { - console.log("Error:", e) - }); - } - - - - // Pull Data From Table - const pullDataFromTable = () => { - ExecuteSql(db, 'SELECT * FROM todotable').then(res => { - console.log(res); - const {rows:{_array}} = res; - console.log("rows:", _array) - setTodos(_array); - }) - } - - useEffect(()=>{ - console.log("Creating Table"); - CreateTodoTable(); - pullDataFromTable(); - },[]) - - return ( - - - setVal(t)} - placeholder="Ener Your Task" - /> - - - - - - - List of Tasks - - - {todos.map(todo => )} - - - ); -} - -const styles = StyleSheet.create({ - item : { - flex:1, - textAlign:'center', - padding:10, - margin:5, - borderWidth:1, - borderRadius:5, - borderColor: 'rgb(20,20,20)' - }, - completedItem:{ - backgroundColor: 'green', - color:'#fff' - }, - inputContainer : { - flexDirection:'row', - alignItems:'center' - }, - input : { - flex:1, - borderWidth:1, - borderColor: 'rgb(20,20,20)', - margin:5, - padding:5, - borderRadius: 5 - }, - caret:{ - padding: 2, - borderWidth:1, - borderRadius:5, - BorderColor:'rgb(20,20,20)', - marginRight:5 - }, - taskListContainer:{ - borderWidth:1, - borderRadius:5, - marginHorizontal:5, - marginVertical:20, - paddingTop:20, - }, - taskListTitle :{ - textAlign:'center', - position:'relative', - marginTop: -35, - backgroundColor:'#fff', - paddingHorizontal:10, - fontSize: 20 - }, - taskListTitleContainer:{ - alignItems:'center' - } -}) - -export function ExecuteSql(db, query, params = []) { - return new Promise((resolve, reject) => { - db.transaction(txn => { - txn.executeSql( - query, - params, - (tx, res) => resolve(res), - e => reject(e), - ); - }); - }); -} - -export const SingleTask = ({todo, setTodos}) => { - const [isEditable, setIsEditable] = useState(false); - const [task, setTask] = useState(todo.task); - - const editTask = () => { - setIsEditable(true); - } - - const deleteTask = () => { - Alert.alert("Are you sure!", - "You want to delete this task", - [{text:'Ok', - onPress:() => { - ExecuteSql(db,`DELETE FROM todotable WHERE id=?`,[todo.id]) - .then(()=>{ - Alert.alert("Deleted Successfully."); - setTodos(prev => prev.filter(p => p.id !== todo.id)); - }) - .catch(() =>{ - Alert.alert("Unable to Delete!","Please try again later.") - }) - }, - - },{text:'Cancel'}]) - } - - // Update a single Task - - const updateTask = () => { - ExecuteSql(db, `UPDATE ${tblName} SET task= ? WHERE id=?`, [ - task, - todo.id, - ]).then(()=>{ - setTodos(prev => prev.map(p => p.id === todo.id ? {...p, task} : p)); - setIsEditable(false); - }).catch(()=>{ - console.log('Unable to update please try later.') - }); - } - - // Mark Task Completed - const markTaskComplete = (id, status) => { - //console.log('task completed', id, status); - ExecuteSql(db, `UPDATE ${tblName} SET status= ? WHERE id=?`, [(status === 0 ? 1 : 0),id, - ]).then(()=>{ - setTodos(prev => prev.map(p => p.id === id ? {...p, status:status === 0 ? 1 : 0} : p)) - }).catch(()=>{ - console.log('Unable to update please try later.') - }); - } - - return( markTaskComplete(todo.id, todo.status)} - onPress={() => {todo.status === 0 ? editTask() : deleteTask()}} - > - {isEditable ? - - setTask(t)}/> - - - - - : - - {todo.task} - - } - )} -``` - # Creating APK or AAB file for distribution