Groupd Mobile Application
1.0.0
Aplikasi seluler, yang dikembangkan menggunakan Ionic 2 Framework, yang bertindak sebagai front -end lain untuk GroupD - aplikasi jejaring sosial untuk menemukan rekan tim untuk proyek start up. Tahun ketiga, pengembangan perangkat lunak.
Aplikasi GroupD-Mobile dilakukan sebagai penugasan untuk proyek tahun ketiga semester. Tugas ini dirancang dan dikembangkan sebagai proyek kelompok dengan Imervin. GroupD-Mobile-Application, aplikasi seluler lintas platform, adalah salah satu dari tiga repositori. Dua repositori lainnya termasuk GroupD-Backend, API GroupD dengan kontribusi dari kedua belah pihak, dan GroupD-Frontend, aplikasi web yang dikembangkan oleh Imervin. Untuk detail lebih lanjut tentang GroupD, silakan buka bagian Tentang GroupD.
Poin yang perlu dipertimbangkan:
Groupd adalah situs jejaring sosial yang dirancang untuk membantu pengguna menemukan rekan tim untuk mengerjakan ide proyek yang mungkin mereka miliki. GroupD dirancang dengan mempertimbangkan pengembang, namun, GroupD mendorong dan menyambut pengguna dari semua profesi dan perlu menggunakan platform ini untuk menemukan rekan tim. Bersama-sama, Ervin dan saya mengembangkan database bersama (lihat mengapa GroupD untuk skema basis data) dan RESTFUL API untuk mengelola database kami dan mengelola fitur CRUD kami untuk membantu dua front-end kami (lihat GroupD-backend untuk dokumentasi lengkap). Kami ingin GroupD memungkinkan pengguna memposting proyek yang diinginkan, berkomunikasi dengan pengguna lain dan mengerjakan proyek dengan pengguna lain. GroupD dapat digunakan untuk rekreasi dan/atau untuk mendapatkan pengalaman dan pada akhirnya membangun portofolio dari proyek yang telah mereka kerjakan. GroupD juga berguna untuk menemukan anggota tim untuk bisnis pemula.
Lihat GroupD-Frontend untuk Dokumen Lengkap pada Aplikasi Web.
Setelah detasemen saya dari ide asli saya, saya bergabung dengan proyek teman sekelas, Imervin, yang proyeknya tampak sangat ramah bagi saya. Kami juga ingin bekerja dalam kelompok untuk mengalami dan berlatih berkolaborasi di GitHub. Ervin menyambut gagasan aplikasi seluler yang setara dengan aplikasi webnya. Bergabung untuk membentuk grup, kami dapat menambahkan fitur tambahan. Bersama -sama, kami merancang skema basis data baru, terlampir di bawah ini, dan memperbarui API agar sesuai dengan perubahan ini.
Ide asli saya adalah membangun aplikasi keamanan desktop Windows, Encrypt Keeper.
Enkripsi Penjaga Akan:
Masalah:
Meskipun saya telah meninggalkan ide ini sebagai proyek akhir tahun saya, saya tidak ingin menyerah pada penerapan proyek ini, mungkin bukan sebagai aplikasi Windows Store. Saya telah menerapkan pengakuan wajah untuk tugas di mana kami harus membuat aplikasi platform Windows Universal semester ini, aplikasi WUP ini dapat ditemukan di GitHub: safe-note, dan di Windows Store: Note Safe (nama Catatan Aman tidak tersedia pada saat pengiriman).
Fitur Utama:
Fitur tambahan
Saya merancang aplikasi groupD-mobile dengan sidemenu yang diketahui secara cerdas ketika data berubah. Penyedia data pengguna dipanggil untuk mencatat pengguna masuk atau keluar, dan memicu acara yang dicatat untuk mengubah menu samping. Data pengguna juga menetapkan pengguna dengan menyimpan pengguna saat ini di penyimpanan lokal dan memicu acara untuk mengingatkan sumber daya perubahan apa pun. Pada setiap halaman memuat dan memuat ulang, pengguna saat ini dimuat ulang dari API dan penyedia data pengguna akan mengingatkan sumber daya perubahan apa pun, di mana sumber daya akan secara tidak sinkron mendapatkan data baru dari penyimpanan.
Menu logged out terdiri dari dua bagian:
Menu logged in terdiri dari tiga bagian:
Mendaftar
Halaman pendaftaran terdiri dari satu set slide, dengan formulir di setiap slide untuk mengambil data pendaftaran. Saya menggunakan FormBuilder Angular 2 untuk memvalidasi input secara real time dengan validator bawaan dan validator khusus. Sayangnya, saya tidak bisa mendapatkan validator nama pengguna-ketersediaan-kustom yang tidak sinkron untuk bekerja, karena metode validator statis, saya tidak tahu cara menggunakan panggilan HTTP di dalam validator. Validasi untuk ketersediaan nama pengguna dilakukan setelah data dikirimkan. Jika nama pengguna sudah diambil, pengguna akan secara otomatis dibawa ke slide yang diperlukan dan diperingatkan bahwa nama pengguna diambil. Jika nama pengguna tersedia, data disimpan sebagai pengguna, formulirnya diatur ulang, dan pengguna diberitahu tentang keberhasilan dan diberi opsi untuk langsung ke halaman log in.
Masuk
Halaman log in cukup jelas, pengguna dapat masuk dengan nama pengguna dan kata sandi mereka. Jika nama pengguna tidak ada, pengguna akan diberitahu bahwa nama pengguna tidak ditemukan. Jika nama pengguna ada dan kata sandi tidak valid, pengguna juga akan diberitahu tentang ini. Jika nama pengguna dan kata sandi cocok, pengguna akan masuk oleh penyedia pengguna seperti dijelaskan di atas, dan dipindahkan ke halaman beranda sebagai pengguna yang masuk. Status log in akan disimpan dalam penyimpanan sehingga pengguna sudah akan masuk pada start-up aplikasi berikut, kecuali jika pengguna keluar.
Tutorial
Satu set slide yang menjelaskan groupD dan deskripsi singkat tentang cara menggunakannya.
Rumah
Halaman beranda terdiri dari daftar semua proyek yang ditampilkan dalam kartu terpisah, setiap kartu proyek memiliki nama proyek, deskripsi thumbnail proyek, waktu yang dibuat dan jumlah posisi yang tersedia. Setiap kartu juga memiliki dua tombol; Satu untuk menambah atau menghapus proyek ke atau dari favorit/bookmark pengguna, dan satu untuk melihat proyek di halaman proyek.
Halaman proyek
Halaman proyek mengambil ID proyek sebagai parameter, dari sana ia mendapatkan data proyek dan data pencipta. Halaman ini terdiri dari dua kartu, kartu proyek dan kartu pencipta. Jika pencipta proyek telah menghapus akun mereka atau tidak ditemukan kartu pencipta tidak muncul.
Kartu pencipta terdiri dari ikon placeholder yang ditentukan oleh jenis kelamin pencipta (pria atau wanita - default adalah perempuan), nama pencipta dan tombol. Jika penampil adalah pencipta, tombol akan membawa penampil ke halaman Proyek Edit. Jika penampil bukan pencipta, tombol akan membawa pengguna ke profil pencipta.
Kartu proyek terdiri dari nama proyek, deskripsi thumbnail proyek, deskripsi proyek, posisi maksimum, posisi yang tersedia, tag, dan anggota. Jika anggota proyek diklik, GroupD akan memeriksa apakah anggota ini masih ada (anggota mungkin telah menghapus profil mereka, maka pengguna baru lain mungkin telah mengambil nama mereka). Jika anggota memang ada, penonton akan dipindahkan ke profil anggota. Kartu proyek juga memiliki dua tombol yang terletak di footer kartu; Tombol komentar, yang menunjukkan dan menyembunyikan bagian komentar, dan tombol favorit untuk menambah atau menghapus proyek ke atau dari proyek pemirsa.
Bagian komentar terdiri dari daftar komentar proyek, dengan kotak input untuk menambahkan komentar di bawahnya.
Proyek Edit
Halaman Proyek Edit hanyalah formulir dengan proyek yang sebelumnya dimasukkan/disimpan data yang dimuat ke dalam kotak input. Formulir Halaman Proyek Edit sangat mirip dengan formulir halaman proyek, perbedaannya ada di halaman Proyek Edit, pencipta dapat menambahkan anggota. Pencipta hanya dapat menambahkan anggota yang ada dalam database. Pencipta diberikan dua opsi, menyimpan perubahan atau hapus. Kedua opsi diterima dengan peringatan peringatan saat diklik. Pada Simpan Perubahan Dokumen Pengguna dari setiap anggota yang diubah diperbarui dan dokumen proyek juga diperbarui. Pada dihapus, setiap contoh proyek dalam pencipta dan anggota dihapus dan proyek dihapus secara permanen.
Proyek baru
Mirip dengan halaman proyek Edit, halaman proyek baru adalah formulir dengan valitasi waktu nyata. Ini memiliki satu tombol untuk menambahkan proyek baru.
Mencari
Pencarian adalah halaman tab, dengan tabnya: Proyek pencarian dan pengguna pencarian.
Proyek pencarian menggunakan pipa khusus untuk mencari proyek dengan nama proyek atau tag secara real time. Ini sangat ideal untuk pengguna yang mencari proyek untuk dikerjakan. Tata letak daftar proyek sama dengan halaman beranda.
Pengguna pencarian menggunakan pipa khusus untuk mencari pengguna dengan nama pengguna atau keterampilan secara real time. Ini sangat ideal bagi pengguna yang mencari pengguna untuk mengerjakan proyek mereka. Setiap pengguna yang ditampilkan ditampilkan dalam kartu, dengan detail berikut: ikon gender, pekerjaan, email, dan tag. Kartu ini juga memiliki tombol untuk pergi ke halaman pengguna yang dipilih.
Profil
Halaman profil mengambil nama pengguna sebagai parameter, kemudian mendapatkan dokumen pengguna dan memeriksa apakah itu adalah profil penampil. Profil menampilkan nama pengguna, lokasi, pekerjaan, email, peringkat, dan keterampilan pengguna. Jika itu adalah profil pemirsa, pemirsa ditampilkan tombol edit, yang akan pindah ke halaman akun Edit (dijelaskan di bawah), dan tombol penilai show, yang akan memiliki modal pop up dengan daftar semua penilai dan tarifnya. Penampil juga dapat mengklik nama pengguna penilai untuk pindah ke profil mereka. Jika bukan profil penampil, penampil akan ditampilkan tombol rate. Jika tombol tingkat diklik, peringatan akan muncul dengan kotak input untuk masuk peringkat. Jika pemirsa telah menilai orang ini sebelumnya, itu akan menimpa tarif terakhir mereka. Proyek pengguna, apakah anggota atau pencipta, juga ditampilkan dalam format yang sama dengan proyek di halaman beranda.
Favorit
Halaman favorit akan menampilkan semua proyek yang disimpan di favorit pengguna. Tata letak daftar proyek sama dengan halaman beranda.
Edit akun
Halaman Akun Edit hanyalah formulir dengan proyek yang sebelumnya dimasukkan/disimpan data yang dimuat ke dalam kotak input. Penampil diberikan dua opsi, menyimpan perubahan atau hapus. Kedua opsi diterima dengan peringatan peringatan saat diklik. Pada Simpan Perubahan Dokumen Pengguna diperbarui. Pada dihapus, peringkat pengguna dihapus dari peringkat pengguna lain (jika peringkat tidak dihapus, peringkat mungkin menjadi masalah jika pengguna lain mengambil nama pengguna yang sama setelah tersedia) dan dokumen pengguna dihapus dari database.
Keluar
Halaman Log Out memiliki tombol yang memanggil penyedia data pengguna untuk menyatukan acara logout untuk mengubah menu, untuk menghapus penyimpanan lokal dan pindah ke halaman log in.
Ionik
Kerangka ionik dapat digunakan untuk membuat aplikasi seluler lintas platform atau aplikasi web dengan HTML, CSS dan JavaScript (Angular).
Ionik 1 vs ion 2
Ionic 1 menggunakan sudut 1, HTML dan CSS sedangkan ionik 2 menggunakan sudut 2, HTML dan SCSS.
Mengapa Ionic 2?
Karena Ervin sudah mulai menggunakan Angular 1, dapat dilihat lebih masuk akal untuk menggunakan Ionic 1 untuk membangun aplikasi seluler saya karena ia sudah memiliki sebagian besar pekerjaan yang dilakukan. Namun, saya memilih Ionic 2 karena saya lebih suka pekerjaan saya sepenuhnya bermartabat sebagai milik saya, dan alasan utamanya adalah bahwa Ionic 2 menawarkan banyak perbaikan . Josh Morony secara efektif menggambarkan perbaikan ini di sini. Menurut pendapat saya, Ionic 2, menjadi versi ionik yang lebih baru dan lebih baik, akan terus ditingkatkan dan akan menjadi fokus tim Ionic. Hal yang sama dapat dikatakan untuk tim AngularJS, dalam kasus Angular 2. Saya juga sangat ingin mengalami menggunakan TypeScript.
Ikuti langkah-langkah di GroupD-Backend: cara menjalankan.
Jika Anda tidak menginstal Ionic 2, ikuti langkah -langkah instalasi di situs web ionik yang ditemukan di sini.
Kloning repositori ini dan jalankan perintah:
npm install
Setelah semuanya diatur dan dijalankan. Pastikan Direktori Anda saat ini adalah: Aplikasi GroupD-Mobile (sub-direktori repositori). Kemudian jalankan perintah berikut:
ionic lab
Untuk menyimpulkan, proyek ini merupakan pengalaman yang bermanfaat. Bekerja dalam kelompok dan menggunakan Ionic 2 untuk pertama kalinya keduanya menjadi kontributor hebat untuk ini. Jika saya harus melakukan kembali proyek, saya akan memulai ide proyek ini sejak awal, daripada setelah upaya ide proyek lain. Saya juga akan merujuk dokumen komentar terpisah, daripada menanamkan komentar dalam dokumen proyek, karena komentar tersebut adalah data terkait dengan proyek, namun komentar berubah dengan volatiliasi yang berbeda dengan data proyek lainnya. Komentar juga dapat tumbuh cukup cepat hingga jumlah yang mungkin tak terbatas, dan tidak boleh membebani dokumen proyek dengan ukurannya yang mungkin. Akhirnya, saya akan mempertimbangkan untuk menggunakan ID unik di tempat nama pengguna yang unik, dan saya pasti akan menambahkan properti seperti, "dorman": benar/salah. Properti ini akan digunakan di tempat benar -benar menghapus dokumen pengguna, akan menyelesaikan masalah nama pengguna yang direferensikan (atau ID jika itu akan diubah) menjadi bingung dengan pengguna lama/baru, dan akan bermanfaat untuk menawarkan opsi pemulihan kepada pengguna lama.
Referensi:
Kerangka Ionik
http://stackoverflow.com/questions/13935733/mongoose-limit-offset-and-count-query
https://www.w3schools.com/jsref/jsref_indexof.asp
https://ionicframework.com/docs/storage/
http://ionicframework.com/docs/ionicons/
https://www.joshmorony.com/custom-pipes-in-ionic-2/
https://www.npmjs.com/package/ng2-search-filter
https://www.youtube.com/watch?v=-zw1zhqsdyc
https://www.youtube.com/watch?v=8GZ-KBBDDXM
http://stackoverflow.com/questions/32069388/repeatly-background-task-sionic-framework
https://github.com/yannbf/ionic2-pomponents
http://stackoverflow.com/questions/17616624/detect-if-string-contains-any-spaces
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-anifual-set-value-for-formbuilder-control
https://ionicframework.com/docs/v2/cli/generate/
https://www.youtube.com/watch?v=-ynj-qrhvgc
https://ionicframework.com/docs/v2/resources/forms/
https://www.youtube.com/watch?v=-o_vgpjp-q0
http://blog.ionic.io/10-minutes-with-ionic-2-adding-pages-navigation/
https://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
http://reactivex.io/documentation/observable.html
https://www.youtube.com/watch?v=EI7FSOXKPL0
https://egghead.io/lessons/javascript-introducing-the-observable
https://www.youtube.com/watch?v=_frphse2pzk
http://stackoverflow.com/questions/36655379/ionic-2-templates
https://github.com/driftyco/ionic2-starter-sidemenu
https://ionicframework.com/docs/v2/api/components/menu/menu/
https://blog.khophi.co/ionic-2-side-menu-tabs/
https://developer.mozilla.org/en/docs/web/javascript/reference/global_objects/string/trim
http://pointdeveveloper.com/how-to-place-lionic-2-tabs-at-the-bottom-or-top-of-for-screen/
http://www.neilberry.com/how-to-run-your-ionic-app-on-real-devices/
Tara O'Kelly - [email protected]
