Jump to content
Caio Lucas Teixeira

Smart House mobile com Ionic 3

Recommended Posts

Olá, poderia me ajudar no TCC? preciso desenvolver uma página mobile como esta na imagem abaixo, estou utilizando Ionic 3 (Angular, TypeScript, HTML, CSS, PHP), e phppgadmin.
a ideia é de uma página aonde eu possa navegar pelos ambientes(quarto, sala, cozinha) e achar todos os componentes(luzes,janelas, etc..) que estão ativados ou desativados;
Estão vendo essas caixas coloridas? elas seriam os componentes, eu precisaria selecionar os componentes cadastrados no banco nesse ambiente e popular essa área com essas caixas com o nome do componente e o status(ativado ou desativado), como poderia fazer essa população? seria um select e um for?

nessa caixa retangular fina branca que está escrito "QUICKLOOK" estaria o nome do ambiente, e do lado um botão "<" e do lado direito ">" para realizar a paginação dos ambientes cadastrados no banco de dados, como poderia realizar essa paginação? 

um protótipo que eu fiz até o momento:

 

fiz as caixas vermelhas com gridlayout em SCSS.

pfv, me ajudem, como poderia realizar essas duas funções (paginação dos ambientes e a "população" dos componentes)?
  

black-mobile-smart-phone-smart-home-application-icons-th-female-hand-holding-screen-blurred-house-background-42538878.jpg

Captura de tela de 2018-05-26 00-01-27.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PauLoRM
      Olá,
      Estou querendo desenvolver um aplicativo multi-plataforma (Android e IOS). Projeto para longo prazo (mais de 12 meses), pois como é complexo, investirei em conhecimento antes. Já tenho conhecimento básico em lógica de programação, já pratiquei o básico em SQL, Delphi, Oracle (tenho noção de if, else, then, boolean, true, false, string, etc)...trabalho com TI a mais de 10 anos... então acredito no meu potencial...Porém terei que fazer cursos voltados para aplicação mobile, para conseguir implementar meu projeto sem precisar contratar terceiros. Vai ser um aplicativo bem complexo no meu ponto de vista. Em resumo o cliente tem que se cadastrar, vai visualizar produtos de empresas separados por categorias (mais de uma empresa) e poder fazer seus pedidos. As empresas que anunciam seus produtos, vão ter que ter gerenciamento dos pedidos realizados e dos produtos. E eu, terei que ter acesso as vendas dessas empresas, pois serei remunerado sobre esses pedidos feitos no app. Por ser 3 tipos de credenciais diferentes, com acessos à recursos diferentes, telas diferentes, pensei em separar em 3 aplicativos, pois poderia ser muito pesado tudo em um único.
      Um app então será para clientes fazerem o seu cadastro, efetuarem seus pedidos, obter históricos, etc. Outro será para gestão de pedidos e cadastros de produtos pelas empresas credenciadas. E o outro, seria gerencial para mim (dono do app), pois haverá comissão para mim pelos pedidos efetuados, terei que gerenciar isso.
      Recursos complexos que gostaria de implementar:
      App de compra dos clientes:
      - Cadastro com possibilidade de conectar com Facebook (Acredito que existe API para isso)
      - Confirmação de cadastro através de código gerado automaticamente (enviado por SMS ou email)
      - Utilização de mapa com posição atual (coordenadas) e se possível cálculo de distância. Ser possível mostrar empresas perto da pessoa por exemplo (Acredito que existe API para isso também)
      - Pagamento online (deve haver varias API (opções) nesse sentido)
      App para gestão (empresas vendedoras):
      Possibilidade de enviar fotos (cadastro de produtos)
      Possibilidade de salvar/enviar email com planilha ou relatório
      Agora meus questionamentos:
      1) Com esses recursos mais complexos, qual linguagem melhor me atenderia(Xamarin, FireMonkey, Ionic, Unity, entre outros)? Se possível mencionar a questão de disponibilidade de materiais e cursos, pontos fortes e fracos referente a recursos e API’s (compatibilidade).
      2) Será necessário um banco de dados externo para armazenar tudo isso (será na nuvem e deverá ser sincronizado). Qual banco poderia ser utilizado? Ouvi falar muito bem do Firebase.
      3) Bem futuramente (caso aplicativo der certo), poderá ser necessário implantar o gerenciamento da empresa também em sistema Web. As decisões anteriores terá interferência? Digo, já devo observar a escolha da linguagem do app e o banco de dados, visando essa futura implantação? Se sim, qual recomendação?

      Como pode ver, preciso de um ponta pé inicial para começar os estudos (pois estudar meses ou anos uma linguagem para depois não conseguir aplicar tais recursos devido a não ter eles, seria perda de tempo e dinheiro). Para isso conto com a ajuda dos mais experientes, vocês. Obrigado desde já!
    • By Kellison Ruan
      Olá galera, Boa tarde!
      Estou com um probleminha em Ionic que está quebrando muito minha cabeça por dias.
      Método de pagamento do paypal aparece em meu site, mas não aparece no app ionic, o que será? Já tentei de tudo. Esse app faz comunicação via API do Woocommerce, e lá está habilitado a forma de pagamento com PayPal, porém só não aparece no app, já que na página de checkout no meu site, aparece.
       
      Segue o código da página de checkout do app:
       
      import { Component, Inject } from '@angular/core'; import { NavController, NavParams, AlertController, Loading, LoadingController, ToastController, App } from 'ionic-angular'; import { PlacedPage } from '../placed/placed'; import { PaymentGateway } from "../../models/payment-gateway.models"; import { Constants } from "../../models/constants.models"; import { WordpressClient } from '../../providers/wordpress-client.service'; import { Global } from '../../providers/global'; import { Subscription } from "rxjs/Subscription"; import { CartItem } from "../../models/cart-item.models"; import { OrderRequest } from "../../models/order-request.models"; import { Address } from "../../models/address.models"; import { ShippingLine } from "../../models/shipping-line.models"; import { UserResponse } from "../../models/user-response.models"; import { OrderResponse } from "../../models/order-response.models"; import { Currency } from "../../models/currency.models"; import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser'; import { sha512 } from 'js-sha512'; import { APP_CONFIG, AppConfig } from '../../app/app.config'; import { OrderUpdateRequest } from '../../models/order-update-request.models'; import { Coupon } from '../../models/coupon.models'; import { HomePage } from '../home/home'; import { TranslateService } from '@ngx-translate/core'; import { Helper } from '../../models/helper.models'; import { ShippingMethod } from '../../models/shipping-method.models'; import { PayPal, PayPalPayment, PayPalConfiguration, PayPalPaymentDetails } from '@ionic-native/paypal'; @Component({ selector: 'page-payment', templateUrl: 'payment.html', providers: [WordpressClient] }) export class PaymentPage { private loading: Loading; private loadingShown: Boolean = false; private placedPagePushed: Boolean = false; private paymentDone: Boolean = false; private paymentFailAlerted: Boolean = false; private subscriptions: Array<Subscription> = []; private paymentGateways = new Array<PaymentGateway>(); private cartItems: Array<CartItem>; private selectedPaymentGateway; private selectedAddress: Address; private orderRequest: OrderRequest; private orderId = -1; private user: UserResponse; private totalItems = 0; private total = 0; private couponApplied = false; private pickupTime = 0; private deliveryTime = 0; private shippingChargeGlobal: number; constructor(@Inject(APP_CONFIG) private config: AppConfig, public translate: TranslateService, private iab: InAppBrowser, private toastCtrl: ToastController, public navCtrl: NavController, private navParams: NavParams, private service: WordpressClient, private loadingCtrl: LoadingController, private alertCtrl: AlertController, public appCtrl: App) { this.cartItems = this.navParams.get('cart'); this.totalItems = this.navParams.get('totalItems'); this.total = this.navParams.get('total'); this.shippingChargeGlobal = this.navParams.get('shippingChargeGlobal'); let paymentGateways = JSON.parse(window.localStorage.getItem(Constants.PAYMENT_GATEWAYS)); this.selectedAddress = JSON.parse(window.localStorage.getItem(Constants.SELECTED_ADDRESS)); if (paymentGateways != null) { for (let pg of paymentGateways) { if (pg.enabled && this.paymentImplemented(pg.id)) { this.paymentGateways.push(pg); } } } } ionViewWillLeave() { this.subscriptions.forEach((subscription: Subscription) => { subscription.unsubscribe(); }); this.dismissLoading(); } paymentImplemented(id) { return id === "pumcp" || id === "payuindia" || id === "cod"; } paymentMethod(paymentGateway) { this.selectedPaymentGateway = paymentGateway; } placedPage() { if (this.selectedPaymentGateway == null) { this.translate.get('field_error_payment_method').subscribe(value => { this.showToast(value); }); } else { this.orderRequest = new OrderRequest(); this.orderRequest.payment_method = this.selectedPaymentGateway.id ? this.selectedPaymentGateway.id : "cod"; this.orderRequest.payment_method_title = this.selectedPaymentGateway.title ? this.selectedPaymentGateway.title : "cod"; this.orderRequest.set_paid = false; this.orderRequest.billing = this.selectedAddress; this.orderRequest.shipping = this.selectedAddress; this.user = JSON.parse(window.localStorage.getItem(Constants.USER_KEY)); this.orderRequest.customer_id = String(this.user.id); let selectedShippingMethod: ShippingMethod = JSON.parse(window.localStorage.getItem(Constants.SELECTED_SHIPPING_METHOD)); if (selectedShippingMethod) { let shippingTotal = 0; for (let ci of this.cartItems) { if (!ci.product.shipping_cost_use_global && ci.product.shipping_cost != 1) shippingTotal = shippingTotal + ci.product.shipping_cost; } if (this.shippingChargeGlobal != -1) { shippingTotal = shippingTotal + this.shippingChargeGlobal; } this.orderRequest.shipping_lines = new Array<ShippingLine>(); this.orderRequest.shipping_lines.push(new ShippingLine(selectedShippingMethod.method_id, selectedShippingMethod.method_title, String(shippingTotal))); } this.orderRequest.line_items = this.cartItems; for (let item of this.orderRequest.line_items) { item.product = null; } this.translate.get('order_creating').subscribe(value => { this.presentLoading(value); }); let coupon: Coupon = JSON.parse(window.localStorage.getItem(Constants.SELECTED_COUPON)); let subscription: Subscription = this.service.createOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), this.orderRequest).subscribe(data => { this.orderId = data.id; if (coupon) { this.applyCoupon(coupon); } else { this.orderPlaced(); } }, err => { console.log(err); this.dismissLoading(); let orderId = Helper.extractOrderIdFromError(err); if (orderId != -1) { this.orderId = orderId; if (coupon) { this.applyCoupon(coupon); } else { this.orderPlaced(); } } else { this.translate.get('order_failed').subscribe(value => { this.showToast(value); }); this.appCtrl.getRootNav().setRoot(HomePage); } }); this.subscriptions.push(subscription); } } applyCoupon(coupon) { let couponSubs: Subscription = this.service.applyCouponCode(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), coupon.code).subscribe(data => { this.couponApplied = true; window.localStorage.removeItem(Constants.SELECTED_COUPON); this.translate.get('confirm_order_coupon_applied').subscribe(value => { this.showToast(value); }); this.orderPlaced(); }, err => { console.log(err); this.dismissLoading(); }); this.subscriptions.push(couponSubs); } orderPlaced() { this.dismissLoading(); if (this.selectedPaymentGateway.id && this.selectedPaymentGateway.id === "cod") { this.clearCart(); this.navCtrl.setRoot(PlacedPage); } else if (this.selectedPaymentGateway.id === "pumcp" || this.selectedPaymentGateway.id === "payuindia") { this.initPayUMoney(); } else { this.translate.get('order_placed_cod').subscribe(value => { this.showToast(value); }); this.clearCart(); this.navCtrl.setRoot(PlacedPage); } } initPayUMoney() { let name = this.user.first_name && this.user.first_name.length ? this.user.first_name : this.user.username; let mobile = this.user.username; let email = this.user.email; let bookingId = String(Math.floor(Math.random() * (99 - 10 + 1) + 10)) + this.orderId; let productinfo = this.orderId; let salt = this.config.payuSalt; let key = this.config.payuKey; let amt = this.couponApplied ? this.total : this.totalItems; let string = key + '|' + bookingId + '|' + amt + '|' + productinfo + '|' + name + '|' + email + '|||||||||||' + salt; let encrypttext = sha512(string); //let url = "payumoney/payuBiz.html?amt=" + amt + "&name=" + name + "&mobileNo=" + mobile + "&email=" + email + "&bookingId=" + bookingId + "&productinfo=" + productinfo + "&salt=" + salt + "&key=" + key; let url = "payumoney/payuBiz.html?amt=" + amt + "&name=" + name + "&mobileNo=" + mobile + "&email=" + email + "&bookingId=" + bookingId + "&productinfo=" + productinfo + "&hash=" + encrypttext + "&salt=" + salt + "&key=" + key; let options: InAppBrowserOptions = { location: 'yes', clearcache: 'yes', zoom: 'yes', toolbar: 'no', closebuttoncaption: 'back' }; const browser: any = this.iab.create(url, '_blank', options); browser.on('loadstop').subscribe(event => { browser.executeScript({ file: "payumoney/payumoneyPaymentGateway.js" }); if (event.url == "http://localhost/success.php") { this.paymentSuccess(); browser.close(); } if (event.url == "http://localhost/failure.php") { this.paymentFailure(); browser.close(); } }); browser.on('exit').subscribe(event => { if (!this.paymentDone && !this.paymentFailAlerted) { this.paymentFailure(); } }); browser.on('loaderror').subscribe(event => { this.showToast('something_went_wrong'); }); } paymentFailure() { this.paymentFailAlerted = true; let subscription: Subscription = this.service.updateOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), new OrderUpdateRequest('cancelled')).subscribe(data => { }, err => { console.log(err); }); this.subscriptions.push(subscription); this.translate.get(['payment_fail_title', 'payment_fail_message', 'ok']).subscribe(res => { let alert = this.alertCtrl.create({ title: res.payment_fail_title, message: res.payment_fail_message, buttons: [{ text: res.ok, role: 'cancel', handler: () => { this.done(); console.log('Okay clicked'); } }] }); alert.present(); }); } paymentSuccess() { this.paymentDone = true; this.clearCart(); this.translate.get('just_a_moment').subscribe(value => { this.presentLoading(value); }); let subscription: Subscription = this.service.updateOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), { set_paid: true }).subscribe(data => { this.done(); }, err => { this.done(); this.paymentSuccess(); console.log(err); }); this.subscriptions.push(subscription); } done() { if (!this.placedPagePushed) { this.placedPagePushed = true; this.dismissLoading(); this.appCtrl.getRootNav().setRoot(this.paymentFailAlerted ? HomePage : PlacedPage); } } private presentLoading(message: string) { this.loading = this.loadingCtrl.create({ content: message }); this.loading.onDidDismiss(() => { }); this.loading.present(); this.loadingShown = true; } private dismissLoading() { if (this.loadingShown) { this.loadingShown = false; this.loading.dismiss(); } } private presentErrorAlert(msg: string) { let alert = this.alertCtrl.create({ title: 'Error', subTitle: msg, buttons: ['OK'] }); alert.present(); } showToast(message: string) { let toast = this.toastCtrl.create({ message: message, duration: 3000, position: 'bottom' }); toast.onDidDismiss(() => { console.log('Dismissed toast'); }); toast.present(); } clearCart() { let cartItems = new Array<CartItem>(); window.localStorage.setItem('cartItems', JSON.stringify(cartItems)); } }  
    • By Edgard Hufelande
      Estou desenvolvendo um app que será aberto ao público pra atender a necessidade de um município...
      As senhas no banco estou salvando criptografadas usando Bcrypt, porém tenho uma dúvida no lado cliente, tenho uma API Rest
      para comunicação entre o app e o servidor, no momento do login ou do cadastro eu já deveria enviar essa senha criptografada na
      requisição ou envio a senha normal e criptografo no lado do servidor?
       
      Resumindo, não quero uma solução, quero uma sugestão sobre se devo criptografar a senha no lado cliente ou no lado servidor.
       
      Desde já grato pela atenção.
    • By JuninhoDrak
      O problema é: eu quero estabelecer comunicação entre o meu desktop e meu dispositivo inteligente android.
      Estou tentando um passo simples mas recebo "device not found" como retorno
      é aqui que baseio minha codificação: 
      https://ionicframework.com/docs/native/serial/
       
      Este é o código

       
       
      Há poucos conteúdo sobre esse recurso na internet.
       
    • By Mxxll
      Estou começando agora. tenho dois códigos PHP. Um envia uma imagem e o outro algumas informações. Ambos de um aplicativo feito em IONIC.
      Teria como juntar esses dois códigos para que faça apenas um insert?
       
      Código que insere informações
      <?php header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: Content-Type"); header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE"); include "db.php"; $input = file_get_contents('php://input'); $data = json_decode($input,true); $message = array(); if($data['action'] == "insert"){ $motivo = $data['motivo']; $horario = $data['horario']; $q = mysqli_query($con,"INSERT INTO `imovel` (`motivo`, `horario`) VALUES ('$motivo', '$horario')"); if($q){ $message['status'] = "success"; } else{ $message['status'] = "error"; } echo json_encode($message); } echo mysqli_error($con); ?>  
       
       
      Código de inserir imagem:
      <?php include '../ionx/db.php'; $target_dir = "images/"; $target_file = $target_dir . basename($_FILES["photo"]["name"]); $imagename = basename($_FILES["photo"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); $check = getimagesize($_FILES["photo"]["tmp_name"]); if($check !== false) { echo "Arquivo é uma imagem - " . $check["mime"] . "."; $uploadOk = 1; if (move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file)) { $q = mysqli_query($con,"INSERT INTO `imovel` (`imagem`) VALUES ('$imagename')"); } else { echo "Ocorreu um erro"; } } else { echo "Arquivo não é uma imagem"; $uploadOk = 0; } ?>  
      Há alguma maneira de unir esses dois códigos para que eu consiga inserir a informação digitada e a imagem na tabela?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.