Groupd Mobile Application
1.0.0
Um aplicativo móvel, desenvolvido usando a estrutura Ionic 2, que atua como outro front -end para o Groupd - um aplicativo de rede social para encontrar companheiros de equipe para projetos de inicialização. Terceiro ano, desenvolvimento de software.
O Groupd-Mobile-Aplicação foi realizado como uma tarefa para um projeto de terceiro ano de semestre. Esta tarefa foi criada e desenvolvida como um projeto de grupo com o IMERVIN. Groupd-Mobile-Aplicação, o aplicativo móvel Cross Platform, é um dos três repositórios. Os outros dois repositórios incluem o Grupod-Backend, a API do GroupD com contribuições de ambas as partes e Groupd-Frontend, o aplicativo da Web desenvolvido pela IMERVIN. Para mais detalhes sobre o Groupd, vá para a seção Sobre Groupd.
Pontos a serem considerados:
O Groupd é um site de redes sociais criado para ajudar os usuários a encontrar companheiros de equipe para trabalhar em uma ideia do projeto que podem ter. O Groupd foi projetado com desenvolvedores em mente, no entanto, o Groupd incentiva e recebe usuários de todas as profissões e precisa usar essa plataforma para encontrar colegas de equipe. Juntos, Ervin e eu desenvolvemos um banco de dados compartilhado (veja por que o Groupd for Database Schema) e a API RESTful para gerenciar nosso banco de dados e administrar nossos recursos CRUD para ajudar nossos dois front-ends (consulte o grupo de grupo para obter documentação completa). Queríamos que o Groupd permitisse que os usuários publiquem os projetos desejados, se comuniquem com outros usuários e trabalhassem em projetos com outros usuários. O Groupd pode ser usado para recreação e/ou obter experiência e, eventualmente, construir um portfólio a partir de projetos em que trabalharam. O Groupd também é útil para encontrar membros da equipe para um negócio de inicialização.
Consulte o Groupd-Frovennd para uma docentement completa no aplicativo da web.
Depois do meu desapego da minha ideia original, entrei para o projeto de um colega de classe, IMervin, cujo projeto parecia muito amigável para mim. Também estávamos ansiosos para trabalhar em grupo para experimentar e praticar colaborar no Github. Ervin recebeu a idéia de um aplicativo móvel equivalente ao seu aplicativo da Web. Juntando -se para formar um grupo, poderíamos adicionar recursos extras. Juntos, projetamos um novo esquema de banco de dados, anexado abaixo e atualizamos a API para corresponder a essas alterações.
Minha idéia original era criar um aplicativo de segurança do Windows Desktop, Encrypt Keeper.
Encrypt Keeper faria:
Problemas:
Embora eu tenha abandonado essa idéia como meu projeto de fim de ano, não desejo desistir da implementação deste projeto, talvez não como um aplicativo da Windows Store. Eu já implementei o reconhecimento facial de uma tarefa em que tivemos que criar um aplicativo Windows Universal Platform neste semestre, este aplicativo WUP pode ser encontrado no Github: Safe-Note e na Windows Store: Nota Safe (o nome seguro não estava disponível no momento da submissão).
Principais recursos:
Recursos adicionais
Eu projetei a aplicação Groupd-Mobile com um sidemenu que sabe de maneira inteligente quando os dados mudam. O provedor de dados do usuário é chamado para registrar um usuário dentro ou fora e desencadeia um evento conectado para alterar o menu lateral. Os dados do usuário também definem o usuário armazenando o usuário atual no armazenamento local e acionando um evento para alertar quaisquer recursos da alteração. Em cada página Carregar e recarregar o usuário atual é recarregado da API e do provedor de dados do usuário alertará quaisquer recursos das alterações, onde os recursos receberão assíncronos os novos dados do armazenamento.
O menu registrado é composto de duas seções:
O menu conectado é composto de três seções:
Inscrever-se
A página de inscrição consiste em um conjunto de slides, com um formulário em cada slide para obter os dados de inscrição. Usei o FormBuilder da Angular 2 para validar a entrada em tempo real com validadores e validadores personalizados incorporados. Infelizmente, não consegui obter o nome do nome de usuário de usuário personalizado assíncrono para funcionar, pois os métodos do validador são estáticos, não consegui descobrir como usar uma chamada HTTP dentro do validador. A validação para a disponibilidade do nome de usuário é feita quando os dados são enviados. Se o nome de usuário já for tomado, o usuário será automaticamente levado para o slide necessário e será alertado de que o nome de usuário será levado. Se o nome de usuário estiver disponível, os dados serão salvos como usuário, os formulários serão redefinidos e o usuário será alertado para o sucesso e, dada a opção de ir direto para a página de login.
Conecte-se
A página de login é bastante auto -explicativa, o usuário pode fazer login com seu nome de usuário e senha. Se o nome de usuário não existir, o usuário será alertado de que o nome de usuário não foi encontrado. Se o nome de usuário existir e a senha for inválida, o usuário também será alertado sobre isso. Se o nome de usuário e a senha forem uma correspondência, o usuário será conectado pelo provedor de usuários, conforme descrito acima, e realocado para a página inicial como um usuário registrado. O estado de login será salvo em armazenamento para que o usuário já esteja conectado nas seguintes start-ups do aplicativo, a menos que o usuário faça login.
Tutorial
Um conjunto de slides explicando o GroupD e uma breve descrição de como usá -lo.
Lar
A página inicial consiste em uma lista de todos os projetos exibidos em cartões separados, cada cartão do projeto tem o nome do projeto, a descrição do miniatura do projeto, o tempo criado e a quantidade de posições disponíveis. Cada cartão também possui dois botões; Um a adicionar ou remover o projeto a ou para os favoritos/favoritos do usuário e outro para visualizar o projeto na página do projeto.
Página do projeto
A página do projeto leva o ID do projeto como um parâmetro, a partir daí obtém os dados do projeto e os dados do criador. Esta página consiste em dois cartões, o cartão do projeto e o cartão Criador. Se o criador do projeto excluiu sua conta ou não foi encontrado, o cartão do criador não aparece.
O cartão Creator consiste no ícone de espaço reservado determinado pelo gênero do criador (masculino ou feminino - o padrão é feminino), o nome do criador e um botão. Se o visualizador for o criador, o botão levará o espectador para a página do projeto de edição. Se o visualizador não for o criador, o botão traria o usuário ao perfil do Criador.
O cartão do projeto consiste no nome do projeto, descrição do miniatura do projeto, descrição do projeto, posições máximas, posições disponíveis, tags e membros. Se o membro do projeto for clicado, o Groupd verificará se ainda existir um membro (o membro pode ter excluído seu perfil, outro novo usuário poderá ter assumido seu nome). Se o membro existir, o espectador será realocado para o perfil do membro. O cartão do projeto também possui dois botões localizados no rodapé do cartão; O botão Comentários, que mostra e oculta a seção de comentários, e o botão favorito para adicionar ou remover o projeto a ou dos projetos do espectador.
A seção de comentários consiste em uma lista dos comentários do projeto, com uma caixa de entrada para adicionar um comentário abaixo.
Projeto de edição
A página do projeto de edição é simplesmente um formulário com os projetos anteriormente inseridos/salvos dados carregados nas caixas de entrada. O formulário da página do projeto de edição é muito semelhante ao formulário da página do projeto, sendo a diferença na página do projeto de edição, o criador pode adicionar membros. O Criador pode adicionar apenas membros que existem no banco de dados. O Criador recebe duas opções, salve alterações ou exclua. Ambas as opções são recebidas com um aviso de alerta quando clicado. Em Salvar alterações, o documento do usuário de qualquer membro alterado é atualizado e o documento do projeto também é atualizado. Em delete, qualquer instância do projeto no criador e membros é removida e o projeto é excluído permanentemente.
Novo projeto
Semelhante à página do projeto de edição, a nova página do projeto é um formulário com valitação em tempo real. Ele tem um único botão para adicionar o novo projeto.
Procurar
A pesquisa é uma página com guias, com as guias: Projeto de pesquisa e usuários de pesquisa.
Os projetos de pesquisa usam um tubo personalizado para pesquisar projetos por nome do projeto ou tags em tempo real. Isso é ideal para usuários que procuram projetos para trabalhar. O layout da lista de projetos é o mesmo que a página inicial.
Os usuários de pesquisa usam um tubo personalizado para pesquisar usuários por nome de usuário ou habilidades em tempo real. Isso é ideal para usuários que procuram usuários para trabalhar em seus projetos. Cada usuário exibido é exibido em um cartão, com os seguintes detalhes: ícone de gênero, ocupação, email e tags. O cartão também possui um botão para ir à página do usuário selecionado.
Perfil
A página de perfil toma o nome de usuário como um parâmetro, ele obtém o documento do usuário e verifica se é o perfil do visualizador. O perfil exibe o nome de usuário, localização, ocupação, e -mail, classificação e habilidades do usuário. Se for o perfil dos espectadores, o visualizador é mostrado um botão de edição, que se mudará para a página da conta Editar (descrita abaixo) e um botão Show Raters, que terá um pop -up modal com uma lista de todos os avaliadores e suas taxas. O espectador também pode clicar nos nomes de usuário do avaliador para se mudar para seus perfis. Se não for o perfil do visualizador, o espectador será mostrado um botão de taxa. Se o botão de taxa for clicado, um alerta será exibido com uma caixa de entrada para inserir a classificação. Se o espectador já classificou essa pessoa antes, ele substituirá sua última taxa. Os projetos do usuário, seja um membro ou criador, também são exibidos no mesmo formato que os projetos na página inicial.
Favoritos
A página favorita exibirá todos os projetos salvos nos favoritos do usuário. O layout da lista de projetos é o mesmo que a página inicial.
Editar conta
A página da conta de edição é simplesmente um formulário com os projetos anteriormente inseridos/salvos dados carregados nas caixas de entrada. O espectador recebe duas opções, salve alterações ou exclua. Ambas as opções são recebidas com um aviso de alerta quando clicado. Em Salvar alterações, o documento do usuário é atualizado. Em Excluir, as classificações do usuário são removidas das classificações de qualquer outro usuário (se a classificação não foi excluída, as classificações poderão se tornar problemáticas se outro usuário tomar o mesmo nome de usuário depois de disponível) e o documento do usuário for excluído do banco de dados.
Log Out
A página de logout possui um botão que chama o provedor de dados do usuário para tigger o evento de logout para alterar o menu, para limpar o armazenamento local e se mudar para a página de login.
Iônico
A estrutura iônica pode ser usada para criar aplicativos móveis de plataforma cruzada ou aplicativos da Web com HTML, CSS e JavaScript (Angular).
Ionic 1 vs Ionic 2
O Ionic 1 usa 1 angular 1, html e css, enquanto o Ionic 2 usa 2, HTML e SCSS.
Por que Ionic 2?
Como Ervin já havia começado a usar o Angular 1, poderia ser visto como mais sensato usar o Ionic 1 para construir meu aplicativo móvel, pois ele já tinha uma maior parte do trabalho realizado. No entanto, escolhi o Ionic 2, como prefiro que meu trabalho seja completamente digno como o meu, e a principal razão é que o Ionic 2 oferece muitas melhorias . Josh Morony descreve efetivamente essas melhorias aqui. Na minha opinião, o Ionic 2, sendo a versão mais recente e aprimorada do Ionic, continuará sendo melhorada e será o foco da equipe da Ionic. O mesmo pode ser dito para a equipe AngularJS, no caso de Angular 2. Eu também estava bastante ansioso para experimentar o uso do TypeScript.
Siga as etapas no grupo de grupo: como executar.
Se você não possui o Ionic 2 instalado, siga as etapas de instalação no site da Ionic encontrado aqui.
Clone este repositório e execute o comando:
npm install
Depois que todo o resto estiver configurado. Certifique-se de que o diretório atual seja: Groupd-Mobile-Aplicação (um subdiretório do repositório). Em seguida, execute o seguinte comando:
ionic lab
Para concluir, este projeto tem sido uma experiência gratificante. Trabalhando em um grupo e usando o Ionic 2 pela primeira vez, ambos são ótimos contribuintes para isso. Se eu fosse refazer o projeto, começaria a essa ideia do projeto desde o início, e não depois de outra tentativa de ideia do projeto. Eu também referenciaria um documento de comentários separados, em vez de incorporar os comentários no documento dos projetos, pois os comentários são dados relacionados ao projeto, no entanto, os comentários mudam com o volatiliy diferente para o restante dos dados do projeto. Os comentários também podem crescer rapidamente para uma quantidade possivelmente infinita e não devem sobrecarregar o documento do projeto com o tamanho possível. Por fim, eu consideraria usar um ID exclusivo no lugar do nome de usuário exclusivo, e definitivamente adicionaria uma propriedade como "Dormant": True/False. Essa propriedade seria usada no local de exclusão do documento do usuário, resolveria o problema dos nomes de usuário referenciados (ou IDs se isso fosse alterado) sendo confundido com usuários antigos/novos e serviria para oferecer aos usuários antigos uma opção de recuperação.
Referências:
Estrutura iônica
http://stackoverflow.com/questions/139357333/mongoose-limit- offset-and-count-querery
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-iionic-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-ionic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/176166624/detect-if-tring-contains-any-spaces
https://www.joshmorony.com/advanced-forms-validation-in-iionic-2/
http://stackoverflow.com/questions/35039610/angular2-manouly-set-value-for-formbuilder-control
https://ionicframework.com/docs/v2/cli/gereate/
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-and-navigation/
https://www.Joshmorony.com/a-simple-guide-to-gnvatigation-in-ionic-2/
http://reactivex.io/documentation/observable.html
https://www.youtube.com/watch?v=EI7FSOXKPL0
https://egghead.io/lessons/javascript-introducting-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://pointdeveloper.com/how-to-place-iionic-2-tabs-at-the-bottom-or-top-che-the-screen/
http://www.neilberry.com/how-to-run-your-iionic-app-on-real-devices/
Tara O'Kelly - [email protected]
