-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
124 lines (123 loc) · 5.36 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<img class="img-icon" href="index.html" src="img/adexbam-logo1.png" alt="logo for adexbam">
<ul class="navlink">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About me</a></li>
<li><a href="index.html#works">Works</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
<a href="javascript:void(0);" class="icon navlink" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<br><br>
<div class="main">
<h2>SHOWCASING PROCESS AND SKILL</h2>
<img class="main__portrait" src="img/appchat.png" alt="project Portrait">
<p>A chat app for mobile devices using React Native...By Adewunmi Bamishigbin</p>
</div>
<div class="main_summary">
<h2>Project Summary - App Chat</h2>
<h3>The Challenge</h3>
<p>To build a chat app for mobile devices that provide users with a
chat interface and the possibility to share images and their location.
</p>
<h3>Summary</h3>
<p>Towards the process of certification for my full-stack javascript web development,
i was tasked with an achievement project to build a chat app for mobile devices using React Native.
According the project brief, the primary objective was to make sure the app will provide users with a
chat interface and the possibility to share images and their location.
</p>
<p>
The app focuses on the vast amount of mobile phone users who use there phone for day to day activities and
would like to communicate and share there personal activities with colleague and friends.
</p>
<h3>App chat </h3>
<a href="https://github.com/adexbam/Chat-App"><span>https://github.com/adexbam/Chat-App</span></a>
<h3>Task</h3>
<ul>
<li>Chat interface</li>
<li>Select images from your device's storage</li>
<li>Take photos</li>
<li>Get current geo-location</li>
<li>Write send and receive messages</li>
</ul>
<h3>Development</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>REACT NATIVE</li>
<li>FIREBASE</li>
</ul>
</div>
<div class="main__design ">
<img class="main__design__portrait" src="img/design_screen.png" alt="Adewunmi Bamishigbin Portrait">
<h3>What went well?</h3>
<p>
Having access to testing early on in the development process of each task (using Expo cli) meant I
could achieve the outlined design much quicker and manage time.
</p>
<p>Skills: Development and user testing with Expo(cli)</p>
<p>Processes: User-centered development and testing</p>
<p>Solution: Being able to develop each task and receive user feedback after each process, should be done often</p>
<h3>What didn't go well?</h3>
<p>
I spent a lot of time trying to simulate the current updated developments from android studio to the expo app on test users
mobile device
</p>
<p>Skills: Manage api actions with Expo(cli)</p>
<p>Processes: User-centered development and testing</p>
<p>Skills gap: Time management</p>
<p>Solution: Making sure all dependency packages are properly installed and follow the time schedule on each ticket.</p>
<h3>What can be improved?</h3>
<p>
My proficiency with react-native-gifted-chat a library used to build the chat functionalities, can be improved upon for
better time and skill management.
</p>
<p>Skills: react-native-gifted-chat</p>
<p>Processes: building the chat functionalities</p>
<p>Skills gap: Time management</p>
<p>Solution: Increase proficiency with react-native-gifted-chat library</p>
</div>
<div class="main__design">
<h2>Results</h2>
<div class="grid">
<div class="grid__item">
<img class="grid-img" src="img/app-chat-login.png" alt="app-chat-login img">
<p>Chat-App login view</p>
</div>
<div class="grid__item">
<img class="grid-img" src="img/app-chat-text.png" alt="app-chat-text img">
<p>Chat-App texting view</p>
</div>
<div class="grid__item">
<img class="grid-img" src="img/app-chat-input.png" alt="app-chat-input button img">
<p>Input view</p>
</div>
<div class="grid__item">
<img class="grid-img" src="img/app-chat-location.png" alt="app-chat-login img">
<p>Enter location view</p>
</div>
<div class="grid__item">
<img class="grid-img" src="img/app-chat-pic.png" alt="app-chat-pic img">
<p>Take and send a picture</p>
</div>
<div class="grid__item">
<img class="grid-img" src="img/app-chat-select.png" alt="app-chat-select img">
<p>Select a picture</p>
</div>
</div>
</div>
<script src="js/scripts.js"></script>
</body>
</html>