Mi Taxi 031021

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 527

No va a ser 100 por ciento functional porq escapa al alcance del curso

Nosotos vamosa cosntrir la aplicación del cliente , endonde puede solictar el taxi, tipo uber , va a ver el
map, se puedan buscar direcciones , se pueda buscar la dirección y vamos a agregar una petición,
consumir un servicio ya hecho y vasmoa enviar una petición del taxi , se le va a otrogar un taxi y se va
simular q el taxista está yendo a recogerte , simple, nada más , hasta q llegue a tu posición y ahí va a
quedar porque nos demoraríamos más de lo q dura ekl curso

Vamos acrear una aplicación llamada Mi Taxi, soporte minimo api21

Al crear un Proyecto ahora el standard es api 21 como minimo api

ES MPORTANTE VERIFICAR Q EL EMULADOR CUENTA CON PLAY STORE , POR ENDE VA A contar con los
servicios de google

1. CAPITULO 1 INTRODUCCIÓN

2. Video 4. Integrar Android con Firebase

3. Vamos a la página de Firebase y no mostrará esta pantalla


4.

5. El correo con el que vamos a loguearnos se llama desarrollomovilintermedio

6. Vamos air a la consola y le damosa crear un proyecto

7. Le damosa crdear un proyecto


8.

9. El proyecto se llamará MiTAxi


10.

11. Dejamos marcado si vamosa integrar google analytics , le vamos adecir q sí

12.

13.
14.

15. Aceptamos los términos

16.
17.

18. Nos indica q el proyecto está listo


19.

20.
21. Aquí nos muestra q podemos añadir firebase a un proyecto ya sea de IOs , Android o web ,

elegimos Android

22. Lo primero q nos va apedir es el nombre del paquete cuando creamos nuestra aplicación

23.

24. Para obtener el paquete nos vamos Android studio y hacemos anticilic sobre algún paquete y

elegimos copiar referencia


25.

26. Y lo pegamos
27.

28. Para esto abrimos en la parte superior izquierda el panel gradle y desplegamos el projecto y le

damos a Android , dentro a signingreports le damos dobel clic


29.

30. Vamos a ver en la consla como s va ejeutandogg

31. Y si buscamos n lo generado crea el certificado sha1


32.

33. Pegamo el certificado y le damos en registrar la aplicación

34.

35. A continuación firebase nos pide descargar el archivo de configuracion


36.

37. Lo que debemos hacder a continuación es pegar el archivo en la carpeta app de nuestro

oproyecto

38. Para pegarlo de una manera más correcta es cambiar la mlodalidad q visualizamos el proyecto y

cambiamos de Android a propject y aquí es donde peagmos el archivo q descargamos

39.

40.
41.

42.

43. Al pegar sale la sgte pantalla y le damos en sgte


44.

45. Mucho cuidado si Android srudio le mdoifica el nom,bre , siempre se debe de llamar google-

services.json

46. Al darle ok , ya debería haberse agegado


47.

48. Ahora le damos sgte


49.

50. En el sgte paso nos indican qu debemos agregar una dependencia


51. g

52. Vamos acambiar primero la vista del proyecto a Android


53. g

54. Nos vamos agradle

55. Al buld.gradlr a nivel de Project


56.

57. Debajo de la dependenci de gradle vamos apegar la dependencia y veremos q en los

repositorios tengamos el de google


58.

59. Google debe figurar en las dos ubicaiones en buildscript y en allprojects


60.

61. Si no la tiene la añaden

62. Ahora necesitamos agregar otras dependencias a nivel de aplicación


63.

64. Vamos agregar la de firebase analytics en gradle , pero a nivel de aplicación

65. Lo voy a poner debajo del constraintlyout

66.
67. También necesitamos un plugin de google services (Android Application ya existe arriba)

68.

69. Agregamos el plugin al final y prsionamos sync para actualizar las dpendencias
70.

71. Una vez q haya actualizado , vamos a firebase y le damos siguiente


72.

73. El último paso es ejecutar la aplicación en el emulador para ver si se conectó exitosamente
74.

75. Modificamos en la parte superior , ya q lo ultimo q ejeuctamos fue signinreport lo cambio a app
76.

77. Vmos q ya se integró firebase

78.
79. Presionamos ir a la consola

80. Verificamos q ya se integró una aplicación

81.

82. CAPITULO 2 DISEÑO DE PANTALLAS INICIALES

83. VAmos a instalar un plugin q nos facilite agregar imágenes nuestro proyecto , vamos afiles

settings – plugins -- marketplace


84.

85. E instalamos el Android drawable importer

86. No lo vamos a encontrar en el Marketplace así qlo haremos de manera manual , lo descargamos

desde el drive

87.

88. Cerramos Android stuido y en la pantala incial en la parte inferiro derecha em configure y

elegimos plugins
89.

90. En la ventana q se abre , le damos al engranaje de la parte supeiriro izquierda y elegimos instalar

desde el disco
91.

y elegimos ADI - HAck


92.

93. Nos pide q reiniemos el ide y así lo hacemos

94. En las versiones anteriores de 3.5 en la parte inferior tienen las opciones design y text

95. Ahora en las versiones más modernas vana estar en la parte superior derecha

96. El otro profesor ya ha iplenntado las dependencias de material


97.

98. Vamos a crear una activity vacia a la que llamaremos HomeActivity

99.
100. Si queremos camboar cual es la panralla d incio cambiamos ella etiqueta intent filter

que se encuentra en el manifest

101.

102. Ejecutamos y veremos q arranca el HomeActivity


103.

104. En el homeactivity , cambiamos el costraint a un cioordinator

105. Activamos show UI


106.

107. En el árbol de componentes cambiamos de vista


108.
109.

110. Qudando de la sgte manera


111.

112. El coordinator necesita una propiedad fitsystemwindows

113.

114. Esta propiedad permite q los elementos mostrados en el cajpn no se oculten debajo de

la barra de estado

115. Agregamos dentro del coordinator un Linearlayout y dentro un imageview


116.

117. Ahora vamos a utilizar el plugin androd drawable importe

118. Anticlic en la drawable new - y elegimos batch drawable importer


119.

120. Elegimos la imagen q hemos descargado q será el icino de nuestra aplicación


121.

122. Voy a decirle q utilice la versión media de desnidad de pantalla y le damosok


123.

124. Y ya lo tenemos integrado al proyecto


125.

126. Para agreagrlo al imageview utilizamos la propiedad view

127.

128. Si tnemos un error con el coordinator


129.

130. Vamos al menú Build y elegimos clean Project

131.

132. Y ya aparecerá la imagen


133.

134. Ahora en el imageview le damos gravity layout center

135. Y vemos cmo s centra la imagen

136. Vamos a darle un margen superior


137.

138. Vamos agregar un color de fondo para toda esta pantalla avmos adecirle que el color d

fondo sea el color prim ary

139. Pero vamos acambiarle los colores , vamos material palette

140. Y en primary color seleccionamos Deep purple y el accent seleccioanmos purple

141.
142.

143. Hacemos clic en los colores y se copiará al portapeles el color hexadecimal


144.

145. Quedando los colores de esta manera

146.
147. Si nos vamos al activity vemos los colores

148.

149. CAPITULO 4 ANDROID Y GOOGLE MAPS API

150. Video 1. Integrar nuestra App con Google Maps API

151. Ahora continuaremos con la integración de Goolge Maps en nuestra aplicación

152.

153. Añadimos un textview debajo del imageview


154.

155. Centramos el texto


156. g

157. Y establecemos el color de texto color blanco

158. Creamos recusroso color White

159.
160.

161. Un margen también

162. g

163. Tamaño de texto y en negrita


164. g

165. Después del textview agreagamos un linearlayout para indicar si vamos a utilizar la

aplicación como clientes o como chofer

166.
167. AGREGAMOS LOS BOTONES

168.

169. Va quedando de la sgte manera


170.

171. Ahora queremos q ambos botones ocupen el mismo espacio y se enucuntren posición

adosa n la parte inferior

172. Para esto modificamos el width a 0 y agregamos la propiedad weight a 1 , con esto

amndos botones proporcioanlemnte vana ocupar todo el epacio


173.

174. Quedando de la sgte manera


175.

176. Para ubicarlos en la parte inferior al linear layout lo modificamos a matchparent

177. Y la propiedad gravity a botton


178.

179. Quedando de la sgte manera:


180.

181. Ahora agregamos un margen para separarlos un poco

182.
183. Agregaremos el color de fondo para los botones

184.
185.

186. Vamos a guardar el color azul del botón como un recurso

187. Nos ubicamos sobre el color hexadecimal y le damos a alt + enter y elegimos la opción

‘extract color resource’


188.

189. Y le asignamos un nombre


190.

191. También la ponemos el color de texo a blanco para el botón azul


192.

193. Al botón de la izq le damos un margin right para separarlos unpoco


194.

195. Y al segundo botón leagregamos un margin left también de 5 dp


196.
197.

198. Video 3. Botón redondeado

199. Ahora vamos a darle bordes redodeados a los botones

200. Vamos a ir a la carpeta drawable y vamos acrearnos un drawable resource file


201.

202. Lo vamos a llamar rounded_button y le damos ok


203.
204. Ahora cambiaremos la etiqueta selctor q viene por defecto por una llamada shape

205.

206. Yvamos a indicarle q la forma serpa rectangular , con un padding y las esuqinas on un

radio q determine lo redondeado de las mismas

207.
208. Ahora para habiktar este shape al botón debemos darle a la propiedad background y el

color de fondo se lo asignamos a la propiedad backgroubdtint

209.

210. Y vemos la apariencia del botón


211.

212. Y lo mismo haremos con el botón de soy cliente


213.

214.
215. Video 4 . Crear pantalla de selección de de Login o Registro

216. crearemos una empty activity que llamaremos SelectOptionAuthAcvtivity

217.

218. Una vez creado vamos a cambiar el cosntraint por un coordinator layout

219. Vamos al árbol de componenetes y le damos a convert view


220.

221. Le asignamos la propiedad fitsystemwindows a true y el color de fondo


222.

223. Ahora vamos a copiar el linear layout del home para ahorrar tiempo y lo pegamos en el

selectOptionAuth

224. <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/icon_uber_clone"
android:layout_gravity="center"
android:layout_marginTop="50dp"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="MiTaxi es un aplicativo similar a Uber"
android:textAlignment="center"
android:textColor="@color/color_White"
android:layout_margin="40dp"
android:textSize="20sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_margin="20dp">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@drawable/round_button"
android:backgroundTint="@color/colorBlueLight"
android:textColor="@color/color_White"
android:layout_marginRight="5dp"
android:text="SOY CONDUCTOR"/>

<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@drawable/round_button"
android:backgroundTint="@color/color_White"
android:layout_marginLeft="5dp"
android:text="SOY CLIENTE"/>

</LinearLayout>

</LinearLayout>
225.

226. Modificarems el texto en el texview


227. g

228. Ahora para cambiar un poco el diseño los botones los sacmos del lienar lay out y lis

vamos a pegar debajo del tetxview y eliminamos el linear donde estaban los botones
229.

230. Tendremos q elimnar el weight e indicarle q el widrh es match parent lo mismo para los

dos botones
231.

232. Ahora al primer botón la vamos a dar un margin left y right de 30 dp pata q se separe de

las esquinas
233.

234. Igual con rel botón de abajo


235.

236. Al inferior le damos un margintop de 10 para separar los botones


237.

238. Y vamos viendo como va quedando la aplicación


239.

240. Ahora vamos acentrar todo el contenido con la propiedad gravity en el linear layout
241.

242. Vamos a cambiar los textos de los botones a “YA TENGO CUENTA” y a “REGSITRARME

AHORA”
243. G

244. Video 5. Crear pantalla de Registro

245. Vmos a crea una nueva empty activity q se llamará register Activity
246.

247. Cambiatremos también el cosntraint por el coordinator y su ptopiedad

futsystemwindows y al igualq en el otro vanos a establecer un lienar layout


248.

249. El orientation va a ser vertical


250.

251. Dentro del linear vamos a crear las entradas de texto tambie´n llamadas

textimputlayout en material paarq el usuario pueda ingresar texto desde el aplicativo


252.

253. Vamosa copiar este control 02 veces m una para el correo electrónico , donde

modificaremos el input type


254.

255. Y el otro lo utilizaremos para el passwword


256.

257. Por u tema de experiencia de usuario podemos agregar iconos al izquirda de lo

textimpotlayout

258. Para seto vamos a ir a la pagina icons8 , aquí podemos encontrar muchos icono

gratuitos

259. Vamos abuscar un icono par elnombre de usuatio buscamos user y descargamos el sgte
260.

261. Lo denficimaos

262. Anticloic en drawable – new—batch drawablew importe


263.

264. Una vez densificada la imagen creamos un linearlayout antes del primer

textimputlayout
265.

266. En el linear q acabamos de crear vamos a insertar el primer textinputlayout


267.

268. Y antes de este textinputlayout agregamos un imageview con 50 dp tanto para el alto

como el ancho y el src será el icon_user que acabo de importar


269.

270. Quedando de la sgte mnera


271.

272. Y le damos al textinputlayout un marginleft de 5 dp para separarlo un poco


273.

274. Vamos a modificar el width y height del imaeview a 40dp para hacerlo más pequeño
275.

276. A este iumageview vamos a drale un margintop de 10dp para q se alieie con el

textinputlayout
277.

278. Por ultimo al lunear layout q contiene al iconuser y al proenr textinputlayout le vamos

adar un margen de 10dp para q se separe cun poco


279.

280. Haremos lo mismo con el correo y la contraseña así q densificaremos ambos iconos una

vez q los hayamos descargado


281.

282. Y creamois un nuevo Linearlayout debajo del del user , metemos el inputtextlayout .

copiamos el imageview del primer linearlayout ,modficamos el nombre por el icono q le


corresponde , al linear hay q darle un margin de 10dp y la textinpulayout un marginleft de 5dp,

así dos veces una para el email y ñla otra para el password

283. Quedando de la ste manera:

284.

285. Con esto ya tenemos más pesponalizados nuestros tedittexts

286. Vamos a cambiar el width y height de los icionos a 35dp


287. g

288. Ahora necesitamos un botón que la presionarlo nos permit la acción de registrara , lo

agregamos después del linearlayout de contraseña , que tenga color de texto blanco y color de

fondo el primary
289.

290. Quedando de la sgte manera


291.

292. Ahora quiero q nuestro botón esté alineado al final de nuestro layout , para esto , lo voy

a insertar dentro de un linearlayout , con match parent ganto para el weight omo el height y la

propiedad garvity en bottom ,

293. Finalmente al botón le dsmos un margen de 30 dp para separarlo de los bordes


294.

295. Video 6 Crea pantalla de login

296. Creamos un nuevo activity – empty activity lo llamaremos login activity


297.

298. Copiaremos todo el contenido del registerActivity dentro de este logibnActivity y no

olvidar actualizar el contexto


299.

300. Otros cambios q haremos es qu ya no necesitamos el nombre , ya q haremos login con el

email y el password por eso eliminaremos el prmer linearlayout horizontalque solcita el

nomnbre completo
301.

302. Quedando de la sgte manera


303.

304. Y añadiremos en la parte superior el icono que tenemos en el selectoptionAuth,

básicamente sería copiar el Imageview y pegarlo antes del linearlayout horizontal que solicta el

email

305. Quedando de la sgte manera


306.

307. Le cambiamos al imageview el matgintop a 100 dp


308.

309. Y también un margin botton de unos 20dp

310.
311. Tenemos ya las pantallas de login , de registro, de selección , de autenticación y l

pnatalla donde selecciono si quiero inciar sesión como conductor o como lciente , con esto ya

podemos nicar con registrar los usuarios en firebase

312. Video 7 . Click Listener y Navegar entre pantallas

313. Vamos aejecutar la aplicación y ver q tenemos hasta ahora , nos va a mostrar la pantalla

del main activity , el primer cambio q vamos a hacer es quitar el tollbar q se muestra por

defecto, para esto vamos a air al archivo styles de la carpeta values de DArkActionBAr a

NoActionBar

314. Ahora si volvemos a correr el royecrto, no tendremos la appbar en la parte superior


315.

316. Vamos agregarle funcionalidad a los botones , para esto vamos a ir al

>HomeActiviry.xml y agregarle a los botones sus respectivos ids que sirvan de referencia

317. El priemro se llamará btnIAmDriver y el otro btnIAmClient


318.

319. Ahora lo q nwecesitamos es ir al homeactivity.java , vamos areferenciarlos , los

declaramos al incio de la clase y dep´s los refreenciamos dentro del método onCreate
320.

321. Ahora debemos añadirle el clicklistener le indicamos el el mButtonIAmClient utilice el

método setOnClickListener , (dentro del método , en las paréntesisi escribimos new dejamos

un espacio, y escribimos ctrl + espacio e implementaremos el método Vie.OnclickListener)

322. .
323. q

324. quedando de la sgte manera:

325.
326.

327. Y dentro del método onclick vamos aprogramar lo qjeu quremos q haga el botón cuando

presionemos sobre él

328. Lo que quiero es que la presionar en el botón soy conductor


329.
330. me lleve a la pabntalla donde puedo lehgir crear una cuenta nueva o loguearse

331. Vamos a indicarle que ejecute el método goSelectAuth , este método aun no existe , así

q vamos apermtir q Android Studii lo cree , para esto presionamos alt + enter

332.

333. Y elegimos la segunda opción


334.

335. Quedando de la sgte manera

336.
337. Lo que va a hacer este método es pasar de una pantalla a la otra, para esto vamos a

utilizar intent

338.

339.

340. s donde básicamente le damos el contexto donde nos encontramos , la activty hacia

donde debe ir y finalmente incializar el intent

341.

342. Ejecutamos la aplicación y clickamos en el botón soy clinte y vemos como nos lleva a la

activity selectOptionAuth
343.

344.
345. Copiamos el método y modificamos para q funcione también con el botón

mButtonIamDriver

346.

347. Ejecutamos la aplicación y probamos los botones


348.

349. Videii 8 Crear Toolbar

350. Vamos ala carpeta lyout y creamos un layout resource file


351.

352. Se va allmara action_bar_toolbar

353. Dentro del nuevo archivo creadom cambiaremos el constraintlayout por por un

AppBarLayout

354. Quedaría de l sgte manera


355.

356. Le daremos width en matchparent y height en wrpa content

357.

358. Dentro vamos acrear una propiedad llamada Tollbar, con width matchparemt y height

wrap content

359. También le asignaremos un id , simplemente la llamaremos toolbar


360.

361. Nos vamos al activity selecoptionAuth y agregamos la toolbar medante un include


362.

363. Si veificamos en el diseño veremos q ya se encuentra la appbar


364.

365. Como tiene el mismo color no se difrenecia , con la propiedad backgroun le indicam,os q

tme el color primary dark


366.

367. Y en diseño ya lo veremos más diferenciado


368.

369. Ahora vamos a al selecoptionAuthActivity.java

370. Y declaramos esta tollbr , luego la referenciamos esta toolbar (recorcdar q lo tenemos q

importar de androidx.appcompar.widget)
371.

372. Y vamos a cnfigurar un titulo en esta actionbar y habilitamos el botón Up

373.
374. Para q el función up funcione tenemos q realizar una configuración en el manifest y

buscamos la SelectOptionAuthActivity y definimos parentactivityname al home activity

375.

376. Ejecutamos el proyecto y verificamos que ya tenemos la action bar con el titulo yboton

up , pero de color negro


377.

378. Vamos a modificar el color del texto del botón y deltexto de la appbnar

379. Vamos a ir al actionvra tool bar xml (lo podemos hacer con ctrl + tab)

380. Lo que vamos a hacer es establecerle un tema a esta toolbar

381. Para estopo nos iremos al archivo styles y agregamos el style


382.

383. Regresamos al actionbar_toolbar

384. Y configuramos el tema


385.

386. Ejecutamos la aplicación y verificamos el cambio de color


387.

388.

389. Capítulo 3 Android y Firebase autenticacion

390. Video 1 Habilitar permiso de Internet

391. Para poder utilizar tanto las funxinalidades de Firebase como otros servicios de Goolgle

vamos anecesitar habilitar los permisos a Internet


392. Para ellos vamos a ir al Android Manifest y despúes de la etiqueta manifest vamos a

crearuna llamada uses-permission y en la propiedad Android:name le daremos

android.permission.Internet

393.

394. Esto basta para que nuestra aplicación se pueda conectar a internet

395. Video 2. Login usuario con FireBAse Authentication

396. Para esto debemos programar para q el poton “ya tengo cuenta” nos lleve al login

actovity

397. Entonces nos vamos al selecoptionAuthActivity.java

398. Pero antes debemos establecer los ids de los botones


399. El primero se llamará btnGoToLogin y el lootro será GoToRegister

400.

401. Ahora sí amos al selecOptionauth .java y declaramos un botón mButtonGoToLogin


402.

403. Y lo referenciamos dentro del OnCreate y a este botón llamamos a su setOnclicklistener

(se activa con control + espacio)

404.
405. Quedando de la sgte manera:

406.

407. Ahora debemos de impleme gar el método goToLogin


408.

409. E implementemos el intent dentro

410.

411. Pero debemos ir a la loginactivity.xml y darle sus respectivo Ids a los edittext y al botón
412.

413. Y ene l segundo edittext será de nombre textInputPassword


414.

415. Y en el botón el id será btnLogin


416.

417. Ahor declaramos los tres elementos en el loginactivity.java


418.

419. Y ahora los referenciamos mediante findviewbyId


420.

421. A continuación declaramos el setonclicklistener (se agrega el menú con ctrl + espacio)
422.

423. Cuando hagamos clic se deberá ejecutar una función login


424.

425. Como esta función no existe le permitimos a Android studio q la genereg (elegimos la

segunda opcion)
426.

427. Lo q vamos a hacer es obtener la información ingresada en elo edittext

428. Crearemosdos variables , una para el email y otra para el password y así guardar los

datos ingresados
429.

430. A continuación vamos ahacer una validaciones

431. Si tanto el email como el passwotd no estan vacios validamos q el password tenga al

menos 6 carcteres , ya q es un requisito de firebase


432.

433.

434. Si cumple estos requisitos vamos a logueranos en firebase

435. Para esto recurrimos a la documentación goglemaos autenticación Firebase con Android
436. Vamos a autenticación del sdk

437.

438. Debemos agregar la lbreria al module app

439.
440. Vamos a provechar y agregaremos las dependencias para poder trabajar con la base de

datos de firebase , pores googlemaos firebase database Android y elegimos nstalación y

configuración…

441.

442. Agregamos ambas dependencias y sincronizamos


443.

444. Con estas dos dependencias ahora sí nos vamos a ir al lognactivity y voy a declara un

objeo FirebaseAuth y lo referencia en el onCreate


445.
446.

447. Hago los mismo con la referencia de la base de datos en tiempo real
448.

449. Y lo refernciamos
450.

451. Ya integrados estos ervicios , voy a poder ulizar dentro del l función login el método

signinwithEmalandPassword , el cual va a recibir un email y un password que son los q

obtuvmos de los campos de texto

452. Para agregarle el listener no olvidar que se autogenera el código con ctrl + espacio
453.

454. Que estamos haciendo aquí , , bueno es indicarle qué va hacer cuando ya se haya

inscrito en firebase el usuario

455. Primro validaremos si la tarea se completó de manera exitosa, y en caso contrario

vamos a mostrra un mensaje con un Toast donde indicaresmos q el email o contraseña son

incorrectos
456.

457. En caso de que sea exitoso vamos a mostrar por ahora un mensaje que se realizó

exitosamnete

458.

459. Tenemos q crear un usuario en firebase

460. Configuraraemos el mtodo de ico de sesión , en este caso email y contarrseña


461. NOTA: mi app se detenía era porqie no exitía el lognactivity declarado en el manifest ,

lo agregu´re y se solucionó
462. Vamos a firebase a autenticación

.
463. En sign method acvtivamos usuario y cntraseña

464.

465.

466. Ahora vamos ausurios y agreamos un nuevo usuario

467.

468. Y se genrara el usuario [email protected]


469.

470. Probamos ingresando

471. Si no hace nada , prpbamos ctualizando los servicios de google


472.
473.

474. Ingreamos primero una constraseña incorrecta y verificamos el toast


475.

476. Si ingresamos la contraseña corrceta


477.

478. Falta agregarle 2 else, donde validamos q tanto el email y contraseña son obligatoriosy

que el password al menos tiene q tener 6 caracteres de lons


479.

480. Video3. Implementando progress dialog

481. Esta librerai va ai,plementar una barra de progreso q le va a ainidicar al usuario que

debe de esperar un momento mientras se realiza el proceso de login de usuario

482. Vamos a su repositorios en github

483. Buscamos https://github.com/dybarsky/spots-dialog

484. Nos indica q tenemos q validar en los reposyotoros q tengamos el jcenter

485. Vamos a build prpject y verificamos


486.

487. Y agregamos la dependencia en el module app


488.

489. Y le damosa sincronizar el proyecto


490. Y para utilizarlo vamos a irnos al login activity y declaramos una propiedad llamada

mdialog del tipo alerdialog, asgurarse q sea el q dice simplemente Android,app

491.
492. Y ahora lo referenciamos en el onCreate , donde configuramos su contexto , el cual será

login activity y establecemos el mensaje q querems mostrar con setmessag

493.

494. Y para mostrarlo vamos a decir después de las validaciones antes de q se ejecute el

método de login ejecutamos el mérodo show


495.

496. Y una vez q se termine de completra esta tarea indicamos q se dehe de mostrar con el

método dissmiss

497.
498. Vamos a a correr el proyecto

499. Veremos q se muestra tanto ingresemos una contraseña incorrceta o no

500. g

501. Así le damos al usurio a conocer q una función asíncrona se está ejecutando y q debe de

esérar un momento

502. Video 4.Diferenciar entre tipo de usuario cliente o conductor


503. Nos olvidamos agregar en el logon el actionbar q nos permita navegar hacia atrás

504. Así q vamos al activitylogon.xml el include del toolbar

505.

506. Ahora vamos al logonactivty.java y como hicimos en el selecoption

507. Voy adeclarar la propiedad toolbar


508.

509. Y copiar esta porcoon de código del selectOption


510.

511. Y lo pegamos en el loginacrivity,java


512.

513. Y modificamos el texto del toolbar a “Login”


514.

515. Ahora debemos también ir al manifest y añadir cual será la actividad padre (el

selectoption)
516.

517. Ahora si volvmos a correr

518. Muestra la barra con l nombre y el botón up


519.

520. Ahora debemos agregarle alboton registrar ahora pata q nos lleve a la pamntalla de

registro

521. Para esto vamos al selecoptionAuthactivity otro intent llamado goToRegister

522. Declaramos el botón register


523.

524. Mplementamos el setonclciklistener y el método gotoregister q contiene un intent

525.

526. No olvidemos referenciar este botón


527.

528. Ahora para diferenciar si soy un conductor i un cliente lo q voy a ahcer espasar un

parámetro cuando presionemos el botón y dicho parámetro tendrá un valor con el cula

podremos diferenciar si somos condunctores i clientes, estol o haremos implementando

sharedprefrences que nos permite almacenar un valor en el dispositiv hasta nosotros le digamos
q deje de existir a nosotros desinstalemos la aplicación

529. Pata poder empezar a utilizar shared´ppreferences primero debo de crear una variable

del tipo sharedpreferences y la voy a iniclaizar n el onCreate donde le vamos a establecer un

identificador , en este caso se va a llamar typeUser vamos al HomeActivity

530.

531.
532. Ahpra voy a crearme una variable del tipo editor donde guadraé lo q edite en el shared

preferences

533.

534. Agregarle final a la propiedad editor


535.

536.

537. Ahora en el botón cliente vamos a pasrale un parámetro q me permia identificar q el

usuario es un cliente o conductor , y q guarde este valot con el método appply


538.

539. Y con esto tendremos guardado en shared prfefrences un valor

540. Ahora si quisiéramos obtener ese valor es q cuando estemos en la pantalla de regsitro

ncesutamos conocer si es que debemos registrarnos como un usuario cliente o conductor y

como ya guardamos en sharedprefernces es obtener en esta pantalla ese valor


541.

542. Entonces os avmos al registeractivity y desde el home actovoty vamos a copiarnos la

declaracion e instanciacion del sharedprferences


543.

544. Y ahira para obtener un valor de shared´refrences ncesitamos obtener un stringg

545. El string q necesitamos obtener esel user ya q al editor le indicamos q establezca el valor

para ese identifcador (mostrar en homeActiviy) y le damos un espacio vacio , para q drvuelva

eso si es q el user no tuviera ningún valor


546.

547. Este valor lo vamos a guardar en una varable llamada seleteduser


548.

549. Y pata ver q está funcionando vamos a utilizar un toast donde muestre el valor asugabdi

a la variable selecteduser
550.

551. Ejecutamos la aplicación

552.

553. Video 5. Registro de usuarios con firebase authentication


554. Ahira vamos a ir a l aprte lógica done nos autenticamos con firebase

555. Vamos al RegisterActivity y declaramos unFirebaseAuth como en el logonactivity y

linstanciamos

556.

557. También ya vamos a empezara usar la base de datos Realtime de firebase

558. Entonces vamos a al modilo de database de firebase y le damos a crear abse de datos
559.

560. Vamos a empezar con el modo de prueba


561.
aquí lo que ha pasado q nuestra base d e datos tiee la configuración para q ucualquiera peuda

leer y escribir en nuestra base de datos

562. Vamos atener un nodo principal llamado mitaxi

563.
564. Vamos a crear en registeractivity.java una propiedad DAtabasereference

565.

566. Con esto estamos hacinedo referencia a nuestro nodo principal de nuestra base de

datos

567. Ahora vamos a agregar los ids al registeracriviry para poder utilizarlas
568.

569. Y también los textinpuredittext

570.
571.

572.

573. Regresamos al registeractivity.java y vamos areferenciar estas vistas


574.

575. Ahora establecemos el método setonclicklistener para el botón (utilizar ctrl + espacio)

576. Le vamsoa indicar q cuando hagamos clic en este botón ejecute un metodod llamado

tegisterUser , que todavía no hemos implementado


577.

578. Dejaremos q Android studio lo cree

579. Nota borrle el modificador private de la izquierda


580.

581. Quedando de la sge manera

582.

583. En este método lo priemro q debemos hacer es obrener lo que el usuario registra en los

campos de texto
584.

585. Ahora validaremos q tanto el nombre como el emaly el password no estén vacíos y que

la contrasela tenga al menos 6 caracteres


586.

587. Vamos a agregarle los toast si no cumple con las validaciones

588.

589. Ahora si todo escorrecto vamos a utilizar el emtodo createUserEmailAndPAsswird y

llamaremos addOnCompleteListener (con ctrl + espacio implementamos onComplete)


590.

591. Le vamos a indicar que si la tarea se ejecutó exitsamenet haga algo , y si no mostrrá un

toast indicando q no se registró el usuario correctamente

592.

593. Si todo se ha ejcutado correctamenete vamos a ejecutar un método llamado saveUser

que aun no he implementado


594.

595. Crearemos el metodo saveuser (le borramos el modificador private)

596.

597. A este metdo saveUer , lo priemro es que le vamos a apsar el name y el email
598.

599. Vamos air modificando nuestro me´todo saveuser

600.

601. Ahora vamos a usar el objeto database q ya lo habíamos referenciado , pero antes

vemos q nos indica q las variable deben de ser declaradas como final para que no marquen

errores
602.

603. Así que realizamos la modificación

604.
605. Ahora para guardar el usuario en la base de datos voy a cortar la variable selecteduser y

la pegaré dentro del método saveuser ,quedando así

606.

607. voy eliminar también el toast q estaba a continuación de esta vraiable

608.
609. A continuación agregaremos un condicional para identificar si el usurio selecciono el

botón conductor o el botón soy cliente

610.

611. Ahora si eligió driver voy a crear un nodo dentro la base de datos q llamaremos Users,

dentro a suvez otro nodo q llamaremos drivers y dentro de este configuraremos un nuevo

objeto , este nuevo objeto será un nuevo usuario


612.

613. Ahora debemos crearnos un modelo para el nuevo usuario , entonces iremos al paquete

principal

614.
615. Vamos air al package principal, botón derecho y creamos un nuevo package que se

llamará models

616.

617. Vamos acrear dentro del package models una clase llamada User

618.
619.

620. Dentro definimos sus propiedades

621. Necesitamos también crear un cosntructor con param,emtros y sus getters y setters con

alt + inset puedo ir generándolos en vez de copiarlos

622.
623.

624. También nos vamos agenerar un costructor vacío en caso q lo necesite


625.

626. Ahora instanciamos el nuevo usuario y le voy a decir q a este suaurio le establezca el

emal q tenemos en los parámetros y también le establezca el nombre


627.

628. En lo q estamos trabajando de la abse de datos , ants del servalue vamos agenerar un id

único para este usuario , lo haremos con el método push , y dentro de este id si guardaremos el

objeto user
629.

630. Haremos lo msmo para el cliente

631.
632. Ahora agregaremos un addOnCompleteListener recordar con ctrl + espacio

633.

634. Si esta tarea termina corrctamente mostraremos un toast de registro correcto y si no un

toast q indique registro incorrecto

635.

636. Hacemos los mismo con el cliente


637.

638.

639. Ejecutamos la aplicación

640. Si tenemos error podemos debuggera en logcat y elelgmos error

641.

642. Hemos olvidado referenciar el bo´ton mregister y los imputtexts


643.

644. Ejecutamos la aplicación y vemos q sale un toast con registro exitoso

645. Y si vemso ena la abse de datos vemos q se ha registrado la información


646.

647. También verficamos que también existe como un nuevo usuario


648.

649. Video 6 .Registro de usuarios con Firebaseauthentication

650. Podemos verificar q al crear un usuario se genera un id único

651.
652. Vemos q al registrar el id en la base de datos no lo hace con el mismo id que cuando se

crea el usuario , para que se guarde en la base de datos cn el mismo iduser , ya no vamos a

utilizar el método push

653. Agregamos al método saveUser el paramtero id

654.

655. Y vamos a obtener el id desde la instancia de autenticación de firebase mAuth


656.

657. Ya no vamos a usar el push , más bien usamos child y le pasamos el id


658.

659. Vamos a agregarle también al registeractivity un toolbar

660. Entonces voy a irme al activityregister.xml y vamo a añadir un toolbar

661. Agregamos el include pero venmos q está enciamdo el diseño

662. Avmos a copiar del lgonactivity al registeractivty.java los registros asociados al toolbar
663.

664. Modificamos el texto a Registrar Usuario


665.

666. Y vamos al manifest y le indicamos que su activty padre va a ser el selectOption


667.

668. Para q no esté encimado agreagmos la propiedad layout behavior al linear lyout
669.

670. Ejecutamos la aplicación y vemos q tenemos la toolbar , el botón up funciona y

registramos un usuario como conductor

671. Ahora ya tenemos un registro como conductor


672.

673. Yvemos q Jonathan tiene el mismo id q lo guardado en la base de datos

674.

675. Vamos añadirle al register la barra de progreso para q el usuario sepa que tiene qw

espera un momento a que se registre el usuario


676. No svamos a ir al loginactivty y cipiamos la propiedad alertdialog y también copiamos la

instancia y la pegamos depsues de mpref

677.

678. Ahora le decimos que silos campos están llenos y la constraseña tiene al menos 6

caracteres ,se mostrara esta barra de progreso y si ya completó l tarea de registrar al usuario se

oculta esta widget con el metodod hide


679.

680. Probamkos nuvemente y registramos otro cliente y vemos q ahora si registra

normalmente el usuario y apareceel widget de prrogreso

681. Video7. Separra tollbar en una clase aparte

682. Ahora vamos atratar de mejorr el código y aplicar buenas prácticas

683. Primero vamos a mover la toolbar a una clse aparte para poder invocarlo desde lo

necesitemos y se facilite el mantenimeinto de la misma cuando lo necesitemos

684. Vamos a crear en el paquete principal un nuevo pquete que se llamará includes
685.

686. Dentro de includes creamos unjaca class q se va llamar mytooolbar y dentro creamos un

método estatico publico q se llmará show

687.

688. Lo q recibrá primero este método es la actividad se va amostrar , el titulo y si va

amostrar o noupbutton
689.

690. Copiamos el código ya sea de loginactivity o register activity , asegúrense de importar el

que dice androidx

691.

692. Quedando de la sgte manera


693.

694. No olvoidarse modificar el contexto a activty y lo mismo en los tres método de abajo

695.

696. En settitle registramos el parámetro titleg , igual en el caso del parámetro boolenao para

definir si va a haber o no upbuton


697. Vamos al loginactivity y borrams la propiedad así como los método donde llamamos al

prpedad mtoolbar y lo reemplazamos por mytoolbar.show

698.

699. Quedando de la sgte manera:


700.

701. Haremos lo mismo en la de registro

702. Quedando:

703.
704. Si corremos la aplicación debería mosrars como si nada hubiera sido modificado

705.

706.
707. Video 8 . Mejorando el código del proyecto parte 1

708. Una buena practcva al trabajar con firebase es gnarar un mlodelo por cada uno de los

nodos , tenemos un nodo para clientes y otro para conductores vamosa crear una clase driver y

otra Cliente

709.
710.
711.

712. Ahora q ya tenemos a ,los modelos q representan a ls dos nodos de firebase , lo sgrte q

debemo cambiar es ir al register activity y verificar q en el método registeruser utilzamos el

objeto mAuth y el método createUserWithEmail , lo qu vamos a hacer con la finalidad de

modularizar el código es separar la lo´gica del registro en un archivo a parte y lo único q deberoa

estar aqupi es el addonCompleteListener


713. Vamos acrear entonces un nuevo pajkete y lo vamo allamar provider , dentro una clase

q se llamará aurhProvider

714.

715. Y dentro una clase llamada AuthProvider

716. .

717. Aquí no vamos a copiar el firebaseAuth desde el registerActivity


718.

719. Crearemos un constructor y dentro de este voy a pegar la instancia de mAuth que

copiode registerActivity

720. g
721. Ahora crearemos un método publco llamado register, que hará este me´todo,

simplemente vamos a copiar lo q tenía en eregiteractivity

722. Copiamos

723.

724. En el authprovider declaramos un método llamado regsiter que recibirá como

parámetros el email y pasword y dentro nos va a devolver el método del

createUserWithEmailAndPAsswotd
725.

726. Nos va arrojar un error, voy aelegir la primera opción del foquito rojo donde nos indica q

va retornar un Task del tipo AuthResult


727.

728. Lo mismo dberiamos hacer con el método de login (copiamos el método q acabamos de

crear) , este método también recibe el email y el password, pero ya no es créate sino sigIn
729.

730. También vamos a separar la lógica para insertar los dtos en realtimedatabase
731.

732. Entonces vamos a crear un ClientProvider y me voya copiar le objeto Databsereference

del registerActivity

733.
734.

735. Creamos un constructor vacío (alt + insert contructor –select none)


736.

737. E nstanciamos el mDAtabase , lo copiamos del registeractivity


738.

739. Lo qyue estamos haciendo es un provider para l cliente y ahí se va amanejar toda la

lógica de inserción y actualización de datos , entonces aprovecharemos y en este databse

vamos a hacer referencia al nodo de clientes


740.

741. Ahora vamos a crear otro método publico que deberpia retornarnos también una tarea ,

al igual q lo hicimlos con el authProvider y esta tarea será de tipo void y lo vamos allamar créate

para seguir los standares al trabajar por ejem con un api rest , para crearnos un cliente

necesitamos crearnos un cliente de tipo client , el cual ya creamos anteriormenete y lo

imprtamos desde nuestro paquete modelos

742. y para crearnos un cliente registramos simplemnete


743.

744. Y para crear nuestro cliente simplemente decimos mDatabse punto child
745.

746. Recordar que dentro de clientes necesitamos crear un id para el cliente y dentro sus

datos, entonces a continuacn ponemos el identificador


747.

envalor le pasamos el cliente q tenemos en el parámetro


748.

749. Debems hacdr lo mismo para el condufctor

750. Crearemos un driver provider

751.

752. Copiaremos el código del clientprovider y lo adecuaremos

753. Cambiamos el constructor y debe de apuntar al nodo de drivers

754. Al final debe de quedar de la gte manera


755.

756. Ahora vamos al loginactivity y registeractivity y borraremos el mauth y el mdatabase y

sus instancias (vamos primero al registeractivity) y vamos adeclrar un objeto del tipo

Authprovider y uno de clientprovider

757.
758.

759. Ahora inciliazamos el authprovider y el clientprovider dentr del onCreate


760.
tener en cuenta que el authprovider me arrija un error ya q me pide implementar alguns

métodos

761. NORA : cometí un error al importar Authprovider jale de java.security antes que de mi

package providesr

762. Muestra error:


763.

764.

765.

766. Corregimos el java package y ya no muestra error

767. Ahora al método registeruser le vamos a cambiar el nombr a clickRegster


768.

769. Y ahora cirtamos lo seleccioando, el método createUserWithEmmailAndPAssword

770.
771. Una vez cortado en vez de este código llamamos a un método register , el cual aun no

hemos mplementado

772.

773. Y permitimos q Android studio lo cree borrarle el modificador private


774.

775. Dentro vamos apegar el método q habíamos cortado , pero ya no vamoa usar el mauth,

sino el mAuthProvider , reemplazar por el método para crear el usuario, que se llamaba register

776. Dehemos agregar tambi´n los parámetros email y el password

777.
778. Ahora , al igual q hicvimos antes , vamos aejecutar el addonCompleteListener y decimos

q si la tarea fue exitosa obtenemos el id q se creo cuando el usuarios e registró correctamente

779. Y vamos aguardar ese usuario en ela base de datos medienate el método créate , en

este caso solo vamos a trabajar con el cliente , ya que en el caso del conductor vamos a ahcerle

un formulario especifico de registro , debería tener el vehiculo y la placa de rodaje

780. Decalaramos el emtodo créate: (no olvidar importar la clase desdeel package model)

781.
782. Igual , en el método créate ejecutamos el oncompeltelisteners , sito do fue ok vamos a

decirle que haga algo , pero sino , va a mostrar unm toast con un mensajed e errpr

783.

784. Ahora justo después del registro vamos a crearnos un cliente , recordando q en el

cosntructor recibe un id , un nombre y un email

785.
786. Necesitamos el id , ahora lo vamos a obtener de la clase FirebaseAuth

787.

788. Necesitamos el nombre , que vamos a pasarlo por parámetro

789.

790. Tambipe, debemos de modificar los parámetros con el modificador final


791.

792. Y ahora ya no va a ejecutar el saveuser sino el método créate que va arecibir como

parámetro un cliente

793.
794. Y vamos a comentar el código del método saveuser q está más abajo

795.

796. Y ahora al método register tenemos q pasarle el name , email y password , que los

obtenemos de .los editext


797.

798. .ahora tenemos el código mas limpio , mas modullarizado

799. En el método créate si la tarea se ejecutó exitosamente dejaremlos un toast q lo indique

800.
801. Ejecutamos la aplicación

802. Y vemos q registra correctamente pero los clientes se guardan con el , si no quiero eso ,

que solo vaya con name y email , puedocrear un map

803.

804. Video 9 mejorando el coigo del proyecto parte 2

805. Vamos acrear un package q se va llamar activities y refactorizamos cuano metamos las

cativities y dentro dos paquetes uno client y le otro driver


806. el registeractivity lo metemos

en client

807.

808. Y dentro de driver vamos acrear una nueva actividad , una empty activity

809. Y se va allamar RegisterDriverActivity


810.

811.
812. Y lo q vamos a ahcer es coíar todo el código de registeractivity excepto el ultimo método

q esta comentado que se llama saveuser

813. Borramos el sharedprferences

814.

815. Mucho cuidado dentro del oncreare en setcontencview cambiar al regsiter driverg
816.

817. En mytoolbar modoficamos el textoa rgistro de conductor


818.

819. Elimnamsom el shareprefernces

820.

821. En el mdialog hay q modificar el contexto , será registerDriverActivity


822.

823. Y el Clienteprovider lo vamos a cambiar por un driveprovider (importar la clase)


824.

825. Igual al instanciarlo

826.

827. En los toasr del método register y créate hayque modficar el contexto

828.
829.

830.
831. En el método créate ejecutamos mdriverPorvider y le vamos a pasar como modelo un

objeto Driver

832.
833. En el método register una vez q se ha creaddo el usuario , para guardar el conductor en

la base de datos debemos adecuar la instancicacion , debemos crear un objeto del tipo Driver

834.

835. Pero hay un detalle , el condugotor en el mode,o vmos q también tiene la marca del

vehiculo y la placa de rodaje, por lo q hay q modificar lel formulario

836. Vamos a copiar el contenido del layout dl register del cliente y lo pegamos en el

register_driver

837. Reemplazar el contexto


838.

839. Y debemos añadir dos campos más pegamos el ultimo linearlayout dis veces abajo y

adecuamos los respectivos ids y las referencias a los iconos que van a mostrar
840.

841. Y ek otro

842. Inputtext
843.

844. Como vamos a obtener estos iconos?

845. Vamos a la carpeta drawable , seleccoionmaos new vector asset


846.

847. Vamos a darle a clipart y en buscar ponemos car


848.

849. Modificamos el color pniendolo un poco menos oscuro

850. Y la densidad de los pixeles de 50 x 50 y le vamos a cambiar el nombre a icon_car


851.

852. Le daremos next y finalizar

853. Mee voy a buscar otro ícono para la placa de rodaje , vamos a elegir el q se llama filter_1

y le cambiaremos el nombre a icon_plate


854.
855.

856. Quedando de la sgte manera:


857.

858. Ahira ya contamos con todos los campos necesarios para registrar un vehiculo

859. Nos vamos al registerdriver_activity.java yagregamosdos inputedittext más

860. Para la marca y la placa de rodaje


861.
862.

863. En el método del clickregister también necsitamos obtener los valores de esos campos,

crearemos dos variables


864.

865. Ahora en las validaciones necesitamos saber si el usuario ingresó esos valores

866.

867. También ene l método de registro vamos apasar esos parámetros , tanto la marca como

la placa de rodaje
868.

869. En la declaración del método register debemos de recibit estos dos parámetros también

870.

871. Ahora , lo único q debería cambiar aquí s que cuando el usuario se registre

correctamente , debemos instanciar un driver , que ncluya todos los parámetros necesarios y le

asiganmos este driver al método créate para que se registre en la base de daros
872.

873. Y ahora como haríamos para que cuando le demos al botón registrarme ahora me lleve

al formulario q corresponda , seguns ea conductor o cliente


874.

875. vmos utilizar shared preferences , vamos acopiarlo del client.registeractivity y lo

pegamos en selectOptionactivity
876. g

877. hacemos lo mismo para refrenciarlo en el onCreate


878.

879. Y en el método gotoRegister lo que haremos es obtener el tipo de usuario desde el

sharedpreferences , llamamos al componente user para leer su contenido y le dejamos

incialmente un valor por defecto, un spacio


880.

881. Le indicamos que si el valor q devuelve shared preferences es client , nos llvará

mediante un intent a registeractivty , y si el valor devueklto es driver , nos llvará a

RegisterDriverActivity

882.

883. Ahora si vamosa correr l aplicación y vamos a ver como estpa funcionando
884. Y probaré tanto como conductor que como cliente y vemos si se acrivan los respectivos

formularios de rgistro

885. Probamos registrando un conductor

886.

887. Y vemos q lo hace exitosamente

888. Y validamos yendo al módulo de autentcación de fireabse verificando si se registró como

usuario y si se guardó en la base de datos


889.

890.

891. Video 10. Cerrar sesión

892. Ahora vams a continuar con la inetgración de la api de googe Mpa

893. En client vamos a crear una nueva actividad empty actovity llamada MapClientActivity
894.

895. Igual haremos con un mapa para el conductor MApDriverActivity

896. Cambiaremos los constraints layoit por coordimatorLayout en ambs activities

897. Y les agregaremos a los dos la propiedad fitsSystemWindows a true


898.

899.
900.

901. En el mapdriver vamos agregarle un textviewg que diga este es el mapa del conductor

902. Y los mismo haremos con el map del cliente


903.
904.

905. Ahora en el registerdriver activity ya no bvy a mostrar un toast cuando se regsitre

correctamente sino un intent que me lleve al mapDriverActivity


906.

907. Cuando nosotros registramos un usuario nos debrá poder llevar al mapdriver , pero el

usuario no debería pder regresar a esra pantalla de registro , entonces a este intent le vamos

añadir una propiedad addflags , done los voya decir q el intent utilice una propiedad flag activity

new task o una propiedad llamada FLAG_ACTIVITY_CLEAR_TASK , CON ESTO NOS ASEGURAMOS

Q EL USUARIO NO PUEDA IR HACIA ATRÁS , y después lógicamente ejecutamos el método

stratactivity
908.

909. Esto también lo vamos a hacer en el registeractivity , pero ya no me va allevar alñ

mapDriver , sino al mapclient,


910.

911. Ambién se nos olvida si en el login vamos air al mapa del clente o al mapa del conductor,

entonces me voy a copiar el sharedpreferences y nos vamos al loginactivity tanto el objeto como

la refrenciacion en el onCreate
912.

913. Ahora, una vez q el usuario hay realizado correctamente el logueo , obrendremos cual

fue su elección con el objerto preference


914.

915. Y vamos aejecutar la aplicación y voy aloguarme como conductor “javier” y lugo como

cliente (creamos cliente jani) , si le damos a atrass cuando estamos en el mapa , se cerrará la

aplicación porque así lo configuramos con la propiedad addflags

916. Probmaso y vemos q nos lleva al mapa del conductor


917.

918. cuando nosotros nos logueamos i hacemos registro se crea una sesión de usuario

919. si nosotros una vez q estamos en el mapa damos al botón back y volvemos a entrar nos

lleva al homeActivity , debería recordar nuestro usuario y llevarnos directamente al mapa,que le

corresponda

920. para esto vamos a ir al mainactivity y sobresescribiremos un método del ciclo de vida de

Android llamado OnStart


921.

922. A continuación validamos q el usuario actual sea diferente de nulo

923.
924. Y vamos a utilizar el sharedpreferences y un condicional con los intents (que lo

copiaremos del login activity y trendremos el cuidado de adecuar el context)

925.

926. Ahora volvemos correr la aplcació y probamos dandolde atrás , e intentamos ingresar

nuevamente

927. Veremos q así cerremos la aplicación la sesión no se cierra , hay q indicárselo


928.

929. Para probar como cerrar la sesión , en el mapa del cliente.xml borramos la etiqueta y

agregaremos un botón con el texto cerrar sesion y de id btnLogOut


930.

931. g
932. Vamos a ir al mapcloientactivity.java y vamos acrear un botón y areferenciarlo ene l on

Create

933.

934. Defnimos a continuación su setonclicklistener (con ctrl + espacio en el enw)

935. .
936.

937. Lo q vamos hacer para cerrar la sesión , avmos a ir al authProvider t y declaramos un

método Logout donde llamaremos a la instancia de autenticación mAuth y a su método SignOut,

con esto cerraemos la sesión del usuario


938.

939. Ahora regresamos al MapClienteProvider y declaramos un objeto AuthProvider y lo

referenciamos en el onCreate
940.

941. Y cuando le demos clci al botón de logout vamos allmara simplemnet al logout y
942.

943. Y a continuación declramos un intent que nos lleve al Home Activity , le indicamos que

fnalice esta actividad con finis()


944.

945. Ejecutaremos la aplicación


946.

947. Damos clic en cerrar sesión

948. Y nos llevará al home


949.

950. Si cierro la app y la vuelvo a abrr no llevara al home porq las sesión se ha cerrado

951. CAPITULO 4

952. Video1. 1. Integrar nuestra App con Google Maps API

953. Ahora continuaremos con la integración de google maps en neustra aplicación , en el

mapdriveractivity
954. Vamosa google y buscamos google console y entramo a google cloud console

955.

956. Vamos aloguearnos con la misma cuenta que trabajamos en firebase

957. Una vez dentro vamos a api y servicios y eleginmos credenciales


958.

959. En la parte superior seleccionamos un proyecto , en este caso mitaxi


960.
961.

962. Una vez dentrole damos AL BOTÓN CREAR CREDENCIALES


963.

964. SELECCIONAMOS CLAVE DE API

965.

966. Y NOS VA AGENERAR UNA API-KEY que nos permitirá integrar google maps
967.

968. La vamos acopiar y le daremos al botón cerra y nos vamos a Android studio a la carpeta

res , dentro de values y vamos acrear un nuevo archivo


969.

970. Y crearemos un archivo de nombre google_maps_api


971.

972. Agregaremos una etiqutea string donde agregaremos la pai_key y algunas propiedades

973.
974. Ahpra debsmoa it al activitymapdriver.xml5 y borramos el text view y agregaremos un

fragment

975.

976. Nos arroja errores pporque aun no hemos integrado los servicios de google

977. Ahora debemos ir al buil.gradle donde tenemos nuestras dpendencias


978.
979.

980. Usarmos la versión 16.1.0 y le daremos synchronize


981.

982. Una vez terminado nos iremos al activitymapdriver.xml y veremos a el fragmnet ya no

nos arroja error


983.

984. Ahora necesitamos irnos al mapdriveractivity,javag y aquí utilzaremos una interface q

nos facilita los servicios de google , la interface se llama OnMapreadyCallback

985. Hay q decirle en el fogo crojo q implemente los métodos


986.

987. E implementaremos slo el método onmpaready

988.
989. Ahora necesitamos crearnos 2 propiedades

990.

991. Enel oncreate referenciamos el NmapFragment


992.
g.

993. Ahora invocarems el método getAsync del nMapFragment , este método getasyn dice q

recibe un callback , en este caso será this , esta actividad está implemetado el

onMApReadycallback
994.

995. Ahora iremos al método OnMap Ready aquí le ddamos a nMao googlemap como

parámetro y le indicamos el tipo de mapa que vamos amostrar con setMapType


996.

997. Debemos de agregarr en el manifest un metadata en relación al apikey que hemos

agregado
998.
999.

1000. Y ejecutamos la aplicación

1001. Y nos oogueamos como codmuctor , “javier”


1002.

1003. Vamosa ir a googl console a la parte de panel


1004.

1005. Y vamos a enable apis and services

1006.
1007. Y activaremos maps sdk para androidg , lo seleccionamos y habilitamos

1008.

1009.

1010. Y vilvemos a correr el proyecto


1011.

1012. Video 4.2 Integrar menú de opciones en el mapa

1013. Ahora tambi´´en necesitaremos implementar este mapa en el mapCleinetActivity

1014. Nos vamos a ir al activity_map_driver y vamosa copiar el fragment


1015.

1016. Y lo copiamos al fragmente_map_client (borramos el button creado ahí )

Y pegamos el fragment

1017. Nota (hay q mover el mapdriveractivity.java a la carpeta driver por errro no estaba

ahi)

1018. Ahora vamosa copiarnos del mapdriver.java las dos propiedades necesarias para

implementar el mapa
1019.

1020. Y las vamosa pegar en el mapclient.java


1021.

1022. Nota cesar: el mapclienteASctivity lo convirtió en un fragment y nMAp ahora se llama

googleMap y y nMApFragment ahora se llama MApFragment


1023.

1024. Vamos a borrar el botón de logout por por ahora no lo vamosa utilizar
1025.

1026. Borraremos también el método setonclicklistener y la referencia del botón mediante el

findviewbyID
1027.

1028. Vamosa agregar el AuthProvider mAuthProvider en el clientFragment


1029.

1030. Y voy a dejar el método logout para utilizarlo despúes

1031.
1032. También copiamos el método onMApReady desde el map driver activity

1033.

1034. Lo pegamos en el mapclienteFragment al igual q las instancias de llas propiedades

(modificado por cesar)


1035.

1036. Finalmente con el profesor cesar quedó así


1037.

1038. Falta la implementación del onMApReadyCallback


1039.

1040. Con sto ya tendríamos integrad en el mapclient fragment el mapa de google

1041. Vamos acrear en este mapa un toolbar para poder usar la función de cerrar sesión

1042. Vamos a ir al mapDriverActivity y con el include agregamos una toolbar


1043.

1044. Ahora nos vamos al mapDriver.java y desde ahí llamaremos a la toolbar


1045.

1046. Ahora quiero además que el toolbar tenga un menú de opciones

1047. Para esto vamos a crear en la carpeta res un nuevo Android resource directory
1048.

1049. Esta se llmará menú y resource type también lo configuramos amenu (ya la creó cesar)
1050.

1051. Dentro de est carpeta vamos acrear un nuevo menú resource file y lo llmaremos

driver_menu
1052.
1053.

1054. Dentro de la etiqueta menú vamos a tener un conjunto de acciones

1055. Basicamenet estamos definiendo el id l el titulo y la ubicación del menú , con

showAsAction siempre el menú se mostrará como lo vemos en el diseño

1056.
1057. Se va amostrar el menú , y al desplegarse se muestra la opción q acabamos de definir

1058.

1059. Si usaramos el parametro always , se vería en la toolbar

1060.

1061. Vamos a regresar al mapdrveractivity.java

1062. Y declarar dos métodos: el oncreatOptionsMenu y el método onOptionsItemSelected

(escribo directamente el nombre de los métodos y androdi studio los va areconocer)

1063. Lo registramos después del onMapReady


1064.

1065. Dentro del método onCreateOptionsMenu agregamos el método getMenuInflater (el

menu inflater genera un enú a partir de un archivo xml ) y le vamos a pasar como pa´rametro el

driver_menu , que es el que acabamos de crear


1066.

1067. Y en el método onOptionsItemselected agregaremos un condicional dodne validam os si

el action del ítem selecioando del menú corresponde al action_logout , vamos aejecutar el

método logout() , que por ahora no lo tenemos umplementado


1068.

1069. Ste método logout vamos a copiarlo del mapClient y también nos faltaría declarar el

1070. Authprovider
1071.

1072. Copiamos l authprovider desde el clientdriver.jaav


1073.

1074. Tenemos q adecuar finalemnet el método logout


1075.

1076. nOTA(al cambiar la activity de incio hay q desisntalar para q sea ctualice)

1077. probamos , he cometido un error , hay q agregar la instancia


1078.

1079. Y ejecutamos la aplicación y todo salwe ok , inicamos como Jonathan q es un chofer

1080. Vamos a hacer lo mismo para el cliente , primero vamos acrear un menú para el cliente ,

copiamos el driver_menu y creamos un clente_menu


1081.

1082. Video 4.3 Utilizar el GPS para obtener la ubicación

1083. Paa trabajar con el gps vamos a agregar la implementation de la librería location
1084.

1085. Vamos al mapDriver.java y agregaremos dos propiedades


1086.

1087. Necesitamos también un callback q va a estar escichando cada vez que el dueñop del

celular se mueve
1088.

1089. Y vanmosa sobreescribir el método onLocationresult , el cual recibe como parámetro un

objeto LocationResult
1090.

1091. Vamos utilizar un for para recorrer una propiedad de tipo location
1092.

1093. Dentro vamos a hacer una validación donde preguntamos si el contexto de la aplicación

es difeente de nulo vamos aobtener la ubicación del usuario en tiempo real


1094.

1095. Pero antes vamos atener q instanciasr las dos propiedades del tipo locationRequest y

FusedLocationProvider

1096. El locationrequest lo vamos a instanciar en el onMapReady y le vamos adefinir algunas

propiedades, como setinterval para definir el periodo en el cual se va air actualizando la

ubicación en el mapa, se aconseja registrar unn valor entre 1000 y 3000

1097. setFAstesestinterval es que si la ubicaion esta disponible más pronto , se obtendrá


1098. con setprority se establece la prioridad del uso gps usando highaccuracy significa q va

atratar de ser muy exacto

1099. usamos otra propiedad setSmallestDisplacement que dedfine la minima cantidad entre

el desplazamiento de las actaualizaciones

1100.

1101.
1102.

1103. Ahora vamos a utilizar mFusedLocation y lo primero q debemos hacer es instanciarlo en

el onCreate
1104.

1105. Con my fusedLocation vamos apoder inciar o detener la ubicación del usuario cada vez q

lo veamos conveniente, pero antes necesitamos obtener los permisos de parte del usuario que

utilzará la aplicación

1106. Para hacer esto vamos asobreescribir un método llmado onRequestPermissionResult


1107.

1108. En este método vamos apreguntar si el requestcode va ser igual a una variable global

que nos vamos a crear

1109.
1110. Crearemos la constante global la cual va aser como un flag o bandera , para saber si

deberpa de solcitar los permisos de ubicación

1111.

1112. Volvemos al método onRequestPermissionResult y vamos a avlidar a su vez estamos

pregunstando si los usuarios han concedido los permisos


1113.

1114. Adentro incluimos otro if donde hacemos otra validación

1115.

1116. Si estos permisos han sido concedidos , vamos a utilizar mFusedLocation y su método

requestLocationUpdates , donde el primer parámetro es el locationRequest , el segundo


parámetro el callback que declaramos arriba , y un apropiedda llamda looper ,mylooper que

maneja solcitudes concurrentes

1117.

1118. Necesitamos también añadir unos permisos en el manifest para obtener la uubicación

() el access_fine_location
1119.

1120. Lo sgte es crear un m etod para validar si el usuario no concede los permsisos y

copiamos del método onRequestPermisssionResult la línea de código del if ContextCompat…

1121. Y preguntaremos si los permisso son diferentes de los concedidos


1122.

1123. Leer esta documntacion

(https://developer.android.com/training/permissions/requesting)

1124. Si aplica esta validación haremos otra dentro donde mediante un alert informaremos al

usuario indicándole q debe de facilitar los permisos para efectuar loq e la apliación requiere
1125.

1126. Ahora implemntamos el alert (elegir el q tiene app.compx) en setpositiveButton se

genera código automaticamente


1127.
0

1128. La línea q va dentro del onClick ser´pa que permita conceder los permiso

1129. Necesitamos también agregar un else donde agregaremos la misma línea de código, la

que asina los permisos


1130.

1131. Ahora implementaremos otro método para incxializar el listener d nuestra ubicación y

se llamará startlocation

1132.
1133. Dentro de este tambié validaremos que si la versión de Android es mayor o igualñ a la

versión marshmellow

1134.

1135. Copiaremos una línea de código que ya hemos utilizado para ver si los permisos han sido

concedidos y también vamos aejcutar el mFusedLocation con su evento

requestLocationUpdates
1136.

1137. Cuando se ejecuta el método startrlocation va aentrar al mlocationCAllback y nos va

obtener la ubicación en tiempo real

1138. Pero nos falta en el método startlocation


1139.

1140. Este método startlocation , lo vamos a invocar en el onMapReady , después de

establecer las propiedades del mLocationRequest


1141.

1142. Ahora debemos de ir al mlocationCallback y vamos a utilizar el objeto nMAp

1143. Y llamaremos a una función llamada moveCAmera , esta función va arecibir una función

llamada cameraUpdatefactory que va situar la cámara de acuardio a la ubicación actual del

usuario, establecermos el zoom ,


1144.

1145. Por ultimo vamosa ir al checkLocationPermissions y nos faltó agregar la propiedad

créate y show , sino no se va amostrar el alertdialog


1146.

1147. Este método checkLocationPermission deberíamos utilizarlo dentro del startlocation si

es q no se han concedido los permisos por el usuario

1148.
1149. Vamos acorrer la aplicación y veremos como está funcionando

1150. Al ingresar al mapa nos preguntará

1151.

1152. Esto nos pide la primera vez le damos en allow y ns va allvar a donde el emulador de

andrpid devuelve coordenadas por defcto


1153.

1154.

1155. Para realizar una prueba más adecuada podemos descarfar una app que se llama fake

gps

1156. Para habilitar las opciones del desarrollador


1157. Configuración > Sistema > Acerca del dispositivo > Número de compilación

1158. Paa habiliatar el programa de fake gps

1159.

1160. Me lleva auna ubicación ficticia


1161.

1162. Ahora vamos a habilitar los botoncitos para hacer zoom

1163. Dentro del método onMapready agregaremos el método getUISettings


1164.

1165. Y volvemos a correr la aplicación y veremos los botones


1166.

1167. Video 4 .Validaciones del GPS

1168. Si entro como conductor y al pedir permiso le doy rechazar


1169.

1170. En este caso no obtendría la ubicación del usuario y la aplicación quedaría inservible ya

q esta aplicación se basa toda en el uso del gps

1171. Si cierro la aplicación y la abro nuevamente se mostrara el sgte mensaje es debido a q

se esta jecutando el método checkLocationPermission y nod v a mostarr el sgte dialog


1172.

1173. Si le damos ok , nuevamente saldrá al mansaje pidiendo oncedamos los permisos

1174. De nuevo le vamos a dar rechazar

1175. Pero para asegurarme q la aplicación funcione es hacer la validación del método

checklocationpermission, cuando el usuario presiona en el botón rechazar


1176. Por eso vamos aal método onrequestPermissionResult agregaremos un elsepor cada

una de las validaciones

1177.

1178. Si ehjecutamos nuevamente la aplicación nos pedirá conceder los permisos hasta

lohagamos

1179. Otra validación q debemos hacer es q al inicar sesión el usuario no tenga activado el gps

1180. Probemos desactivando elgps y entro a la aplicación

1181. Ahora lo q vamos ahacer es agregar un dialog para q nos adiverta q el gps stá apagado y

ques no slleve a configuración y nos permita encenderlo


1182. Para esto vamos agregar 2 metodos , el primero para saber si el usuario tiene o no l gps

activado, vamosa declarar una avriable booleana q llamaremos isActive

1183.

1184. Agregaremos un objeto del tipo LocationMnager la cual provee información de los

servicios de ubicación qhe nos devolverá si está activado

1185.

1186. De acuerdo a esto vamos a validar si esq esta activado ,


1187. is esta activado nuestra variable isActive pasarpa a true y retornaremos esa variable

isActive

1188.

1189. Entonces como indicamos nos permitirá saber si tiene activo el gpsg

1190. Y rearemos otro método que permita crear un alert q le permita al usuario ir a las

configuraciones en caso de q no tenga activo el gps


1191.

1192. Dentro crearemos el alertdialog utilizar el androix.compat , le vamos a agregar un

botón , el cual va arealizar la acción

1193. No olvidar agregar el punto y coma al final

1194.
1195. Agregaremos la nsruccion activtyForResult la cual va a esperar hasta q el usuario realice

una acción,es decir , va a estar esperando a que el usuario active el GPS

1196. Aqupi vamos a gregar un intenet que nos va allevar a la opción de configuración para

activar el gps

1197. Pero antes avmos anecsitar crearnos una avriable global que vamos a necesitar como

parámetro del startactivityforresult

1198.
1199.

1200. Agregaremos el ,créate ,show para se viualce el alertdilog

1201.

1202. Ahora , como les dije el método starrActivityForResult va aestar esperando la acción del

usuario

1203. Para poder aprovechar esto vamos atener q escribir un método onActivityResult

(comenzamos a escribir el nombre)


1204.

1205. En este método vamos avalidar si el requestcode es igual al settings_request_code que

establecimos dentro del método showAlertDialogGPS y preguntaresmos también si el gps está

activado , en este caso eso significará que el usuario si activó el gps


1206.

1207. Si cumple esta condición inicaremos el listener de nuestra ubicación actual con el

método del fusedlocation

1208.
1209. Aqupi nos va arrojar un error para esto debemos agregar la anotación

1210.@SuppressLint("MissingPermission")
1211.

1212. avisándonos que hemos de comprobar que tenemos permiso

antes de hacer la llamada. Realmente lo hemos hecho. Para desactivar

la advertencia

añade @SuppressLint("MissingPermission") antes de la

función.

1213.
1214. El metdo gpsactive también podemos utilzarlo en el método startlocation

1215. Preguntaremos si el gps esta activo , entonces q si empiece a escuchar

1216.

1217. Y en caso contrario ejecutaremos el método showAlertDialog

1218.
1219. Igual en el otro else

1220.

1221. Esta validación también es necesaria si el usuario concede los permisos necesarios para

obtener la ubicación

1222. Así qu e cuano pregunte para conceder los permisos evalue si el gps esta activado o no,

todo sto tenemos q hacerlo en el método onRequusetPermissionResult


1223.

1224. Vamos a ejecutar la aplicación y veremos como está funcionando

1225. Por si acaso vamos a desintalar la aplicación


1226.
1227.

1228. Activamos el fake gps y le damos atrás y va areconocer el gps

1229. Ahora copiaremos todo e códigodl mapdriver al de mapcliente , muy importante

reemplazar en sdetcontentView por activity_map_cliente


1230.

1231. Agregar que implementa de onReadyMApcall

1232.

1233. En el toolabra cambiar a cliente


1234. Y en el método logout ca,biamos el contexto por mapclient

1235.

1236. EN EL METODO CHECJLOCATION PERMISSION HAY ADECUAR LOS CONTEXTOS


1237.

1238. Video 4.5 Como conectar y desconectar el gps del conductor

1239. Vamos a xcontinuar con el conductor y vamos a mostrar como obtener el punto exacto

de nuestra ubicación

1240. Para ellos nos vamos al onMapReady del MapDriverActivity.java y vmos autilizar el

nMap y vamos a establecer un método


1241.

1242. Y vamos agregar la anotación supressLint


1243.

1244. Y ejecutamos la aplicación

1245. Y vamos a ver un punto azul q nos indica la ubicación

1246. Ingreso como Jonathan que es el chofer

1247. Y veremos q nos identifica la ubicación mediante un punto azul


1248.

1249. Ahora en el caso del conductor quisera agregarle un marcador más personalizado

1250. Vamos air a google y vamos abuscar un icono en la pagina icons8

1251. (yo les comparto un icono

1252. )

1253. Lo vamos a densificar


1254.

1255. Una vez densificada vamos a establecer un icono en el mapa

1256. vamosa mapdriveractivity.java y declaramos una variable del tipo MArker


1257.

1258. ya q nostros queremos utilizar un marcador , en vez de este punto de referencia que se

va air actualizando confomrme nos movamos en el mapa, , por eso vamos ainstanciar este

marker en el método mLocationCAllback

1259. donde le vamos aindicar q mMArkern va ser igual a nMAp.Addmarketr y mediante el

método position obtenemos la latitud y longitud del objeto location


1260.

1261. Obtenemos ahora la longitud y latitud


1262.

1263. Le vamos aestablecer un titulo con la propiedad title y además el icono q se va mostrar

para este marcador con BitmapdescrptorFActory


1264.

1265. Corremos la aplicación para ver como está funcionando

1266. Quedando de la ste manera


1267.

1268. En este caso el icono parece muy grande parareducirlo lo desnsificamos de nuevo y le

dmos a la resoluci´pon hdpi


1269.

1270. Sobreescribimos todo y le va,osa quitar también el punto azul que teníamos por defecto

1271. Para hacer esto nos vamos al onMApready y el método setMyLocationEnabled lo

cambiamos a false
1272.
1273. Volvenmos aocrrer la aplicación
1274.

1275. Ahpra vamos al fake gps y vamos asimular el movimiento

1276. Vamos al menú y settings y simularemos el movimiento para validar si se actualizaen

tiempo real
1277.

1278. Y vemos en la aplicación como se mueve


1279.

1280. Vemos q esta multiplicando ekl mismo marcador ,


1281. apar esto vamos a hacer una

validación , dondesi el marcador es distinto anulo, es decir q ya existe ,lo vamos aeliminar con la

propiedad remove

1282.
1283.

1284. Ahora vamos aimplementar la posibilidad de q el conductor se conecte o desconecte

1285. Para esto vamos agregar un botón en el activitymapdriver


1286.

1287. Ahora avmos al mapdriver.java y declaramos una variable del tipo button
1288.

1289. Y en el oNCreate vamos a referenciarlo mediante findViewByID


1290.

1291. Establecemos el método setOnClickListener después del new damos ctrl + space para

agregar el código autogenerado


1292.

1293. Y cuando presionemos este botón lo q haremos primero es crearnos una variable del

tipo Booleana para saber si estamos conectados , la vamos a llamar isConnect y por defecto va

aestar en false
1294.

1295. Ahora, en el setobnclicklistener del botón vamos apreguntar que si el conductor está

conectado ejecutaremos un método llamado disconnect , y sino , ejecutaremos el método

startLocation
1296.

1297. Nos indica q el método disconnect aun no lo tengo implementado , así q dejamos q AS

lo cree
1298.

1299. Lo vamos amover encima del método startlocation


1300.

1301. Pero antes también vamos agregar unas cositas en el startLocation , si el gps está

activo , vamlos a cambiar el texto del botón a “Desconectarse” y la propiedad isConnect

cambiará a true
1302.

1303. Podemoscopir setas dos líneas para el método disconncet , donde el texto cambiará a

conectarse y mIsconnct a false


1304.

1305. Y para desconectarnos lo que debemos hacer es preguntar primero si mfusedLocation

es difrenete de null , entonces usaremos el mfusedlocation.removeLocationUpdates


1306.

1307. Y ejecutaremos la aplicación

1308. CMO ESTÁ CONECTADO EL BOTÓN MUESTAR EL MENSAJE DESCONCTARSE , SI HAGO

CLIC EN EL BOTON DEJARÁ DE ACTUALIZAR SU POSICIÓN EN TIEMPO REAL


1309.

1310. VIDEO 4.6 VALIDACION DEL METODO SETMYLOCATIONeNABLED

1311. Hay un detalle a considerar cuando utilizamos el método setMyLocationEnabled ,

cuando está establwcido lógicamente en true para habilitar ese pequeño circulo azul , que

identificaba la posición exacta de nuestra ubicación, lo podemos utilizar pero podría crashear la

aplicación si no contamos con los permisos de ubicación


1312.

1313. Si no tuviéramos estos permisos que nos va apedir la aplicación cuando la ejecutemos

por pr9emra vez y el método setMyLocation Enabled en true, va a hacer q la aplicación falle,

entonces lo vamos a cortar de donde está actualmente en el onMApready y lo pegamos en el

método onRequestPermissionResult después del mFusedLocation , poque aquí ya estaremos

solcitando primero los permisos de ubicación


1314.
1315.

1316. Y debiéramos agregarlo después de todas las veces que llamemos a

mfusedLOcation.requestLocationUpdates

1317. (en el onActivityResult, en el startLocation (02 veces)) , una vez hecho esto podrían

utilizar esa funcionalidad sin que que genere ningún error en la aplicación

1318. VIDEO 4.7 almacenar datos de localización CON GEOFIRE


1319. Ahora vamos aimplementar el guardar los datos de ubicación en la base de datos de

firebase Realtime

1320. Para esto vamos airnos a las dependencias en gradle app y googlearemos geofire for

Android

1321.

1322. Y pegamos la dependencia y le daremos a sync


1323.

1324. Nos vamos al mapdriverActivity.java y para hacer uso de esa dependencia vamos

acreanos una nueva java.class llamada GeofireProvider.java , dentro de la carpeta providers


1325.

1326. Aqupi declaramos 02 propiedades , una referencia la base de datos y una del tipo

Geofire
1327.

1328. Crearmos un constructor para esta clase e instanciaremos ,las propiedades , en el caso

de mdatabase , vamos a crear un nodo que se llamará conductores activos o active_drivers y en

el caso de geofire recibe como prámetro la referencia de nuestra base de datos


1329.

1330. A continuación vamos aimplementar un m étodoq se llama saveLocation que nos

permitirá guardar la localización de los conductores en la base de datos q tenemos en firebase y

q deberpa recibir dos parámetros, primero el id del uuario , q en este caso es un conductor y lo

segundo es la latotud y longitud en la q se encuentra ese conductor


1331.

1332. Adentro de este método vamos a utilizar geofire y en particular su método setlocation,

qye recibe como primer parámetro la llave, q seria el id deL conductor, y como segundo

parámetro un objeto del tipo GeolOcation que contiene la latitud y longitud


1333.

1334. Con esta simple línea vamos a poder guardar la ubicación en la base de datos

1335. Vamosa implementar otro método para eliminmar la ubicación que llamaremos

removeLocation el cual recibirá como parámetro el id del cnductor , donde llamaremos ageofire

y su método removeLocation
1336.

1337. Para poder trabajar con estos métodos adecuadamente nos vamos al

mapDriverActivity .java y asignaremos el objeto LATLNG a una variable global donde

obtendremos la lattud y longitud del objeto location


1338.

1339. Y lo instanciamos dentro del método mLocationCAllback, asiganndole la latitud y la

longitud
1340.

1341. Como necesitamos guardar la ubicación del conductor cada vez q s está moviendo en el

mapa , vamos a ejecutar un método q llamaremos updateLocation, el cual todavía no está

implementado
1342.

1343. Vamos adejar que AS lo cree y lo movnos antes del onMApReady


1344.

1345. Algo que hemos olvidado hacer es declarar una propiedad del tipo GeofireProvider
1346.

1347. Y lo referenciamos en el oncreate


1348.

1349. Finalmenet regresamos al método updateLocation yn llamamos al mgeofireprovider a su

método savelocation ,
1350.
el cual necesita el id del conductor, para esto vamos air al authprovider y declaramos un método

que vamos a llamar getId


1351.

1352. Este método nos devuelve el id del usuario actual , lo vamos aimplemenmtar en el

mapdriver en el método updateLocation


1353.

1354. Per lo correcto en este método updatelocation serp validar primero q el usuario esté

logueado y que la ubicación sea distnta a nulo

1355. Para esto impleentaremso un método en el authprovider que vamos allamar

existSession que validará asi existe una sesión en eses momento


1356.

1357. Básicamente estamos declarando una variable booleana llamada exist , valida si el

usuario actual de firebase es distinto a nulo , entonces de acuardo a eso la variable booleana

cambiará a true , y este método devolverá el valor q guarde la variable exists

1358. Ahora regresamos al método updatelocation del mapdriver.java y agregamos la la

validación del la actual sesión y de si la long y latitud es disitinto a nulo , de cumplir con ambas

guadará la localización en firebase


1359.

1360. Y por ultimo nos quedaría en el método disconnect ejecutar el método para eliminar la

localización de la base de datos, quedando de la sgte manera , y agregando un else si hubiera

algún error
1361.

1362. Validamos además que la sesión exista y de será sí borramos de la base de datos la

ubicación
1363.

1364. Corremos el proyecto y vemos como funciona esto,

1365. Si esta corriendo el fake gps veremos como se crea el nodo active drivers y dentro el id

del conductor activo. Dentro tendremos dos propiedades usaremos la q tiene l , dentro hay un

nodo con id 0 y 1 el 1 guarda la lattud y el 1 la longitud


1366.

1367. Vemos como sea ctualiza en tiempo real si le damos desconectarse va a eliminar el nodo

de la base de datos

1368. Le dmso en conectar de nuevo y nuevamente tendríamos los datos en la base de datos

1369. Esto nos va aservir para q el cliente sepa la posición del conductor

1370. VIDEO 4.8 MOSTRAR LOS CONDUCTORES DISPONIBLES AL CLIENTE


1371. La idea ahora es trabajar con el mapa del cliente, pero vamos a hacer algunas

modificaciones a la parte del conductor, cuando cerremos la aplicación y la volvamos a brir,

empieza arecocer la ubicación instantaneamete

1372. Esto pasa porq elmetodo starlocation lo estamos ejecutando en el onMApready , lo

vamos a quitarlo y solo debe de estaren el clic en el botón connect

1373.

1374. Ejecutamos nuevamente, en este caso no va abuscar la ubicación hasta q yo me conecte


1375. (probar con fake gps corriendo darle al botón conectarse)

1376. También nos faltaría ejecutar el método disconnect en el método del logout, ya q

cuando el conductor cierre sesión deberían eliminarse también los datos de su ubicación en

firebase

1377.

1378. Esto se evidencia , al cerrar sesión nos elina la ubicación del usuario
1379. Probamos corriendo la aplicación , nos conectamos y luego cerramos sesión , veremos

como se elimina el nodo

1380. Ahora sí nos vamos a ir al mapa del cliente

1381. Me arrojaba un error porq no estaba include en el mapclient xml

1382.

1383. La idea es mostrar los conductores q estuvieran disponibles

1384. Necesitamos agregar nuestro marcador actual como clente, vamosa copiar desde el

driver el código similar


1385.

1386. Dentro del locationcallbacktambien


1387.

1388. Pero en este caso no va atener el icono del vehiculo

1389. Vamosa densificar el icono my_location


1390.

1391. Y reemplazamos el nombre del icono


1392.

1393. Y ejecutamos la aplicación ya se visualiza la ubicación del cliente


1394.

1395. Ahora debemos de mplementar q se visualicen la ubivcacion de los conductores

1396. Nos vamosa ir al geofireprovider y vamos aimpementar un método para obtener los

conductores disponibles

1397. En este caso nos va retornar un objeto del tipo GeoQuery y se llamará getActiveDrivers
1398.

1399. A este método le vamos apasar una latitud y una longitud como parámetro

1400. Le vamos adar también respecto al cliente el radio de búsqueda de los conductores, es

decir a cuanta distanmcia quero q se muestren los conductores , en este caso le pondremos 5

km removemos lo previo q hubiera identificado este método y devolvemos la variable geoquery


1401.

1402. Vamos ahora a regresar al mapclientactivity y vamosa declrar un método que lo vamos

allamar igual , getActveDrivers (antes del onMApReady)


1403.

1404. Debemos aquí en el mapclient declarar la propiedad geofireprovider


1405.

1406. E instanciarlo en el oncreate


1407.

1408. Y en el método getActiveDrivers lo q haremoslllamaremos al método getActivdrivers de

la clase geofireprovider
1409.

1410. En este caso este método va arecibir la latitud y longitud en la q se encuentra el cliente,

para ello vamos aguardar esta localizacon en una variable global como lo hicimos en el

mapdriver nos creamos un latlong el cual copiamos del mapdriver


1411.

1412. Y lo instanciamos dentro del mlocationCallback


1413.

1414. Ahora este mCurrentLatLng lo pasamos al método getActiveDrivers y agregamos luego

el método addGeoqueryEventListener , al caul vamos aagregar un listene (con ctrl + space)


1415.

1416. Quedando de la sgte manera

1417.
1418. Vamos a trabajar principalmente sobre los tres primeros métodos

1419. El emtodo onKeyentered serpa donde nostros iremos añadiendo los marcadores de los

conductores q se iran conectando

1420. En el método nKeyExit vamos aeliminar los marcadores de los conductores q se

desconectan de la aplicación

1421. Y en el método onkeymoved vamos air actualizando en tiempo real la psicion del

conductor a medida q este se mueve

1422. Entonces empezaresm,os por el método onkeyentered

1423.

1424. Para añadir los marcadores debemos de crearnos una lista de objetos tipo marker
1425.

1426. Ahora dentro del método onKeyentered vanmios acreanos un for para recorrr esa lisat

de marcadores
1427.

1428. Preguntaresmo si se le asignó un identificador (getTAg) a ese marcador , preguntaremos

si ese marcador es igual al key que viene como parámetro en el método onKeyentered , el cual

viene de la base de datos cuando se conecte un conductor , si fuera así nos devuelveun retur ,

para q no se vuelva aguardar , que no se repita ya q el conductor ya estaría conectado

1429.
1430.

1431. Después de esto nos vamos a crear una propiedad latlng y esta almacenará la posición

del conductor q se conectó


1432.

1433. La latitud y longitud la obtenemos del objeto location q viene como parámetro en este

método

1434. Ahora teniendo la posición del nuevo conductor vamos intsnaciar un nuevo marcador

que obtendr´la posición del driverLatLng que acabamos de instanciar

1435.
1436.

1437. Ahora le vamos adecir q a este marcador le vamos a asignar como identificador el id del

conductor , que lo obtenemos del parámetro key de este metod onkeyentered y lo agreagremos

finalmente al arraylist mDriversMarkers


1438.

1439. Con esto ya terminamos el método onKeyEntered

1440. Ahora en el método onKeyExited, es decir cuando un conductor se haya desconectado ,

vamos a copiarnos el for del onKeyEntered lo pegamos ylo adecuamos y añadimos unpar de

lienas donde inidcamos q el marcador lo vamos aremover y también lo eliminremos de la lista

de marcadores
1441.

1442. Por ultimo nos vamos al onKeymoved q es donde vamos a actualizar la posicon de

cadadeconductor , también copiaremos el for del onKeyExited y en vez de remover el marcador

le vamos a decir al marcador que se establezca en una nueva posición con el método setposition
1443.

1444. Ahora simplemente nos falta llmara a este método getactivedrivers dentro de la

propiedad location callback, ya q necesitamos q el usuario tenga bien establecida su ubicación

1445. Pero hay un detalle , este método debe ejecutarse una vez y el callback va aestar

ejecutándose en tiempo real cada vez q el usuario se mueva

1446. Para poder ejecutralo una vez vamos declarar una variable global a la q llamaremos

mIsFirstTime y le daremos el valor de true


1447. Y enel callback preguntaremos si es la primera vezq ingresa aquí , si fuera así ejecutamos

el método getActiveDrivers

1448.

1449. De esta manera el método se ejecutará una sola vez

1450. Ahora ara probarlo al menos deberíamos tener dos emuladores

1451. En uno entramos como chofer y en otro como cliente


1452. Luego alejamos a un conductor ya no lo vamos a ver ya q en el método geofireprovider

cponfiguramos q se vean los q están en un radio de 5 km

1453. VIDEO 5.1 GOOGLE PLACES AUTOCOMPLETE PARTE 1

1454. Vamos a hacer un buscador como este

1455.

1456. Donde de acuerdo a lo que vayamos escribiendo


1457. Para hacer esto nos vamos a ir a Android studio y vamos a agregar una nueva

dependencia

1458. Google amos para encontara la dependencia

1459.

1460.

1461. Y sincronizamos

1462. Ahora nos vamos al mapclienteactivity.xml y nos crearemos otro fragment cuyo ID será

placeautocompleteorigin y el androidname será otro también , al fnl debería quedar así


1463.

1464. Si lo corremos no se va a ver nada ya q el toolbar está por encima de la vista q tenemos

aquí

1465. Entonces utilizaremos la propiedad behavior q la teníamos en el register y la pegaremos

en nuestro nuevo fragnent


1466.

1467. Corremos de nuev y veremos la vista del autocomplete


1468.

1469. Auqnue está con un color transparente

1470. Para adecuar esto, meteremos este fragment en u cardview , el margen y la propiedad

behavior ya no se lo daré al fragment sin0 , al cardview

1471. Vamos aponerle un color de fondo al cardview , color blanco y border redondeados con

cardcorner radius
1472.

1473. Si corremos el proyecto , se verá de la sgte manera


1474.

1475. Si presionamos sobre esta barra de búsqueda seva adetener la aplicación ya q no

tenemos implementada la funcionalidad q esta vista debe de cumplir

1476.
1477. Ahora mnos iremos al ativitymapclient.java y voy adeclarar dos propiedadaes , la primer

del tipo AutocompleteSupportFragment y otra del tipo PlacesClient

1478.

1479. Y necesitamos como siempre instanciarlo en el método onCreate

1480. Al instanciar el placesClient prmero vamos a determinar una condición


1481. Que si no se encuentra incializado , lo incialize , apare sto necesita un contexto y la

apikey la tenemos en la carpeta values en el archivo Google_maps_api.xml luego de eso recién

lo instanciamos

1482.

1483. Instanciamos a continuación el mAutocomplete que va aser un asteo de

AutocompleteSupportFragment y mediante findviewbyid referenciamos el que tenemos en

nuestro view el xml


1484.

1485. Ahora a este autocomplete necesitamos establecerle el método setPlacefieds donde la

pasaremos como parámetro Arras.asList.Place.Field.ID (verificar q sea la libearia

com.google.android.libraries.places.api.model)
1486.

1487. Ahora a este autocomplete le queiro implemntr un listener cuando el usuario presione

sobre él (no olvidar agregarlo con ctrl + espacio)


1488.

También podría gustarte